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

标题：Bootstrap入门书籍之（四）菜单、按钮及导航攻略

1. 菜单

在Bootstrap中，可以使用<ul>和<li>标签来创建导航菜单。以下是创建菜单的步骤：

1. 在HTML文档中，创建一个<ul>元素，作为导航栏容器。

<ul class="nav">
  <!-- 菜单项 -->
</ul>

1. 在<ul>中，创建多个<li>元素，每个元素代表一个菜单项。可以使用<a>元素来定义菜单项文本和链接。

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于</a></li>
</ul>

1. 这里的菜单是垂直显示的，若要横向显示，则为导航栏添加navbar类和navbar-expand类。

<ul class="nav navbar navbar-expand">
  <!-- 菜单项 -->
</ul>

2. 按钮

Bootstrap提供了多种按钮样式，从基础样式到带有图标或者下拉菜单的按钮都可以实现。以下是创建按钮的步骤：

1. 创建一个<button>元素，并添加合适的类来定义按钮样式。

<button class="btn btn-primary">点击我</button>

1. 若要创建一个带有图标的按钮，可以为按钮元素添加<i>元素和合适的图标类。

<button class="btn btn-primary"><i class="fas fa-check"></i> 提交</button>

1. 若要创建一个下拉菜单按钮，可以结合<div>和<a>元素来实现。添加dropdown类和dropdown-toggle类来定义下拉菜单样式。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

示例说明：

以下是两个使用Bootstrap创建菜单和按钮的示例说明：

示例一：创建一个导航菜单

<ul class="nav navbar navbar-expand">
  <li class="nav-item active">
    <a class="nav-link" href="#">首页</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">产品</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">关于</a>
  </li>
</ul>

该示例创建了一个水平导航菜单，包含了3个菜单项：首页、产品和关于。

示例二：创建一个带下拉菜单的按钮

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">选项1</a>
    <a class="dropdown-item" href="#">选项2</a>
    <a class="dropdown-item" href="#">选项3</a>
  </div>
</div>

该示例创建了一个带有下拉菜单的按钮，点击按钮后会显示三个选项：选项1、选项2和选项3。

以上是关于Bootstrap菜单、按钮及导航的完整攻略，包含了创建菜单和按钮的步骤以及两个示例说明。希望对您有所帮助！