航栏的表单与按钮

导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮:

实例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">  <form class="form-inline">    <input class="form-control" type="text" placeholder="Search">    <button class="btn btn-success" type="submit">Search</button>  </form></nav>

尝试一下 »

你也可以使用其他的输入框类,如 .input-group-addon 类用于在输入框前添加小标签。

实例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">  <form class="form-inline" action="/action_page.php">    <div class="input-group">      <div class="input-group-prepend">        <span class="input-group-text">@</span>      </div>      <input type="text" class="form-control" placeholder="Username">    </div>  </form></nav>

尝试一下 »

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本,可以保证水平对齐,颜色与内边距一样。

实例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links -->  <ul class="navbar-nav">    <li class="nav-item">      <a class="nav-link" href="#">Link 1</a>    </li>    <li class="nav-item">      <a class="nav-link" href="#">Link 2</a>    </li>  </ul>  <!-- Navbar text-->  <span class="navbar-text">    Navbar text  </span> </nav>

尝试一下 »

固定导航栏

导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定:

实例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  ...</nav>

尝试一下 »

.fixed-bottom 类用于设置导航栏固定在底部:

实例

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">  ...</nav>

尝试一下 »

导航栏案例

实例



尝试一下 »