zoukankan      html  css  js  c++  java
  • Bootstrap 表格

    Bootstrap提供了一个清晰的创建表格的布局

    <table>标签:为表格添加基础的样式。

    <thead>标签:表格标题行的容器元素(<tr>),用来标识表格列。

    <tbody>标签:表格主题中的表格行的容器元素(<tr>)。

    <tfood>标签:表格底部中的表格行的容器元素(<tr>)。

    <tr>标签 :一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。

    <td>标签:默认的表格单元格。

    <th>标签:特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。

    <caption>标签:关于表格存储内容的描述或总结。

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练实例:表格</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    </head>
    <body>
    <div class="container">
    <h2>表格类</h2>
    <p>.table只为表格添加基本样式,(只有横向分隔线):</p>
    <p>.table-striped在 &lt;tbody&gt; 内添加斑马线形式的条纹 ( IE8 不支持)</p>
    <p>.table-bordered为所有表格的单元格添加边框</p>
    <p>.table-hover在&lt; tbody &gt; 内的任一行启用鼠标悬停状态</p>
    <p>.table-condensed让表格更加紧凑</p>
    <table class="table table-striped table-bordered table-hover table-condensed">
    <thead >
    <tr>
    <th>序号</th><th>课程</th>
    </tr>
    </thead>
    <tbody >
    <tr>
    <td>1</td>
    <td>HTML5</td>
    </tr>
    <tr>
    <td>2</td>
    <td>CSS3</td>
    </tr>
    <tr>
    <td>3</td>
    <td>JavaScript</td>
    </tr>
    <tr>
    <td>4</td>
    <td>jQuery</td>
    </tr>
    <tr>
    <td>5</td>
    <td>Bootstrap</td>
    </tr>
    <tr>
    <td>6</td>
    <td>Aanglur JS</td>
    </tr>
    </tbody>
    <tfoot></tfoot>
    </table>
    </div>
    <script src="Css/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    【数学】多项式取 ln
    【数学】多项式求逆
    【模拟 + 栈】AcWing 151. 表达式计算4
    Unity3D开发入门教程(一)——搭建开发环境
    Unity3D开发入门教程(三)——添加启动脚本
    Unity3D开发入门教程(二)—— Lua入门
    Unity3D开发入门教程(四)——用Lua实现组件
    哈希表
    邻接表
    并查集
  • 原文地址:https://www.cnblogs.com/melao2006/p/4986632.html
Copyright © 2011-2022 走看看