使用Bootstrap做一個朝代歷史表
更新時間：2019年12月10日 08:40:33 作者：把番茄沉入海底
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。這篇文章主要介紹了使用Bootstrap做一個朝代歷史表,需要的朋友可以參考下
什么是 Bootstrap？
Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架。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" />
<!-- 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>建業(yè)</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>內(nèi)蒙古 巴林左旗</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>
成品圖：
總結(jié)
以上所述是小編給大家介紹的使用Bootstrap做一個朝代歷史表，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關文章
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)如何使用npm安裝依賴，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
禁止頁面復制功能、禁用頁面右鍵菜單等等在瀏覽網(wǎng)頁時想必大家都有遇到過吧，下面為大家詳細介紹下使用js是如何實現(xiàn)的，感興趣的朋友可以參考下2013-08-08
javascript使用Blob對象實現(xiàn)的下載文件操作示例
這篇文章主要介紹了javascript使用Blob對象實現(xiàn)的下載文件操作,結(jié)合實例形式分析了javascript使用Blob對象下載文件相關原理、操作技巧與注意事項,需要的朋友可以參考下2020-04-04
檢查輸入的是否是數(shù)字使用keyCode配合onkeypress事件
檢查輸入的是否是數(shù)字在本文使用keyCode配合onkeypress事件來實現(xiàn)，具體示例如下2014-01-01
這篇文章主要介紹了詳解webpack引入第三方庫的方式以及注意事項，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
javascript原生封裝一個淡入淡出效果的函數(shù)測試實例代碼
這篇文章主要介紹了javascript原生封裝一個淡入淡出效果的函數(shù),主要有FadeIn淡入函數(shù)和FadeOut淡出函數(shù)，需要的朋友可以參考下2018-03-03
本篇文章主要介紹了tween.js緩動補間動畫示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了GOJS+VUE實現(xiàn)流程圖效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
JS/jquery實現(xiàn)一個網(wǎng)頁內(nèi)同時調(diào)用多個倒計時的方法
這篇文章主要介紹了JS/jquery實現(xiàn)一個網(wǎng)頁內(nèi)同時調(diào)用多個倒計時的方法,涉及js與jQuery基于定時器的時間相關操作技巧,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄猨s中獲取時間new Date()的全面介紹。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06