Bootstrap常用样式，导航栏，响应式导航栏1.1.添加一个容器nav或div标签，使用.navbar类和.2.向d

1.基础导航栏：

1.添加一个容器nav或div标签，使用.navbar类和.navbar-default类，并且添加role="navigation",增加可访问性
2.向div标签添加一个标题使用.navbar-header类，内部包含带有.navbar-brand类的a标签，用于定义品牌图标
3.为了向导航栏添加链接，只需要简单地添加带有.nav类，.navbar-nav类的无序列表就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础导航栏</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <!-- 这里可以定义品牌图标 -->
        <div class="navbar-header">
            <a href="#" class="navbar-brand" id="nav-brand-itheima">
                网站首页
            </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>
        </ul>
    </nav>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

在这里插入图片描述
基础导航栏只能适应大屏幕，缩小页面将折叠

2.响应式导航栏：

	1.实现菜单的折叠和隐藏，把小屏幕时需要折叠的内容包裹在一个div标签内，并且为这个标签使用.collapse，
	.navbar-collapse两个类，最后为这个div添加一个id

汉堡按钮的固定写法：

<button class="navbar-toggle" type="button" data-toggle="collapse">
        <span class="sr-only">汉堡按钮</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式导航栏</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
        data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">汉堡按钮</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <!-- 这里可以定义品牌图标 -->
        <div class="navbar-header">
            <a href="#" class="navbar-brand" id="nav-brand-itheima">
                网站首页
            </a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse">
            <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>
            </ul>
        </div>
    </nav>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>

大屏幕下：
在这里插入图片描述

小设备时：
在这里插入图片描述
修改导航条的默认背景色：

 .navbar-default{
            background-color: #872657;
        }