蛙蛙推薦：快速自定義Boostrap樣式

現在越來越多的網站使用Bootstrap，相信大家也審美疲勞了，所以我們要用Bootstrap的第一步就是先把頂部的導航欄來自定義一下。

我現在使用的是bootstrap3.0，頂部導航定義如下

<div class="navbar navbar-inverse">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/"><span class="glyphicon glyphicon-home"></span> 首頁</a></li>
                        <li><a href="/cates"><span class="glyphicon glyphicon-th"></span> 分類管理</a></li>
                        <li><a href="/userinfo"><span class="glyphicon glyphicon-user"></span> 用戶信息</a></li>
                        <li><a href="/about"><span class="glyphicon glyphicon-question-sign"></span> 關於我們</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>

然后在自己的css里加入類似如下的樣式，具體說明見注釋，很簡單很有效

/* 頂部菜單的整體背景色 */
.navbar-inverse {
    background:-moz-linear-gradient(0% 100% 90deg, #0436BF, #075DF2) repeat #03d178;
    border-color: #518DF5;
    background-color:#227ADB;   
    background-image:-o-linear-gradient(-90deg,rgba(112,179,228,1),rgba(66,154,219,0));
    background-image:-moz-linear-gradient(-90deg,rgba(112,179,228,1),rgba(66,154,219,0));
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(112,179,228,1)),to(rgba(66,154,219,0)));
    background-image:-webkit-linear-gradient(-90deg,rgba(112,179,228,1),rgba(66,154,219,0));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* LOGO 部分背景色和字體顏色*/
.navbar-inverse .navbar-brand {
    color: #fff;
}

/* LOGO 部分hover時背景色和字體顏色*/
.navbar-inverse .navbar-brand:hover, 
.navbar-inverse .navbar-brand:focus {
    color: #eee;
    background-color: transparent;
}

/* 普通菜單項的顏色和背景  */
.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}

/* 普通菜單項hover時的字體顏色和背景  */
.navbar-inverse .navbar-nav>li>a:hover, 
.navbar-inverse .navbar-nav>li>a:focus {
    color: #ddd;
    background-color: transparent;
}

/* 當前選中菜單項的字體顏色和背景  */
.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:hover, 
.navbar-inverse .navbar-nav>.active>a:focus {
    color: #fff;
    background:-moz-linear-gradient(0% 100% 90deg, #04BF36, #07F25D) repeat #0378d1;
    border-color: #8ADF37;
    background-color:#4ACF00;   
    background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); 
    background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));  
    background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));
}

最后的效果如下，當然，我不是美工，最后抄出來也不太好看，大家領會精神就行。

沒了