分享程序员开发的那些事...
更新时间：2022-08-17 08:22:04
开发者学堂课程【前端开发框架Bootstrap使用教程：26_Bootstrap组件_导航条1（默认样式的导航条，品牌）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4245
目录
一、默认样式的导航条
二、品牌图标
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
1.导航条内所包含元素溢出
由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：
减少导航条内所有元素所占据的宽度。
在某些尺寸的屏幕上利用 响应式工具类来隐藏导航条内的一些元素。
修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。
2.依赖 JavaScript 插件
如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-collapse 内所包含的内容也将不可见。
响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。
3.修改视口的阈值，从而影响导航条的排列模式
当浏览器视口（viewport）的宽度小于 @grid-float-breakpoint 值时，导航条内部的元素变为折叠排列，也就是变现为移动设备展现模式；当浏览器视口（viewport）的宽度大于 @grid-float-breakpoint 值时，导航条内部的元素变为水平排列，也就是变现为非移动设备展现模式。通过调整源码中的这个值，就可以控制导航条何时堆叠排列，何时水平排列。默认值是 768px （小屏幕 -- 或者说是平板 --的最小值，或者说是平板）。
4.导航条的可访问性
务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
范例：
< !DOCTYPE html>
<html lang-"en">
<head>
<meta charset="UTF-8">
<title>与航条</title>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class"container-fluid">
<ul class="nav navbar-nav">
<li class-"active">
<a href="#">
下拉菜单
<span class="sr-only"></span>
</a>
</li>
<ul class="dropdown- menu" role= "menu">
<li><a href="#">1</a> </li>
< li><a href="#">1</a> </li>
<li><a href="#">1</a> </li>
<li><a href="#">1</a> </li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="jquery-2.2.1.min.js '></script>
<script src="bootstrap.min.js''></script>
</body>
</html>
将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。
< !DOCTYPE html>
<html lang-"en">
<head>
<meta charset="UTF-8">
<title>与航条</title>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class"container-fluid">
<div class="navbar-header">
<a class="navbar- brand">
<img src="baidu. png" style="width: 75px">
</a>
</div>
<ul class="nav navbar-nav">
<li class-"active">
<a href="#">
下拉菜单
<span class="sr-only"></span>
</a>
</li>
<ul class="dropdown- menu" role= "menu">
<li><a href="#">1</a> </li>
< li><a href="#">1</a> </li>
<li><a href="#">1</a> </li>
<li><a href="#">1</a> </li>
</ul>
</li>
</ul>
</div>
</nav>
<script src="jquery-2.2.1.min.js '></script>
<script src="bootstrap.min.js''></script>
</body>
</html>