【细解】如何基于bootstrap创建一个响应式的导航条

• 本地下载  

 

最终实现效果如下:

 

首先你得引入bootstrap与jquery

推荐一个CDN:http://cdn.gbtags.com/index.html

然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333

因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码

首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件

• 导航条
• 按钮
• 表单
• 下拉菜单

实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html进行了解

PS:class{}这里仅仅是注释并不是HTML代码

PS2:提供了HTML文件与一个在线的案例调试

 

导航条与导航条LOGO布局

1. <!--创建一个bootstarp导航条以及导航LOGO布局-->
2. <navclass="navbar navbar-default">
3. <divclass="navbar-header">
4. //do sth
5. </div>
6. </nav>

 

 

导航按钮

1. <!--创建一个按钮-->
2. <!--class{
3. navbar-toggle:向js传递这个按钮是可以点击的
4. collapsed:不结合navbar-collapse那就是一个默认class..不加貌似也没发现什么bug.
5. }
6. data-toggle="collapse":引入collapse插件
7. data-target="#navbar-gbtag":当点击按钮的时候跳转/打开哪一个标签
8. aria-expanded="false":辅助性阅读功能..针对特殊人群的设置-->
9. <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#navbar-gbtag"aria-expanded="false">
10. <!--在按钮上添加一些图标和说明
11. class{
12. sr-only:隐藏这个标签
13. incon-bar:图标样式
14. 动手改一下图标样式为glyphicon glyphicon-star试试
15. }-->
16. <spanclass="sr-only">点我啊</span>
17. <spanclass="icon-bar"></span>
18. <spanclass="icon-bar"></span>
19. <spanclass="icon-bar"></span>
20. </button>

 

 

 

表单

 

代码详情见原文：http://www.gbtags.com/gb/share/5758.htm