编程 Javascript

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

Posted in Javascript onDecember 28, 2015

本文主要包括三大方面，大家仔细学习。

1、导航栏中的表单
导航栏中的表单不是使用 Bootstrap 表单章节中所讲到的默认的 class，它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。

下面的实例演示了这点：

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 默认的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-default" role="navigation"> 
 <div class="navbar-header"> 
 <a class="navbar-brand" href="#">林炳文在此～</a> 
 </div> 
 <div> 
 <ul class="nav navbar-nav"> 
  <li class="active"><a href="#">导航一</a></li> 
  <li><a href="#">导航二</a></li> 
  <li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  下拉菜单 
  <b class="caret"></b> 
  </a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">我是谁呢？</a></li> 
  <li><a href="#">我也不知道</a></li> 
  <li><a href="#">你是谁呢？</a></li> 
  <li class="divider"></li> 
  <li><a href="#">分离的链接</a></li> 
  <li class="divider"></li> 
  <li><a href="#">另一个分离的链接</a></li> 
  </ul> 
  </li> 
 </ul> 
 </div> 
 <div> 
 <form class="navbar-form navbar-left" role="search"> 
  <div class="form-group"> 
  <input type="text" class="form-control" placeholder="Search"> 
  </div> 
  <button type="submit" class="btn btn-default">搜一下</button> 
 </form> 
 </div> 
</nav> 
</body> 
</html>

效果：

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

黑色效果

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

2、导航栏中的按钮
您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。
下面的实例演示了这点：

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 默认的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
<nav class="navbar navbar-inverse" role="navigation"> 
 <div class="navbar-header"> 
 <a class="navbar-brand" href="#">林炳文在此～</a> 
 </div> 
 <div> 
 <ul class="nav navbar-nav"> 
  <li class="active"><a href="#">导航一</a></li> 
  <li><a href="#">导航二</a></li> 
  <li class="dropdown"> 
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
  下拉菜单 
  <b class="caret"></b> 
  </a> 
  <ul class="dropdown-menu"> 
  <li><a href="#">我是谁呢？</a></li> 
  <li><a href="#">我也不知道</a></li> 
  <li><a href="#">你是谁呢？</a></li> 
  <li class="divider"></li> 
  <li><a href="#">分离的链接</a></li> 
  <li class="divider"></li> 
  <li><a href="#">另一个分离的链接</a></li> 
  </ul> 
  </li> 
 </ul> 
 </div> 
 <div> 
 <form class="navbar-form navbar-left" role="search"> 
  <div class="form-group"> 
  <input type="text" class="form-control" placeholder="Search"> 
  </div> 
  <button type="submit" class="btn btn-default">搜一下</button> 
 </form> 
 <button type="button" class="btn btn-default navbar-btn"> 
  导航栏按钮 
 </button> 
 </div> 
</nav> 
</body> 
</html>

效果如下：

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

3、导航栏中的文本
如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。下面的实例演示了这点：

<div class="navbar-header"> 
 <a class="navbar-brand" href="#">林炳文在此～</a> 
 </div> 
 <div> 
 <p class="navbar-text">导航栏中的文本</p> 
 </div> 
 <div>

效果如下：

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，大家可以更加熟练地实现Bootstrap导航栏。

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

- Author -

林炳文Evankaka

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

鼠标图片振动代码

Jul 06 Javascript

js获取TreeView控件选中节点的Text和Value值的方法

Nov 24 Javascript

JavaScript中的对象和原型(一)

Aug 12 Javascript

详解js的事件代理（委托）

Dec 22 Javascript

微信小程序中显示html格式内容的方法

Apr 25 Javascript

jquery 键盘事件的使用方法详解

Sep 13 jQuery

浅谈函数调用的不同方式,以及this的指向

Sep 17 Javascript

Angular 开发学习之Angular CLI的安装使用

Dec 31 Javascript

jquery实现左右轮播切换效果

Jan 01 jQuery

Spring boot 和Vue开发中CORS跨域问题解决

Sep 05 Javascript

angularjs的单选框+ng-repeat的实现方法

Sep 12 Javascript

vue滚动tab跟随切换效果

Jun 29 Javascript

Bootstrap实现响应式导航栏效果

Dec 28 #Javascript

基于jQuery实现选取月份插件附源码下载

Dec 28 #Javascript

浅析AngularJs HTTP响应拦截器

Dec 28 #Javascript

Bootstrap实现默认导航栏效果

Sep 21 #Javascript

Angularjs注入拦截器实现Loading效果

Dec 28 #Javascript

AngularJS进行性能调优的7个建议

Dec 28 #Javascript

浅析AngularJS Filter用法

Dec 28 #Javascript

You might like

PHP 中提示undefined index如何解决(多种方法)

2016/03/16 PHP

JavaScript中实现块作用域的方法

2010/04/01 Javascript

JS定时器实例

2013/04/17 Javascript

JS 对输入框进行限制(常用的都有)

2013/07/30 Javascript

让网页跳转到指定位置的jquery代码非书签

2013/09/06 Javascript

js实现的捐赠管理完整实例

2015/01/20 Javascript

深入理解JavaScript系列（48）：对象创建模式（下篇）

2015/03/04 Javascript

推荐10 款 SVG 动画的 JavaScript 库

2015/03/24 Javascript

javascript制作2048游戏

2015/03/30 Javascript

js实现input密码框提示信息的方法(附html5实现方法)

2016/01/14 Javascript

JavaScript实现图片懒加载(Lazyload)

2016/11/28 Javascript

详解js静态资源文件请求的处理

2017/08/01 Javascript

vue页面离开后执行函数的实例

2018/03/13 Javascript

微信小程序dom操作的替代思路实例分析

2018/12/06 Javascript

JavaScript实现邮箱后缀提示功能的示例代码

2018/12/13 Javascript

微信小程序使用车牌号输入法的示例代码

2019/08/20 Javascript

Vue如何实现监听组件原生事件

2020/07/03 Javascript

Vue页面跳转传递参数及接收方式

2020/09/09 Javascript

[02:40]DOTA2英雄基础教程炼金术士

2013/12/23 DOTA

python中查看变量内存地址的方法

2015/05/05 Python

Python按行读取文件的实现方法【小文件和大文件读取】

2016/09/19 Python

python 读写txt文件 json文件的实现方法

2016/10/22 Python

Django Rest framework频率原理与限制

2019/07/26 Python

Python实现把多维数组展开成DataFrame

2019/11/30 Python

python在不同条件下的输入与输出

2020/02/13 Python

Pandas的数据过滤实现

2021/01/15 Python

美国时尚女装在线：Missguided

2016/12/03 全球购物

先进个人获奖感言

2014/01/24 职场文书

大二学生职业生涯规划书

2014/02/05 职场文书

商铺租房协议书范本

2014/12/04 职场文书

2014年大学宣传部工作总结

2014/12/19 职场文书

长城的导游词

2015/01/30 职场文书

亮剑观后感300字

2015/06/05 职场文书

我是特种兵观后感

2015/06/11 职场文书

换届选举主持词

2015/07/03 职场文书

MySQL GTID复制的具体使用

2022/05/20 MySQL