Bootstrap3实用教程
3.7.2 支持的组件
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

创建导航条

支持的组件

Bootstrap3的导航条中,可以包含站点名称、导航链接、表单、下拉菜单、文本、非导航链接等组件,可以根据需要选择使用。

1、站点名称

站点名称通过 .navbar-brand 的链接元素来定义。将站点名称放在 .navbar-header容器中,它将永远可见,在小屏幕下也不会隐藏。如:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="http://www.waibo.wang/">歪脖网</a>
    </div>
  </div>
</nav>

效果如图 3‑44所示:

站点名称
图3-44 站点名称

如果希望展示自己的品牌,你也可以将导航条中站点名称的文本内容替换为<img>元素。由于.navbar-brand已经被设置了内边距和高度,你需要根据自己的情况,添加一些 CSS 代码来覆盖默认设置。

2、导航链接

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

<ul class="nav navbar-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>

效果如图 3‑45所示:

导航链接
图3-45 导航链接

3、表单

为导航条中的表单使用 .navbar-form 类,能够确保表单控件很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。还可以添加.navbar-left或 .navbar-right 类,来指定表单在导航条上出现的位置。如:

<form class="navbar-form navbar-right">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

效果如图 3‑46所示:

表单
图3-46 表单

4、按钮

对于不包含在<form>中的<button>元素,加上.navbar-btn后,可以让它在导航条里垂直居中。如:

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

效果如图 3‑47所示:

按钮
图3-47 按钮

5、下拉菜单

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

<ul class="nav navbar-nav">
  <li class="active"><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
      <span class="caret"></span>
    </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>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>

效果如图 3‑48所示:

下拉菜单
图3-48 下拉菜单

6、文本

希望在导航条中添加文本,把文本放在.navbar-text中,可以让文本获得正确的默认颜色和反色设置。为了确保文本具有正确的行距,通常使用<p>标签。如:

<p class="navbar-text">Signed in as Mark Otto</p>

效果如图 3‑48所示:

文本
图3-49 文本

7、非导航链接

希望在导航条中添加非导航链接,把链接放在.navbar-link中,可以让文本获得正确的默认颜色和反色设置。为了确保文本具有正确的行距,通常使用.navbar-text<p>标签来包裹链接。如:

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

效果如图 3‑50所示:

非导航链接
图3-50 非导航链接

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验