BootStrap-CSS样式_排版_表格

最新推荐文章于 2020-05-05 22:13:02 发布

有梦的小草

最新推荐文章于 2020-05-05 22:13:02 发布

阅读量624

点赞数

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_排版_表格

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/84670286

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

table样式:基本表格

table table-striped样式:条纹表格，类似奇数偶数行

table table-bordered样式:带边框表格，添加表边框

table table-hover样式:鼠标悬停效果表格，添加鼠标移入移出事件样式

table table-condensed样式:紧缩型表格，缩小表内边距(padding减半)

table active-激活状态(灰色) success-成功状态(绿色) warning-警告状态(黄色) danger-危险状态(粉红色)：状态表格

table-responsive样式：包含在table-responsive容器中即可创建响应表格，会在其小屏幕设备上(小于768px水平滚动)，当屏幕大于768px时，水平滚动条消失,适合小屏设备需要滚动条时使用

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- table样式:基本表格
    table table-striped样式:条纹表格，类似奇数偶数行
    table table-bordered样式:带边框表格，添加表边框
    table table-hover样式:鼠标悬停效果表格，添加鼠标移入移出事件样式
    table table-condensed样式:紧缩型表格，缩小表内边距(padding减半)
    table active-激活状态(灰色) success-成功状态(绿色) warning-警告状态(黄色) danger-危险状态(粉红色)：状态表格
    table-responsive样式：包含在table-responsive容器中即可创建响应表格，会在其小屏幕设备上(小于768px水平滚动)，当屏幕大于768px时，水平滚动条消失,适合小屏设备需要滚动条时使用 -->
    <div class="container">
       <!-- 1. 基本表格-->
       <table class="table">
           <caption>1. 基本表格</caption>
           <thead>
               <tr>
                   <th>FirstName</th>
                   <th>LastName</th>
                   <th>UserName</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>zhang</td>
                   <td>san</td>
                   <td>张三</td>
               </tr>
               <tr>
                   <td>li</td>
                   <td>shi</td>
                   <td>李四</td>
               </tr>
                <tr>
                   <td>wang</td>
                   <td>wu</td>
                   <td>王五</td>
               </tr>
           </tbody>
       </table>
       
        <!-- 2. 条纹表格-->
       <table class="table table-striped">
           <caption>2. 条纹表格</caption>
           <thead>
               <tr>
                   <th>FirstName</th>
                   <th>LastName</th>
                   <th>UserName</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>zhang</td>
                   <td>san</td>
                   <td>张三</td>
               </tr>
               <tr>
                   <td>li</td>
                   <td>shi</td>
                   <td>李四</td>
               </tr>
                <tr>
                   <td>wang</td>
                   <td>wu</td>
                   <td>王五</td>
               </tr>
           </tbody>
       </table>
       
        <!-- 3. 带边框表格-->
       <table class="table table-striped table-bordered">
           <caption>3. 带边框表格</caption>
           <thead>
               <tr>
                   <th>FirstName</th>
                   <th>LastName</th>
                   <th>UserName</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>zhang</td>
                   <td>san</td>
                   <td>张三</td>
               </tr>
               <tr>
                   <td>li</td>
                   <td>shi</td>
                   <td>李四</td>
               </tr>
                <tr>
                   <td>wang</td>
                   <td>wu</td>
                   <td>王五</td>
               </tr>
           </tbody>
       </table>
       
       <!-- 4. 鼠标悬停效果表格-->
       <table class="table  table-bordered table-hover">
           <caption> 4. 鼠标悬停效果表格</caption>
           <thead>
               <tr>
                   <th>FirstName</th>
                   <th>LastName</th>
                   <th>UserName</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>zhang</td>
                   <td>san</td>
                   <td>张三</td>
               </tr>
               <tr>
                   <td>li</td>
                   <td>shi</td>
                   <td>李四</td>
               </tr>
                <tr>
                   <td>wang</td>
                   <td>wu</td>
                   <td>王五</td>
               </tr>
           </tbody>
       </table>
       
       <!-- 5. 紧缩型表格-->
       <table class="table  table-bordered table-hover table-condensed">
           <caption> 5. 紧缩型表格</caption>
           <thead>
               <tr>
                   <th>FirstName</th>
                   <th>LastName</th>
                   <th>UserName</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>zhang</td>
                   <td>san</td>
                   <td>张三</td>
               </tr>
               <tr>
                   <td>li</td>
                   <td>shi</td>
                   <td>李四</td>
               </tr>
                <tr>
                   <td>wang</td>
                   <td>wu</td>
                   <td>王五</td>
               </tr>
           </tbody>
       </table>
       
       <!-- 6. 状态表格-->
       <table class="table  table-bordered table-hover table-condensed">
           <caption> 6. 状态表格</caption>
           <thead>
               <tr>
                   <th>FirstName</th>
                   <th>LastName</th>
                   <th>UserName</th>
               </tr>
           </thead>
           <tbody>
               <tr class="active">
                   <td>zhang</td>
                   <td>san</td>
                   <td>张三</td>
               </tr>
               <tr class="success">
                   <td>li</td>
                   <td>shi</td>
                   <td>李四</td>
               </tr>
                <tr class="warning">
                   <td>wang</td>
                   <td>wu</td>
                   <td>王五</td>
               </tr>
               <tr class="danger">
                   <td>zhao</td>
                   <td>liu</td>
                   <td>赵六</td>
               </tr>
               <tr >
                   <td class="success">sheng</td>
                   <td class="warning">li</td>
                   <td class="danger">孙李</td>
               </tr>
           </tbody>
       </table>
    </div>
    <div class="table-responsive">
      <!-- 7. 响应式表格-->
       <table class="table  table-bordered table-hover">
           <caption> 7. 响应式表格</caption>
           <thead>
               <tr>
                   <th>FirstName</th>
                   <th>LastName</th>
                   <th>UserName</th>
                   <th>Age</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>zhang</td>
                   <td>san</td>
                   <td>张三</td>
                   <td>25</td>
               </tr>
               <tr>
                   <td>li</td>
                   <td>shi</td>
                   <td>李四</td>
                   <td>40</td>
               </tr>
                <tr>
                   <td>wang</td>
                   <td>wu</td>
                   <td>王五</td>
                   <td>36</td>
               </tr>
               <tr>
                    <td>xiao</td>
                    <td>ming</td>
                    <td>小名</td>
                    <td>18</td>
                </tr>
           </tbody>
       </table>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../js/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../js/bootstrap.min.js"></script>
</body>

</html>

实现效果：

有梦的小草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-CSS样式_排版_表格

table样式:基本表格table table-striped样式:条纹表格，类似奇数偶数行table table-bordered样式:带边框表格，添加表边框table table-hover样式:鼠标悬停效果表格，添加鼠标移入移出事件样式table table-condensed样式:紧缩型表格，缩小表内边距(padding减半)table active-激活状态(灰色) ...
复制链接

扫一扫