1、新建一个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中的row类把页面一分为二,左边的侧边栏占用2列位置,右边为主窗口,占用10列位置。为了方便区分,给左边的侧边栏一个灰色的背景颜色。
5、在侧边栏内使用ul li来创建菜单列表,使用bootstrap中nav、nav-tabs、nav-stacked类定义ul的样式,创建四个菜单。
6、为“系统管理”创建二级菜单,使用nav-header、collapsed定义a标签的样式 ,同时设置a标签data-tog爿讥旌护gle="collapse"。二级菜单使用ul li创建,需要注意ul的class必须包含collapse、secondmenu类选择器。代码如下:
7、在浏览器运行test.html文件,查看代码实现的效果。由下面的效果可以看出,成功使用bootstrap实现侧边栏效果。