文档章节

4.12、Bootstrap V4自学之路-----组件---导航栏

Asktao
 Asktao
发布于 2016/03/24 21:34
字数 1496
阅读 86
收藏 1

基础

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

  • 导航条要求一个包裹的.navbar以及一个配色方案类(可以是.navbar-default或者.navbar-inverse)。

  • 当在一个导航条中使用多个组件时,必须用一些 对齐类

  • 导航条以及它们的内容默认是流式的。使用可选的容器以限制它们的横向宽度。

  • 使用.pull-left.pull-right以快速对齐子组件。

  • 使用<nav>元素确保其易用性,或者,如果使用一个更常用的元素,比如说<div>,要在每个导航条上添加一个role="navigation"属性,面向使用辅助技术的用户,把它明确地标示为一个地标区域。、

PS:越来越喜欢这样文档对基础的介绍了。

支持内容

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

  • .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>

伪代码上:

《nav class="navbar navbar-light bg-faded"》<br>
--| 《a class="navbar-brand" href="#"》<br>
--| 《ul class="nav navbar-nav"》<br>
--| --| 《li class="nav-item active"》<br>
--| --| --| 《a class="nav-link"》<br>
--| --| 《li class="nav-item"》<br>
--| --| --| 《a class="nav-link"》<br>
--| --| 《li class="nav-item"》<br>
--| --| --| 《a class="nav-link"》<br>
--| --| 《li class="nav-item"》<br>
--| --| --| 《a class="nav-link"》<br>
--| 《form class class="form-inline navbar-form pull-right"》<br>
--| --| 《input class="form-control" type="text"》<br>
--| --| 《button class="btn btn-success-outline"》<br>

配色方案

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

<nav class="navbar navbar-dark bg-inverse">
   <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>

<nav class="navbar navbar-dark bg-primary">
   <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>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
   <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>

容器

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

<div class="container">
  <nav class="navbar navbar-light bg-faded" style="background-color: #2aabd2">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>
          
<nav class="navbar navbar-light bg-faded" style="background-color: #2aabd2">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

PS:所有的DIV样式border:1px solid red; 所以来看基本一样,差别不大。

布局

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

<nav class="navbar navbar-fixed-top navbar-light bg-faded" style="background-color: #2aabd2">
  <a class="navbar-brand" href="#">固定在顶部</a>
</nav>

          1
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
<br><br><br>1<br><br><br><br><br><br><br><br><br>
    1
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded" style="background-color: #2aabd2">
  <a class="navbar-brand" href="#">固定在底部</a>
</nav>

PS:这里要说明。我截图用的是FF截屏插件,全页面截图。大家看底部显示不是那么ok。

但是事实上,他已经在我的屏幕最下方。并且当我滚动页面时,顶部导航条和底部导航条都在我屏幕可视范围的最高和最低处。

可折叠的内容

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

点击三条杠,出现文本。

<div class="collapse" id="exCollapsingNavbar">
  <div class="bg-inverse p-a">  <!--BOOTSTRAP.CSS中 .p-a{padding: 1rem !important;} -->
    <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类。这些类覆盖了我们的响应式实用工具,从而只在内容满足显示的时候显示导航。

效果在lg-up时

效果在lg-down时

<nav class="navbar navbar-light bg-faded">
  <button class="navbar-toggler hidden-xl-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>
PS:这个效果是依据 .hidden-*-up or down 自适应显示。很赞!啃起来有点吃力...



© 著作权归作者所有

Asktao
粉丝 27
博文 100
码字总数 116095
作品 0
丰台
程序员
私信 提问
Bootstrap V4 自学之路 文档目录

PS:将文档中的内容亲手梳理一遍,用自己的话重复一些遍。其中意义与COPY不同。是胜于蓝。 对自己的话! 课程目录 1、Bootstrap V4 自学之路------起步 1.1、Bootstrap V4自学之路------起步...

Asktao
2016/01/25
445
0
6.1、Bootstrap V4自学之路------迁移---升级到v4

升级到 v4 Bootstrap 4 几乎是对整个项目进行了重写。其中最显著的变化都概括到了下面的内容,与以前相比,拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。 当心!它在 flux 中...

Asktao
2016/03/26
335
0
4.18、Bootstrap V4自学之路-----内容---滚动监听

总体来说,用起来不是特别满意,先放一放吧。 导航条示例 滚动监听插件会根据滚动的位置,自动更新导航条的目标。滚动在导航条下面的区域,查看类的改变。弹出菜单的子项也同样会被高亮。 <n...

Asktao
2016/03/25
53
0
4.11、Bootstrap V4自学之路-----组件---导航

关于易用性 如果你使用导航来制作一个导航栏,请确保向的逻辑父元素添加了或者给整个导航条包裹一个元素。不要在的本身上面添加这个role,因为这将阻止它被使用辅助技术的用户声明为一个真正...

Asktao
2016/03/24
102
0
Bootstrap 3.3.0发布 版本4不再支持IE8

Bootstrap 3.3.0正式发布,该版本主要集中于Bug修复、提高可访问性以及更新文档。我们收到了来自28位贡献者的700多次提交。 其中值得关注的特性有: 添加少量的Less变量,以便于进行定制; ...

偶看
2014/10/31
7
0

没有更多内容

加载失败,请刷新页面

加载更多

一、docker 入坑(win10和Ubuntu 安装)

前言 终究还是绕不过去了,要学的知识真的是太多了,好在我们还有时间,docker 之前只闻其声,不曾真正的接触过,现在docker 越来越火,很多公司也都开始使用了。所以对于我们程序员而言,又...

quellanan2
19分钟前
4
0
AutoCompleteTextView

小技巧按菜单键 当菜单打开之前会调用onMenuOpened(int featereId,Menu menu),可以重写这个方法,弹出对话框或者Popmenu 再布局中添加控件AutoCompleteTextView. <AutoCompleteTextVie...

逆天游云
22分钟前
4
0
谷歌软件商店:推出5美元会员 可用数百个软件

腾讯科技讯,谷歌和苹果是全球两大智能手机操作系统的运营者,两家公司旗下分别拥有占据行业垄断地位的谷歌软件商店和苹果软件商店。据外媒最新消息,手机软件商店的商业模式正在发生一些变化...

linuxCool
44分钟前
3
0
RocketMQ 多副本前置篇:初探raft协议

Raft协议是分布式领域解决一致性的又一著名协议,主要包含Leader选举、日志复制两个部分。 温馨提示: 本文根据raft官方给出的raft动画进行学习,其动画展示地址:http://thesecretlivesofda...

中间件兴趣圈
45分钟前
3
0
elasticsearch 6.8.0 添加认证

1. 修改elasticsearch-6.8.0/config/elasticsearch.yml 最后添加一行:xpack.security.enabled: true 2. 初始化用户和密码 ./bin/elasticsearch-setup-passwords interactive 我这里初始化为......

coord
46分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部