编程 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查看对象功能代码

Apr 25 Javascript

js中的replace方法使用介绍

Oct 28 Javascript

浅谈javascript实现八大排序

Apr 27 Javascript

纯js实现瀑布流布局及ajax动态新增数据

Apr 07 Javascript

实例讲解JavaScript中的this指向错误解决方法

Jun 13 Javascript

详解angular ui-grid之过滤器设置

Jun 07 Javascript

使用JSON格式提交数据到服务端的实例代码

Apr 01 Javascript

node中实现删除目录的几种方法

Jun 24 Javascript

使用layui 的layedit定义自己的toolbar方法

Sep 18 Javascript

微信小程序自定义波浪组件使用方法详解

Sep 21 Javascript

mpvue实现左侧导航与右侧内容的联动

Oct 21 Javascript

微信小程序国际化探索实现(附源码地址)

May 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-cli和任务计划实现刷新token功能的方法

2017/05/03 PHP

一段实时更新的时间代码

2006/07/07 Javascript

jQuery中的基本选择器用法学习教程

2016/04/14 Javascript

jQuery实现边框动态效果的实例代码

2016/09/23 Javascript

完美解决IE9浏览器出现的对象未定义问题

2016/09/29 Javascript

webpack常用配置项配置文件介绍

2016/11/07 Javascript

半个小时学json(json传递示例)

2016/12/25 Javascript

jquery.flot.js简单绘制折线图用法示例

2017/03/13 Javascript

认识less和webstrom的less配置方法

2017/08/02 Javascript

JavaScript调用模式与this关键字绑定的关系

2018/04/21 Javascript

Vue ElementUi同时校验多个表单(巧用new promise)

2018/06/06 Javascript

VUE在for循环里面根据内容值动态的加入class值的方法

2018/08/12 Javascript

jQuery仿移动端支付宝键盘的实现代码

2018/08/15 jQuery

微信小程序在地图选择地址并返回经纬度简单示例

2018/12/03 Javascript

详解package.json版本号规则

2019/08/01 Javascript

Vue项目页面跳转时浏览器窗口上方显示进度条功能

2020/03/26 Javascript

从0到1学习JavaScript编写贪吃蛇游戏

2020/07/28 Javascript

搭建vscode+vue环境的详细教程

2020/08/31 Javascript

零基础学Python（一）Python环境安装

2014/08/20 Python

Python实现文件按照日期命名的方法

2015/07/09 Python

详解Python操作RabbitMQ服务器消息队列的远程结果返回

2016/06/30 Python

python导入时小括号大作用

2017/01/10 Python

Python通过cv2读取多个USB摄像头

2019/08/28 Python

Python实现字符串中某个字母的替代功能

2019/10/21 Python

python 实现目录复制的三种小结

2019/12/04 Python

HTML5中Canvas与SVG的画图原理比较

2013/01/16 HTML / CSS

德国机场停车位比较和预订网站：Ich-parke-billiger

2018/01/08 全球购物

Aeropostale官网：美国著名校园品牌及青少年服饰品牌

2019/03/21 全球购物

NET程序员上机面试题

2015/05/23 面试题

工商治理实习生的自我评价分享

2014/02/20 职场文书

人事专员职责

2014/02/22 职场文书

《望庐山瀑布》教学反思

2014/04/22 职场文书

本科应届生自荐信

2014/06/29 职场文书

财务总监岗位职责

2015/02/03 职场文书

政协常委会议主持词

2015/07/03 职场文书

自制短波长线天线频率预选器 - 成功消除B2K之流的镜像

2021/04/22 无线电