本文最后更新于：December 3, 2021 pm

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。提供了优雅的HTML和CSS规范。

类	描述
.nav nav-tabs	标签页
.nav nav-pills	胶囊式标签页
.nav nav-pills nav-stacked	胶囊式标签页以垂直方向堆叠排列的
.nav-justified	两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。
.disabled	禁用的标签页

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

创建一个标签式的导航菜单：

以一个带有类 .nav 的无序列表开始。
添加类 .nav-tabs。

<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>

1.1 胶囊式标签页

使用 .nav-pills 类。只需要使用 .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。

<ul class="nav nav-pills">
  <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>

1.1.1 垂直式

胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。在使用 .nav、.nav-pills 的同时使用 .nav-stacked，让胶囊垂直堆叠。

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

1.2 两端对齐的标签页

在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

两端对齐的导航条导航链接已经被弃用了。

<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

1.3 禁用链接

对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。这个类只改变 <a> 的外观，不改变功能（即链接功能不受到影响）。可以自己写 JavaScript 禁用这里的链接。

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

1.4 带下拉菜单的标签页

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

向标签添加下拉菜单的步骤如下：

以一个带有 .nav 的无序列表开始。
添加 .nav-tabs。
添加带有 .dropdown-menu 的无序列表。

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Java <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Swing</a></li>
      <li><a href="#">jMeter</a></li>
      <li><a href="#">EJB</a></li>
      <li class="divider"></li>
      <li><a href="#">分离的链接</a></li>
    </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>

1.5 带下拉菜单的胶囊式标签页

步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs 改为 .nav-pills。

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Java <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Swing</a></li>
      <li><a href="#">jMeter</a></li>
      <li><a href="#">EJB</a></li>
      <li class="divider"></li>
      <li><a href="#">分离的链接</a></li>
    </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>

2.导航栏(条)

创建一个默认的导航栏的步骤：

向
标签添加 .navbar、.navbar-default。
向上面的元素添加 **role=”navigation”**，有助于增加可访问性。
向
元素添加一个标题 .navbar-header，内部包含了带有 navbar-brand 的元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有 .nav、.navbar-nav 的无序列表即可。

//1
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">墨水记忆</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>




//2
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

2.1 LOGO图标

将导航条内放置品牌标志的地方替换为 <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>

2.2 响应式导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 .collapse、.navbar-collapse 的

中。折叠起来的导航栏实际上是一个带有 .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 .icon-bar 的创建所谓的汉堡按钮。这些会切换为 .nav-collapse

中的元素。为了实现以上这些功能，必须包含 Bootstrap 折叠（Collapse）插件。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">墨水记忆</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

2.3 表单

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。

//单独表单
<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>


//导航栏中的表单
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">墨水记忆</a>
    </div>
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
    </div>
</nav>

2.4 按钮

对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。

使用 .navbar-btn 向不在

中的

JavaWEB

JavaWEB BootStrap

本文作者: 墨水记忆
本文链接: https://tothefor.com/DragonOne/1882599139.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

JavaWEB-（二十二）BootStrap-组件(三) Previous

JavaWEB-（二十）BootStrap-组件(一) Next

JavaWEB-（二十一）BootStrap-组件(二)

目录

1.导航

1.1 胶囊式标签页

1.1.1 垂直式

1.2 两端对齐的标签页

1.3 禁用链接

1.4 带下拉菜单的标签页

1.5 带下拉菜单的胶囊式标签页

2.导航栏(条)

2.1 LOGO图标

2.2 响应式导航栏

2.3 表单

2.4 按钮

2.5 文本

2.6 带图标的导航链接

2.7 组件对齐

2.8 固定到顶部

2.9 固定到底部

2.10 静态的顶部

2.11 反色的导航栏

3.路径导航（面包屑导航）