Bootstrap入门书籍之（四）菜单、按钮及导航

Bootstrap是一个流行的前端框架，它提供了一些常用的UI组件，包括菜单、按钮和导航。本篇文章主要介绍如何使用Bootstrap构建这些UI组件。

Bootstrap是一个流行的前端框架，它提供了一些常用的UI组件，包括菜单、按钮和导航。本篇文章主要介绍如何使用Bootstrap构建这些UI组件。

创建菜单

Bootstrap提供多种菜单样式，包括水平菜单、下拉菜单等。要创建一个水平菜单，可以使用如下代码：

<ul class="nav nav-pills">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

可以看到，菜单使用了<ul>和<li>标签来创建。其中，.nav和.nav-pills类是Bootstrap提供的样式类，用来定义菜单的样式。如果要创建下拉菜单，可以在<ul>中添加class="dropdown-menu"，并使用<a>标签创建下拉菜单中的项。具体代码如下：

<ul class="nav nav-pills">
  <li class="active"><a href="#">首页</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">产品<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">产品1</a></li>
      <li><a href="#">产品2</a></li>
      <li><a href="#">产品3</a></li>
    </ul>
  </li>
  <li><a href="#">关于我们</a></li>
</ul>

注意，这里使用了data-toggle="dropdown"和.dropdown-menu类来定义下拉菜单的样式。<span class="caret"></span>用来创建下拉箭头。

创建按钮

Bootstrap提供多种按钮样式，包括基础按钮、带图标的按钮等。要创建一个基础按钮，可以使用如下代码：

<button type="button" class="btn btn-primary">提交</button>

.btn和.btn-primary类用来定义按钮的样式。如果要创建带图标的按钮，可以在按钮中使用<i>标签，具体样式类参考Bootstrap文档。

创建导航

Bootstrap提供多种导航样式，包括标签页导航、面包屑导航等。要创建一个标签页导航，可以使用如下代码：

<ul class="nav nav-tabs">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

.nav和.nav-tabs类用来定义导航的样式。如果要创建面包屑导航，可以使用如下代码：

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li class="active">产品详情</li>
</ol>

.breadcrumb类用来定义面包屑导航的样式。注意，在当前页使用.active类来标记。

接下来，你可以根据自己的需求选择合适的样式来创建菜单、按钮和导航。以上只是示例，仅供参考。