编程 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 相关文章推荐

Javascript打印网页部分内容的脚本

Nov 17 Javascript

jquery form表单提交插件asp.net后台中文解码

Jun 12 Javascript

ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果

Feb 03 Javascript

你必须知道的Javascript知识点之"字面量和对应类型"说明介绍

Apr 23 Javascript

jQuery中Dom的基本操作小结

Jan 23 Javascript

jQuery+AJAX实现遮罩层登录验证界面（附源码）

Sep 13 Javascript

javascript 四十条常用技巧大全

Sep 09 Javascript

Javascript中 toFixed四舍六入方法

Aug 21 Javascript

Vue 实现树形视图数据功能

May 07 Javascript

了解在JavaScript中将值转换为字符串的5种方法

Jun 06 Javascript

Javascript组合继承方法代码实例解析

Apr 02 Javascript

微信小程序调用wx.getImageInfo遇到的坑解决

May 31 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