sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > bootstrap > 玩转Bootstrap基础——表格

玩转Bootstrap基础——表格

作者:xuhongji发布时间:2020-08-04分类:bootstrap浏览:147评论:0


导读:Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:table:基础表格.table-striped:斑马线表格.table-bordered:带边框...

Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

table:基础表格

.table-striped:斑马线表格

.table-bordered:带边框的表格

.table-hover:鼠标悬停高亮的表格

.table-condensed:紧凑型表格

.table-responsive:响应式表格
响应式表格: 当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。

表格的行元素< tr >提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下所示:

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告,需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>
</table>


表单

水平表单 form-horizontal

内联表单  form-inline

隐藏标签  sr-only


< input >中要写上form-control类

<input type="email" class="form-control" placeholder="Enter email">



欢迎 发表评论:

bootstrap排行
«   2020年11月   »
1
2345678
9101112131415
16171819202122
23242526272829
30
标签列表
网站分类
文章归档
最近发表
推荐文章