新建一个html文件 ， 定名为test.html ， 用于利用bootstrap建造侧边栏 。
文章插图
2在test.html页面引入三个文件 ， 第一个是bootstrap样式文件bootstrap.min.css ， 第二个是jquery.min.js ， 第三个是bootstrap的js文件bootstrap.min.js ， 这三个文件是必需的 ， 当作功引入这三个文件才能操纵bootstrap里面的属性来实现侧边栏 。
文章插图
3利用bootstrap中的container-fluid类建立一个div容器 ， 将在div里面实现带二级菜单的侧边栏 。
文章插图
4【怎样使用bootstrap制作侧边栏】利用bootstrap中的row类把页面一分为二 ， 左边的侧边栏占用2各位置 ， 右边为本家儿窗囗 ， 占用10各位置 。 为了便利区分 ， 给左边的侧边栏一个灰色的布景颜色 。
文章插图
5在侧边栏内利用ul li来建立菜单列表 ， 利用bootstrap中nav、nav-tabs、nav-stacked类界说ul的样式 ， 建立四个菜单 。
文章插图
6为“系统办理”建立二级菜单 ， 利用nav-header、collapsed界说a标签的样式 ， 同时设置a标签data-toggle="collapse" 。 二级菜单利用ul li建立 ， 需要注重ul的class必需包含collapse、secondmenu类选择器 。 代码如下：
文章插图
7在浏览器运行test.html文件 ， 查看代码实现的结果 。 由下面的结果可以看出 ， 当作功利用bootstrap实现侧边栏结果 。
文章插图
文章插图
以上内容就是怎样使用bootstrap制作侧边栏的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 怎样消灭蚊子
- 怎样截取电影片段
- vivo手机使用技巧，这几个小功能一定要打开
- 花式跳绳怎样练习？
- 怎样快速教会小孩子跳绳？
- 如何使用vector取代动态字符数组
- CSS中animation动画属性使用详解
- 怎么学会使用keil软件！
- 辩论赛怎样做好一辩
- 怎样确定哪个网贷平台借款最好