编程 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读取ASP设定的COOKIE

Nov 24 Javascript

HTML5之lang属性与dir属性的详解

Jun 19 Javascript

jquery阻止冒泡事件使用模拟事件

Sep 06 Javascript

javascript获取所有同类checkbox选项(实例代码)

Nov 07 Javascript

JavaScript禁止页面操作的示例代码

Dec 17 Javascript

浅谈JavaScript中的Math.atan()方法的使用

Jun 14 Javascript

Google 地图事件实例讲解

Aug 06 Javascript

原生JS实现的放大镜特效示例【测试可用】

Dec 08 Javascript

VUE 动态组件的应用案例分析

Dec 02 Javascript

ES6箭头函数和扩展实例分析

May 23 Javascript

antd配置config-overrides.js文件的操作

Oct 31 Javascript

JavaScript基于SVG的图片切换效果实例代码

Dec 15 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重新实现PHP脚本引擎内置函数

2007/03/06 PHP

php中json_decode()和json_encode()的使用方法

2012/06/04 PHP

php后门URL的防范

2013/11/12 PHP

ThinkPHP模板范围判断输出In标签与Range标签用法详解

2014/06/30 PHP

浅谈php中include文件变量作用域

2015/06/18 PHP

反射调用private方法实践(php、java)

2015/12/21 PHP

PHP数组的定义、初始化和数组元素的显示实现代码

2016/11/05 PHP

php实现数组重复数字统计实例

2018/09/30 PHP

jQuery JSON实现无刷新三级联动实例探讨

2013/05/28 Javascript

Ext修改GridPanel数据和字体颜色、css属性等

2014/06/13 Javascript

JQuery 使用attr方法实现下拉列表选中

2014/10/13 Javascript

JQuery实现鼠标移动图片显示描述层的方法

2015/06/25 Javascript

jQuery简单实现验证邮箱格式

2015/07/15 Javascript

jquery.form.js框架实现文件上传功能案例解析（springmvc）

2016/05/26 Javascript

AngularJS入门教程之链接与图片模板详解

2016/08/19 Javascript

详解angularJs模块ui-router之状态嵌套和视图嵌套

2017/04/28 Javascript

微信小程序scroll-view实现字幕滚动

2018/07/14 Javascript

webpack打包非模块化js的方法

2018/10/24 Javascript

JavaScript进阶（一）变量声明提升实例分析

2020/05/09 Javascript

JS字符串和数组如何实现相互转化

2020/07/02 Javascript

vue项目,代码提交至码云,iconfont的用法说明

2020/07/30 Javascript

[02:33]DOTA2英雄基础教程司夜刺客

2013/12/04 DOTA

[00:32]2018DOTA2亚洲邀请赛Newbee出场

2018/04/03 DOTA

Python比较两个图片相似度的方法

2015/03/13 Python

Python实现批量修改文件名实例

2015/07/08 Python

Python使用matplotlib绘图无法显示中文问题的解决方法

2018/03/14 Python

Python 类的特殊成员解析

2018/06/20 Python

Python爬虫过程解析之多线程获取小米应用商店数据

2020/11/14 Python

python中remove函数的踩坑记录

2021/01/04 Python

css3实现3d旋转动画特效

2015/03/10 HTML / CSS

LACOSTE波兰官网：Polo衫、服装和鞋类

2020/09/29 全球购物

群胜软件Java笔试题

2012/09/29 面试题

尽职尽责村干部自我鉴定

2014/01/23 职场文书

关爱残疾人标语

2014/06/25 职场文书

2015年保险公司个人工作总结

2015/05/22 职场文书

Python趣味挑战之教你用pygame画进度条

2021/05/31 Python