Bootstrap 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

下面举例说明一下:

骨干表格:

<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

于祈求被得望要屏幕挺粗,那么会出现横向滚动条,可以左右拖动查看完的报表

相关文章