Bootstrap4 导航栏navbar

矫情吗；* 2021-09-15 01:50 668阅读 0赞

导航栏一般放在页面的顶部。

我们可以使用 **.navbar** 类来创建一个标准的导航栏，后面紧跟: **.navbar-expand-xl|lg|md|sm** 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

导航栏上的选项可以使用 **<ul>** 元素并添加 **class="navbar-nav"** 类。 然后在 **<li>** 元素上添加 **.nav-item** 类， **<a>** 元素上使用 **.nav-link** 类:

<br>

![70][]

container-fluid遇container的区别

container   响应式

container-fluid  响应式一个宽度是百分百

`container` 类和`container-fluid`类的区别体现在是否有随视口宽度改变的`margin`存在。

`container`类所谓的自适应也是通过`margin`的改变来完成，`container-fluid`类的百分百宽度是指在固有的15px的`padding`前提下宽度总是当前视口的宽度。

<br>

![70 1][]

## 垂直导航栏 ##

通过删除 **.navbar-expand-xl|lg|md|sm** 类来创建垂直导航栏:

## 不同颜色导航栏 ##

可以使用以下类来创建不同颜色导航栏：**.bg-primary**, **.bg-success**, **.bg-info**, **.bg-warning**, **.bg-danger**, **.bg-secondary**, **.bg-dark** 和 **.bg-light**)。

提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。

<div class="container">  
  <h3>不同颜色导航栏</h3>  
  <p>对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。</p>  
</div>  
  
<nav class="navbar navbar-expand-sm bg-light navbar-light">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
</nav>  
  
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
</nav>  
  
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
</nav>  
  
  
<nav class="navbar navbar-expand-sm bg-success navbar-dark">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
</nav>  
  
  
<nav class="navbar navbar-expand-sm bg-info navbar-dark">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
</nav>  
  
  
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
</nav>  
  
  
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>  
</nav>  
  
  
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">  
  <ul class="navbar-nav">  
    <li class="nav-item active">  
      <a class="nav-link" href="\#">Active</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link disabled" href="\#">Disabled</a>  
    </li>  
  </ul>

激活和禁用状态: 可以在 **<a>** 元素上添加 **.active** 类来高亮显示选中的选项。 **.disabled** 类用于设置该链接是不可点击的。

![70 2][]

<div class="container-fluid">  
  <h3>品牌/Logo</h3>  
  <p>.navbar-brand 类用于高亮显示品牌/Logo:</p>

</div>

![70 3][]

如果使用图片，可以使用 **.navbar-brand** 类来设置图片自适应导航栏。

</a>

navbar-toggler-icon

![70 4][]

![70 5][]

<nav class="navbar navbar-expand-md bg-dark navbar-dark">  
  <a class="navbar-brand" href="\#">Navbar</a>  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="\#collapsibleNavbar">  
    <span class="navbar-toggler-icon"></span>  
  </button>  
  <div class="collapse navbar-collapse" id="collapsibleNavbar">  
    <ul class="navbar-nav">  
      <li class="nav-item">  
        <a class="nav-link" href="\#">Link</a>  
      </li>  
      <li class="nav-item">  
        <a class="nav-link" href="\#">Link</a>  
      </li>  
      <li class="nav-item">  
        <a class="nav-link" href="\#">Link</a>  
      </li>      
    </ul>  
  </div>    
</nav>

<br>

![70 6][]

导航栏使用下拉

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">  
    
  <a class="navbar-brand" href="\#">Logo</a>  
  
  
    
  <ul class="navbar-nav">  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link 1</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link 2</a>  
    </li>  
  
  
      
    <li class="nav-item dropdown">  
      <a class="nav-link dropdown-toggle" href="\#" id="navbardrop" data-toggle="dropdown">  
        Dropdown link  
      </a>  
      <div class="dropdown-menu">  
        <a class="dropdown-item" href="\#">Link 1</a>  
        <a class="dropdown-item" href="\#">Link 2</a>  
        <a class="dropdown-item" href="\#">Link 3</a>  
      </div>  
    </li>  
  </ul>  
</nav>

<br>

![70 7][]

## 导航栏的表单与按钮 ##

导航栏的表单 **<form>** 元素使用 **class="form-inline"** 类来排版输入框与按钮：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">  
  <form class="form-inline">  
    <input class="form-control" type="text" placeholder="Search">  
    <button class="btn btn-success" type="button">Search</button>  
  </form>  
</nav>

<br>

![70 8][]

<br>

![70 9][]

## 导航栏文本 ##

使用 **.navbar-text** 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">  
    
  <ul class="navbar-nav">  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link 1</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link 2</a>  
    </li>  
  </ul>  
    
  <span class="navbar-text">  
    Navbar text  
  </span>  
</nav>  
<br>  
  
  
<div class="container">  
  <h3>导航栏文本</h3>  
  <p>使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>

</div>

![70 10][]

## 固定导航栏 ##

导航栏可以固定在头部或者底部。

我们使用 **.navbar-fixed-top** 类来实现导航栏的固定：

<body  style="height:1500px">  
  
  
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
  <a class="navbar-brand" href="\#">Logo</a>  
  <ul class="navbar-nav">  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="\#">Link</a>  
    </li>  
  </ul>  
</nav>  
  
  
<div class="container-fluid" style="margin-top:80px">  
  <h3>固定导航栏</h3>  
  <p>导航栏可以固定在头部或者底部。</p>  
  <h1>滚动页面查看效果。</h1>

</div>

![70 11][]

**.navbar-fixed-bottom** 类用于设置导航栏固定在底部：

[70]: /images/20210813/a9b7168726b04b139a8c9b70d9b4a5cf.png
[70 1]: /images/20210813/afce864ca28c43a9b6b5664a97a97670.png
[70 2]: /images/20210813/82cc91631feb436998a59258015015c0.png
[70 3]: /images/20210813/79f460033aa9409f84cd720aa7e949b9.png
[70 4]: /images/20210813/4a60c8e14aa94447bb05abd3d936bbfb.png
[70 5]: /images/20210813/30d69408e1554aa897fb5b58387bed7c.png
[70 6]: /images/20210813/05ec9df43d7c42739048148175990b5c.png
[70 7]: /images/20210813/ccbbb3bab64641d1ad6de460b311a106.png
[70 8]: /images/20210813/5888c0da4d4940cd92f01958337add95.png
[70 9]: /images/20210813/9ab64821705f4a73b814ac10db68f5ae.png
[70 10]: /images/20210813/8840054718ec4de69d6beb302597b9eb.png
[70 11]: /images/20210813/7933807d73f044f184ad35c78545d7ef.png