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

js中if语句的几种优化代码写法

Mar 12 Javascript

jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

Jun 04 Javascript

Jquery增加鼠标中间功能mousewheel的实例代码

Sep 05 Javascript

jQuery实现的数值范围range2dslider选取插件特效多款代码分享

Aug 27 Javascript

Node.js开发者必须了解的4个JS要点

Feb 21 Javascript

Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

Jul 14 Javascript

Vue.js实现拖放效果的实例

Sep 30 Javascript

jQuery中animate的几种用法与注意事项

Dec 12 Javascript

js form表单input框限制20个字符，10个汉字代码实例

Apr 12 Javascript

vue组件库的在线主题编辑器的实现思路

Apr 03 Javascript

原生JavaScript实现拖动校验功能

Sep 29 Javascript

JS 基本概念详细介绍

Oct 16 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计划任务之关闭浏览器后仍然继续执行的函数

2010/07/22 PHP

PHP中VC6、VC9、TS、NTS版本的区别与用法详解

2013/10/26 PHP

php生成二维码时出现中文乱码的解决方法

2014/12/18 PHP

用ASP将SQL搜索出来的内容导出为TXT的代码

2007/07/27 Javascript

jquery动画1.加载指示器

2012/08/24 Javascript

jquery创建一个新的节点对象(自定义结构/内容)的好方法

2013/01/21 Javascript

百度UEditor编辑器如何关闭抓取远程图片功能

2015/03/03 Javascript

Bootstrap的fileinput插件实现多文件上传的方法

2016/09/05 Javascript

详解Vue如何支持JSX语法

2017/11/10 Javascript

微信小程序实现留言板

2018/10/31 Javascript

详解vuex之store拆分即多模块状态管理(modules)篇

2018/11/13 Javascript

浅析vue 函数配置项watch及函数 $watch 源码分享

2018/11/22 Javascript

微信小程序云开发之新手环境配置

2019/05/16 Javascript

layui的layedit富文本赋值方法

2019/09/18 Javascript

Python的函数嵌套的使用方法

2014/01/24 Python

python中lambda函数 list comprehension 和 zip函数使用指南

2014/09/28 Python

Python学习小技巧之列表项的排序

2017/05/20 Python

python 换位密码算法的实例详解

2017/07/19 Python

django 实现编写控制登录和访问权限控制的中间件方法

2019/01/15 Python

python利用google翻译方法实例（翻译字幕文件）

2020/09/21 Python

利用python汇总统计多张Excel

2020/09/22 Python

浅谈Python __init__.py的作用

2020/10/28 Python

python 元组和列表的区别

2020/12/30 Python

澳大利亚最好的在线时尚精品店：Princess Polly

2018/01/03 全球购物

Bibloo奥地利：购买女装、男装、童装、鞋和配件

2018/10/18 全球购物

三月法制宣传月活动总结

2014/07/03 职场文书

IT工程师岗位职责

2014/07/04 职场文书

信用卡工资证明范本

2014/10/17 职场文书

婚前财产协议书范本

2014/10/19 职场文书

2015年机关后勤工作总结

2015/05/26 职场文书

哈姆雷特读书笔记

2015/06/29 职场文书

2015大学党建带团建工作总结

2015/07/23 职场文书

数学复习课教学反思

2016/02/18 职场文书

Navicat连接MySQL错误描述分析

2021/06/02 MySQL

详解Python+OpenCV进行基础的图像操作

2022/02/15 Python

MSSQL基本语法操作

2022/04/11 SQL Server