Bootstrap后台导航

来源：互联网发布：wbinairbook mac os 编辑：程序博客网时间：2024/06/05 18:12

1.新建一个web项目admin，首先要把bootstrap这些库给导进来。

2.打开bootstrap中文网站，找到文档。点击起步里面有一个模版，把这个模版直接复制到我们的web项目的index.html中。

3.接下来在<body>里面设置导航

（注意，我们要将JavaScript导在最末尾，因为如果把JavaScript写在前面当系统加载这个JavaScript就会浪费一定的资源。我们应该让系统把页面加载完之后，最后再加载JavaScript。）

//首先定义一个导航，导航我们一般用navbar的样式。

//navbar-static-top使默认样式的圆角就变成方角并且充满整个屏幕。

//导航条的头部

</button>

//当页面缩小的时候，导航隐藏右上方出现一个按钮

<a href="#" class="navbar-brand">网站后台管理</a>

</div>

//注意，这只有加上导航条的样式下面的内容才会居中对齐。

//navbar-right设置右对齐，但是有一个问题就是它显示的过于靠边上。我们可以设置style="margin-right:25px;">

<li><a href="#"><span class="badge" style="background: #

运行效果C12E2A>23</span></a></li>

//设置导航条的背景

//设置注销前面的小图标

</ul>

</nav>

4.运行效果

当屏幕缩小：

0 0