目录
一、输入框组
输入组是一种将表单控件与文本或其他表单控件组合在一起的方式，以提供更好的视觉效果和用户体验。
在实际运用场景中，输入组（Input Group）在Bootstrap框架中主要用于提高表单的可读性和用户友好性，通过将相关控件组合在一起，为用户提供更直观、更易于操作的表单体验。
1. 基本实例
在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素
<div class="container">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="热门城市">
<span class="input-group-addon">搜索</span>
</div>
<hr>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="请输入金额">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>效果如下图所示：
-
使用场景：当需要用户输入搜索关键词或特定金额时，基本实例中的输入组非常适用。例如，在电商网站的商品搜索栏或金融应用中的金额输入框。
-
优点：通过将标签（如“热门城市”或货币符号）与输入框结合，可以提高表单的可读性，帮助用户更快地理解他们应该输入什么类型的信息。
2. 尺寸
为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类
<div class="container">
<form>
<!-- 超大 -->
<div class="input-group input-group-lg">
...
</div>
<!-- 默认 -->
<div class="input-group">
...
</div>
<!-- 较小 -->
<div class="input-group input-group-sm">
...
</div>
</form>
</div>效果如下图所示：
-
使用场景：在不同的设备和屏幕尺寸上，调整输入组的尺寸可以提供更好的用户体验。在大屏幕设备上可能使用超大尺寸，而在小屏幕设备上使用较小尺寸以节省空间。
-
优点：通过调整尺寸，可以使表单在不同设备上保持良好的可用性和视觉一致性。
3. 作为额外元素的多选框和单选框
可以将多选框或单选框作为额外元素添加到输入框组中
<div class="container">
<div class="row">
<!-- 多选框 + 输入框 -->
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<!-- 单选框 + 输入框 -->
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>效果如下图所示： 
-
使用场景：在需要用户从多个选项中进行选择时，如设置表单中的多项选择或单项选择。
-
优点：将选择框与输入框结合可以节省空间，同时保持界面的整洁和组织的清晰。
4. 作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="热门城市">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">搜索</button>
</span>
</div>
</div>
</div>
</div>效果如下图所示： 
-
使用场景：在用户需要执行搜索或其他操作时，将按钮与输入框结合是常见的做法。例如，在搜索引擎的搜索栏旁放置一个“搜索”按钮。
-
优点：这种布局符合用户的直觉，使得操作直接且易于访问。
5. 作为额外元素的按钮式下拉菜单
<div class="container">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选择1</a></li>
<li><a href="#">选择2</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>效果如下图所示：
-
使用场景：当用户需要从一个下拉列表中选择一个选项时，如选择国家或地区。
-
优点：将下拉菜单与输入框结合可以提供更紧凑的布局，减少页面的杂乱感。
6. 作为额外元素的分裂式按钮下拉菜单
<div class="container">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-primary" type="button">分裂式选择</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">选择1</a></li>
<li><a href="#">选择2</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>效果如下图所示：
-
使用场景：在需要提供多个相关操作，其中一些操作有更多选项时。例如，在文档编辑软件中，用户可以选择对文本进行操作，然后从一个下拉菜单中选择具体的操作。
-
优点：这种布局提供了一种直观的方式来组织和访问相关的功能或操作，使得用户界面更加高效和易于使用。
二、导航
该部分主要讲述了Bootstrap框架中的导航标签（Nav tabs 和 Nav pills）部分的内容。导航标签用于在网页上创建各种风格的导航栏，包括水平标签页、胶囊式标签页、垂直堆叠的胶囊式标签页、两端对齐的胶囊式标签页、禁用的链接以及带下拉菜单的标签页。
导航标签主要用于链接到本页面的某个位置或其他页面，以及链接到站点的其他页面或当前页的其他部分。
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式
1. 标签页
注意 .nav-tabs 类依赖 .nav 基类
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>效果如下图所示：
2. 胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>效果如下图所示：
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加
.nav-stacked类
<div class="container">
<ul class="nav nav-pills nav-stacked">
...
</ul>
</div>效果如下图所示：
3. 两端对齐的标签页
在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>效果如下图所示：
4. 禁用的链接
对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li class="disabled"><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>效果如下图所示：
5. 添加下拉菜单
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
地图
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">中国地图</a></li>
<li><a href="#">世界地图</a></li>
</ul>
</li>
</ul>
</div>效果如下图所示：
三、导航条
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式
bootstrap的导航条是一个高度可定制的界面组件，它不仅支持丰富的界面元素配置，还提供了灵活的空间布局策略。通过精确的类名应用，可以有效地定制导航条的外观和行为，满足不同应用场景的需求。
1. 界面元素配置
该内容主要包含：
-
基础结构: 利用
<nav class="navbar navbar-default">构建标准导航条框架。 -
品牌标识: 在导航条左侧通常放置企业的徽标或品牌图标。
-
搜索栏: 整合搜索功能，通过
<form class="navbar-form">实现。 -
交互按钮: 加入交互式按钮如登录、注册等，增强用户体验。
-
文本信息: 插入描述性文本，如欢迎词或个人化问候。
-
辅助链接: 使用
.navbar-text类为非核心导航链接提供样式。
1.1 基础结构-默认样式的导航条
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-brand" href="#">林林一928</div>
<div class="collapse navbar-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>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
军事
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">飞机</a></li>
<li><a href="#">大炮</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>效果如下图所示：
1.2 品牌标识
将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
1.3 表单-搜索栏
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置
eg:在上述的例子中，添加一个搜索框
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-brand" href="#">林林一928</div>
<div class="collapse navbar-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>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
军事
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">飞机</a></li>
<li><a href="#">大炮</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</div>效果如下图所示:
1.4 按钮
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的
eg:在上述示例中，继续添加一个提交按钮
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-brand" href="#">林林一928</div>
<div class="collapse navbar-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>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
军事
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">飞机</a></li>
<li><a href="#">大炮</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</div>
</div>
</div>效果如下图所示：
1.5 文本信息
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签
<p class="navbar-text">Welcome to Web</p>
1.6 辅助链接-非导航的链接
或许你希望在标准的导航组件之外添加标准链接，那么，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置
<p class="navbar-text" href="#">go <a href="https://www.baidu.com" class="navbar-link">baidu</a></p>
2. 空间布局策略
-
组件对齐: 运用
.navbar-left和.navbar-right工具类来调整导航条内各组件的水平位置。 -
顶部固定: 默认情况下，导航条位于页面顶部，保持内容的起点清晰。
-
滚动固定: 应用
.navbar-fixed-top类实现导航条在滚动时始终固定在视窗顶部。 -
底部固定: 使用
.navbar-fixed-bottom类使导航条在页面底部固定，便于用户随时访问。 -
导航条反色：通过添加
.navbar-inverse类可以改变导航条的外观
2.1 组件对齐（组件排列）
通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 <ul> 标签
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
2.2 顶部固定-静止在顶部
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
2.3 滚动固定-固定在顶部
添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
2.4 底部固定-固定在底部
添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
2.5 反色的导航条
通过添加 .navbar-inverse 类可以改变导航条的外观
<nav class="navbar navbar-inverse">
...
</nav>
四、路径导航 （面包屑效果）
概念：在一个带有层次的导航结构中标明当前页面的位置
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了
<div class="container">
<ol class="breadcrumb">
<li><a href="#">一级</a></li>
<li><a href="#">二级</a></li>
<li class="active">三级</li>
</ol>
</div>效果如下图所示：
