Bootstrap中的表格效果

本文转载于:猿2048网站➱Bootstrap中的表格效果

Bootstrap中使用的表格标签和我们普通的html的标签是一样的，只是添加了一些自己的样式，不过我这边还是简单介绍下：

<table> 为表格添加基础样式。

<thead> 表格标题行的容器元素（<tr>），用来标识表格列。

<tbody> 表格主体中的表格行的容器元素（<tr>）。

<tr> 一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。

<td> 默认的表格单元格。

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

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

下表样式可用于表格中：

.table 为任意 <table> 添加基本样式 (只有横向分隔线)

.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

.table-bordered 为所有表格的单元格添加边框

.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态

.table-condensed 让表格更加紧凑

联合使用所有表格类

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格：

.active 将悬停的颜色应用在行或者单元格上

.success 表示成功的操作

.info 表示信息变化的操作

.warning 表示一个警告的操作

.danger 表示一个危险的操作

基本的表格的实例

如果您想要一个只带有内边距（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 
        >

结果如下所示：

更多专业前端知识，请上【猿2048】www.mk2048.com

Bootstrap中的表格效果

猜你喜欢