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. (转)android.intent.action.MAIN与android.intent.category.LAUNCHER

    android.intent.action.MAIN决定应用程序最先启动的Activity android.intent.category.LAUNCHER决定应用程序是否显示在程序列表里 在网上看到 ...

  2. jmeter 性能测试 JDBC Request (查询数据库获取数据库数据) 的使用

    JDBC Request 这个Sampler可以向数据库发送一个jdbc请求(sql语句),并获取返回的数据库数据进行操作.它经常需要和JDBC Connection Configuration配置原 ...

  3. PowerShell命令卸载Win10内置应用

    Windows10系统预装了大批的应用,开始菜单右侧的磁贴即显示了其中的大部分,包括:人脉.日历.邮件.资讯.Xbox.Groove音乐.Camera相机.电影和电视.照片.手机助手.天气.OneNo ...

  4. Floyd算法解决多源最短路径问题

    Floyd-Warshall算法是解决任意两点间的最短路径的一种算法,可以正确处理有向图或负权(但不可存在负权回路)的最短路径问题,同时也被用于计算有向图的传递闭包. Floyd-Warshall算法 ...

  5. 这是啥-Cython语言简单介绍

    Cython是一种既可以编写c又可以编写python的编程语言,他的目标是成为一个python语言的超集,为python提供高层次的.面向对象的.函数化.动态编程功能.不同于纯粹的python,它提供 ...

  6. CF 375B Maximum Submatrix 2[预处理 计数排序]

    B. Maximum Submatrix 2 time limit per test 2 seconds memory limit per test 512 megabytes input stand ...

  7. NOIP水题合集[3/未完待续]

    NOIP2008pj传球游戏 题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球, ...

  8. 网络之TCP/IP四层模型

    应用层(应用层.表示层.会话层):FTP.Telnet.DNS.SMTP 传输层(传输层):TCP<传输控制协议> . UDP<用户数据报文协议> 网际互连层(网络层):IP. ...

  9. noip模拟赛(10.4) 字典序(dictionary)

    [题目描述] 你需要构造一个1~n的排列,使得它满足m个条件,每个条件形如(ai,bi),表示ai必须在bi前面.在此基础上,你需要使它的字典序最小. [输入数据] 第一行两个正整数n,m.接下来m行 ...

  10. Nuget自己打包引用的时候出现错误:Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package 1.0.1 supports: net (.NETFramework,Version=v0.0)

    Nuget自己打包引用的时候出现错误:Package is not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0). Package ...