bootstrap-导航(垂直堆叠带分隔线的导航)
2017-05-24 16:36
211 查看
1.运行效果如图所示
2.实现代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>导航(垂直堆叠带分隔线的导航)</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="##">Responsive</a></li> </ul> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
相关文章推荐
- bootstrap 垂直导航 PS:一个很实用的~~布局吧~~词穷
- bootstrap-导航(垂直分组)
- bootstrap实现垂直导航框架
- bootstrap实现垂直导航框架
- bootstrap历练实例: 垂直胶囊式的导航菜单
- BootStrap学习笔记之nav导航栏和面包屑导航
- Bootstrap<基础十六> 导航元素
- bootstrap的导航
- html自定义垂直导航菜单(加强版--自定义传入menu参数,支持JSONArray、JSArray、JSONObject、JSObject)
- Bootstrap使用Tab和dropdown实现导航下拉菜单效果
- inline-block 实现横向居中带分隔线的导航
- Bootstrap响应式前端框架笔记十八——导航滚动监听
- 数据表的垂直分隔
- Bootstrap多级导航栏(级联导航)的实现代码
- Bootstrap模态框水平垂直居中与增加拖拽功能
- Bootstrap~多级导航(级联导航)的实现
- bootstrap(菜单、按钮、导航)
- Bootstrap 附加导航(Affix)插件
- Bootstrap 导航
- 垂直二级导航菜单用div+CSS架构实例