首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用Bootstrap做一个朝代历史表

Posted in Javascript onDecember 10, 2019

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

引入CDN,算好需要合并的单元格。

<!DOCTYPE html>
<html>

<head>
  <!-- 移动设备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta charset="utf-8" />
  <title>朝代表</title>
  <!-- bootstrap-cssCDN链接 -->
  <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.css" />
  <!-- jqueryCDN链接 -->
  <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.js" type="text/javascript" charset="utf-8"></script>
  <!-- bootstrap-jsCDN链接 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <h1 class="text-center">历史朝代表</h1>
  <div class="container-fluid">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th colspan="2">朝 代</th>
            <th>起 讫</th>
            <th>都 城</th>
            <th>今 地</th>
          </tr>
        </thead>
        <tr>
          <th colspan="2">夏</th>
          <td>约前2146-1675年</td>
          <td>安邑</td>
          <td>山西夏县</td>
        </tr>
        <tr>
          <th colspan="2">商</th>
          <td>约前1675-1029年</td>
          <td>亳</td>
          <td>河南商丘</td>
        </tr>
        <tr>
          <th rowspan="2">周</th>
          <th>西周</th>
          <td>约前1029-771年</td>
          <td>镐京</td>
          <td>陕西西安</td>
        </tr>
        <tr>
          <th>东周</th>
          <td>前770-256年</td>
          <td>洛邑</td>
          <td>河南洛阳</td>
        </tr>
        <tr>
          <th colspan="2">秦</th>
          <td>前221-207年</td>
          <td>咸阳</td>
          <td>陕西咸阳</td>
        </tr>
        <tr>
          <th rowspan="2">汉</th>
          <th>西汉</th>
          <td>前206—公元25</td>
          <td>长安</td>
          <td>陕西西安</td>
        </tr>
        <tr>
          <th>东汉</th>
          <td>25—220</td>
          <td>洛阳</td>
          <td>河南洛阳</td>
        </tr>
        <tr>
          <th rowspan="3">三国</th>
          <th>魏</th>
          <td>220-265</td>
          <td>洛阳</td>
          <td>河南洛阳</td>
        </tr>
        <tr>
          <th>蜀</th>
          <td>221-263</td>
          <td>成都</td>
          <td>四川成都</td>
        </tr>
        <tr>
          <th>吴</th>
          <td>222-280</td>
          <td>建业</td>
          <td>江苏南京</td>
        </tr>
        <tr>
          <th colspan="2">西晋</th>
          <td>265-317</td>
          <td>洛阳</td>
          <td>河南洛阳</td>
        </tr>
        <tr>
          <th rowspan="2">东晋
            <br>十六国</th>
          <th>东晋</th>
          <td>317-420</td>
          <td>建康</td>
          <td>江苏南京</td>
        </tr>
        <tr>
          <th>十六国</th>
          <td>304-439</td>
          <td>—</td>
          <td>—</td>
        </tr>
        <tr>
          <th rowspan="4">南朝</th>
          <th>宋</th>
          <td>420-479</td>
          <td>建康</td>
          <td>江苏南京</td>
        </tr>
        <tr>
          <th>齐</th>
          <td>479-502</td>
          <td>建康</td>
          <td>江苏南京</td>
        </tr>
        <tr>
          <th>梁</th>
          <td>502-557</td>
          <td>建康</td>
          <td>江苏南京</td>
        </tr>
        <tr>
          <th>陈</th>
          <td>557-589</td>
          <td>建康</td>
          <td>江苏南京</td>
        </tr>
        <tr>
          <th rowspan="6">北朝</th>
          <th rowspan="2">北魏</th>
          <td rowspan="2">386-534</td>
          <td>平城</td>
          <td>山西大同</td>
        </tr>
        <tr>
          <td>洛阳</td>
          <td>河南洛阳</td>
        </tr>
        <tr>
          <th>东魏</th>
          <td>534-550</td>
          <td>邺</td>
          <td>河北临漳</td>
        </tr>
        <tr>
          <th>北齐</th>
          <td>550-577</td>
          <td>邺</td>
          <td>河北临漳</td>
        </tr>
        <tr>
          <th>西魏</th>
          <td>535-557</td>
          <td>长安</td>
          <td>陕西西安</td>
        </tr>
        <tr>
          <th>北周</th>
          <td>557-581</td>
          <td>长安</td>
          <td>陕西西安</td>
        </tr>
        <tr>
          <th colspan="2">隋</th>
          <td>581-618</td>
          <td>大兴</td>
          <td>陕西西安</td>
        </tr>
        <tr>
          <th colspan="2">唐</th>
          <td>618-907</td>
          <td>长安</td>
          <td>陕西西安</td>
        </tr>
        <tr>
          <th rowspan="6">五代十国</th>
          <th>后梁</th>
          <td>907-923</td>
          <td>汴</td>
          <td>河南开封</td>
        </tr>
        <tr>
          <th>后唐</th>
          <td>923-936</td>
          <td>洛阳</td>
          <td>河南洛阳</td>
        </tr>
        <tr>
          <th>后晋</th>
          <td>936-946</td>
          <td>汴</td>
          <td>河南开封</td>
        </tr>
        <tr>
          <th>后汉</th>
          <td>947-950</td>
          <td>汴</td>
          <td>河南开封</td>
        </tr>
        <tr>
          <th>后周</th>
          <td>951-960</td>
          <td>汴</td>
          <td>河南开封</td>
        </tr>
        <tr>
          <th>十国</th>
          <td>902-979</td>
          <td>—</td>
          <td>—</td>
        </tr>
        <tr>
          <th rowspan="2">宋</th>
          <th>北宋</th>
          <td>960-1127</td>
          <td>开封</td>
          <td>河南开封</td>
        </tr>
        <tr>
          <th>南宋</th>
          <td>1127-1279</td>
          <td>临安</td>
          <td>浙江杭州</td>
        </tr>
        <tr>
          <th colspan="2">辽</th>
          <td>907-1125</td>
          <td>皇都(上京)</td>
          <td>内蒙古 巴林左旗</td>
        </tr>
        <tr>
          <th colspan="2">西夏</th>
          <td>1038-1227</td>
          <td>兴庆府</td>
          <td>宁夏银川</td>
        </tr>
        <tr>
          <th rowspan="3" colspan="2">金</th>
          <td rowspan="3">1115-1234</td>
          <td>会宁</td>
          <td>阿城(黑龙江)</td>
        </tr>
        <tr>
          <td>中都</td>
          <td>北京</td>
        </tr>
        <tr>
          <td>开封</td>
          <td>河南开封</td>
        </tr>
        <tr>
          <th colspan="2">元</th>
          <td>1206-1368</td>
          <td>大都</td>
          <td>北京</td>
        </tr>
        <tr>
          <th colspan="2">明</th>
          <td>1368-1644</td>
          <td>北京</td>
          <td>北京</td>
        </tr>
        <tr>
          <th colspan="2">清</th>
          <td>1616-1911</td>
          <td>北京</td>
          <td>北京</td>
        </tr>
        <tr>
          <th colspan="2">中华民国</th>
          <td>1912-1949</td>
          <td>南京</td>
          <td>江苏南京</td>
        </tr>
        <tr>
          <th colspan="5" class="text-center">中华人民共和国1949年10月1日成立，首都北京。</th>
        </tr>
      </table>
    </div>
  </div>
</body>

</html>

成品图：

使用Bootstrap做一个朝代历史表

总结

以上所述是小编给大家介绍的使用Bootstrap做一个朝代历史表，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

使用Bootstrap做一个朝代历史表

- Author -

把番茄沉入海底

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
JS实现拼图游戏
Jan 29 #Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 #Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 #Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 #Javascript
js刷新页面location.reload()用法详解
Dec 09 #Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 #Javascript
Vue extend的基本用法(实例详解)
Dec 09 #Javascript
后端(1) 限流(2) 数据库卡死(1) tcp/ip(1) 内置模块(1) IP(1) 限速(1) Parser(1) 递归(1) tokenizer(1)
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
PHP 加密与解密的斗争
2009/04/17 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
2016/07/20 Javascript
常用的javascript设计模式
2017/01/11 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
简单实现python聊天程序
2018/04/01 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
Python 里最强的地图绘制神器
2021/03/01 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
俞敏洪北大演讲稿
2014/05/22 职场文书
2019年XX公司的晨会制度及流程！
2019/07/23 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL