Bootstrap学习日记之导航栏元素

  在一个优秀的网站中,导航栏是必不可少的,接下来我们就来学习导航栏元素,这些元素有个特点就是使用相同的标记和基类.nav。Bootstrap中也提供了一个用于共享标记和状态的帮助器类,该表装饰的class,在不同的样式之间切换。

表格导航或者标签

  • 需要一个class="nav"的无序列表
  • 添加一个class="nav-tabs"
 

代码解读:如上nav是基类,类似字体图标中必须的类glyphicon,我们添加了class="nav-tabs"样式

运行结果

Bootstrap学习日记之导航栏元素_第1张图片

胶囊式的导航栏

  如果需要胶囊式的导航栏的话,只需要将上述样式的class="nav-tabs"换成class="nav-pills"

运行结果

垂直的导航栏

  使用垂直的导航栏也非常简单,只需要在

    中加上class="nav-stacked",导航栏的风格是可以堆叠的,比如我们可以设计垂直的胶囊导航栏,那么
      就变成

你可能感兴趣的:(Bootstrap)