bootstrap导航栏_Twitter Bootstrap 101：导航栏

bootstrap导航栏

Twitter Bootstrap 2.0的一大功能是其出色的响应式导航栏。 在这个简短的教程中，我们将解决许多问题，包括导航栏文档，更新示例文件以及查看必要JavaScript。

在这些截屏视频中，我们将介绍以下内容：

• 我们将查看Twitter Bootstrap的在线文档的一些最新更新-我建议遵循经常更新的Changelog！
• 我们将解压缩样本文件，并在导航栏标记上工作，添加一个下拉导航和搜索字段。
• 我们将设置下拉列表和折​​叠式响应导航所需JavaScript。
• 最后，在示例文件中，我包含了一些注释和示例，可能会有助于自定义导航栏以适应其他布局，包括全宽静态导航栏（未固定在顶部）和受宽度限制的导航栏。您网站的内容。

---

导航栏文档

遵循文档非常重要，因为它会经常更新。 在这种情况下，最近的更新影响了我在示例文件中提供的一些示例。

或者， 下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

---

导航栏标记

让我们打开示例文件的包装，开始使用导航栏标记，添加一个下拉导航，将其右移，然后添加一个搜索字段。

---

导航栏JavaScript

如果没有JavaScript，下拉菜单和可折叠的响应菜单将无法正常工作，因此让我们对其进行设置！

或者， 下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

---

链接和下载

• Twitter Bootstrap的主要文档页面
• 下载此练习的样本文件

玩得开心！

翻译自: https://webdesign.tutsplus.com/articles/twitter-bootstrap-101-the-navbar--webdesign-6422

bootstrap导航栏