pbootcms网站模板|织梦模板|网站源码|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 框架的基礎,通過
主站蜘蛛池模板: 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 铝箔袋,铝箔袋厂家,东莞铝箔袋,防静电铝箔袋,防静电屏蔽袋,防静电真空袋,真空袋-东莞铭晋让您的产品与众不同 | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 深圳货架厂_仓库货架公司_重型仓储货架_线棒货架批发-深圳市诺普泰仓储设备有限公司 | 南京试剂|化学试剂|分析试剂|实验试剂|cas号查询-专业60年试剂销售企业 | 艺术生文化课培训|艺术生文化课辅导冲刺-济南启迪学校 | 洁净化验室净化工程_成都实验室装修设计施工_四川华锐净化公司 | 好看的韩国漫画_韩漫在线免费阅读-汗汗漫画 | 档案密集架,移动密集架,手摇式密集架,吉林档案密集架-厂家直销★价格公道★质量保证 | 对夹式止回阀_对夹式蝶形止回阀_对夹式软密封止回阀_超薄型止回阀_不锈钢底阀-温州上炬阀门科技有限公司 | 工装定制/做厂家/公司_工装订做/制价格/费用-北京圣达信工装 | 12cr1mov无缝钢管切割-15crmog无缝钢管切割-40cr无缝钢管切割-42crmo无缝钢管切割-Q345B无缝钢管切割-45#无缝钢管切割 - 聊城宽达钢管有限公司 | 有源电力滤波装置-电力有源滤波器-低压穿排电流互感器|安科瑞 | 恒温振荡混匀器-微孔板振荡器厂家-多管涡旋混匀器厂家-合肥艾本森(www.17world.net) | 东莞注册公司-代办营业执照-东莞公司注册代理记账-极刻财税 | 石家庄律师_石家庄刑事辩护律师_石家庄取保候审-河北万垚律师事务所 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 深圳富泰鑫五金_五金冲压件加工_五金配件加工_精密零件加工厂 | 广东护栏厂家-广州护栏网厂家-广东省安麦斯交通设施有限公司 | 订做不锈钢_不锈钢定做加工厂_不锈钢非标定制-重庆侨峰金属加工厂 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 三价铬_环保铬_环保电镀_东莞共盈新材料贸易有限公司 | 深圳诚暄fpc首页-柔性线路板,fpc柔性线路板打样生产厂家 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 节流截止放空阀-不锈钢阀门-气动|电动截止阀-鸿华阀门有限公司 | 高速龙门架厂家_监控杆_多功能灯杆_信号灯杆_锂电池太阳能路灯-鑫世源照明 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 云南成人高考网| 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 模具钢_高速钢_不锈钢-万利钢金属材料 | 太空舱_民宿太空舱厂家_移动房屋太空舱价格-豪品建筑 | 电竞馆加盟,沈阳网吧加盟费用选择嘉棋电竞_售后服务一体化 | 点胶机_点胶阀_自动点胶机_智能点胶机_喷胶机_点胶机厂家【欧力克斯】 | 柔软云母板-硬质-水位计云母片组件-首页-武汉长丰云母绝缘材料有限公司 | [官网]叛逆孩子管教_戒网瘾学校_全封闭问题青少年素质教育_新起点青少年特训学校 | 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 企小优-企业数字化转型服务商_网络推广_网络推广公司 | 酒水灌装机-白酒灌装机-酒精果酒酱油醋灌装设备_青州惠联灌装机械 | 挨踢网-大家的导航!| 济南宣传册设计-画册设计_济南莫都品牌设计公司 |