bootstrap的组件有哪些？

1. 简介

Bootstrap 是 Twitter 推出的一个开源框架，它使前端开发更加迅速和简单。由于它的大量定制化组件，Bootstrap 成为每个人心目中的前端框架之一。Bootstrap 插件是以 jQuery 为基础写的，而且它们很容易使用、灵活，易于自定义。在本篇文章中，我们将探讨 Bootstrap 的一些常见组件。

2. 栅格系统

栅格系统是 Bootstrap 最常用的布局工具。它将屏幕宽度分成 12 个等宽的列，可以设置不同的列数来排列各种类型的内容。以下是一个简单的例子，其中用了栅格系统的灵活性来对内容进行了布局。

<div class="row">
  <div class="col-sm-4">
    <h3>Column 1</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="col-sm-4">
    <h3>Column 2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="col-sm-4">
    <h3>Column 3</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

以上代码将屏幕分为三个等宽列，并将三种不同的内容插入其中。如果您希望在更小的屏幕上列出不同的内容列，您可以使用以下方式：

<div class="row">
  <div class="col-xs-4 col-sm-2">
    <h3>Column 1</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="col-xs-4 col-sm-2">
    <h3>Column 2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="col-xs-4 col-sm-2">
    <h3>Column 3</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="col-sm-3 hidden-xs"></div>
  <div class="col-sm-3 hidden-xs"></div>
</div>

这段代码中，我们保留了三列中的列 1-3，通过使用“col-xs-4”在较小的屏幕上将每列仅占用一半空间，在大型屏幕上使用“col-sm-2”栅格来占用更多的空间。我们还添加了两个“占位符”栏，以确保我们的内容列总是相同的宽度。

3. 下拉菜单

下拉菜单组件可以让您轻松地向您的用户显示隐藏内容，并给他们提供额外的选项。Bootstrap 的下拉菜单允许您在一个按钮中包含一个下拉菜单。以下是一个简单的示例：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Example
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

在这个例子中，我们创建了一个包含三个选项的下拉菜单，并且设置了一个触发下拉菜单的按钮。用户可以单击按钮以显示菜单。以下是一个更复杂的下拉菜单示例，其中包含表单和分隔线：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown Example <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <form class="form-inline">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>

在这个例子中，我们添加了一个可输入的表单，并放置在分隔线下面。顺便说一下，Bootstrap 还提供了一些其他类型的下拉菜单，如按钮下拉菜单、分裂按钮下拉菜单、输入框和导航条下拉菜单。了解下这些菜单可以让您在设计网站时拥有更好的体验。

4. 模态框

模态框是一个覆盖在网页内容上的弹出窗口。它通常用于在用户进行某个操作之前显示需要确认的信息。Bootstrap 的模态框提供了多种选项和功能，使您的用户操作更加方便和有效。以下是一个基本的模态框示例：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在这个例子中，我们创建了一个包含标题、内容正文和按钮的模态框。Bootstrap 提供了许多其他选项，如表单、滑块和轮播图，以使您的模态框更加优美和丰富。

5. 滑块

滑块是用来选择值和设置选项的组件，类似于 HTML 输入元素中的 <input type="range">。Bootstrap 的滑块组件提供了许多选项和样式，以使您能够轻松地自定义和使用滑块。以下是一个简单的滑块示例：

<input type="range" min="0" max="100" step="1" value="50">

在这个例子中，我们创建了一个包含最小值、最大值、步长和默认值的滑块。滑块组件的样式和功能可以通过使用以下选项进行自定义：

range

vertical

ticks

custom labels

custom CSS styles

使用滑块组件，您可以使您的用户能够更轻松地在整个范围内设置选项。

总结

在本文中，我们探讨了 Bootstrap 的五种常见组件，包括栅格系统、下拉菜单、模态框、滑块以及栅格系统的高级使用方法。Bootstrap 框架的组件灵活、功能强大，可以帮助您在开发时更快速、高效地完成各种任务，使您的网站更具有吸引力和用户友好性。