脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap导航栏各元素操作方法

Bootstrap导航栏各元素操作方法(表单、按钮、文本)

 更新时间：2015年12月28日 14:18:26   作者：林炳文Evankaka  
这篇文章主要介绍了Bootstrap导航栏各元素操作方法，针对表单、按钮、文本进行操作，感兴趣的小伙伴们可以参考一下

本文主要包括三大方面，大家仔细学习。

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>

效果：

黑色效果

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>

效果如下：

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导航栏。

您可能感兴趣的文章:

相关文章

  • 用console.table()调试javascript

    用console.table()调试javascript

    昨天我了解到Chrome调试工具一个小巧的调试方法，在WDCC期间， Marcus Ross（@zahlenhelfer） 介绍了，chrome调试工具各种调试方法，这个只是其中一种，现在我来给大家秀下。
    2014-09-09
  • 原生JS实现汇率转换功能代码实例

    原生JS实现汇率转换功能代码实例

    这篇文章主要介绍了原生JS实现汇率转换功能代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • ES6通过babel转码使用webpack使用import关键字

    ES6通过babel转码使用webpack使用import关键字

    这篇文章主要介绍了es6通过babel转码还需要使用webpack才可以使用import关键字吗的相关资料,需要的朋友可以参考下
    2016-12-12
  • JavaScript 节流函数 Throttle 详解

    JavaScript 节流函数 Throttle 详解

    这篇文章主要为大家详细介绍了JavaScript 节流函数 Throttle，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 微信开发之企业付款到银行卡接口开发的示例代码

    微信开发之企业付款到银行卡接口开发的示例代码

    这篇文章主要介绍了微信开发之企业付款到银行卡接口开发的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Bootstrap下拉菜单样式

    Bootstrap下拉菜单样式

    这篇文章主要为大家详细介绍了Bootstrap下拉菜单样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 使用mouse事件实现简单的鼠标经过特效

    使用mouse事件实现简单的鼠标经过特效

    这篇文章主要介绍了使用mouse事件实现简单的鼠标经过特效的方法,需要的朋友可以参考下
    2015-01-01
  • 基于layui实现高级搜索（筛选）功能

    基于layui实现高级搜索（筛选）功能

    这篇文章主要为大家详细介绍了基于layui实现高级搜索、筛选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • javascript 关闭IE6、IE7

    javascript 关闭IE6、IE7

    通过javascript关闭浏览器的时候，“一般”会弹出系统的默认提示框，提示用户是否关闭浏览器，这可以通过javascript解决，但是IE6，IE7解决的办法是不一样的
    2009-06-06
  • JS实现的视频弹幕效果示例

    JS实现的视频弹幕效果示例

    这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2018-08-08

最新评论