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

jquery 可拖拽的窗体控件实现代码

Mar 21 Javascript

JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法

May 28 Javascript

jQuery中[attribute!=value]选择器用法实例

Dec 31 Javascript

jQuery实现的图片分组切换焦点图插件

Jan 06 Javascript

响应式表格之固定表头的简单实现

Aug 26 Javascript

微信小程序 checkbox组件详解及简单实例

Jan 10 Javascript

jQuery基于随机数解决中午吃什么去哪吃问题示例

Dec 29 jQuery

如何使用CSS3和JQuery easing 插件制作绚丽菜单

Jun 18 jQuery

微信小程序官方动态自定义底部tabBar的例子

Sep 04 Javascript

微信小程序返回箭头跳转到指定页面实例解析

Oct 08 Javascript

vue瀑布流组件实现上拉加载更多

Mar 10 Javascript

Vue实现导航栏菜单

Aug 19 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

smarty实现多级分类的方法

2014/12/05 PHP

PHP下载生成的csv文件及问题总结

2015/08/06 PHP

PHP7 mongoDB扩展使用的方法分享

2019/05/02 PHP

提高代码性能技巧谈—以创建千行表格为例

2006/07/01 Javascript

JavaScript的Cookies

2008/01/16 Javascript

兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码

2013/04/19 Javascript

JavaScript的递归之递归与循环示例介绍

2013/08/05 Javascript

javascript中创建对象的几种方法总结

2013/11/01 Javascript

利用javascript打开模态对话框(示例代码)

2014/01/11 Javascript

JS如何实现文本框随文本的长度而增长

2015/07/30 Javascript

跟我学习javascript的arguments对象

2015/11/16 Javascript

jQuery的Ajax用户认证和注册技术实例教程(附demo源码)

2015/12/08 Javascript

Javascript同时声明一连串（多个）变量的方法

2017/01/23 Javascript

鸿蒙系统中的 JS 开发框架

2020/09/18 Javascript

Vue基于localStorage存储信息代码实例

2020/11/16 Javascript

angular8.5集成TinyMce5的使用和详细配置(推荐)

2020/11/16 Javascript

[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局

2016/03/04 DOTA

学习python (1)

2006/10/31 Python

Python Matplotlib库入门指南

2015/05/18 Python

shelve 用来持久化任意的Python对象实例代码

2016/10/12 Python

python矩阵的转置和逆转实例

2018/12/12 Python

java中的控制结构(if,循环)详解

2019/06/26 Python

对Python的交互模式和直接运行.py文件的区别详解

2019/06/29 Python

Flask框架路由和视图用法实例分析

2019/11/07 Python

Python Merge函数原理及用法解析

2020/09/16 Python

css3模拟jq点击事件的实例代码

2017/07/06 HTML / CSS

华硕新加坡官方网上商店：ASUS Singapore

2020/07/09 全球购物

链表面试题-一个链表的结点结构

2015/05/04 面试题

家长给孩子的表扬信

2014/01/17 职场文书

名企HR怎样看待求职信

2014/02/23 职场文书

个人廉洁自律承诺书

2014/03/27 职场文书

2015年纪检监察工作总结

2015/04/08 职场文书

消防演习通知

2015/04/25 职场文书

2021-4-5课程——SQL Server查询【3】

2021/04/05 SQL Server

Django migrate报错的解决方案

2021/05/20 Python

springboot读取nacos配置文件

2022/05/20 Java/Android