freeCodeCamp 旅途11 - Bootstrap

Bootstrap：使用 Fluid 容器实现响应式设计

引入 Bootstrap ，添加 class 为 container-fluid的 div，变成 Fluid 容器。

Bootstrap：使图片自适应移动端

只需要为 image 标签上设置 class 属性为 img-responsive就可以让它完美的适应页面的宽度。

Bootstrap：用 Bootstrap 居中文本

为 h2 元素设置 class 属性 text-center 将顶部的元素居中。

Bootstrap：创建一个 Bootstrap 按钮

class="btn btn-default" 添加按钮样式。

Bootstrap：创建一个 Bootstrap 块级元素

class="btn btn-default btn-block"添加块级按钮样式。

Bootstrap：体验 Bootstrap 彩虹色的按钮

将按钮的 class 从 Bootstrap 的 btn-default替换为 btn-primary。

Bootstrap：使用 btn-info 调出可选操作

浅蓝色 btn-info class 通常用在用户可能采取的操作上。

Bootstrap：使用 btn-danger 警告你的用户，这是危险操作。

红色 btn-dangerclass 用来提醒用户此行为具有破坏性，比如删除一张猫的图片。

Bootstrap：使用 Bootstrap 网格并排放置元素

Bootstrap 具有一套基于 12 列的响应式栅格系统，把内容放在<div class="row">元素中，为元素添加col-xs-*。

Bootstrap：用 Bootstrap 来取代我们之前的自定义样式

text-primary改变文字样式。

Bootstrap：使用 span 创建行内元素

<p>Top 3 things cats <span class="text-danger">hate:</span></p>

Bootstrap：创建自定义标题

用一个简单的 <div class="row">元素包裹起来。再用<div class="col-xs-8">包裹。

Bootstrap：将字体图标添加到我们的按钮中

Font Awesome 是一个非常便利的图标库。使用<i class="fa fa-info-circle"></i>

Bootstrap：响应式风格的单选按钮

将你的所有单选按钮放入 <div class="row">元素。再用 <div class="col-xs-6">元素包裹每一个单选按钮。

Bootstrap：响应式风格的复选框

将所有复选框都放置于一个 <div class="row">元素中。然后分别把每个复选框都放置于一个 <div class="col-xs-4">元素中。

Bootstrap：给表单控件的输入框添加样式

所有文本输入类的元素如 <input>，<textarea>和 <select>只要设置 .form-controlclass 就会占满100%的宽度。

Bootstrap：使用 Bootstrap 响应式排列表单元素

准备好一个具有 rowclass 的 div元素还有几个具有 col-xs-*class 的 div元素。

Bootstrap：创建一个 container-fluid

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">target1</button>
        <button class="btn btn-default target" id="target2">target2</button>
        <button class="btn btn-default target" id="target3">target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">target4</button>
        <button class="btn btn-default target" id="target5">target5</button>
        <button class="btn btn-default target" id="target6">target6</button>
      </div>
    </div>
  </div>
</div>