bootstrap菜单、按钮及导航学习笔记5-18导航(基础样式)
2015-12-18 11:06
1176 查看
在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。***垂直堆叠导航只需要在“nav-
pills”的基础上添加一个“nav-stacked”类名即可:
运行效果如下:
垂直堆叠导航与胶囊形导航相比,主要是让导航项不浮动,让其垂直排列,然后给相邻导航项留有一定的间距:
/*源码请查阅bootstrap.css文件第3578行~第3584行*/
大家是否还记得,在下拉菜单一节中,下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果,只需要添加
在导航项之间添加“<li class=”nav-divider”></li>”即可:
pills”的基础上添加一个“nav-stacked”类名即可:
<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="disabled"><a href="##">Responsive</a></li> </ul>
运行效果如下:
垂直堆叠导航与胶囊形导航相比,主要是让导航项不浮动,让其垂直排列,然后给相邻导航项留有一定的间距:
/*源码请查阅bootstrap.css文件第3578行~第3584行*/
.nav-stacked > li { float: none; } .nav-stacked > li + li { margin-top: 2px; margin-left: 0; }
大家是否还记得,在下拉菜单一节中,下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果,只需要添加
在导航项之间添加“<li class=”nav-divider”></li>”即可:
<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>
相关文章推荐
- bootstrap菜单、按钮及导航学习笔记5-15导航(基础样式)
- bootstrap里的sr-only是什么属性?用途是什么?
- EF+MVC+Bootstrap 项目实践 Day9
- EF+MVC+Bootstrap 项目实践 Day8
- bootstrap学习网站
- bootstrap表单学习笔记3-3
- bootstrap表单学习笔记3-2
- bootstrap表单学习笔记3-1
- Bootstrap Tooltip显示换行和左对齐
- bootstrap菜单、按钮及导航学习笔记5-3
- datetimepicker-bootstrap默认年份1899修改问题
- bootstrap菜单、按钮及导航学习笔记5-2
- bootstrap菜单、按钮及导航学习笔记5-1
- 【Boots学习笔记】Bootstrap学习
- bootstrap ace admin 整合java HTML5 全新高大尚后台框架
- bootstrap学习笔记-列偏移
- Angular - - angular.bind、angular.bootstrap、angular.copy
- 【SSM框架 SSM项目源码 SSM源码 下载】java框架整合Springmvc+mybatis+shiro+bootstrap
- bootstrap栅格系统学习笔记
- angular bootstrap