Bootstrap系列 -- 42. 导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式:
1、导航条中的按钮navbar-btn
2、导航条中的文本navbar-text
3、导航条中的普通链接navbar-link
但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
</ul>
</div> <div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">Bootstrap</a>
</div>
<div class="nav navbar-nav">
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
</div>
</div>
Bootstrap系列 -- 42. 导航条中的按钮、文本和链接的更多相关文章
- Bootstrap系列 -- 40. 导航条二级菜单
在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> < ...
- Bootstrap系列 -- 39. 导航条添加标题
在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...
- bootstrap 组件之"导航条"
一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...
- Bootstrap如何实现导航条?导航条实例详解
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...
- 1.bootstrap练习笔记-导航条
bootstrap练习笔记 1.关于导航栏 官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...
- OS开发(2):自定义tabbar | 导航条 | 突显中间按钮
tabbar是放在APP底部的控件,也叫navigationbar或导航条.常见的APP都使用tabbar来进行功能分类的管理,比如微信.QQ等等. 需求是这样的,需要一个特殊一点的tabbar,要求 ...
- 【iOS开发-22】navigationBar导航栏,navigationItem建立:获取导航栏中的基本文本和button以及各种跳跃
(1)navigationBar导航栏可以被看作是self.navigationController一个属性导航控制器,它可以由点直接表示self.navigationController.navig ...
- bootstrap 响应式导航条模板(含下拉菜单,弹出框)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap 手风琴搭配导航条实现常用菜单栏
效果 HTML代码 <div class="sidebar"> <div class="mc-search"> <div clas ...
随机推荐
- 九、Android学习第八天——广播机制与WIFI网络操作(转)
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 九.Android学习第八天——广播机制与WIFI网络操作 今天熟悉了An ...
- netbeans打包成jar
文件页里找到build.xml文件,打开在</project>前 加入以下代码保存之 按 Ctrl+C 复制代码 <target name="package-for-sto ...
- elasticsearch 集群搭建
需要编辑的文件是config/elasticsearch.yml文件 需要配置的项目有: # Use a descriptive name for your cluster: # cluster.na ...
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- [转]MySQL: Starting MySQL….. ERROR! The server quit without updating PID file
转自: http://icesquare.com/wordpress/mysql-starting-mysql-error-the-server-quit-without-updating-pid-f ...
- Objective-C声明在头文件和实现文件中的区别
Objective-C声明在头文件和实现文件中的区别 转自codecloud(有整理) 调试程序的时候,突然想到这个问题,百度一下发现有不少这方面的问答,粗略总结一下: 属性写在.h文件中和在.m文件 ...
- 单机搭建Android开发环境(一)
老话,工欲善其事必先利其器.为了学习安卓系统开发,我下了血本,更换了电脑.俗语,磨刀不误砍柴工,好钢用在刀刃上,为了发挥新本的最大潜能,我花费了很长时间去做配置和优化,都感觉有点偏执了.不过,从到目前 ...
- UVa11549计算器谜题[floyd判圈]
题意: 有个老式计算器,每次只能记住一个数字的前n位.现在输入一个整数k,然后反复平方,一直做下去,能得到的最大数是多少.例如,n=1,k=6,那么一次显示:6,3,9,1... 白书上的题 set, ...
- unity3d 的Quaternion.identity和transform.rotation区别是什么
Quaternion.identity就是指Quaternion(0,0,0,0),就是每旋转前的初始角度,是一个确切的值,而transform.rotation是指本物体的角度,值是不确定的,比如可 ...
- Unity3D粒子系统 合集
http://www.cnblogs.com/qinyuanpei/p/3659513.htmlhttp://www.cnblogs.com/qinghuaideren/p/3597666.html