BootStrap实战三之导航条

目标网站：http://www.ghostchina.com/

导航条的创建

<nav class="main-navigation"> <!--主导航-->
        <div class="container">     <!--容器-->
            <div class="row">       <!--栅格系统-->
                <div class="col-md-12"><!--导航占整个屏幕-->
                    <div class="nav-header"><!--导航-->
                        <span class="nav-toggle-botton collapse" data-target="#main-menu">
                            <span class="sr-only">Toggle Navigation</span> <!--提示信息，可定义隐藏-->
                            <i class="fa fa-bars"></i>
                        </span>
                    </div>
                    <div class="collapse navbar-collapse id="main-menu"><!--这个div承载里面每一个选项，为方便操作，这顶id=“main-menu”-->
                        <ul class="menu"> <!--里面每个选项通过列表承载-->
                            <li class="nav-current" role="presentation"><a href="#">首页</a></li> <!--此 class 指定文字下方的下划线-->
                            <li role="presentation"><a href="#">论坛</a></li>
                            <li role="presentation"><a href="#">快捷手册</a></li>
                            <li role="presentation"><a href="#">中文文档</a></li>
                            <li role="presentation"><a href="#">下载</a></li>
                            <li role="presentation"><a href="#">关于</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

对应的css文件内容

/*导航条*/
.main-navigation{
    text-align: center;
    background: #ffffff;
    border-top: 1px solid #ebebeb;
    border-bottom: 3px solid #e1e1e1;
    margin-bottom: 35px; 
}
.main-navigation .menu{
    padding: 0;
    margin: 0;
}

.main-navigation .menu li.nav-current{
    border-bottom: 3px solid #e67e22;
    margin-bottom: -2px;
}

.main-navigation .menu li{
    list-style: none;
    display: inline-block;
    position: relative;
}

.main-navigation .menu li a{
    color: #505050;
    line-height: 4em;
    display: block;
    padding: 0 21px;
}