pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

Bootstrap 表格

Bootstrap 表格 Bootstrap 提供了一個清晰的創建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 標簽描述 lt;tablegt;容納以表格形式顯示數據的元素。 lt;theadgt;表格標題行的容器元素

Bootstrap 提供了一個清晰的創建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

標簽 描述
<table> 容納以表格形式顯示數據的元素。
<thead> 表格標題行的容器元素(<tr>),用來標識表格列。
<tbody> 表格主體中的表格行的容器元素(<tr>)。
<tr> 一組出現在單行上的表格單元格的容器元素(<td> 或 <th>)。
<td> 默認的表格單元格。
<th> 特殊的表格單元格,用來標識列或行(取決于范圍和位置)。必須在 <thead> 內使用。
<caption> 關于表格存儲內容的描述或總結。

基本的表格

如果您想要一個只帶有內邊距(padding)和水平分割的基本表,請添加 class .table,如下面實例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 基本的表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名稱</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

嘗試一下 »

結果如下所示:

基本的表格
 

可選的表格類

除了基本的表格標記和 .table class,還有一些可以用來為標記定義樣式的類。下面將向您介紹這些類。

條紋表格

通過添加 .table-striped class,您將在 <tbody> 內的行上看到條紋,如下面的實例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 條紋表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-striped">
   <caption>條紋表格布局</caption>
   <thead>
      <tr>
         <th>名稱</th>
         <th>城市</th>
         <th>密碼</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

嘗試一下 »

結果如下所示:

條紋表格

邊框表格

通過添加 .table-bordered class,您將看到每個元素周圍都有邊框,且占整個表格是圓角的,如下面的實例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 邊框表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-bordered">
   <caption>邊框表格布局</caption>
   <thead>
      <tr>
         <th>名稱</th>
         <th>城市</th>
         <th>密碼</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

嘗試一下 »

結果如下所示:

邊框表格

懸停表格

通過添加 .table-hover class,當指針懸停在行上時會出現淺灰色背景,如下面的實例所示:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 懸停表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-hover">
   <caption>懸停表格布局</caption>
   <thead>
      <tr>
         <th>名稱</th>
         <th>城市</th>
         <th>密碼</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

嘗試一下 »

結果如下所示:

懸停表格

精簡表格

通過添加 .table-condensed class,行內邊距(padding)被切為兩半,以便讓表看起來更緊湊,如下面的實例所示。這在想讓信息看起來更緊湊時非常有用。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 精簡表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table table-condensed">
   <caption>精簡表格布局</caption>
   <thead>
      <tr>
         <th>名稱</th>
         <th>城市</th>
         <th>密碼</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

</body>
</html>

嘗試一下 »

結果如下所示:

精簡表格
 

上下文類

下表中所列出的上下文類允許您改變表格行或單個單元格的背景顏色。

描述
.active 對某一特定的行或單元格應用懸停顏色
.success 表示一個成功的或積極的動作
.warning 表示一個需要注意的警告
.danger 表示一個危險的或潛在的負面動作

這些類可被應用到 <tr>、<td> 或 <th>。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 上下文類</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
         <th>產品</th>
         <th>付款日期</th>
         <th>狀態</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>產品1</td>
         <td>23/11/2013</td>
         <td>待發貨</td>
      </tr>
      <tr class="success">
         <td>產品2</td>
         <td>10/11/2013</td>
         <td>發貨中</td>
      </tr>
      <tr  class="warning">
         <td>產品3</td>
         <td>20/10/2013</td>
         <td>待確認</td>
      </tr>
      <tr  class="danger">
         <td>產品4</td>
         <td>20/10/2013</td>
         <td>已退貨</td>
      </tr>
   </tbody>
</table>

</body>
</html>

嘗試一下 »

結果如下所示:

上下文類
 

響應式表格

通過把任意的 .table 包在 .table-responsive class 內,您可以讓表格水平滾動以適應小型設備(小于 768px)。當在大于 768px 寬的大型設備上查看時,您將看不到任何的差別。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 響應式表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="table-responsive">
   <table class="table">
      <caption>響應式表格布局</caption>
      <thead>
         <tr>
            <th>產品</th>
            <th>付款日期</th>
            <th>狀態</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>產品1</td>
            <td>23/11/2013</td>
            <td>待發貨</td>
         </tr>
         <tr>
            <td>產品2</td>
            <td>10/11/2013</td>
            <td>發貨中</td>
         </tr>
         <tr>
            <td>產品3</td>
            <td>20/10/2013</td>
            <td>待確認</td>
         </tr>
         <tr>
            <td>產品4</td>
            <td>20/10/2013</td>
            <td>已退貨</td>
         </tr>
      </tbody>
   </table>
</div>  	

</body>
</html> 	

嘗試一下 »

結果如下所示:

響應式表格
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!

相關文檔推薦

自從有了類似Bootstrap這樣強大的前端框架之后,無論我們是做靜態頁面,還是做網站主題,著實方便很多。即便有很多類似的其他國產、海外的前端框架比較,Bootstrap用戶量以及功能文
未來的網頁設計趨勢,我想響應式設計是熱門,設計的時候都需要考慮其它設備瀏覽,比如手機、iPad平板電腦等手持設備。這樣雖然加大了設計師和前端人員的工作量,但卻有著很好的
免費的響應式Bootstrap模板 - Codester 在線演示 Codester是一個基本的個人作品集Bootstrap模板,幫助設計師,攝影師,圖形藝術工作者搭建高度可定制的網站。擁有自定義包和相關的javascrip
1. 簡介 Bootstrap 是 Twitter 推出的一個開源的前端框架。 Bootstrap 由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發,由動態語言 Less 寫成。它是一套易用、優雅、靈活、可擴展的前端工具
這里收集了Bootstrap從V1.0.0版本到現在,整個文檔的歷史。Bootstrap本身就是一個傳奇,而這些文檔就是傳奇的見證! 最新版本文檔 版本 發布日期 2.3.2 May 17, 2013 2.3.1 February 28, 2013 2.3.0 F
Bootstrap 教程 Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。 本教程將向您講解 Bootstrap 框架的基礎,通過
主站蜘蛛池模板: 无锡网站建设-做网站-建网站-网页设计制作-阿凡达建站公司 | 不锈钢散热器,冷却翅片管散热器厂家-无锡市烨晟化工装备科技有限公司 | 温控器生产厂家-提供温度开关/热保护器定制与批发-惠州市华恺威电子科技有限公司 | 海尔生物医疗四川代理商,海尔低温冰箱四川销售-成都壹科医疗器械有限公司 | 手持式线材张力计-套帽式风量罩-深圳市欧亚精密仪器有限公司 | 耐酸泵,耐腐蚀真空泵,耐酸真空泵-淄博华舜耐腐蚀真空泵有限公司 精密模具-双色注塑模具加工-深圳铭洋宇通 | Akribis直线电机_直线模组_力矩电机_直线电机平台|雅科贝思Akribis-杭州摩森机电科技有限公司 | 斗式提升机_链式斗提机_带式斗提机厂家无锡市鸿诚输送机械有限公司 | 电缆接头_防水接头_电缆防水接头_防水电缆接头_上海闵彬 | 板框压滤机-隔膜压滤机-厢式压滤机生产厂家-禹州市君工机械设备有限公司 | 振动传感器,检波器-威海广达勘探仪器有限公司 | 扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司 | 仿古瓦,仿古金属瓦,铝瓦,铜瓦,铝合金瓦-西安东申景观艺术工程有限公司 | 贝朗斯动力商城(BRCPOWER.COM) - 买叉车蓄电池上贝朗斯商城,价格更超值,品质有保障! | 肉嫩度仪-凝胶测试仪-国产质构仪-气味分析仪-上海保圣实业发展有限公司|总部 | 烘干设备-热泵烘干机_广东雄贵能源设备有限公司 | 标准件-非标紧固件-不锈钢螺栓-非标不锈钢螺丝-非标螺母厂家-三角牙锁紧自攻-南京宝宇标准件有限公司 | 南京PVC快速门厂家南京快速卷帘门_南京pvc快速门_世界500强企业国内供应商_南京美高门业 | 全球化工设备网—化工设备,化工机械,制药设备,环保设备的专业网络市场。 | 溶氧传感器-pH传感器|哈美顿(hamilton)| 油漆辅料厂家_阴阳脚线_艺术漆厂家_内外墙涂料施工_乳胶漆专用防霉腻子粉_轻质粉刷石膏-魔法涂涂 | 阳光模拟试验箱_高低温试验箱_高低温冲击试验箱_快速温变试验箱|东莞市赛思检测设备有限公司 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 铝板冲孔网,不锈钢冲孔网,圆孔冲孔网板,鳄鱼嘴-鱼眼防滑板,盾构走道板-江拓数控冲孔网厂-河北江拓丝网有限公司 | 深圳成考网-深圳成人高考报名网 深圳工程师职称评定条件及流程_深圳职称评审_职称评审-职称网 | 活性氧化铝|无烟煤滤料|活性氧化铝厂家|锰砂滤料厂家-河南新泰净水材料有限公司 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 华溶溶出仪-Memmert稳定箱-上海协烁仪器科技有限公司 | PCB设计,PCB抄板,电路板打样,PCBA加工-深圳市宏力捷电子有限公司 | 山东柳店新能源科技有限公司 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 成都APP开发-成都App定制-成都app开发公司-【未来久】 | 奶茶加盟,奶茶加盟店连锁品牌-甜啦啦官网| HV全空气系统_杭州暖通公司—杭州斯培尔冷暖设备有限公司 | 交联度测试仪-湿漏电流测试仪-双85恒温恒湿试验箱-常州市科迈实验仪器有限公司 | 耐磨陶瓷,耐磨陶瓷管道_厂家-淄博拓创陶瓷科技 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 招商帮-一站式网络营销服务|互联网整合营销|网络推广代运营|信息流推广|招商帮企业招商好帮手|搜索营销推广|短视视频营销推广 | 基业箱_环网柜_配电柜厂家_开关柜厂家_开关断路器-东莞基业电气设备有限公司 |