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

如何在一个页面显示多个百度地图

Apr 07 Javascript

深入理解javascript中defer的作用

Dec 11 Javascript

jQuery事件绑定与解除绑定实现方法

Apr 15 Javascript

javascript限制文本框输入值类型的方法

May 07 Javascript

JS实现把鼠标放到链接上出现滚动文字的方法

Apr 06 Javascript

详解JavaScript函数callee、call、apply的区别

Mar 08 Javascript

Vue js 的生命周期（看了就懂）(推荐)

Mar 29 Javascript

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

May 08 Javascript

深入剖析JavaScript instanceof 运算符

Jun 14 Javascript

js根据后缀判断文件文件类型的代码

May 09 Javascript

微信小程序tab左右滑动切换功能的实现代码

Feb 08 Javascript

动态规划之使用备忘录来改进Javascript函数

Apr 07 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/02/16 PHP

PHP开发中常用的字符串操作函数

2011/02/08 PHP

php小型企业库存管理系统的设计与实现代码

2011/05/16 PHP

linux系统下php安装mbstring扩展的二种方法

2014/01/20 PHP

javascript间隔刷新的简单实例

2013/11/14 Javascript

js改变Iframe中Src的方法

2015/05/05 Javascript

jquery实现的伪分页效果代码

2015/10/29 Javascript

跟我学习javascript的浮点数精度

2015/11/16 Javascript

JQuery实现DIV其他动画效果的简单实例

2016/09/18 Javascript

AngularJS 双向数据绑定详解简单实例

2016/10/20 Javascript

jQuery 表单序列化实例代码

2017/06/11 jQuery

vue2.0实现分页组件的实例代码

2017/06/22 Javascript

js实现鼠标移动到图片产生遮罩效果

2017/10/21 Javascript

vue form check 表单验证的实现代码

2018/12/09 Javascript

JS栈stack类的实现与使用方法示例

2019/01/31 Javascript

Vue 列表上下过渡效果的实例代码

2019/06/25 Javascript

javascript中call,apply,callee,caller用法实例分析

2019/07/24 Javascript

python批量同步web服务器代码核心程序

2014/09/01 Python

10种检测Python程序运行时间、CPU和内存占用的方法

2015/04/01 Python

简单介绍Python中的decode()方法的使用

2015/05/18 Python

TF-IDF与余弦相似性的应用（一）自动提取关键词

2017/12/21 Python

python中将\\uxxxx转换为Unicode字符串的方法

2018/09/06 Python

详解Python匿名函数（lambda函数）

2019/04/19 Python

NumPy排序的实现

2020/01/21 Python

在jupyter notebook中调用.ipynb文件方式

2020/04/14 Python

解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)

2020/08/07 Python

Django跨域请求原理及实现代码

2020/11/14 Python

伦敦剧院及景点门票：Encore Tickets

2018/07/01 全球购物

计算机通信工程专业毕业生推荐信

2013/12/24 职场文书

承诺书的格式范文

2014/03/28 职场文书

幼儿生日活动方案

2014/08/27 职场文书

党员民主生活会个人整改措施材料

2014/09/16 职场文书

2015年乡镇工会工作总结

2015/05/19 职场文书

千与千寻观后感

2015/06/04 职场文书

安全生产奖惩制度

2015/08/06 职场文书

CSS实现多个元素在盒子内两端对齐效果

2021/03/30 HTML / CSS