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. Iframe指定页面,并使其与该页面显示一致

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. sql server 索引分析相关sql

    select object_id('dbo.FT_CFP_TRADE_SUBACCOUNT') select * from sys.partitions where [object_id]=14672 ...

  3. 设计模式C#实现(十)——桥接模式

    意图 0 适用性 1 结构 2 实现 3 效果 4 意图 将抽象部分与它的实现部分分离,使它们都可以独立的变化. 适用性 1.不希望抽象和实现间有固定的绑定关系2.类的抽象以及它的实现都可以通过生成子 ...

  4. 在VMware上安装CentOS-6.5 minimal - 安装VMware Tools

    由于CentOS-6.5 minimal很多工具都默认没有安装,安装VMwareTools需要用到Perl,所以老伯建议先配置好网络再接着安装. 网络配置方法可以参考在VMware上安装CentOS- ...

  5. 又是周六了-MySQL特训

    hi 又是周六,又是磨蹭个一上午~午饭后开始吧 1.MySQL -----子查询与连接(三)----- ----使用INSERT...SELECT插入记录 --数据库内容的英文版本 由于我的WAMP中 ...

  6. 我要好offer之 二叉树大总结

    一. 二叉树定义 二叉树具有天然的递归特性,凡是二叉树相关题,首先应该联想到递归 struct BinTreeNode { BinTreeNode* left; BinTreeNode* right; ...

  7. pyenv 使用简介

    pyenv 是一个 python 版本管理工具,可以方便用户在不同的 python 版本间切换,例如我的电脑里默认的 python 是 2.6, 但我还想装 2.7 3.5 等.另有一个名为 pyen ...

  8. 06章 Struts2国际化

    1:什么是国际化? 国际化(internationalization)是设计和制造容易适应不同区域要求的产品的一种方式.它要求从产品中抽离所有的与语言,国家/地区和文化相关的元素.换言之,应用程序的功 ...

  9. ubuntu14上安装ros教程

    安装ROS 官方的安装教程地址 http://wiki.ros.org/cn/jade/Installation/Ubuntu 建议安装indigo版的 下面的教程是安装jade版的 配置Ubuntu ...

  10. jsp的九大内置对象和四大作用域

    定义:可以不加声明就在JSP页面脚本(Java程序片和Java表达式)中使用的成员变量? JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应):? 1.request对象(作用域)? 客户 ...