web前端全系列 教程
1839个小节阅读:2244.2k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式
xxxxxxxxxx
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<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>
</ul>
</li>
</ul>
</div>
</div>
</nav>
将导航条内放置品牌标志的地方替换为 <img>
元素即可展示自己的品牌图标。由于 .navbar-brand
已经被设置了内补(padding)和高度(height),你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置
xxxxxxxxxx
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
将表单放置于 .navbar-form
之内可以呈现很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置
xxxxxxxxxx
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
对于不包含在 <form>
中的 <button>
元素,加上 .navbar-btn
后,可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法,例如, aria-label
、aria-labelledby
或者 title
属性。如果这些方法都没有,屏幕阅读器将使用 placeholder
属性(如果这个属性存在的话),但是请注意,使用 placeholder
代替其他识别标签的方式是不推荐的
xxxxxxxxxx
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
把文本包裹在 .navbar-text
中时,为了有正确的行距和颜色,通常使用 <p>
标签
xxxxxxxxxx
<p class="navbar-text">Signed in as Mark Otto</p>
或许你希望在标准的导航组件之外添加标准链接,那么,使用 .navbar-link
类可以让链接有正确的默认颜色和反色设置
xxxxxxxxxx
<p class="navbar-text">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
实时效果反馈
1. 下列可以实现导航条的类是哪一个:
A .nav-tabs
B .navbar
C .navbar-text
D nav-default
答案
1=>B