匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。【细解】如何基于bootstrap创建一个响应式的导航条
shirleyqin216
发布时间: 10:13:09
最终实现效果如下:
首先你得引入bootstrap与jquery
推荐一个CDN:
然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333
因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码
首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件
实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自进行了解
PS:class{}这里仅仅是注释并不是HTML代码
PS2:提供了HTML文件与一个在线的案例调试
导航条与导航条LOGO布局
&!--创建一个bootstarp导航条以及导航LOGO布局--&
&nav class="navbar navbar-default"&
&div class="navbar-header"&
&!--创建一个按钮--&
&!--class{
navbar-toggle:向js传递这个按钮是可以点击的
collapsed:不结合navbar-collapse那就是一个默认class..不加貌似也没发现什么bug.
data-toggle="collapse":引入collapse插件
data-target="#navbar-gbtag":当点击按钮的时候跳转/打开哪一个标签
aria-expanded="false":辅助性阅读功能..针对特殊人群的设置--&
&button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-gbtag" aria-expanded="false"&
&!--在按钮上添加一些图标和说明
sr-only:隐藏这个标签
incon-bar:图标样式
动手改一下图标样式为glyphicon glyphicon-star试试
&span class="sr-only"&点我啊&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&div class="form-group"&
&!--class{
form-control:设置宽度为100%但是我们在父级元素form设置了navbar-form所以宽度会得到一定的控制
&input type="text" class="form-control" placeholder="搜索" /&
&/div&&!--表单组--&
&button type="submit" class="btn btn-default"&搜索&/button&
&/form&&!--表单--&
&li class="dropdown"&
&!--class{
dropdown-toggle:声明这是一个可以下拉的列表..实际上我没发现这个class的具体用途.取消也未发现什么bug
span .caret{
一个小三角的图标
data-toggle="dropdown" :引入下拉菜单组件的一个必要的属性
role="button":起辅助声明作用.声明这个是一个按钮--&
&a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&下拉菜单名称&span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li&&a href=""&bootstrap&/a&&/li&
&!--class{
divider:分隔线样式
role="separator":声明这个元素为一个分隔线--&
&li role="separator" class="divider"&&/li&
&li&&a href=""&请关注极客标签&/a&&/li&
&/ul&&!--下拉菜单--&
&完整内容请参见链接：
来源:/gbtags/p/4698873.htmlBootstrap入门Demo——制作路径导航栏 - 推酷
Bootstrap入门Demo——制作路径导航栏
今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面，感觉挺好看，然后去官网看了下组件，发现都挺漂亮的，然后看到了路径导航栏，刚好要做这个东西，然后就下了Bootstrap的源码看了看。
一，源码文件简介
下载完源码之后，我们肯定是想着先把源码中的Demo先运行下看看，但是，看着这么多英文的东西还是很迷茫，所以，从整体上熟悉下都有什么东西还是很有必要的。&&&&&
二，如何引入的问题
现在很多UI框架都是基于Jquery的，所以，在使用之前，如果需要，一定要先引入jquery文件，然后是框架的JS文件,css文件等，之前用过EasyUI,相比EasyUI的使用，bootstrap还是挺简单的，只需简单引入三个文件就好了。
三， 路径导航栏示例
因为只是为了使用路径导航栏这一个控件，所以，为了脱离Bootstrap的使用环境，我需要把路径导航栏这个控件的CSS和JS文件抽出来，我们在整体的CSS和JS的文件夹中：
找到图中两个文件，然后烤出使用到的样式段，因为做的这个路径导航栏只用到了CSS文件，所以，我们只需抽出用到的这段CSS文件，把它单独拿出来，放到我们系统的CSS元件库就ok了。
看下成果：
最近学习框架，发现为了快速上手，基本步骤都是先看Demo,然后了解大致都有什么内容，最后尝试改动Demo,框架用好了，感觉开发还蛮简单的，省去了好多花在界面上的时间。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致导航栏对于一个项目来说，是相当重要的一部分页面结构，所以Bootstrap导航栏提供了多种样式以供开发者引用，相对其他网站建设UI而言，Bootstrap提供的导航栏样式使用起来非常方便简洁，让我们看看应该如何调用Bootstrap导航栏样式。
Bootstrap导航栏默认样式
导航栏默认样式是灰色的，它的结构应该由nav标签来包裹，包含logo、页面列表等元素，简单的编码内容如下：&nav class="navbar navbar-default"&& &div class="container-fluid"&& &a class="navbar-brand" href="#"&佚站互联&/a&& &ul class="nav navbar-nav"&& & &li class="active"&&a href="#"&&/a&&/li&& & &li&&a href="#"&杭州网站设计&/a&&/li&& & &li&&a href="#"&杭州网站制作&/a&&/li&& &/ul&& &/div&&/nav&以上代码的内容就是最基础的一个Bootstrap导航栏样式，按照这个结构你也可以非常迅速地编写出自己的导航栏。
Bootstrap导航栏样式固定在顶端
现在将导航栏固定在页面顶端也是非常流行的使用方式，通过对应的样式引入，Bootstrap导航栏样式也可以非常容易地实现这一点。如果你想要将自己的导航栏固定到页面顶端，那么只需要在导航栏标签中引入navbar-fixed-top样式即可：&nav class="navbar navbar-default navbar-fixed-top"&& &div class="container"&& ...& &/div&&/nav&以上代码就将导航栏固定到了顶端，不管你怎么往下拉页面，都能够固定在顶端。
Bootstrap导航栏样式固定在底部
现在在一些网站设计中，会将一些类似登陆或者关注信息固定在页面底部，那么你也可以将这种形式通过Bootstrap导航栏来实现，只需要在里面添加固定底部的样式，即可实现该功能：&nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"&& &div class="container"&& & ...& &/div&&/nav&
Bootstrap导航栏反相样式
默认的Bootstrap导航栏样式是灰色的，如果你想要采用黑色，那么可以采用navbar的反相导航栏样式：&nav class="navbar navbar-inverse"&& ...&/nav&这种样式获得的导航栏样式是黑色的，能够满足你对于样式的额外需求。
写在文章最后
导航栏在网站建设项目中还是必不可少的，所以如果你引入了，就能够非常轻松地实现该组件样式，赶紧学习一下吧！
佚站互联 YEAHZAN，创新团队。本文版权所有，转载时请注明出处。
对此文章有疑问？可以留言提问，或者通过
我们来获得帮助。}