首先你得引入bootstrap与jquery

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

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

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

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

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

实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http:///css/#forms }--> <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><!--表单--> <ul class="nav navbar-nav navbar-right"> <li><a href="">Soul</a></li> <li class="dropdown"> <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><!--下拉菜单--> </li><!--导航子元素2--> </ul><!--导航元素2 --> </div><!--导航布局--> </div><!--end 全屏布局--> </nav> </body></html>

以上内容是小编给大家介绍的BootStrap创建响应式导航条实例代码，希望对大家有所帮助，如果大家想了解更多资讯敬请关注网站，谢谢！