反应 Bootstrap 五心率

Bootstrap 是一个流行的前端框架，它能够让开发者更快速地构建响应式网站和应用程序。在 Bootstrap 中，五种主要的组件被称为“五心率”，它们分别是：

• 栅格系统
• 表单
• 图标
• 按钮
• 导航

栅格系统

栅格系统是 Bootstrap 最基本和最重要的组件之一。它使用了一个列化的布局来自适应于不同大小的设备。栅格系统的语法为：

<div class="container">
  <div class="row">
    <div class="col-sm-4">1</div>
    <div class="col-sm-4">2</div>
    <div class="col-sm-4">3</div>
  </div>
</div>

其中，container 定义了一个容器，row 定义了一个行，而 col-*-* 则定义了一个网格列。在上面的例子中，每个列都设置为 4 个网格，总共是 12 个网格的栅格系统。

表单

Bootstrap 的表单组件提供了一种简单的方法来创建响应式表单。表单包括各种输入元素，如文本框、下拉菜单、复选框、单选框等。表单的语法为：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email：</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>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

表单可以设置样式、快速验证输入以及自适应于不同的设备大小。

图标

Bootstrap 的图标组件使用了一个名为 Glyphicons 的开源图标库。图标可以用作按钮、导航、标签等等。图标的语法为：

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-search"></span> Search
</button>

在上面的例子中，按钮包含了一个搜索图标。图标的用法非常方便，并且非常适用于提高用户体验。

按钮

Bootstrap 的按钮组件提供了一种简单的方法来创建响应式按钮。按钮可以设置大小、样式、标签和状态。按钮的语法为：

<button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Primary button</button>
<button type="button" class="btn btn-success disabled">Success button</button>

在上面的例子中，我们创建了三个不同大小、样式和状态的按钮。按钮是一个非常重要的交互元素，在 Bootstrap 中，我们可以很容易的创建出丰富多样的按钮。

导航

Bootstrap 的导航组件提供了一种简单的方法来构建响应式的导航菜单。导航可以由链接、按钮和下拉菜单组成。导航的语法为：

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

在上面的例子中，我们创建了一个导航菜单，它由三个链接组成。导航是一个非常重要的组件，可以帮助用户找到他们所需要的信息。

以上就是 Bootstrap 五心率组件的简要介绍，学会使用这五个组件后你就可以更快的构建响应式的网站和应用程序了！