bootstrap菜单、按钮及导航学习笔记5-18导航（基础样式）

来源：互联网发布：文选上海古籍淘宝编辑：程序博客网时间：2024/05/05 23:49

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-

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>

0 0