本帖最后由 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 class="navbar 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> 效果： | 
收藏
淘帖
踩
