首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 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
加密(1) apt命令(1) logging(1) Pickle(1) 解密(1) netty(1) Launch Mode(1) 类加载器(1) NoSQL(1) json_extract(1)
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
JS实现的进制转换，浮点数相加，数字判断操作示例
2019/11/09 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
简单了解django缓存方式及配置
2019/07/19 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python实现图像的垂直投影示例
2020/01/17 Python
django正续或者倒序查库实例
2020/05/19 Python
日本高岛屋百货购物网站：TAKASHIMAYA
2019/03/24 全球购物
考核评语大全
2014/04/29 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件？
2021/05/28 Python