编程 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对象的property和prototype是什么一种关系

Aug 06 Javascript

Javascript 强制类型转换函数

May 17 Javascript

javascript实现页面内关键词高亮显示代码

Apr 03 Javascript

批量修改标签css样式以input标签为例

Jul 31 Javascript

jquery动态加载js/css文件方法(自写小函数)

Oct 11 Javascript

jquery表单插件Autotab使用方法详解

Jun 24 Javascript

详解JavaScript跨域总结与解决办法

Oct 31 Javascript

Web前端开发之水印、图片验证码

Nov 27 Javascript

jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

Mar 15 Javascript

Vue.js结合Ueditor富文本编辑器的实例代码

Jul 11 Javascript

jQuery实现适用于移动端的跑马灯抽奖特效示例

Jan 18 jQuery

JavaScript如何实现监听键盘输入和鼠标监点击

Jul 20 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数据类型之布尔型的介绍

2013/04/28 PHP

php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法

2013/09/28 PHP

php 启动报错如何解决

2014/01/17 PHP

php冒泡排序与快速排序实例详解

2015/12/07 PHP

PHP查询大量数据内存耗尽问题的解决方法

2016/10/28 PHP

慎用 somefunction.prototype 分析

2009/06/02 Javascript

node.js中使用node-schedule实现定时任务实例

2014/06/03 Javascript

javascript常用函数（1）

2015/11/04 Javascript

基于jQuery的Web上传插件Uploadify使用示例

2016/05/19 Javascript

Javascript设计模式之装饰者模式详解篇

2017/01/17 Javascript

用JS实现简单的登录验证功能

2017/07/28 Javascript

JQuery元素快速查找与操作

2018/04/22 jQuery

使用Vue组件实现一个简单弹窗效果

2018/04/23 Javascript

基于Nodejs的Tcp封包和解包的理解

2018/09/19 NodeJs

layui数据表格实现重载数据表格功能(搜索功能）

2019/07/27 Javascript

用 js 写一个 js 解释器过程详解

2019/08/02 Javascript

js对象属性名驼峰式转下划线的实例代码

2020/09/17 Javascript

利用Psyco提升Python运行速度

2014/12/24 Python

ubuntu中配置pyqt4环境教程

2017/12/27 Python

python遍历一个目录,输出所有的文件名的实例

2018/04/23 Python

python如何解析配置文件并应用到项目中

2019/06/27 Python

python利用7z批量解压rar的实现

2019/08/07 Python

浅谈对pytroch中torch.autograd.backward的思考

2019/12/27 Python

python 使用while循环输出*组成的菱形实例

2020/04/12 Python

python里的单引号和双引号的有什么作用

2020/06/17 Python

如何在python中判断变量的类型

2020/07/29 Python

详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

2016/12/20 HTML / CSS

html5在移动端的屏幕适应问题示例探讨

2014/06/15 HTML / CSS

美国性感女装网站：bebe

2017/03/04 全球购物

Spartoo美国：欧洲排名第一的在线时装零售商

2019/12/12 全球购物

Vrbo西班牙：预订您的度假公寓（公寓、乡村房屋…）

2020/04/27 全球购物

董事长职责范文

2013/11/08 职场文书

我的大学四年规划书范文2014

2014/09/26 职场文书

药品开票员岗位职责

2015/04/15 职场文书

html form表单基础入门案例讲解

2021/07/15 HTML / CSS

MySQL count(*)统计总数问题汇总

2022/09/23 MySQL