Bar navigasi yang Bootstrap mesti pelajari setiap hari kemahiran javascript-tutorial js-php.cn

1. Bar navigasi

Perbezaan antara bar navigasi (navbar) dan navigasi (nav) yang diperkenalkan dalam bahagian sebelumnya hanyalah satu perkataan, dengan penambahan perkataan "bar". Malah, mereka masih jelas berbeza dalam rangka kerja Bootstrap. Terdapat warna latar belakang dalam bar navigasi (navbar) (paparan lebih menonjol), dan bar navigasi boleh menjadi pautan tulen (serupa dengan navigasi), borang atau gabungan bentuk dan navigasi. Dalam bahagian ini, kita akan membincangkan penggunaan bar navigasi dalam rangka kerja Bootstrap.

Bar navigasi, seperti navigasi, ialah komponen bebas dalam rangka kerja Bootstrap, jadi anda juga boleh menggunakan versi berbeza mengikut keperluan anda:

Versi KURANG: fail sumber yang sepadan navbar.less
Versi Sass: fail sumber yang sepadan _navbar.scss
Versi tersusun: Semak baris 3642 hingga 4111 fail bootstrap.css (perhatikan bahawa versi Bootstrap yang disebut di sini ialah 3.1.1 dan lokasi versi lain tidak konsisten).

2. Bar navigasi asas

Dalam kotak Bootstrap, penampilan bar navigasi dan navigasi tidak jauh berbeza, tetapi dalam penggunaan sebenar bar navigasi jauh lebih rumit daripada navigasi. Mari kita lihat pada bar navigasi yang paling asas—bar navigasi asas.

1), penggunaan:

Apabila membuat bar navigasi asas, terdapat terutamanya langkah berikut:

Langkah pertama: Mula-mula, tambahkan nama kelas "navbar-nav" berdasarkan senarai navigasi (
- Langkah 2: Tambahkan bekas (div) di luar senarai dan gunakan nama kelas "navbar" dan "navbar-default"
```
<div class="navbar navbar-default" role="navigation">
 <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><a href="##">关于我们</a></li>
 </ul>
</div>
```
Salin selepas log masuk
Fungsi utama gaya ".navbar" adalah untuk menetapkan kesan seperti padding kiri dan kanan serta bucu bulat, tetapi ia tidak mempunyai sebarang tetapan yang berkaitan dengan gaya warna. Kod sumber utamanya adalah seperti berikut:

/Pandangan kod sumber talian fail bootstrap.css 3642~line 3647/
```
.navbar {
 position: relative;
 min-height: 50px;
 margin-bottom: 20px;
 border: 1px solid transparent;
}
```
Salin selepas log masuk
2), analisis prinsip:

Warna bar navigasi dikawal melalui ".navbar-default":

/Pandangan kod sumber baris fail bootstrap.css 3940~line 3943/
```
.navbar-default {
 background-color: #f8f8f8;
 border-color: #e7e7e7;
}
```
Salin selepas log masuk
Gaya navbar-nav melaraskan semula terapung dan jidar dalam dan luar item menu berdasarkan navigasi.nav. Ia juga tidak termasuk tetapan warna dan gaya lain Untuk kod sumber, sila lihat baris 3785 hingga 3830 fail bootstrap.css Kami akan mengekstrak kod dan memasukkannya ke dalam bootstrap.css di sebelah kanan.

Warna dan gaya lain dilaksanakan bersama bekas induk "navbar-default":

/Untuk kod sumber, sila lihat baris 3955~3974 fail bootstrap.css/
```
.navbar-default .navbar-nav> li > a {
 color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
 color: #333;
 background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
 color: #555;
 background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
 color: #ccc;
 background-color: transparent;
}
```
Salin selepas log masuk
3. Tambahkan tajuk, menu kedua dan status pada bar navigasi

1), tambah tajuk bar navigasi

Dalam pengeluaran halaman web, selalunya terdapat tajuk di hadapan menu (saiz teks lebih besar sedikit daripada teks lain, rangka kerja Bootstrap juga telah mempertimbangkan aspek ini untuk semua orang " dan " jenama navbar" untuk dicapai.
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <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><a href="##">关于我们</a></li>
 </ul>
</div>
```
Salin selepas log masuk
2), analisis prinsip:

Fungsi ini terutamanya berfungsi sebagai fungsi peringatan Sudah tentu, jika ditambah baik, ia boleh digunakan sebagai logo (bukan untuk dihuraikan di sini). Gaya terutamanya meningkatkan tetapan fon dan menetapkan lebar maksimum:

/Pandangan kod sumber baris fail bootstrap.css 3739~line 3755/
```
.navbar-brand {
 float: left;
 height: 50px;
 padding: 15px 15px;
 font-size: 18px;
 line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
 text-decoration: none;
}
@media (min-width: 768px) {
 .navbar> .container .navbar-brand,
 .navbar> .container-fluid .navbar-brand {
 margin-left: -15px;
 }
}
```
Salin selepas log masuk
Juga di bawah bar navigasi lalai (navbar-default), jenama navbar juga diwarnakan:

/Untuk kod sumber, sila lihat baris 3947~3951 fail bootstrap.css/
```
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
```
Salin selepas log masuk
3), status bar navigasi, menu kedua

Begitu juga, bar navigasi asas menyediakan menu dengan status semasa, status dilumpuhkan, status digantung dan kesan lain, dan juga boleh mempunyai bar navigasi dengan menu kedua.
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="##">CSS3</a></li>
  <li><a href="##">JavaScript</a></li>
  <li class="disabled"><a href="##">PHP</a></li>
  </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>
```
Salin selepas log masuk
效果图如下：

4、带表单的导航条

有的导航条中会带有搜索表单，比如新浪微博的导航条：

在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单。
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="##">CSS3</a></li>
  <li><a href="##">JavaScript</a></li>
  <li class="disabled"><a href="##">PHP</a></li>
  </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <form action="##" class="navbar-form navbar-left" rol="search">
 <div class="form-group">
  <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>
```
Salin selepas log masuk
实现导航条+表单的样式代码源码请查看bootstrap.css文件第3839行～第3904行.

在上面的示例中，大家看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。

/源码请查看bootstrap.css文件第3831行～第3838行/
```
@media (min-width: 768px) {
 .navbar-left {
 float: left !important;
}
.navbar-right {
 float: right !important;
 }
}
```
Salin selepas log masuk
注意：这里有一个条件，只有当浏览器视窗宽度大于768px生效。

5、导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：
- 1、导航条中的按钮navbar-btn
- 2、导航条中的文本navbar-text
- 3、导航条中的普通链接navbar-link
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

先来看看这三种样式对应的源码：

/源码请查看bootstrap.css文件第3914行～第3939行/
```
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}
@media (min-width: 768px) {
.navbar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
 }
.navbar-text.navbar-right:last-child {
margin-right: 0;
 }

}
/bootstrap.css文件第3952行～第3954行/

.navbar-default .navbar-text {
 color: #777;
}

/bootstrap.css文件第4035行～第4037行/

.navbar-inverse .navbar-text {
color: #999;
}

/boostrap.css文件第4017行～第4022行/

.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}

/bootstrap.css文件第4106行～第4111行/

.navbar-inverse .navbar-link {
color: #999;
}
.navbar-inverse .navbar-link:hover {
color: #fff;
}
```
Salin selepas log masuk
navbar-btn和navbar-link在上一小节已经讲过，现在我们来看一下navbar-text的一个简单应用
```
<div class="navbar navbar-default" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">慕课网</a>
 　</div>
 <ul class="nav navbar-nav">
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 <li><a href="##" class="navbar-text">Navbar Text</a></li>
 </ul>
</div>
```
Salin selepas log masuk
在结果窗口中查看效果，可以看出明显的存在问题.

通过浏览器调试工具，可以看到a标签有margin-top和margin-bottom的值为15px，欲将其对齐，我们将上面的结构做一定的调整. 将