BootstrapBootstrap CSS 栅格、代码和表格

一、bootstrap栅格

Bootstrap
提供了一套响应式、移动装备优先的流式网格系统,随着显示屏或视口(viewport)尺寸的增多,系统会活动分成最多12列。

Bootstrap 网格系统(Grid System)的劳作规律:

网格系统经过一多重涵盖内容的行和列来创制页面布局。下边列出了 Bootstrap
网格系统是怎么着工作的:

  • 行必须放置在 .container class
    内,以便得到确切的对齐(alignment)和内边距(padding)。
  • 使用行来创立列的水平组。
  • 内容应该放置在列内,且只有列可以是行的直白子元素。
  • 预订义的网格类,比如 .row 和 .col-xs-4,可用以快速创设网格布局。LESS
    混合类可用于更加多语义布局。
  • 列通过内边距(padding)来创建列内容之间的闲暇。该内边距是通过 .rows 上的外地距(margin)取负,表示第一列和尾声一列的行偏移。
  • 网格系统是透过点名您想要横跨的十二个可用的列来成立的。例如,要成立多个分外的列,则利用四个 .col-xs-4

媒体询问

媒体询问是可怜不简单的”有标准化的 CSS
规则”。它只适用于部分依照某些规定条件的
CSS。倘使满意这么些条件,则拔取相应的体制。

Bootstrap
中的媒体询问允许你基于视口大小活动、突显并隐蔽内容。下边的传媒询问在
LESS 文件中利用,用来成立 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }

我们偶尔也会在媒体询问代码中富含 max-width,从而将 CSS
的影响范围在更小范围的显示器尺寸之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

 

网格选项

下图统计了 Bootstrap 网格系统怎样跨多少个设施工作:

Bootstrap 1

 

主干的网格结构:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

响应式的列重置

下实例包涵了4个网格,可是大家在小设备浏览时心慌意乱确定网格突显的地点。

为明白决那个题材,可以应用 .clearfix class和 响应式实用工具来化解,如下边实例所示:

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut. 
         </p>
      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat. 
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim 
         </p>
      </div>
   </div>
</div>

偏移列:为了在大显示屏显示器上使用偏移,请使用 .col-md-offset-* 类。那几个类会把一个列的左外边距(margin)扩大 * 列,其中 * 范围是从 1到 11

嵌套列:为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有些 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包涵一组列,那组列个数无法领先12(其实,没有需要您不可能不占满12列)。

列排序:Bootstrap
网格系统另一个到家的表征,就是您可以很简单地以一种顺序编写列,然后以另一种顺序呈现列。您可以很自由地改成带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的一一,其中 * 范围是从 1 到 11

上边给一个归纳实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
   .row{margin-bottom: 20px;}
   .row .row{
      margin-top: 10px;
      margin-bottom: 0;
   }
   [class*='col-']{
      padding-top:15px;
      padding-bottom:15px;
      background-color: #eee;
      background-color: rgba(86,61,124,0.15);
      border:1px solid #ddd;
      border:1px solid rgba(86,61,124,.2);
   }
</style>
</head>
<body>
<div class="container">
   <div class="row">
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
      <div class="col-md-1">col-md-1</div>
   </div>
   <div class="row">
      <div class="col-md-3">col-md-3</div>
      <div class="col-md-3">col-md-3</div>
      <div class="col-md-3">col-md-3</div>
   </div>
   <div class="row">
      <div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
      <div class="col-md-3">col-md-3</div>
      <div class="col-md-3">col-md-3</div>
   </div>
   <div class="row">
      <div class="col-md-4 col-md-offset-4">col-md-4</div>
   </div>

   <div class="row">
      <div class="col-sm-9">
         one
         <div class="row">
            <div class="col-xs-8">first</div>
            <div class="col-xs-4">two</div>
         </div>
      </div>
   </div>

   <div class="row">
      <div class="col-md-9 col-md-push-3">col-md-9</div>
      <div class="col-md-3 col-md-pull-9">col-md-3</div>
   </div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

心想事成效益:

Bootstrap 2

二、bootstrap CSS代码

要害是从内联代码、用户输入、代码块、变量和程序输出方向助教对代码的行使。

代码:

<div class="container">
   <!--code 内联代码-->
   For example<code>&lt;section&gt;</code>as inline;
   我希望现在能健入<kbd>cmd</kbd>命令
   <pre>
      same text here...;
   </pre>
   <var>x</var>=<var>y</var>+<var>z</var>
   <samp>hell world</samp>
</div>

心想事功用益:

Bootstrap 3

 注意:请保管当你使用 <pre> 和 <code>
标签时,起先和了结标签使用了 unicode 变体: < 和 >

三、bootstrap 表格

 Bootstrap
表格从着力表格到条纹状表格、带边框表格、鼠标悬停、紧缩表格、状态类和响应式表格。

如图所示,下图样式可用以表格中:

Bootstrap 4

下图的类可用于表格的行照旧单元格:

Bootstrap 5

主导表格:假若你想要一个只包括内边距(padding)和程度划分的基本表,请添加
class .table。

条纹表格:通过添加 .table-striped class,您将在 <tbody>
内的行上看到条纹。

边框表格:通过添加 .table-bordered class,您将见到各类元素周围都有边框,且占全体表格是圆角的。

终止表格:通过添加 .table-hover class,当指针悬停在行上时会出现浅蓝色背景。

简短表格:(也即是紧凑型的表格)通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更连贯。

事态表格:如图所示

Bootstrap 6

这么些类可被接纳到 <tr>、<td> 或 <th>。

响应式表格:通过把自由的 .table 包在 .table-responsive class
内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在超过 768px
宽的重型设施上查看时,您将看不到任何的差别。

总括起来就是:条纹状表格、带边框表格、鼠标悬停、紧缩表格table的class分别为table-striped
table-bordered table-hover table-condensed

上边举例说惠氏(WYETH)下:

基本表格:

<div class="container">
  <table class="table">
      <thead>
         <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
         </tr>
      </thead>
      <tbody>
            <tr>
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
            <tr>
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
      </tbody>
  </table>
</div>

落到实处效益:

Bootstrap 7

 

状态类:如代码:

<div class="container">
  <table class="table table-bordered">
      <thead>
         <tr class="active">
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
         </tr>
      </thead>
      <tbody>
            <tr class="success">
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
            <tr class="info">
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
             <tr class="warning">
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
             <tr class="danger">
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
            <tr>
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
      </tbody>
  </table>
</div>

心想事效能益如图:

Bootstrap 8

兑现响应式表格

代码如下:

<div class="table-responsive">
  <table class="table table-bordered">
      <thead>
         <tr class="active">
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
         </tr>
      </thead>
      <tbody>
            <tr class="success">
               <td>表格单元格</td>
               <td>表格单元格</td>
               <td>表格单元格</td>
            </tr>
            <tr class="info">
               <td>表格单元格表格单元格表格单元格</td>
               <td>表格单元格表格单元格表格单元格表格单元格</td>
               <td>表格单元格表格单元格表格单元格</td>
            </tr>
             <tr class="warning">
               <td>表格单元格表格单元格表格单元格表格单元格</td>
               <td>表格单元格表格单元格</td>
               <td>表格单元格表格单元格表格单元格</td>
            </tr>
             <tr class="danger">
               <td>表格单元格表格单元格</td>
               <td>表格单元格表格单元格</td>
               <td>表格单元格表格单元格</td>
            </tr>
            <tr>
               <td>表格单元格表格单元格</td>
               <td>表格单元格表格单元格</td>
               <td>表格单元格表格单元格</td>
            </tr>
      </tbody>
  </table>

落到实处的功效如图:

Bootstrap 9

在图中可以观察倘若屏幕很小,那么会现出横向滚动条,可以左右拖动查看完整的表格

相关文章