Bootstrap（一）：基本CSS基础

一、下载与安装

下载地址：https://v3.bootcss.com/getting-started/#download

二、基础CSS

1、栅格系统

1）布局容器

a、.container

用于固定宽度并支持响应式布局的容器

<div class="container">
  ...
</div>

b、.container-fluid

用于 100% 宽度，占据全部视口（viewport）的容器

<div class="container-fluid">
  ...
</div>

2）行和列

a、行 .row

所有“列（column）必须放在 ” .row 内。

b、列 .col-md-*

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。

<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-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

c、 偏移量 .col-md-offset-*(1-12)

<div class="container">
<div class="row">top</div>
  <div class="row">
          <div class="col-md-3 col-md-offset-3">left</div>
         <div class=" col-md-3 col-md-offset-3">right</div>
  </div>

3）行嵌套

将上例的left换成两个占6格的col-md-6

<div class="container">

      <div class="row">top</div>
      <div class="row">
              <div class="col-md-3">

                 <div class="row">
                     <div class="col-md-6">col-md-6</div>
                     <div class="col-md-6">col-md-6</div>
                 </div>

              </div>
             <div class=" col-md-9">right</div>
      </div>
  </div>

4）行排序

<div class="container">

      <div class="row">
          <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
          <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
      </div>
      </div>

  </div>

2、表格

1）带边框的表格

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

2）条纹状表格

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

3）鼠标悬停

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

4）紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

<div class="container">
    <table class="table table-bordered table-striped">
        <thead>
            <th>字段1</th>
            <th>字段2</th>
        </thead>
        <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
        </tr>
        </tbody>
    </table>
</div>

6）状态类

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

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

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

3、表单

代码举例：

<div class="container">
			<!--相当于栅格系统中的container-fluid-->
         <form class="form-horizontal"> 
             <!--相当于栅格系统中的row-->
             <div class="form-group">  
           <!--相当于栅格系统中的col-->      
                 <label for="inputEmail3" class="col-md-2 control-label">Email</label>
                 <div class="col-md-10">
                     <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                 </div>
             </div>
         </form>
     </div>

1）垂直或基本表单（默认）

创建基本表单的步骤：

• 向父form标签元素添加 role=“form”。

• 把标签和控件放在一个带有 class =“form-group” 的 div标签中。这是获取最佳间距所必需的。

• 向所有的文本元素input、textarea和select标签 添加class =“form-group” 。

  <form role="form">
     <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入名称">
     </div>
     <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
     </div>
     <div class="checkbox">
        <label>
        <input type="checkbox"> 请打勾 </label>
     </div>
     <button type="submit" class="btn btn-default">提交</button></form>
  

2）内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向form 标签添加 class =“form-inline”。

<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">名称</label>
      <input type="text" class="form-control" id="name" placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label class="sr-only" for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button></form>

• 默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
• 使用 .sr-only，您可以隐藏内联表单的标签。

3）水平表单

创建水平表单的步骤：

• 向父form标签元素添加 role=“form-horizontal”。

• 把标签和控件放在一个带有 class =“form-group” 的 div标签中。

• 向标签添加class=“control-label”。

  <form class="form-horizontal" role="form">
     <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名字</label>
        <div class="col-sm-10">
           <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
        </div>
     </div>
     <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
           <input type="text" class="form-control" id="lastname" placeholder="请输入姓">
        </div>
     </div>
     <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <div class="checkbox">
              <label>
                 <input type="checkbox"> 请记住我            </label>
           </div>
        </div>
     </div>
     <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-default">登录</button>
        </div>
     </div>
  </form>
  

4）支持的表单控件

a、输入框（Input)

Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

<form role="form">
  <div class="form-group">
    <label for="name">标签</label>
    <input type="text" class="form-control" placeholder="文本输入">
  </div>
 </form>

b、文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

<form role="form">
  <div class="form-group">
    <label for="name">文本框</label>
    <textarea class="form-control" rows="3"></textarea>
  </div></form>

c、复选框（Checkbox）和单选框（Radio）

复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。

• 当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
• 对一系列复选框和单选框使用 checkbox-inline 或 radio-inline，控制它们显示在同一行上。

<label for="name">默认的复选框和单选按钮的实例</label><div class="checkbox">
   <label><input type="checkbox" value="">选项 1</label></div><div class="checkbox">
   <label><input type="checkbox" value="">选项 2</label></div><div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" 
         value="option1" checked> 选项 1   </label></div><div class="radio">
   <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" 
         value="option2">
         选项 2 - 选择它将会取消选择选项 1   </label></div><label for="name">内联的复选框和单选按钮的实例</label><div>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1   
    </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2   
    </label>
   <label class="checkbox-inline">
      <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3   
    </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios3" 
         value="option1" checked> 选项 1   
    </label>
   <label class="checkbox-inline">
      <input type="radio" name="optionsRadiosinline" id="optionsRadios4" 
         value="option2"> 选项 2   
    </label>
</div>

d、选择框（Select)

当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。

• 使用 select展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
• 使用 multiple="multiple"允许用户选择多个选项。

<form role="form">
   <div class="form-group">
      <label for="name">选择列表</label>
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for="name">可多选的选择列表</label>
      <select multiple class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
   </div></form>

e、静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在p标签 上使用 form-control-static。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" 
         placeholder="请输入密码">
    </div>
  </div></form>

5）表单控件状态

除了 focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

a、输入框焦点

当输入框 input 接收到 focus 时，输入框的轮廓会被移除，同时应用box-shadow。

b、禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

c、禁用的字段集 fieldset

对 fieldset 添加 disabled 属性来禁用 fieldset 内的所有控件。

d、验证状态

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label class="col-sm-2 control-label">聚焦</label>
      <div class="col-sm-10">
         <input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点...">
      </div>
   </div>
   <div class="form-group">
      <label for="inputPassword" class="col-sm-2 control-label">禁用      </label>
      <div class="col-sm-10">
         <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
      </div>
   </div>
   <fieldset disabled>
      <div class="form-group">
         <label for="disabledTextInput"  class="col-sm-2 control-label">禁用输入（Fieldset disabled）         </label>
         <div class="col-sm-10">
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
         </div>
      </div>
      <div class="form-group">
         <label for="disabledSelect"  class="col-sm-2 control-label">禁用选择菜单（Fieldset disabled）         </label>
         <div class="col-sm-10">
            <select id="disabledSelect" class="form-control">
               <option>禁止选择</option>
            </select>
         </div>
      </div>
   </fieldset>
   <div class="form-group has-success">
      <label class="col-sm-2 control-label" for="inputSuccess"> 输入成功      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputSuccess">
      </div>
   </div>
   <div class="form-group has-warning">
      <label class="col-sm-2 control-label" for="inputWarning">输入警告      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputWarning">
      </div>
   </div>
   <div class="form-group has-error">
      <label class="col-sm-2 control-label" for="inputError">输入错误      </label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="inputError">
      </div>
   </div>
</form>

e、表单控件大小

您可以分别使用 .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

<form role="form">
   <div class="form-group">
      <input class="form-control input-lg" type="text" 
         placeholder=".input-lg">
   </div>

   <div class="form-group">
      <input class="form-control" type="text" placeholder="默认输入">
   </div>

   <div class="form-group">
      <input class="form-control input-sm" type="text" 
         placeholder=".input-sm">
   </div>
   <div class="form-group">
   </div>
   <div class="form-group">
      <select class="form-control input-lg">
         <option value="">.input-lg</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control">
         <option value="">默认选择</option>
      </select>
   </div>
   <div class="form-group">
      <select class="form-control input-sm">
         <option value="">.input-sm</option>
      </select>
   </div>

   <div class="row">
      <div class="col-lg-2">
         <input type="text" class="form-control" placeholder=".col-lg-2">
      </div>
      <div class="col-lg-3">
         <input type="text" class="form-control" placeholder=".col-lg-3">
      </div>
      <div class="col-lg-4">
         <input type="text" class="form-control" placeholder=".col-lg-4">
      </div>
   </div></form>

f、表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 input 后使用 .help-block。

<span>帮助文本实例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一个较长的帮助文本块，超过一行，
   需要扩展到下一行。本实例中的帮助文本总共有两行。</span></form>

4、按钮

代码举例：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

1）Bootstrap 按钮

任何带有 btn的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于a, button 或 input元素上：

类	描述
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</body>

2）按钮大小

下表列出了获得各种大小按钮的 class：

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

 <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮   </button></p><p>
   <button type="button" class="btn btn-primary">
      默认大小的原始按钮   </button>
   <button type="button" class="btn btn-default">
      默认大小的按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按钮   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-xs">
      特别小的原始按钮   </button>
   <button type="button" class="btn btn-default btn-xs">
      特别小的按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      块级的按钮   </button>

3）按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

a、激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

元素	Class
按钮元素	添加 .active 来显示它是激活的。
锚元素	添加.active 到 a按钮来显示它是激活的。

<button type="button" class="btn btn-default btn-lg ">
      默认按钮   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按钮   </button>

b、禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

元素	Class
按钮元素	添加 disabled 属性 到 button>按钮。
锚元素	添加 disabled 到 a按钮。 注意：该 class 只会改变 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

<button type="button" class="btn btn-default btn-lg">
      默认按钮   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮   </button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按钮   </button></p><p>
   <a href="#" class="btn btn-default btn-lg" role="button">
      链接   </a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">
      禁用链接   </a></p><p>
   <a href="#" class="btn btn-primary btn-lg" role="button">
      原始链接   </a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始链接   </a>

4）按钮标签

您可以在 a、button或 input 元素上使用按钮 class。但是建议您在 button 元素上使用按钮 class，避免跨浏览器的不一致性问题。

<a class="btn btn-default" href="#" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">