编程 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 相关文章推荐

对象特征检测法判断浏览器对javascript对象的支持

Jul 25 Javascript

常用Extjs工具:Extjs.util.Format使用方法

Mar 22 Javascript

Jquery网页内滑动缓冲导航的实现代码

Apr 05 Javascript

使用node+vue.js实现SPA应用

Jan 28 Javascript

jQuery+PHP实现微信转盘抽奖功能的方法

May 25 Javascript

jQuery根据name属性进行查找的用法分析

Jun 23 Javascript

详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

Jul 13 Javascript

基于Vue的SPA动态修改页面title的方法(推荐)

Jan 02 Javascript

详解jQuery获取特殊属性的值以及设置内容

Nov 14 jQuery

Vue中Table组件Select的勾选和取消勾选事件详解

Mar 19 Javascript

微信小程序如何自定义table组件

Jun 29 Javascript

在antd Form表单中select设置初始值操作

Nov 02 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

基于mysql的论坛（1）

2006/10/09 PHP

PHP中将ip地址转成十进制数的两种实用方法

2013/08/15 PHP

zf框架的zend_cache缓存使用方法(zend框架)

2014/03/14 PHP

PHP 7.1新特性的汇总介绍

2016/12/16 PHP

php常用字符函数实例小结

2016/12/29 PHP

PHP中的正则表达式实例详解

2017/04/25 PHP

JavaScript 模仿vbs中的 DateAdd() 函数的代码

2007/08/13 Javascript

JS中setTimeout()的用法详解

2013/04/14 Javascript

javascript 手动给表增加数据的小例子

2013/07/10 Javascript

jQuery中append()方法用法实例

2014/12/25 Javascript

localResizeIMG先压缩后使用ajax无刷新上传（移动端）

2015/08/11 Javascript

再谈Javascript中的异步以及如何异步

2016/08/19 Javascript

ES6概念 Symbol toString()方法

2016/12/25 Javascript

element-ui 中使用upload多文件上传只请求一次接口

2019/07/19 Javascript

浅谈layui分页控件field参数接收对象的问题

2019/09/20 Javascript

解决Vue中的生命周期beforeDestory不触发的问题

2020/07/21 Javascript

python中threading超线程用法实例分析

2015/05/16 Python

在PyCharm中三步完成PyPy解释器的配置的方法

2018/10/29 Python

基于梯度爆炸的解决方法:clip gradient

2020/02/04 Python

CSS3线性渐变简单实现以及该属性在浏览器中的不同

2012/12/12 HTML / CSS

美国厨房和园艺工具网上商店：Nestneed

2019/08/24 全球购物

Sunglass Hut巴西网上商店：男女太阳镜

2020/10/04 全球购物

护理专业本科生自荐信

2013/10/01 职场文书

毕业生个人求职的自我评价

2013/10/28 职场文书

公务员培训心得体会

2013/12/28 职场文书

运动会解说词50字

2014/01/18 职场文书

产品质量保证书

2014/04/29 职场文书

团支部建设方案

2014/05/02 职场文书

意向书范本

2014/07/29 职场文书

关于清明节的演讲稿

2014/09/13 职场文书

高校师德师风自我剖析材料

2014/09/29 职场文书

煤矿安全学习心得体会

2016/01/18 职场文书

《倍数和因数》教学反思

2016/02/23 职场文书

五年级作文之劳动作文

2019/11/12 职场文书

多人盗宝《绿林侠盗》第三赛季4.5上线跨平台实装

2022/04/03 其他游戏

nginx location 带斜杠【 / 】与不带的区别

2022/04/13 Servers