Navbar

Bootstrap 导航栏（Navbar）是一个强大的组件，它可以用来创建响应式的导航菜单，它在不同屏幕尺寸下都能保持良好的布局和功能。下面将详细解释如何创建一个默认的导航栏以及如何使其响应式。

默认的导航栏

创建一个默认的导航栏，你需要按照以下步骤操作：

1. 添加 <nav> 标签：使用 <nav> 标签来定义导航栏，并且添加 .navbar 和 .navbar-default 类。

2. 添加角色属性：在 <nav> 标签中添加 role="navigation" 属性，这有助于提高网站的可访问性。

3. 创建标题：在 <nav> 内部，使用 <div> 标签添加 .navbar-header 类，然后在里面添加一个带有 .navbar-brand 类的 <a> 元素，这通常用来显示网站的 logo 或名称。

4. 添加链接：要向导航栏添加链接，添加一个带有 .nav 和 .navbar-nav 类的 <ul> 元素。在 <ul> 元素内部，添加 <li> 和 <a> 元素来创建导航链接。

5. 创建下拉菜单：如果需要下拉菜单，可以在 <li> 元素内部添加一个带有 .dropdown 类的 <a> 元素，并且使用 .dropdown-toggle 类和 <b class="caret"></b> 来创建下拉箭头。下拉菜单的内容放在一个带有 .dropdown-menu 类的 <ul> 元素内。

代码示例

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

响应式的导航栏

要使导航栏响应式，你需要添加一些额外的元素和类：

1. 包裹内容：将导航栏的内容包裹在带有 .collapse 和 .navbar-collapse 类的 <div> 标签中。

2. 添加汉堡按钮：在 .navbar-header 内添加一个带有 .navbar-toggle 类的 <button> 元素，这个按钮用于在小屏幕设备上切换导航栏的显示和隐藏。

3. 数据属性：在 <button> 元素上添加 data-toggle="collapse" 和 data-target="#example-navbar-collapse" 属性，其中 #example-navbar-collapse 是导航栏内容 <div> 的 ID。

代码示例

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