手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

怎样使用bootstrap制作侧边栏

时间:2024-10-12 00:38:12

1、新建一个html文件,命名为test.html,用于使用bootstrap制作侧边栏。

怎样使用bootstrap制作侧边栏

2、在test.html页面引入三个文件,第一个是bootstrap样式文件bootstrap.min.css,第二个是jquery.min.枣娣空郅js,第三个是bootstrap的js文件bootstrap.min.js,这三个文件是必须的,成功引入这三个文件才能利用bootstrap里面的属性来实现侧边栏。

怎样使用bootstrap制作侧边栏

3、使用bootstrap中的container-fluid类创建一个div容器,将在div里面实现带二级菜单的侧边栏。

怎样使用bootstrap制作侧边栏

4、使用bootstrap中的row类把页面一分为二,左边的侧边栏占用2列位置,右边为主窗口,占用10列位置。为了方便区分,给左边的侧边栏一个灰色的背景颜色。

怎样使用bootstrap制作侧边栏

5、在侧边栏内使用ul li来创建菜单列表,使用bootstrap中nav、nav-tabs、nav-stacked类定义ul的样式,创建四个菜单。

怎样使用bootstrap制作侧边栏

6、为“系统管理”创建二级菜单,使用nav-header、collapsed定义a标签的样式 ,同时设置a标签data-tog爿讥旌护gle="collapse"。二级菜单使用ul li创建,需要注意ul的class必须包含collapse、secondmenu类选择器。代码如下:

怎样使用bootstrap制作侧边栏

7、在浏览器运行test.html文件,查看代码实现的效果。由下面的效果可以看出,成功使用bootstrap实现侧边栏效果。

怎样使用bootstrap制作侧边栏
怎样使用bootstrap制作侧边栏
© 手抄报圈