编程 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 一段左右两边随屏滚动的代码

Jun 18 Javascript

JavaScript 密码强度判断代码

Sep 05 Javascript

Extjs EditorGridPanel中ComboBox列的显示问题

Jul 04 Javascript

jQuery实现随意改变div任意属性的名称和值(部分原生js实现)

May 28 Javascript

javascript刷新父页面的各种方法汇总

Sep 03 Javascript

JS基于VML技术实现的五角星礼花效果代码

Oct 26 Javascript

使用PHP+JavaScript将HTML页面转换为图片的实例分享

Apr 18 Javascript

JavaScript编写一个简易购物车功能

Sep 17 Javascript

js模式化窗口问题![window.dialogArguments]

Oct 30 Javascript

微信小程序遇到修改数据后页面不渲染的问题解决

Mar 09 Javascript

提升node.js中使用redis的性能遇到的问题及解决方法

Oct 30 Javascript

antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

Aug 06 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图片验证码实例

2014/03/21 PHP

php微信公众开发之获取周边酒店信息的方法

2014/12/22 PHP

jQuery初学:find()方法及children方法的区别分析

2011/01/31 Javascript

基于jquery的一个拖拽到指定区域内的效果

2011/09/21 Javascript

js获取滚动距离的方法

2015/05/30 Javascript

json对象转为字符串,当做参数传递时加密解密的实现方法

2016/06/29 Javascript

vue.js实现请求数据的方法示例

2017/02/07 Javascript

vuex的使用及持久化state的方式详解

2018/01/23 Javascript

详解react-redux插件入门

2018/04/19 Javascript

react-navigation之动态修改title的内容

2018/09/26 Javascript

JS实现的点击按钮图片上下滚动效果示例

2019/01/28 Javascript

echarts实现词云自定义形状的示例代码

2019/02/20 Javascript

微信小程序使用websocket通讯的demo，含前后端代码，亲测可用

2019/05/22 Javascript

vue设置动态请求地址的例子

2019/11/01 Javascript

js中调用微信的扫描二维码功能的实现代码

2020/04/11 Javascript

vue 使用 vue-pdf 实现pdf在线预览的示例代码

2020/04/26 Javascript

JavaScript中数组去重的5种方法

2020/07/04 Javascript

vue实现导航菜单和编辑文本的示例代码

2020/07/04 Javascript

Python实现基本数据结构中栈的操作示例

2017/12/04 Python

Django Rest framework之权限的实现示例

2018/12/17 Python

Python中的元组介绍

2019/01/28 Python

python3图片文件批量重命名处理

2019/10/31 Python

Python调用高德API实现批量地址转经纬度并写入表格的功能

2021/01/12 Python

opencv python 对指针仪表读数识别的两种方式

2021/01/14 Python

解析html5 canvas实现背景鼠标连线动态效果代码

2019/06/17 HTML / CSS

泰国折扣酒店预订：Hotels2Thailand

2018/03/20 全球购物

C#里面可以避免一个类被其他类继承么？如何？

2013/09/26 面试题

幼儿园家长会欢迎词

2014/01/09 职场文书

幼儿园招生广告

2014/03/19 职场文书

护士求职自荐信范文

2014/03/19 职场文书

爱与责任师德演讲稿

2014/08/26 职场文书

房产销售独家委托书范本

2014/10/01 职场文书

2014乡镇机关党员个人对照检查材料思想汇报

2014/10/09 职场文书

先进班集体事迹材料

2014/12/25 职场文书

详解Python如何批量采集京东商品数据流程

2022/01/22 Python

Redis之RedisTemplate配置方式(序列和反序列化)

2022/03/13 Redis