今天我们来看看css组件效果以及其中比较重要的类，这些类都不难，关键要熟练掌握，搭配使用，灵活运用。关于前两篇中，css样式和布局的文章，大家可以在之前的文章中阅读。
一、导航组件
自己做了个导航，目前只有一级菜单，下一篇文章中，将给出二级菜单，涉及到js的插件，所以这里不在描述。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta 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="https://www.jb51.net/css/bootstrap.css"> <link href="https://www.jb51.net/css/bootstrap.min.css"> <link href="https://www.jb51.net/css/style.css"> <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <!-- bootstrap制作导航菜单 --> <div> <ul> <li role="presentation"><a href="#"><span> </span>首页</a></li> <li role="presentation"><a href="#"><span> </span>关于我</a></li> <li role="presentation"><a href="#"><span> </span>那些年</a></li> <li role="presentation"><a href="#"><span> </span>碎碎念</a></li> <li role="presentation"><a href="#"><span> </span>留言板</a></li> <li role="presentation"><a href="#"><span> </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> <li role="presentation"><a href="#">Home</a></li> ---注意加上role属性 <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <!--胶囊式标签页 竖直排列nav-stacked--> <ul> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <!--两端对齐导航nav-justified可实现导航均列对齐--> <ul> <li role="presentation"><a href="#">Home</a></li> <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><a href="#">Messages</a></li> </ul> <br><br>
再来看下带下拉菜单的导航情况：
<ul> <li role="presentation"> <a data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown<span></span> </a> <ul> <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"></li> --divider表示添加分隔线，一般都是给空的li或者span进行使用 <li role="presentation"><a href="#">Profile</a></li> <li role="presentation"><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折叠的效果，代码如下：