Bootstrap2用户指南
4.5.2 导航条组件
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

下拉菜单

按钮组

按钮菜单

导航

导航条

基本导航条

导航条组件

Bootstrap的导航条组件有站点名称、导航链接、表单、搜索表单、下拉菜单等,可以根据需要选择使用。

所有导航组件默认按照在HTML中定义的顺序,从左到右依次排列。如果需要,可以使用 .pull-left 或 .pull-right 类,让它们向左或向右浮动来对齐链接、搜索表单或文本。

1、站点名称

站点名称使用 class="brand" 的链接元素来定义。如:

<a class="brand" href="#">歪脖网</a>

效果如图 4‑30所示:

Bootstrap导航条组件站点名称
图4-30 Bootstrap导航条组件站点名称

2、导航链接

导航链接使用 class="nav" 的列表定义,可以使用无序列表(<ul>),也可以使用有序列表(<ol>),暂不支持描述列表(<dl>)。如:

<ul class="nav">
  <li class="active"><a href="#">首页</a></li>
  <li><a href="#">教程</a></li>
  <li><a href="#">文章</a></li>
  <li><a href="#">素材</a></li>
  <li><a href="#">论坛</a></li>
</ul>

效果如图 4‑31所示:

Bootstrap导航条组件导航链接
图4-31 Bootstrap导航条组件导航链接

如果链接很多,可以使用类为 .divider-vertical 的空列表项,来在链接间添加分隔符,分隔符用来对链接进行分组。

3、表单

在导航条中嵌入表单,要使用 .navbar-form 类,这样才能保证表单具有合适的外边距,并且与导航样式一致。还可以添加 .pull-right 类,把表单定位到导航条的右侧。如:

<form class="navbar-form pull-right">
  <input type="text" class="span2">
  <button type="submit" class="btn">Submit</button>
</form>

效果如图 4‑32所示:

Bootstrap导航条组件表单
图4-32 Bootstrap导航条组件表单

4、搜索表单

只需用 .navbar-search 类代替 .navbar-form 类,并为输入框添加 .search-query 即可获得一个搜索表单。如:

<form class="navbar- search">
  <input type="text" class="search-query" placeholder="Search">
</form>

效果如图 4‑33所示:

Bootstrap导航条组件搜索表单
图4-33 Bootstrap导航条组件搜索表单

5、下拉菜单

如果要给导航条的某个列表项添加下拉菜单,只需给相应的列表项添加 .dropdown 类,再给它嵌套一个下拉菜单即可。如:

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="divider-vertical"></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Account
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
        </ul>
      </li>
   </ul>
  </div>
</div>

效果如图 4‑34所示:

Bootstrap导航条组件下拉菜单
图4-34 Bootstrap导航条组件下拉菜单

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验