使用bootstrap制作导航条

参考链接：https://v3.bootcss/components/#navbar
项目结构
工具使用：
Bootstrap Button Generator
通过Bootstrap Button Generator，你只需输入你想指定给新按钮的样式的CSS类，并简单调整图标的颜色，即可获得新的图标，然后复制代码，粘贴在任意你想要的地方即可。
最终效果
中等屏幕桌面显示器 (≥992px) 、大屏幕大桌面显示器 (≥1200px)：

桌面显示器 (<992px)
超小屏幕手机 (<768px) 、小屏幕平板 (≥768px)：
代码

index.html

<!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>Document</title>
    <!-- 引入bootstrap核心样式文件（必须） -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 站点图标 -->
    <link rel="shortcut icon" href="imgs/favicon.ico" type="image/x-icon">
</head>

    <!-- 头部 -->
    <header id="dw_header">
        <!-- 上半部分 -->
        <div class="top-bar hidden-sm hidden-xs text-center text-muted">
            <div class="container">
                <div class="row">
                    <div class="top-bar-1 col-md-2">
                        <a href="">
                            <i class="icon-phone"></i>
                            <span>关注微信号</span>
                            <span class="caret"></span>
                            <img src="imgs/ewm_xzh.jpg" alt="旋之华" width="130">
                        </a>
                    </div>
                    <div class="top-bar-2 col-md-5">
                        <i class="icon-tel"></i>
                        <span>8888-555-6666（服务时间：9:00-21:00）</span>
                    </div>
                    <div class="top-bar-3 col-md-2">
                        <a href="" class="text-muted">校企合作</a>
                        <a href="" class="text-muted">培训师</a>
                    </div>
                    <div class="top-bar-4 col-md-3">
                        <a class="btn btn-register" href="#" role="button">免费注册</a>
                        <a class="text-muted" href="#" role="button" style="margin-left: 10px;">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 下半部分 -->
        <nav class="navbar navbar-default navbar-static-top navbar-dw">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dw_nav" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="imgs/lk_logo_sm.png" alt="撩课" width="180">
                </a>
              </div>
          
              <div class="collapse navbar-collapse" id="dw_nav">
                <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>
                  <li><a href="#">联系我们</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
                  <li><a href="#">个人中心</a></li>
                </ul>
              </div>
            </div>
          </nav>
    </header>
    <!-- /头部 -->

    <!-- 轮播图 -->
    <section id="dw_carousel"></section>
    <!-- /轮播图 -->

    <!-- 关于我们 -->
    <section id="dw_about"></section>
    <!-- /关于我们 -->

    <!-- 产品特色 -->
    <section id="dw_product"></section>
    <!-- /产品特色 -->

    <!-- 热门课程 -->
    <section id="lk_hot"></section>
    <!-- /热门课程 -->

    <!-- 友情链接 -->
    <section id="dw_link"></section>
    <!-- /友情链接 -->

    <!-- 尾部 -->
    <footer id="dw_footer"></footer>
    <!-- /尾部 -->
<body>
    
    <script src="lib/jquery/jquery.js"></script>
    <!-- 引入bootstrap核心脚本文件 -->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

index.css

/* 通用样式 start */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #000;
}

.btn-register {
    color: #FFFFFF;
    background-color: #0AB4F7;
    border-color: #F4F7F7;
}

.btn-register:hover,
.btn-register:focus,
.btn-register:active,
.btn-register.active,
.open .dropdown-toggle.btn-register {
    color: #FFFFFF;
    background-color: #086DF2;
    border-color: #F4F7F7;
}

.btn-register:active,
.btn-register.active,
.open .dropdown-toggle.btn-register {
    background-image: none;
}

.btn-register.disabled,
.btn-register[disabled],
fieldset[disabled] .btn-register,
.btn-register.disabled:hover,
.btn-register[disabled]:hover,
fieldset[disabled] .btn-register:hover,
.btn-register.disabled:focus,
.btn-register[disabled]:focus,
fieldset[disabled] .btn-register:focus,
.btn-register.disabled:active,
.btn-register[disabled]:active,
fieldset[disabled] .btn-register:active,
.btn-register.disabled.active,
.btn-register[disabled].active,
fieldset[disabled] .btn-register.active {
    background-color: #0AB4F7;
    border-color: #F4F7F7;
}

.btn-register .badge {
    color: #0AB4F7;
    background-color: #FFFFFF;
}


@font-face {
    font-family: lk;
    src: url('../fonts/lk.eot') format('embedded-opentype'),
    url('../fonts/lk.svg') format('svg'),
    url('../fonts/lk.ttf') format('truetype'),
    url('../fonts/lk.woff') format('woff');
}

[class^="icon-"],
[class*="icon-"]{
    font-family: lk;
    font-style: normal;
}

/* 通用样式 end */

/* 头部样式 start */
#dw_header .top-bar {
    height: 40px;
    line-height: 39px;
    border-bottom: 1px solid #e0e0e0;

}

/* 采用了：子代选择器、相邻兄弟选择器 */
#dw_header .top-bar .container .row > div + div {
    border-left: 1px solid #e0e0e0;
}

#dw_header .top-bar .container .row .top-bar-1 a{
    position: relative;
}
#dw_header .top-bar .container .row .top-bar-1 a img{
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -65px;
    margin-top:  -10px;
    z-index: 9999;
}
#dw_header .top-bar .container .row .top-bar-1 a:hover img{
    display: block;
}
.icon-phone::before{
    content: '\e958';
    font-size: 13px;
}
.icon-tel::before{
    content: '\e942';
    font-size: 13px;
}


#dw_header .navbar-dw {
    background-color: #FFFFFF;
}
#dw_header .navbar-dw .navbar-brand {
    height: 70px;
    padding: 10px 15px;
}
#dw_header .navbar-dw .navbar-nav a {
    height: 70px;
    line-height: 40px;
}
#dw_header .navbar-dw .navbar-nav li.active a,
#dw_header .navbar-dw .navbar-nav li a:hover {
    background-color: transparent;
    border-bottom: 2px solid #0AB4F7;
}
#dw_header .navbar-dw .navbar-toggle {
    margin-top: 18px;
}
/* 头部样式 end */