今天我們來看看css組件效果以及其中比較重要的類，這些類都不難，關鍵要熟練掌握，搭配使用，靈活運用。關於前兩篇中，css樣式和佈局的文章，大家可以在首頁進行閱讀。http://www.cnblogs.com/jtjds/ 一：導航組件 自己做了個導航，目前只有一級菜單，下一篇文章中，將給出二級菜單， ...
今天我們來看看css組件效果以及其中比較重要的類，這些類都不難，關鍵要熟練掌握，搭配使用，靈活運用。關於前兩篇中，css樣式和佈局的文章，大家可以在首頁進行閱讀。http://www.cnblogs.com/jtjds/
一：導航組件
自己做了個導航，目前只有一級菜單，下一篇文章中，將給出二級菜單，涉及到js的插件，所以這裡不在描述。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>二級菜單</title> <style> .sideBar-menu{margin:20px auto;width: 180px;} /*重寫滑鼠滑過的樣式*/ .nav-pills li a:hover { background-color: #337ab7; color: #fff; } </style> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <!-- bootstrap製作導航菜單 --> <div class="sideBar-menu "> <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#"><span class=" glyphicon glyphicon-th-large"> </span>首頁</a></li> <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-user"> </span>關於我</a></li> <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-camera"> </span>那些年</a></li> <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-pencil"> </span>碎碎念</a></li> <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-book"> </span>留言板</a></li> <li role="presentation" class=""><a href="#"><span class=" glyphicon glyphicon-heart"> </span>情感語</a></li> </ul> </div> </body> </html>
效果如下：
導航類需要註意以下幾點：
1：導航組件依賴於nav類。（即使用其它類時，都必須寫上這個類）
2：確保導航組件的可訪問性（添加role屬性）
3：涉及到的類包括nav-tabs ,nav-pills(使導航呈現膠囊狀)，nav-stacked(使水平導航變為豎直導航)，nav-justified(實現導航均等寬度排列)
4：對於disabled類，添加在導航頁中的鏈接時（包括標簽頁和導航頁），只是使其錶面上被禁用（顏色變灰，滑鼠形狀改變），實際功能依然還存在。
5：帶下拉菜單的導航使用。
我們來看下列子：可自行貼碼測試，不再截圖。
<!-- 導航依賴於nav類nav-tabs類依賴nav類 --> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> ---註意加上role屬性 <li role="presentation" class=""><a href="#">Profile</a></li> <li role="presentation" class=""><a href="#">Messages</a></li> </ul> <!--膠囊式標簽頁 豎直排列nav-stacked--> <ul class="nav nav-pills nav-stacked"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation" class=""><a href="#">Profile</a></li> <li role="presentation" class=""><a href="#">Messages</a></li> </ul> <!--兩端對齊導航nav-justified可實現導航均列對齊--> <ul class="nav nav-tabs nav-justified"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation" class=""><a href="#">Profile</a></li> <li role="presentation" class=""><a href="#">Messages</a></li> </ul> <br><br>
再來看下帶下拉菜單的導航情況：
<ul class="nav nav-pills"> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false"> Dropdown<span class="caret"></span>
</a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Action 111</a></li> <li><a href="#">Action 222</a></li> <li><a href="#">Action 333</a></li> </ul> </li> <li role="presentation" class="divider"></li> --divider表示添加分隔線，一般都是給空的li或者span進行使用 <li role="presentation" class=""><a href="#">Profile</a></li> <li role="presentation" class=""><a href="#">Messages</a></li> </ul>
其實對於使用下拉菜單類dropdown，基本格式都是像上面這樣，或者你把鏈接a變為button等之類，靈活運用即可。
二：導航條組件
註意點：
1：導航條即把組件全部橫向排列放置，包裹組件，類似於橫嚮導航的形式
2：確保可訪問性。使用<nav>標簽或者<div role="navigation">
3：涉及到導航條的類包括：navbar-inverse（實現背景顏色為黑色和文字白色效果）,navbar-fixed-top|navbar-fixed-bottom(固定導航條在頂部和底部)
navbar-left|navbar-right(通常給最後一個元素加navbar-right),navbar-text,navbar-link(設置連接顏色),navbar-btn(對於不包含在form表單里的按鈕，可
使用此類，達到垂直居中的效果)，navbar-form(達到垂直對齊效果)，navber-brand(設置品牌圖標)，navbar-collapse(摺疊)
我們來看下navbar-collapse摺疊的效果，代碼如下：
<!-- 導航條 collapsed表示摺疊--> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> --導航條頭部 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" 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="#"> brand </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> --摺疊欄目 <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">current</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- navbar-collapse 摺疊--> </div> </nav>
<!-- button中的三橫 --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" 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="#">Brand</a> </div>
實現效果如下：
即當我瀏覽器屏幕縮小時，原先的組件都將變為跟brand一行的 右邊的摺疊行（三橫線）。點擊該三橫按鈕，則組件將顯示出來。
三：分頁組件
註意點：
1：使用類pagination(加pagination-lg類可使其變大)
2：實現翻頁對齊與實現翻頁兩端對齊（前和後分別位於兩端）。
貼碼如下：
<!-- 分頁 類--> <nav> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#" aria-label="next"><span aria-hidden="true">»</span></a></li> </ul> </nav>
如果實現分頁變大直接加上<ul class="pagination pagination-lg">即可。
實現翻頁效果如下：主要用到pager類
<!--翻頁--> <nav> <ul class="pager"> <li class="active"><a href="#">previous</a></li> <li><a href="#">next</a></li> </ul> </nav> <!--對齊鏈接分居兩端加了previous類和next類--> <nav> <ul class="pager"> <li class="previous disabled"><a href="#"><span aria-hidden="true">←</span>older</a></li> <li class="next"><a href="#">newer<span aria-hidden="true">→</span></a></li> </ul> </nav>
上面兩個的效果如下：
四：徽章
作用：將信息以醒目的數字呈現出來。
<!--徽章 --> <a
