Bootstrap组件 - 导航条

知识点

务必使用

创建一个默认的导航栏的步骤如下:

  1. 向上面的元素添加 role="navigation",有助于增加可访问性。
  2. 元素添加一个标题 class .navbar-header,内部包含了带有 class .navbar-brand 元素。这会让文本看起来更大一号。
  3. 为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

表单
.navbar-form


按钮、文本、链接

  1. 按钮:对于不包含在
    中的
  2. 文本:把文本包裹在 .navbar-text 中时,会正确的行距和颜色,通常使用

    标签。

  3. 链接:在导航组件之外的链接,使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置

组件排列
通过添加 .navbar-left.navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。
这些类是 .pull-left.pull-right 的 mixin 版本,但是他们被限定在了媒体查询(media query)中,这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

固定在顶部/底部、静止在顶部

  1. 固定在顶部: .navbar-fixed-top 类;还可包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。
  2. 固定在底部:.navbar-fixed-bottom
  3. 静止在顶部:.navbar-static-top

反色的导航条
.navbar-inverse

路径导航
.active标明当前页面的位置;
各路径间的分隔符已经自动通过 CSS 的 :beforecontent 属性添加了。

响应式导航
使用三个带有 class .icon-bar 创建所谓的汉堡按钮。

面包屑导航
Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;}

实践




    
    
    
    
    组件-导航栏
    
    
    
    



你可能感兴趣的:(Bootstrap组件 - 导航条)