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

为你的网站增加亮点的9款jQuery插件推荐

May 03 Javascript

Javascript异步编程的4种方法让你写出更出色的程序

Jan 17 Javascript

Javascript模块化编程(三)require.js的用法及功能介绍

Jan 17 Javascript

jquery实现弹出div,始终显示在屏幕正中间的简单实例

Mar 08 Javascript

jquery中EasyUI实现异步树

Mar 01 Javascript

详解JS中Array对象扩展与String对象扩展

Jan 07 Javascript

Jquery获取第一个子元素简单实例

Jun 02 Javascript

15位和18位身份证JS校验的简单实例

Jul 18 Javascript

JS面向对象的程序设计相关知识小结

May 26 Javascript

vue实现点击关注后及时更新列表功能

Jun 26 Javascript

vue路由对不同界面进行传参及跳转的总结

Apr 20 Javascript

JavaScript布尔运算符原理使用解析

May 06 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

PHP5函数小全(分享)

2013/06/06 PHP

PHP获取中英混合字符串长度的方法

2014/06/07 PHP

php递归创建目录的方法

2015/02/02 PHP

PHP实现深度优先搜索算法(DFS,Depth First Search)详解

2017/09/16 PHP

php实现的后台表格分页功能示例

2017/10/23 PHP

php+ajax实现无刷新文件上传功能(ajaxuploadfile)

2018/02/11 PHP

laravel admin实现分类树/模型树的示例代码

2020/06/10 PHP

JSP跨iframe如何传递参数实现代码

2013/09/21 Javascript

javascript如何判断输入的url是否正确

2014/04/11 Javascript

AngularJs 弹出模态框（model）

2016/04/07 Javascript

深入理解Angular2 模板语法

2016/08/07 Javascript

详解Node.Js如何处理post数据

2016/09/19 Javascript

使用Angular.js开发的注意事项

2016/10/19 Javascript

jquery pagination分页插件使用详解（后台struts2）

2017/01/22 Javascript

Angular动态添加、删除输入框并计算值实例代码

2017/03/29 Javascript

Vue中正确使用jQuery的方法

2017/10/30 jQuery

解决js ajax同步请求造成浏览器假死的问题

2018/01/18 Javascript

在小程序/mpvue中使用flyio发起网络请求的方法

2018/09/13 Javascript

javascript实现倒计时效果

2020/02/17 Javascript

python使用pyhook监控键盘并实现切换歌曲的功能

2014/07/18 Python

Djang中静态文件配置方法

2015/07/30 Python

Python实现打印螺旋矩阵功能的方法

2017/11/21 Python

python递归实现快速排序

2018/08/18 Python

PyTorch基本数据类型（一）

2019/05/22 Python

Python文件操作函数用法实例详解

2019/12/24 Python

Django模板之基本的 for 循环和 List内容的显示方式

2020/03/31 Python

设置jupyter中DataFrame的显示限制方式

2020/04/12 Python

Dr. Martens马汀博士法国官网：马丁靴鼻祖

2020/01/15 全球购物

自我鉴定范文300字

2013/10/01 职场文书

物业管理毕业生的自我评价

2014/02/17 职场文书

爱国卫生月实施方案

2014/02/21 职场文书

建房协议书

2014/04/11 职场文书

六查六看个人剖析材料

2014/10/14 职场文书

我的中国梦主题教育活动总结

2015/05/07 职场文书

学校推普周活动总结

2015/05/07 职场文书

2015年数学教研工作总结

2015/07/22 职场文书