一系列Bootstrap导航条使用方法分享_javascript技巧

本文包含了Bootstrap导航条基础使用方法,供大家参考,具体内容如下

1、Bootstrap基础导航样式
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。比如右侧代码编辑器中就有一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式

<ul class="nav nav-tabs">
 <li><a href="##">Home</a></li>
 <li><a href="##">CSS3</a></li>
 <li><a href="##">Sass</a></li>
 <li><a href="##">jQuery</a></li>
 <li><a href="##">Responsive</a></li>
</ul>

2、Bootstrap基础导航条
在制作一个基础导航条时,主要分以下几步:

第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

“.navbar”样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有进行任何的设置

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

3、Bootstrap导航条添加标题
在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现。

<div class="navbar navbar-default" 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>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

4、Bootstrap导航条二级菜单
在导航条中添加二级菜单也非常简单

<div class="navbar navbar-default" 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 class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
</div>

5、Bootstrap带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。navbar-left”让表单左浮动,更好实现对齐。在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐。

<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 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="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></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>

6、Bootstrap导航条中的按钮、文本和链接
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>

7、Bootstrap固定导航条
很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式:
.navbar-fixed-top:导航条固定在浏览器窗口顶部
.navbar-fixed-bottom:导航条固定在浏览器窗口底部

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 …
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
 …
</div>

8、Bootstrap分页导航
带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式。平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法。

<ul class="pagination">
 <li><a href="#">«</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
</ul>

在Bootstrap框架中,也可以通过几个不同的情况来设置分页按钮大小。
1).通过“pagination-lg”让分页导航变大;
2).通过“pagination-sm”让分页导航变小

<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到,比如说个人博客,杂志网站等。这种分页导航是看不到具体的页码,只会提供一个“上一页”和“下一页”的按钮。
在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager类。

<ul class="pager">
 <li><a href="#">«上一页</a></li>
 <li><a href="#">下一页»</a></li>
</ul>

默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式
previous:让“上一步”按钮居左
next:让“下一步”按钮居右

<ul class="pager">
 <li class="previous"><a href="#">«上一页</a></li>
 <li class="next"><a href="#">下一页»</a></li>
</ul>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是关于Bootstrap 导航条的全部内容,希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap
导航条
bootstrap 导航条、bootstrap 导航条颜色、bootstrap 导航条居中、bootstrap 导航条高度、bootstrap 左侧导航条,以便于您获取更多的相关知识。

时间: 2016-04-29

一系列Bootstrap导航条使用方法分享_javascript技巧的相关文章

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

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

js实现各种复制到剪贴板的方法(分享)_javascript技巧

一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

JS实现的4种数字千位符格式化方法分享_javascript技巧

所谓的数字千分位形式,即从个位数起,每三位之间加一个逗号.例如"10,000".针对这个需求,我起初写了这样一个函数: 复制代码 代码如下: // 方法一 function toThousands(num) {     var result = [ ], counter = 0;     num = (num || 0).toString().split('');     for (var i = num.length - 1; i >= 0; i--) {         co

js图片卷帘门导航菜单特效代码分享_javascript技巧

本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于js实现图片卷帘门导航菜单特效代码,与以往的导航菜单相比,更具有创新性,不止是简单的向用户展示信息,而是更加丰富网站的整体内容. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/style.css" re

JS获取URL中参数值(QueryString)的4种方法分享_javascript技巧

方法一:正则法 复制代码 代码如下: function getQueryString(name) {    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');    var r = window.location.search.substr(1).match(reg);    if (r != null) {        return unescape(r[2]);    }    return null;}/

javascript静态页面传值的三种方法分享_javascript技巧

一:JavaScript静态页面值传递之URL篇能过URL进行传值.把要传递的信息接在URL上.Post.htm 复制代码 代码如下: <input type="text" name="username"><input type="text" name="sex"><input type="button" value="Post"><script

使用JSLint提高JS代码质量方法分享_javascript技巧

随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠"复制 / 粘贴"常用脚本完成简单前端任务的模式.JavaScript 语言本身是一种弱类型脚本语言,具有相对于 C++ 或 Java 语言更为松散的限制,一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现.然而,这种灵活性在带来高效的同时,也成为初学或者经验不足的 JavaScript 开发人员的噩梦.形式各异的代码风格.隐含错误的代码行为,严重影响

javascript中取前n天日期的两种方法分享_javascript技巧

方法一: 复制代码 代码如下: var d = new Date(); d = new Date(d.getFullYear(),d.getMonth(),d.getDate()-n);   方法二: 复制代码 代码如下: var now = new Date(); now.setTime(now.getTime()-n*24*60*60*1000);

关于JS控制代码暂停的实现方法分享_javascript技巧

方法一:这是在网上找的一个方法,可以用.但说实话,这个方法我不怎么明白...写得好复杂.这样做跟setTimeout能有多大区别? 复制代码 代码如下: function Pause(obj, iMinSecond) { if (window.eventList == null ) window.eventList = new Array(); var ind = -1; for (var i = 0; i < window.eventList.length; i++) { if (window