可直接用的导航栏

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand" style="padding-top: 0"><img style="height: 50px" src="img/bootstrap-logo.png"/></div>
            <button class="navbar-toggle" data-toggle="collapse" data-target="#mycollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="mycollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="项目实战3.html"><span class="glyphicon glyphicon-home"></span> 首页</a> </li>
                <li><a href="资讯.html"><span class="glyphicon glyphicon-list"></span> 资讯</a> </li>
                <li><a href="案例.html"><span class="glyphicon glyphicon-fire"></span> 案例</a> </li>
                <li><a href="关于.html"><span class="glyphicon glyphicon-question-sign"></span> 关于</a> </li>
            </ul>
        </div>
    </div>
</nav>

导航栏项下拉菜单

<ul class="nav nav-tabs">
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown">
            others<span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">subfirst</a></li>
            <li><a href="#">subsecond</a></li>
        </ul>
    </li>
</ul>

侧栏悬浮式导航栏

<body  data-spy="scroll" data-target="#spy">
......
<div class="col-md-3 hidden-sm" id="spy">
    <ul  class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="80" style="box-shadow: 8px 8px 10px #ccc;top:200px;width: 200px;background-color: white;">
        <li class=""><a href="#t1">机构介绍</a> </li>
        <li><a href="#t2">工作室成员</a></li>
        <li><a href="#t3">加入我们</a> </li>
    </ul>
</div>

颜色控制

eee常用的背景色
ccc常用的阴影颜色
999
666
333

阴影控制

box-shadow: 8px 8px 10px #ccc

响应式CSS的写法

.tab-h2{
            font-size: 24px;
            color:#0059b2;
            text-align: center;letter-spacing: 1px;
        }
@media(min-width: 768px) {
            .tab-h2{
                font-size: 26px;
                color:#0059b2;
                text-align: center;letter-spacing: 1px;
            }
        }
@media(min-width: 992px) {
            .tab-h2{
                font-size: 28px;
                color:#0059b2;
                text-align: center;letter-spacing: 1px;
            }
        }
@media(min-width: 1200px){
        }