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. 导航条中的按钮、文本和链接的更多相关文章

  1. Bootstrap系列 -- 40. 导航条二级菜单

    在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> < ...

  2. Bootstrap系列 -- 39. 导航条添加标题

    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...

  3. bootstrap 组件之"导航条"

    一个典型的导航条基本代码如下: <nav class="navbar navbar-default"> <div class="container&qu ...

  4. Bootstrap如何实现导航条?导航条实例详解

    本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在 ...

  5. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  6. OS开发(2):自定义tabbar | 导航条 | 突显中间按钮

    tabbar是放在APP底部的控件,也叫navigationbar或导航条.常见的APP都使用tabbar来进行功能分类的管理,比如微信.QQ等等. 需求是这样的,需要一个特殊一点的tabbar,要求 ...

  7. 【iOS开发-22】navigationBar导航栏,navigationItem建立:获取导航栏中的基本文本和button以及各种跳跃

    (1)navigationBar导航栏可以被看作是self.navigationController一个属性导航控制器,它可以由点直接表示self.navigationController.navig ...

  8. bootstrap 响应式导航条模板(含下拉菜单,弹出框)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Bootstrap 手风琴搭配导航条实现常用菜单栏

    效果 HTML代码 <div class="sidebar"> <div class="mc-search"> <div clas ...

随机推荐

  1. 关于CocoaPods update/CocoaPods install 慢、没反应、卡住的解决方案(Pods升级步骤)

    pod管理第三方库带来的便利大家有目共睹,但是--,估计有很多人会遇到这样一种尴尬情况: Pod install 或 Pod update  执行之后,就不动了,一直一个界面简直要崩溃... 网上有很 ...

  2. Makefile关键字

    @ makefile会把将要执行的命令行在命令执行前输出到屏幕上,使用@可以避免显示出命令本身 若@ echo 正在编译-则$make显示正在编译- 若echo 正在编译-则$make显示: echo ...

  3. mysql禁用autocommit,以及遇到的问题

    原文地址:http://blog.51yip.com/mysql/1230.html http://blog.csdn.net/ying_593254979/article/details/12095 ...

  4. linux 通过scp 复制备份恢复mysql数据表

    最近客户有个需求,小弟对于运维的东西也是半瓶醋,所以就果断的摸索了下.折磨了一个晚上终于算是搞定了.因为是两个不同的服务器,本来想用ftp,无奈小弟不是很熟悉,所以就用了scp,但是scp有个问题就是 ...

  5. 理解 OpenStack + Ceph (1):Ceph + OpenStack 集群部署和配置

    本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...

  6. js生成[n,m]的随机数

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

  7. MordenPHP阅读笔记(一)——先跑再说,跑累了再走

    ---恢复内容开始--- 后台一大堆半成品,或者是几乎不成的... 这本书不错,起码是别人推荐的,然后也是比较新的东西,学哪本不是学嘛,关键是得看. 今儿个网不好,科研所需的代码下不到,看书做笔记吧. ...

  8. Java Web之会话技术

    客户端与服务器通信过程中,会产生一些数据.比如,A和B分别登陆了某宝购物网站,A买了一个Android手机,B买了一个iPhone手机,当结账时,web服务器需要分别对用户A和B的信息分别保存.根据J ...

  9. AC日记——输出亲朋字符串 openjudge 1.7 05

    05:输出亲朋字符串 总时间限制:  1000ms 内存限制:  65536kB 描述 编写程序,求给定字符串s的亲朋字符串s1. 亲朋字符串s1定义如下:给定字符串s的第一个字符的ASCII值加第二 ...

  10. plsqldevloper + orcal环境搭建

    移动信息安全的漏洞和逆向原理      程序员11月书讯,评论得书啦      Get IT技能知识库,50个领域一键直达 关闭 PL/SQL Developer安装配置实践 2014-04-23 1 ...