Bootstrap入门需掌握的知识点（二）

相关阅读：

Bootstrap入门需掌握的知识点（一）

转载请务必注明出处：

Bootstrap入门需掌握的知识点（二）

表格

基本实例

为任意

标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

...

条纹状表格

通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。

  ...

带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

  ...

鼠标悬停

通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。

  ...

状态类

通过这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

...
...
...
...
...



  ...
  ...
  ...
  ...
  ...

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

  
    ...
  

表单

基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、</code> 和 <code><select></code> 元素都将被默认设置宽度属性为 <code>width: 100%;</code>。 将 <code>label</code> 元素和前面提到的控件包裹在 <code>.form-group</code> 中可以获得最好的排列。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/d537a1e03ce343afa7ab0c7e328e358a.jpg" target="_blank"><img alt="Bootstrap入门需掌握的知识点（二）_第5张图片" title="" src="http://img.e-com-net.com/image/info9/d537a1e03ce343afa7ab0c7e328e358a.jpg" width="650" height="240" style="border:1px solid black;"></a></span></p> <pre><code class="html"><form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form></code></pre> <p><strong>注意</strong>：不要将表单组直接和输入框组混合使用，建议将输入框组嵌套到表单组中使用。</p> <h4>内联表单</h4> <p>为 <code><form></code> 元素添加 <code>.form-inline</code> 类可使其内容左对齐并且表现为 <code>inline-block</code> 级别的控件。<strong>只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。</strong></p> <p><strong>注意</strong>：</p> <ul> <li><h4>需要手动设置宽度</h4></li> </ul> <p>在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 <code>width: 100%;</code> 宽度。在内联表单，我们将这些元素的宽度设置为 <code>width: auto;</code>，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。</p> <ul> <li><h4>一定要添加 <code>label</code> 标签</h4></li> </ul> <p>如果你没有为每个输入控件设置 <code>label</code> 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为<code>label</code> 设置 <code>.sr-only</code> 类将其隐藏。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/99082e795afc46f08d13e68939082638.jpg" target="_blank"><img alt="" title="" src="http://img.e-com-net.com/image/info9/99082e795afc46f08d13e68939082638.jpg" width="650" height="47"></a></span></p> <pre><code class="html"><form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email address</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form></code></pre> <h4>水平排列的表单</h4> <p>通过为表单添加 <code>.form-horizontal</code> 类，并联合使用 Bootstrap 预置的栅格类，可以将 <code>label</code> 标签和控件组水平并排布局。这样做将改变 <code>.form-group</code> 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 <code>.row</code> 了。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/43ea3e628c944627a94677063a4385b0.jpg" target="_blank"><img alt="Bootstrap入门需掌握的知识点（二）_第6张图片" title="" src="http://img.e-com-net.com/image/info9/43ea3e628c944627a94677063a4385b0.jpg" width="650" height="155" style="border:1px solid black;"></a></span></p> <pre><code class="html"><form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form></code></pre> <h4>被支持的控件</h4> <p>表单布局实例中展示了其所支持的标准表单控件。</p> <h5>1、输入框</h5> <p>包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件：<code>text</code>、<code>password</code>、<code>datetime</code>、<code>datetime-local</code>、<code>date</code>、<code>month</code>、<code>time</code>、<code>week</code>、<code>number</code>、<code>email</code>、<code>url</code>、<code>search</code>、<code>tel</code> 和 <code>color</code>。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/5bf212aa4baa42a7ab5f04b5718759ce.jpg" target="_blank"><img alt="" title="" src="http://img.e-com-net.com/image/info9/5bf212aa4baa42a7ab5f04b5718759ce.jpg" width="650" height="43"></a></span></p> <pre><code class="html"><input type="text" class="form-control" placeholder="Text input"></code></pre> <p>如需在文本输入域 <code><input></code> 前面或后面添加文本内容或按钮控件，请参考输入控件组。</p> <h5>2、文本域</h5> <p>支持多行文本的表单控件。可根据需要改变 <code>rows</code> 属性。</p> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/6b340b1c5eb2493fb2b9f9801e25f493.jpg" target="_blank"><img alt="" title="" src="http://img.e-com-net.com/image/info9/6b340b1c5eb2493fb2b9f9801e25f493.jpg" width="650" height="68"></a></span></p> <pre><code class="html"><textarea class="form-control" rows="3">

3、多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。

设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline、.checkbox 、.checkbox-inline 或

。

  
    
    Option one is this and that—be sure to include why it's great
  


  
    
    Option two is disabled
  



  
    
    Option one is this and that—be sure to include why it's great
  


  
    
    Option two can be something else and selecting it will deselect option one
  


  
    
    Option three is disabled
  

内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

   1


   2


   3



   1


   2


   3

复选框

下拉列表（select）

使用默认选项或添加 multiple 属性可以同时显示多个选项。

  1
  2
  3
  4
  5



  1
  2
  3
  4
  5

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为

元素添加 .form-control-static 类即可。

  

    Email
    

      
[email protected]
    
  
  

    Password
    

      
    
  

  

    Email
    
[email protected]
  
  

    Password
    
  
  Confirm identity

输入框焦点

我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

被禁用的输入框

为输入框设置 disabled 属性可以防止用户输入，并能对外观做一些修改，使其更直观。

  

    

      Disabled input
      
    
    

      Disabled select menu
      
        Disabled select
      
    
    

      
         Can't check this
      
    
    Submit
  

只读输入框

为输入框设置 readonly 属性可以禁止用户输入，并且输入框的样式也是禁用状态。

校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

  Input with success
  


  Input with warning
  


  Input with error
  


  

    
      
      Checkbox with success
    
  


  

    
      
      Checkbox with warning
    
  


  

    
      
      Checkbox with error
    
  

添加额外的图标

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

Feedback icons only work with textual elements.

图标、label 和输入控件组

对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。如果你不希望将 label 标签展示出来，可以通过添加 sr-only 类来实现。如果的确不能添加 label 标签，请调整图标的 top 值。对于输入框组，请根据你的实际情况调整 right 值。

  Input with success
  
  


  Input with warning
  
  


  Input with error
  
  

控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸。

...
...
...

按钮

预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

Default


Primary


Success


Info


Warning


Danger


Link

尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。

  Large button
  Large button


  Default button
  Default button


  Small button
  Small button


  Extra small button
  Extra small button

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

Block level button
Block level button

激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 元素，是通过 :active 状态实现的。对于 元素，是通过 .active 类实现的。然而，你还可以将 .active 应用到 上，并通过编程的方式使其处于激活状态。

button 元素

由于 :active 是伪状态，因此无需额外添加，但是在需要让其表现出同样外观的时候可以添加 .active 类。

Primary button Button

链接（）元素

可以为基于 元素创建的按钮添加 .active 类。

Primary link
Link

按钮类

为 、 或 元素应用按钮类

Link

Button