Bootstrap 导航条的组件
Bootstrap的导航条组件有站点名称、导航链接、表单、搜索表单、下拉菜单等,可以根据需要选择使用。
所有导航组件默认按照在HTML中定义的顺序,从左到右依次排列。如果需要,可以使用 .pull-left 或 .pull-right 类,让它们向左或向右浮动来对齐链接、搜索表单或文本。
1、站点名称
站点名称使用 class="brand" 的链接元素来定义。如:
<a class="brand" href="#">歪脖网</a>
效果如图 4‑30所示:
图4-30 Bootstrap导航条组件站点名称
2、导航链接
导航链接使用 class="nav" 的列表定义,可以使用无序列表(<ul>),也可以使用有序列表(<ol>),暂不支持描述列表(<dl>)。如:
<ul class="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>
效果如图 4‑31所示:
图4-31 Bootstrap导航条组件导航链接
如果链接很多,可以使用类为 .divider-vertical 的空列表项,来在链接间添加分隔符,分隔符用来对链接进行分组。
3、表单
在导航条中嵌入表单,要使用 .navbar-form 类,这样才能保证表单具有合适的外边距,并且与导航样式一致。还可以添加 .pull-right 类,把表单定位到导航条的右侧。如:
<form class="navbar-form pull-right">
<input type="text" class="span2">
<button type="submit" class="btn">Submit</button>
</form>
效果如图 4‑32所示:
图4-32 Bootstrap导航条组件表单
4、搜索表单
只需用 .navbar-search 类代替 .navbar-form 类,并为输入框添加 .search-query 即可获得一个搜索表单。如:
<form class="navbar- search">
<input type="text" class="search-query" placeholder="Search">
</form>
效果如图 4‑33所示:
图4-33 Bootstrap导航条组件搜索表单
5、下拉菜单
如果要给导航条的某个列表项添加下拉菜单,只需给相应的列表项添加 .dropdown 类,再给它嵌套一个下拉菜单即可。如:
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</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>
效果如图 4‑34所示:
图4-34 Bootstrap导航条组件下拉菜单
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap 导航条的组件相关推荐
- Bootstrap导航条中组件的排列
组件的排列 通过添加.navbar-left和.navbar-right工具类,可以让导航链接.表单.按钮或文本等对齐.两个类都会通过 CSS 设置特定方向的浮动样式.例如,导航条中包含两个导航链接, ...
- 鼠标点击出现下拉菜单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导航条所支持的组件
支持的组件 Bootstrap3的导航条中,可以包含站点名称.导航链接.表单.下拉菜单.文本.非导航链接等组件,可以根据需要选择使用. 1.站点名称 站点名称通过 .navbar-brand 的链接元 ...
- bootstrap导航条文字颜色_XEditor基础组件:导航条
导航条是网页中最常见的组件之一,它通常位于网页的顶部.当我们想浏览网站的其他部分时,我们常常会回到网页顶部,然后点击导航条中的某个链接,跳转到其他页面. XEditor提供了各种各样的导航条,在使用导 ...
- Bootstrap 导航条
导航条(navbar)是一个常用的组件,也是 Bootstrap 的特色功能.导航条一般包含站点名和几个导航链接.还可以对导航条加以扩展,添加表单控件和下拉菜单等. 基本导航条 基本导航条中包含站点名 ...
- Bootstrap导航条、分页导航
[导航条navbar] 在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多. 导航条制作方法: 第一步:首先在制作导航的列表(<ul class=" ...
最新文章
- 浅析如何扩大企业网站营销利益
- 配置Memcache服务器并实现主从复制功能(repcached)
- 帮 vs2019 找回丢失的 SDK
- spring(6) 渲染web视图
- 来不及解释!Linux常用命令大全,先收藏再说
- Git学习总结(3)——代码托管平台简介
- 大唐电信[600198]股票
- 设计模式之Facade---外观模式
- Jquery-无法有效获取当前窗口高度
- 一个命令,删除电脑上顽固的文件和文件夹|干货
- Unity联机人物加入游戏、同屏移动、与攻击
- 计算机共享文件夹拒绝访问权限,设置共享文件夹访问权限 拒绝访问的方法
- [分层最短路板子] 洛谷 P4568
- python3*1**3 表达式输出结果为_表达式[1, 2, 3]*3的执行结果为______________________。...
- WordPress增加网站地图
- Xgboost实践 | 第一名天池o2o优惠券的使用预测思路完整版
- ToC战场进入尾声,ToB市场战争厮杀即将升级?
- Webpack(打包工具)
- Techwiz OLED:透明显示
- 常见客户SEO问题解答:网站关键词优化到底怎么做?
热门文章
- 阿里云释放数据能力 开启大数据元年
- STM32 TIMER DIAGRAM
- 如何设置基于Windows 2000/2003/20008平台下的智能域名服务器
- 乐佰小迪智能机器人怎么使用_425台云洲智能水面救生机器人在山东寿光投入使用...
- MyEclipse6.5安装SVN插件的三种方法
- 8.Azure文件(文件共享)-NAS(中)
- 寿险的精算现值(EPV)
- Swift实现OC中的单例模式
- Android基础之Java多态、继承、重载和重写的区别
- 揭开 Facebook Growth Hacking 的神秘面纱,微信、人人为何都在效仿?