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. 第二题 已知有十六支男子足球队参加2008 北京奥运会。写一个程序,把这16 支球队随机分为4 个组。采用List集合和随机数 2008 北京奥运会男足参赛国家: 科特迪瓦,阿根廷,澳大利亚,塞尔维亚,荷兰,尼日利亚、日本,美国,中国,新西 兰,巴西,比利时,韩国,喀麦隆,洪都拉斯,意大利

    package com.hanqi.test; import java.util.ArrayList; import java.util.List; import java.util.Random; ...

  2. SQL Server调优系列进阶篇(深入剖析统计信息)

    前言 经过前几篇的分析,其实大体已经初窥到SQL Server统计信息的重要性了,所以本篇就要祭出这个神器了. 该篇内容会很长,坐好板凳,瓜子零食之类... 不废话,进正题 技术准备 数据库版本为SQ ...

  3. MongoDB学习——基础入门

    MongoDB--基础入门 MongoDB是目前比较流行的一种非关系型数据库(NoSql),他的优势这里不废话,我们关注怎么使用它. 安装 下载,首先肯定要去下载,我们去官网下载,在国内,可能没FQ可 ...

  4. C#调用自定义表类型参数

    -SQL SERVER生成测试环境: --创建测试DB CREATE database Sales; go USE Sales GO --创建表类型 IF TYPE_ID('LocalDT') IS ...

  5. ORA-01858: 在要求输入数字处找到非数字字符

    数据库   date  字段问题  insert into  WK_RE_LE  (DACL_FILE_ID,DACL_GROUP_ID,BDCDYH,DACL_LENGTH,ISVALID,DACL ...

  6. Linux下使用NDK编译FFMPEG(libstagefright)

    这个月要负责一个项目,使用FFMPEG渲染视频,主要是Android端的,由于性能要求,要使用硬解码,但网上大多数教程都是没有libstagefright的,所以个人觉得,生成的so库文件也是没有开启 ...

  7. 003.同时Ping多个IP(select实现IO复用,信号计时),ping程序升级版

    写这个的目的主要是为了以后的方便: 1.信号计时函数的使用 2.ip头的构建和icmp头的构建 3.selec函数t的用法 代码实现: /src/ping.h /* * ping.h * * Crea ...

  8. System V IPC(2)-信号量

    一.概述                                                    System V信号量与System V消息队列不同.它不是用来在进程间传递数据.它主要 ...

  9. OpenXml入门---word里面插入图片

    下面介绍如何在word里面插入图片,顺便小弟发现MSDN官网有完整的OpenXML教程,虽然是全英文的不过还是很有帮助的. Tips,原来摘抄代码里面没有模板,在copy过来发现插入word中的图片大 ...

  10. Windows Server 2016 预览版下载

    下载地址: Window Server 2016 Technical Preview 3 http://care.dlservice.microsoft.com/dl/download/7/3/C/7 ...