Skip to main content

组件

十几种可以重复使用的组件,包括按钮、下拉菜单、输入组、导航、提示框等。

--本章内容翻译由:樊潇洁友情提供

导航栏

导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的包裹。它很容易扩展,而且,在折叠板插件的帮助下,它可以轻松与幕后内容整合。

内容

基础

这些是你开始使用导航条之前需要知道的东西:

  • 导航条要求一个包裹的.navbar以及一个配色方案类(可以是.navbar-default或者.navbar-inverse)。
  • 当在一个导航条中使用多个组件时,必须用一些 对齐类
  • 导航条以及它们的内容默认是流式的。使用可选的容器以限制它们的横向宽度。
  • 使用.pull-left.pull-right以快速对齐子组件。
  • 使用<nav>元素确保其易用性,或者,如果使用一个更常用的元素,比如说<div>,要在每个导航条上添加一个role="navigation"属性,面向使用辅助技术的用户,把它明确地标示为一个地标区域。

支持内容

导航栏内置支持少量的子组件。视你的需要混合以及配合下面功能:

  • .navbar-brand 用于你的公司、产品名、项目名。
  • .navbar-nav 用于全高度、轻量级的导航(包括支持弹出菜单)。
  • .navbar-form 用于垂直居中的默认大小的输入框和按钮。
  • .navbar-toggler 用于使用我们的折叠板插件,以及别的导航切换行为。

这里有一些示例,演示了所有的包含在一个默认的轻导航条中的子组件:

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline navbar-form pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>

配色方案

将导航条主题化从未如此容易,这要归功于结合使用一个简单的链接颜色修饰类以及background-color实用工具。换句话说,你可以指定亮或暗、应用一个背景色。

下面是几个示例,演示我们的意思。

<nav class="navbar navbar-dark bg-inverse">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

容器

虽然这不是必需的,你可以把一个导航条包裹在一个.container中,以在网页中居中它,或者说在导航栏内部添加一个.container使内容居中。

<div class="container">
  <nav class="navbar navbar-light bg-faded">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>
<nav class="navbar navbar-light bg-faded">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

布局

导航栏可以静态放置(这是它默认的行为),或者固定在视口听顶部或底部。

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

可折叠的内容

我们的折叠块插件允许你使用一个<button><a>以切换隐藏内容。

Collapsed content

Toggleable via the navbar brand.
<div class="collapse" id="exCollapsingNavbar">
  <div class="bg-inverse p-a">
    <h4>Collapsed content</h4>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
  </button>
</nav>

制作更复杂的导航栏模式,比如说用在Bootstrap v3中,使用.navbar-togglebar-*类结合.navbar-toggler类。这些类覆盖了我们的响应式实用工具,从而只在内容满足显示的时候显示导航。

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#">Responsive navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>