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

作者: shirleyqin216
发布时间:2015-08-07 10:13:09

最终实现效果如下:

 

首先你得引入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. <nav class="navbar navbar-default">
  3. <div class="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. <button type="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. <span class="sr-only">点我啊</span>
  17. <span class="icon-bar"></span>
  18. <span class="icon-bar"></span>
  19. <span class="icon-bar"></span>
  20. </button>

 

表单

  1. <div class="form-group">
  2. <!--class{
  3. form-control:设置宽度为100%但是我们在父级元素form设置了navbar-form所以宽度会得到一定的控制
  4. }-->
  5. <input type="text" class="form-control" placeholder="搜索" />
  6. </div><!--表单组-->
  7. <button type="submit" class="btn btn-default">搜索</button>
  8. </form><!--表单-->

 

下拉菜单

  1. <li class="dropdown">
  2. <!--class{
  3. dropdown-toggle:声明这是一个可以下拉的列表..实际上我没发现这个class的具体用途.取消也未发现什么bug
  4. span .caret{
  5. 一个小三角的图标
  6. 图片样式
  7. }
  8. }
  9. data-toggle="dropdown" :引入下拉菜单组件的一个必要的属性
  10. role="button":起辅助声明作用.声明这个是一个按钮-->
  11. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单名称<span class="caret"></span></a>
  12. <ul class="dropdown-menu">
  13. <li><a href="">bootstrap</a></li>
  14. <!--class{
  15. divider:分隔线样式
  16. }
  17. role="separator":声明这个元素为一个分隔线-->
  18. <li role="separator" class="divider"></li>
  19. <li><a href="">请关注极客标签</a></li>
  20. </ul><!--下拉菜单-->
 完整内容请参见链接:http://www.gbtags.com/gb/share/5758.htm

标签: Bootstrap
来源:http://www.cnblogs.com/gbtags/p/4698873.html

推荐: