本文介绍如何使用Bootstrap快速搭建后台管理系统的导航栏。包括引入Bootstrap库、应用模版、设置导航样式及实现响应式布局等内容。
Bootstrap后台导航
1.新建一个web项目admin，首先要把bootstrap这些库给导进来。
2.打开bootstrap中文网站，找到文档。点击起步里面有一个模版，把这个模版直接复制到我们的web项目的index.html中。
3.接下来在<body>里面设置导航
（注意，我们要将JavaScript导在最末尾，因为如果把JavaScript写在前面当系统加载这个JavaScript就会浪费一定的资源。我们应该让系统把页面加载完之后，最后再加载JavaScript。）
<nav class="navbar navbar-default navbar-static-top">
//首先定义一个导航，导航我们一般用navbar的样式。
//navbar-static-top使默认样式的圆角就变成方角并且充满整个屏幕。
<div class="navbar-head">
//导航条的头部
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only></span>
<span class="icon-bar></span>
<span class="icon-bar></span>
</button>
//当页面缩小的时候，导航隐藏右上方出现一个按钮
<a href="#" class="navbar-brand">网站后台管理</a>
</div>
<ul class="nav navbar navbar-right" style="margin-right:25px;">
//注意，这只有加上导航条的样式下面的内容才会居中对齐。
//navbar-right设置右对齐，但是有一个问题就是它显示的过于靠边上。我们可以设置style="margin-right:25px;">
<li><a href="#"><span class="badge" style="background: #
运行效果C12E2A>23</span></a></li>
//设置导航条的背景
<li><a href="#"><span class="glyphicon glyphicon-off"></span> 注销</a></li>
//设置注销前面的小图标
</ul>
</nav>
4.运行效果
当屏幕缩小：
扫一扫
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
