第一次接触神奇的Bootstrap导航条

导航条（navbar）在Bootstrap中是一个独立组件，导航条（navbar）和导航（nav）在Bootstrap中是有明显的区别的。在导航条（navbar）中有一个背景色、而且导航条可以是纯链接、表单、表单和导航一起结合等多种形式。

1.实战一-带二级菜单和表单的导航条

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>导航条</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!--css样式-->
 <style >
  body{margin:30px;padding:30px;}
 </style>
</head>
<body>
<div class="navbar navbar-default" role="navigation">
 <!--标题通过“navbar-header”和“navbar-brand”来实现-->
 <div class="navbar-header">
  <a href="##" class="navbar-brand">标题</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="##">首页</a></li>
  <li class="dropdown">
  <a href="##" data-toggle="dropdown" class="dropdown-toggle">博客<span class="caret"></span></a>
  <!--二级菜单-->
  <ul class="dropdown-menu">
   <li><a href="##">二级菜单</a></li>
  </ul>
  </li>
  <li><a href="##">论坛</a></li>
 </ul>
 <!--表单-->
 <form action="##" class="navbar-form navbar-left" rol="search">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="请输入关键词" />
  </div>
  <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>
<!-- 放置在文档的结尾，使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

效果图如下：

Bootstrap的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素：
1）导航条中的按钮navbar-btn
2）导航条中的文本navbar-text
3）导航条中的普通链接navbar-link

 2.实战二-固定导航条

<!--顶部导航条-->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">标题</a>
 　</div>
  <ul class="nav navbar-nav">
  <li class="active"><a href="##">首页</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">论坛</a></li>
  </ul>
</div>
<!--底部导航条-->
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">标题</a>
 　</div>
  <ul class="nav navbar-nav">
  <li class="active"><a href="##">首页</a></li>
  <li><a href="##">博客</a></li>
  <li><a href="##">论坛</a></li>
  </ul>
</div>
<!--正文内容-->
<div class="content">网页正文内容</div>

效果图如下：

3.实战三-响应式导航条

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  <span class="sr-only"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
  <a href="##" class="navbar-brand">标题</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，
  显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="##">首页</a></li>
   <li><a href="##">博客</a></li>
   <li><a href="##">论坛</a></li>
  </ul>
 </div>
</div>

效果图如下：

有的时候会有需要反色的情况，Bootstrap为此提供了反色导航条，只是将navbar-deafult类名换成navbar-inverse，然后导航条的背景色和文本的颜色就会修改。

4.实战四-分页导航

1）带页码的分页导航

<!-- pagination：正常大小
 pagination-lg：让分页导航变大
 pagination-sm：让分页导航变小-->
<ul class="pagination pagination">
 <li><a href="#">«首页</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <!--当前状态-->
 <li class="active"><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <!--禁用状态-->
 <li class="disabled"><a href="#">尾页»</a></li>
</ul>

效果图如下：

2）翻页分页导航

<ul class="pager">
 <li><a href="#">«上一页</a></li>
 <!--禁用状态-->
 <li class="disabled"><a href="#">下一页»</a></li>
</ul>
<!--左右对齐-->
<ul class="pager">
 <li class="previous"><a href="#">«上一页</a></li>
 <li class="next"><a href="#">下一页»</a></li>
</ul>

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap每天必学之导航条(二)

    Bootstrap每天必学之导航条(二)

    一.基础导航条 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class="nav">)基础上添加类名"navbar-nav" 第二步:在列表外部添加一个容器(div),并且使用类名"navbar"和"navbar-default" <div class="navbar navbar-default"> <!-- 导航条标题--> <

  • 全面接触神奇的Bootstrap导航条实战篇

    全面接触神奇的Bootstrap导航条实战篇

    导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接.表单.表单和导航一起结合等多种形式. 1.实战一-带二级菜单和表单的导航条 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>导航条</title>

  • BootStrap创建响应式导航条实例代码

    BootStrap创建响应式导航条实例代码

    首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www

  • JS组件Bootstrap导航条使用方法详解

    JS组件Bootstrap导航条使用方法详解

    导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条 导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式 定制折叠模式与水平模式的阈值 根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求. 第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="

  • 一系列Bootstrap导航条使用方法分享

    本文包含了Bootstrap导航条基础使用方法,供大家参考,具体内容如下 1.Bootstrap基础导航样式 Bootstrap框架中制作导航条主要通过".nav"样式.默认的".nav"样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如"nav-tabs"."nav-pills"之类.比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式 <ul c

  • 基于bootstrap实现收缩导航条

    基于bootstrap实现收缩导航条

    本文实例为大家分享了bootstrap实现收缩导航条的具体代码,供大家参考,具体内容如下 效果图 贴上我的代码 <!DocType html> <html> <head> <meta charset="utf-8"> <!--设置浏览器优先使用什么模式来渲染页面--> <!--告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面. --> <meta http-equiv="X-UA-

  • Bootstrap每天必学之导航条

    Bootstrap每天必学之导航条

    1.导航条 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色(显示更突出).而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.在这一节中将一起探讨Bootstrap框架中导航条的使用. 导航条和导航一样,在Bootstrap框架中是一个独立组件,所以你也可以根据自己的需求使用不同的版本: LESS版本:对应的源文件navbar

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

  • BootStrap制作导航条实例代码

    BootStrap制作导航条实例代码

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. bootstrap 导航条摸索了好久,要不就是左边和右边不会水平对齐,要不就是颜色不一样,菜鸟最后终于搞定,直接把代码放这里,以后直接用 代码如下所示: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&

  • BootStrap响应式导航条实例介绍

    BootStrap响应式导航条实例介绍

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.响应式导航条就是可以在不同的设备下查看不同的效果. 下面给大家分享代码: <header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div c

随机推荐