使用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做一个朝代历史表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
Javascript类型判断相关例题及解析
Aug 26 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
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python opencv实现图像边缘检测
2019/04/29 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
优秀家长事迹材料
2014/05/17 职场文书
分公司经理任命书
2014/06/05 职场文书
交通安全月活动总结
2015/05/08 职场文书
行政复议决定书
2015/06/24 职场文书
国家助学金受助感言
2015/08/01 职场文书
Golang解析JSON对象
2022/04/30 Golang