黑马程序员技术交流社区

标题: 【广州前端】bootstrap(二)navbar导航栏组件 [打印本页]

作者: AMay 时间: 2018-8-23 15:39
标题: 【广州前端】bootstrap(二)navbar导航栏组件
本帖最后由 AMay 于 2018-10-24 17:22 编辑

【简介】

Boostrap的导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。是一个非常友好的响应式组件之一。

【引入文件】

需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的，所以要先引入jq文件，再引入bootstrap的js文件。

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="lib/css/bootstrap.css">



<script src="lib/js/jquery.v1.12.4.js"></script>



<script src="lib/js/bootstrap.js"></script>

【基本结构与效果】

1. Html代码结构

[HTML] 纯文本查看 复制代码

<nav class="navbar navbar-default" role="navigation">



  <div class="container-fluid">



  <div class="navbar-header">



    <a class="navbar-brand" href="#">传智播客</a>



  </div>



  <div>



    <ul class="nav navbar-nav">



      <li class="active"><a href="#">前端与移动开发</a></li>



      <li><a href="#">JavaEE</a></li>



      <li><a href="#">测试</a></li>



      <li><a href="#">UI设计</a></li>



    </ul>



  </div>



  </div>



</nav>

2. 效果

【响应式导航栏结构与效果】

折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

1. Html代码结构

[HTML] 纯文本查看 复制代码

<nav class="navbar navbar-default" role="navigation">



  <div class="container-fluid">



  <div class="navbar-header">



    <button type="button" class="navbar-toggle" data-toggle="collapse"



        data-target="#example-navbar-collapse">



      <span class="sr-only">切换导航</span>



      <span class="icon-bar"></span>



      <span class="icon-bar"></span>



      <span class="icon-bar"></span>



    </button>



    <a class="navbar-brand" href="#">传智播客</a>



  </div>



  <div class="collapse navbar-collapse" id="example-navbar-collapse">



    <ul class="nav navbar-nav">



      <li class="active"><a href="#">前端与移动开发</a></li>



      <li><a href="#">JavaEE</a></li>



      <li><a href="#">测试</a></li>



      <li><a href="#">UI设计</a></li>



    </ul>



  </div>



  </div>



</nav>

2. 效果

在大屏幕pc端下面和普通导航栏是一样的效果。

在移动端的效果如下。

点击右侧按钮，导航栏的内容慢慢下拉显示

【可选的显示方案】

为最外层div添加一个额外.navbar类，就可把导航条固定在顶部或者底部。

1. 固定在顶部

2. 只需添加.navbar-fixed-top类，记得要给<body>增加40px的padding（内补）才能不让导航条挡住其下面的内容。一定要在Bootstrap核心CSS（即bootstrap.css）文件之后，响应式CSS（bootstrap-responsive.css）文件之前添加。

[HTML] 纯文本查看 复制代码

<div class="navbar navbar-fixed-top">



  ...



</div>

3. 固定在底部

添加.navbar-fixed-bottom即可。

...

</div>

4. 顶部（可隐藏）导航条

通过添加.navbar-static-top即可创建一个与页面等宽的导航条，它会随着页面向下滚动而消失。和.navbar-fixed-top类不同的是，你不需要对改变body的内补（padding）。

[HTML] 纯文本查看 复制代码

<div class="navbar navbar-static-top">



  ...



</div>

5. 反色

通过添加.navbar-inverse类可改变导航条的外观。

[HTML] 纯文本查看 复制代码

<div class="navbar navbar-inverse">



  ...



</div>

效果：

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2