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. 打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身。例如:153是一个 "水仙花数 ",因为153=1的三次方+5的三次方+3的三次方。

    ---恢复内容开始--- ---恢复内容结束---

  2. 多年前写的DataTable与实体类的转换,已放github

    本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 阅读目录 介绍 起因 代码 UnitTest G ...

  3. 烂泥:linux文件同步之rsync学习(一)

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 这几天刚好有空就打算开始学习linux下的文件同步软件rsync,在学习rsync时,我们可以分以下几个步骤进行: 1. rsync是什么 2. rsy ...

  4. ZIP打包解包

    linux zip命令的基本用法是: zip [参数] [打包后的文件名] [打包的目录路径] linux zip命令参数列表: -a 将文件转成ASCII模式-F 尝试修复损坏的压缩文件-h 显示帮 ...

  5. 小菜学Chromium之OpenGL学习之二

    在这个教程里,我们一起来玩第一个OpenGL程序.它将显示一个空的OpenGL窗口,可以在窗口和全屏模式下切换,按ESC退出.它是我们以后应用程序的框架. 在CodeBlock里创建一个新的GLUT ...

  6. 报表开发工具中开放的部分图表js接口列表

    1.. 描述 报表开发工具FineReport 8.0版本中开放了部分图表js接口,在具体应用的过程中很多人都不知道这些接口到底有什么作用,该怎么应用,所以根据我自己的应用在下面归纳了这些新开放js接 ...

  7. 150929-拖延高于懒-HTML(End)

    四天未更了,分别是因为Xshell和虚拟机链接不好,累,懒(好像是三天..) 就像我一直嗷嗷着要去学开出一样,5年都没有去......拖延症似乎比懒癌更可怕.慢慢的慢慢的,人长大了,小时候的一些东西才 ...

  8. MVC、MVVM、MVP小结

    MVC MVC(Mode View Controller)是一种设计模式,它将应用划分为三个部分: 数据(模型).展现层(视图).用户交互(控制器). 一个事件发生的过程: ① 用户和应用产生交互 ② ...

  9. Codeforces 549G Happy Line[问题转换 sort]

    G. Happy Line time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  10. Java中的四套读写方案

    一.字节流读写方案 FileInputStream:字节流方式读取文本文件 FileoutputStream:字节流写入硬盘 二.字符流读写方案 FileReader:字符流读取文本 FileWrit ...