Bootstrap3全面介绍

Bootstrap 3 是 Twitter 推出的一款前端框架，它能让我们快速开发出兼容不同设备的现代化 Web 应用。Bootstrap 3 将 HTML、CSS 和 JavaScript 组件强大地结合在一起，可以减轻我们的前端开发负担，让我们更好关注业务逻辑的实现。下面让我们从多个方面来对 Bootstrap 3 做详细的阐述。

一、基础内容

Bootstrap 3 最基础的内容为网格系统、排版样式与预处理器等。

1、网格系统

Bootstrap 3 栅格系统基于类名 col-xs-*、col-sm-*、col-md-*、col-lg-* 。从名字上我们就能猜出，"xs" 表示小屏幕，"sm" 表示中屏幕，"md" 表示大屏幕，"lg" 表示超大屏幕，而 * 号指定该列占屏幕总列的百分比。

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8"></div>
  </div>
</div>

该示例代码中，“container”为容器，宽度固定且居中，在其内部通过“row”类新建一行，再用“col-md-*”来决定每一列的占比。

2、排版样式

Bootstrap 3 中提供了很多的排版样式，例如：Μarkdown 与区块、表格、代码等。使用这些样式可以更加规范化和简洁化你的代码。下面给出一个表格的实例代码：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

二、组件

Bootstrap 3 也内置了很多组件，例如：导航栏、面包屑、下拉菜单，还有模态框等。使用这些组件可以让你的网站变得更加生动有趣。

1、导航栏

Bootstrap 3 中的导航栏可以自适应不同的屏幕尺寸，无需复杂的 CSS 样式，可直接在 HTML 基础上完成。下面给出一个示例代码：

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse" data-target="#navbar"
        aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </div>
  </div>
</nav>

2、模态框

模态框是 Bootstrap 3 中比较常见的组件，可以通过它弹出一个对话框，提示或让用户进行一些操作。

<div class="modal fade" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
          data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">
          标题
        </h4>
      </div>
      <div class="modal-body">
        内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"
          data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">
          提交
        </button>
      </div>
    </div>
  </div>
</div>

三、JavaScript 插件

Bootstrap 3 还提供了一些 JavaScript 插件，例如：轮播图、模态框等。

1、轮播图

Bootstrap 3 中的轮播组件很容易使用，只需要定义 3 个基本元素：<div class="carousel-inner">、<a class="left carousel-control">、<a class="right carousel-control">。

<div id="carousel-example-generic" class="carousel slide"
  data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic"
      data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic"
      data-slide-to="1"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/1200x200"
        alt="First slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x200"
        alt="Second slide">
    </div>
  </div>
  <a class="left carousel-control"
    href="#carousel-example-generic"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control"
    href="#carousel-example-generic"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

2、类型·选择器

Bootstrap 3 中还提供了一些类型选择器，例如：日期 timepicker、下拉选择框 selectpicker 等。

<input type="text" class="form-control timepicker"
  data-date-format="yyyy-mm-dd hh:ii" />

<select class="selectpicker form-control">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<script>
  $('.selectpicker').selectpicker();
</script>

综上可知，Bootstrap 3 的强大和灵活性是其最突出的特点，总的来说，它的优点有：易用、响应式、兼容、扩展性强、内置组件和插件丰富、文档详尽，可以说 Bootstrap 3 是我们最好的前端开发帮手，相信在实际开发中，你也会对它爱不释手。