Bootstrap导航条所支持的组件
支持的组件
Bootstrap3的导航条中,可以包含站点名称、导航链接、表单、下拉菜单、文本、非导航链接等组件,可以根据需要选择使用。
1、站点名称
站点名称通过 .navbar-brand 的链接元素来定义。将站点名称放在 .navbar-header容器中,它将永远可见,在小屏幕下也不会隐藏。如:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.waibo.wang/">歪脖网</a>
</div>
</div>
</nav>
效果如图 3‑44所示:
图3-44 站点名称
如果希望展示自己的品牌,你也可以将导航条中站点名称的文本内容替换为<img>
元素。由于.navbar-brand
已经被设置了内边距和高度,你需要根据自己的情况,添加一些 CSS 代码来覆盖默认设置。
2、导航链接
导航链接使用 .nav.navbar
的列表定义,可以使用无序列表(<ul>),也可以使用有序列表(<ol>),暂不支持描述列表(<dl>)。如:
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">专栏</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">工具</a></li>
</ul>
效果如图 3‑45所示:
图3-45 导航链接
3、表单
为导航条中的表单使用 .navbar-form 类,能够确保表单控件很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。还可以添加.navbar-left或 .navbar-right 类,来指定表单在导航条上出现的位置。如:
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
效果如图 3‑46所示:
图3-46 表单
4、按钮
对于不包含在<form>
中的<button>
元素,加上.navbar-btn
后,可以让它在导航条里垂直居中。如:
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
效果如图 3‑47所示:
图3-47 按钮
5、下拉菜单
如果要给导航条的某个列表项添加下拉菜单,只需给相应的列表项添加 .dropdown
类,再给它嵌套一个下拉菜单即可。如:
<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>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
效果如图 3‑48所示:
图3-48 下拉菜单
6、文本
希望在导航条中添加文本,把文本放在.navbar-text
中,可以让文本获得正确的默认颜色和反色设置。为了确保文本具有正确的行距,通常使用<p>
标签。如:
<p class="navbar-text">Signed in as Mark Otto</p>
效果如图 3‑48所示:
图3-49 文本
7、非导航链接
希望在导航条中添加非导航链接,把链接放在.
navbar-link中,可以让文本获得正确的默认颜色和反色设置。为了确保文本具有正确的行距,通常使用.navbar-text
的<p>
标签来包裹链接。如:
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
效果如图 3‑50所示:
图3-50 非导航链接
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap导航条所支持的组件相关推荐
- Bootstrap 导航条的组件
Bootstrap的导航条组件有站点名称.导航链接.表单.搜索表单.下拉菜单等,可以根据需要选择使用. 所有导航组件默认按照在HTML中定义的顺序,从左到右依次排列.如果需要,可以使用 .pull-l ...
- 鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
- Bootstrap导航条学习使用(一)
本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下 navbar: 导航条的基础样式 nav navbar-nav :导航条里菜单的的固定样式组合的class navba ...
- bootstrap 导航条居中
记录一下bootstrap导航条里面的导航按钮居中,并响应小屏幕 1:.navbar-collapse 设置 文字居中 text-align: center; 2:导航容器 .navbar-nav,设 ...
- Bootstrap导航条中组件的排列
组件的排列 通过添加.navbar-left和.navbar-right工具类,可以让导航链接.表单.按钮或文本等对齐.两个类都会通过 CSS 设置特定方向的浮动样式.例如,导航条中包含两个导航链接, ...
- bootstrap导航条文字颜色_XEditor基础组件:导航条
导航条是网页中最常见的组件之一,它通常位于网页的顶部.当我们想浏览网站的其他部分时,我们常常会回到网页顶部,然后点击导航条中的某个链接,跳转到其他页面. XEditor提供了各种各样的导航条,在使用导 ...
- Bootstrap 导航条
导航条(navbar)是一个常用的组件,也是 Bootstrap 的特色功能.导航条一般包含站点名和几个导航链接.还可以对导航条加以扩展,添加表单控件和下拉菜单等. 基本导航条 基本导航条中包含站点名 ...
- Bootstrap导航条、分页导航
[导航条navbar] 在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多. 导航条制作方法: 第一步:首先在制作导航的列表(<ul class=" ...
最新文章
- win10专业版关闭smartscreen
- 【C++ 学习笔记】 MFC CEdit
- CAS实现原子操作的三大问题
- android 热修复视频,Android热修复
- web前端教程:css实现容器高度适应屏幕高度
- uploader java_java-webuploader+Java如何实现分片+断点续传
- 【自动驾驶决策规划】RRT算法
- 物流管理过程中如何避免客户个人隐私信息泄露
- Landsat系列卫星介绍​
- css rgb转16进制,jquery获取元素颜色css('color')的值返回RGB。如何转十六进制
- 2020你必须掌握的CSS特效~建议收藏
- C语言统考试卷一及答案,2017年《计算机应用基础》统考试题及答案
- 个位数字加百位数字等于千位数字加上十位数字,且该该数为奇数
- 查看网段内正在使用的IP以及ip定位 ——CMD批处理循环
- 字体凹陷效果html,在PS中,想做凹进去的效果,怎么做?例如文字凹进木板中?...
- 华为p10关闭更新_华为P10正常升级和强制降级详细方法
- 【数据说第十二期】如何在留存数据中,找到业务的提升点?
- 天猫618红包口令怎么获取?天猫618红包使用条件有哪些?
- 车载注册蓝牙服务器,蓝牙配对码配备方法、系统、终端、服务器及车载设备专利_专利查询 - 天眼查...
- powerdesigner绘制UML模型(包括用例图、类图、时序图、E-R图……)
热门文章
- sql1032n sql6048n db2start启动不了 db2修改hostname
- 如何用各种编程语言杀死一条龙
- 发布一个mmap的trie_midrmm02_新浪博客
- Java中的weak reference 和 soft reference
- 笔记本CPU和显卡的选择标准
- 盗版Windows系统IE 7.0的安装
- android 函数名注册,Android JNI 函数注册的两种方式(静态注册/动态注册)
- 1051 mysql 主从_mysql配置主从读写分离的一些想法
- 河海大学计算机科学考研真题,河海大学计算机与信息学院845电子技术基础历年考研真题汇编.pdf...
- 前端基础6:背景常用属性和定位以及BFC