编程 Javascript

Bootstrap实现默认导航栏效果

Posted in Javascript onSeptember 21, 2020

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。
创建一个默认的导航栏的步骤如下：

向 <nav> 标签添加 class .navbar、.navbar-default（白底黑字），navbar-inverse（黑底白字）
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

下面的实例演示了这点：

<!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> 
</nav> 
</body> 
</html>

效果如下：

Bootstrap实现默认导航栏效果

把

<nav class="navbar navbar-inverse" role="navigation">

改成

<nav class="navbar navbar-default" role="navigation">

效果如下：

Bootstrap实现默认导航栏效果

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是Bootstrap实现默认导航栏效果的代码，希望对大家的学习有所帮助。

Bootstrap实现默认导航栏效果

- Author -

林炳文Evankaka

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

打开新窗口关闭当前页面不弹出关闭提示js代码

Mar 18 Javascript

用jQuery实现一些导航条切换,显示隐藏的实例代码

Jun 08 Javascript

ECMAScript6的新特性箭头函数（Arrow Function）详细介绍

Jun 07 Javascript

jQuery搜索子元素的方法

Feb 10 Javascript

jQuery简单实现提交数据出现loading进度条的方法

Mar 29 Javascript

探索Javascript中this的奥秘

Dec 11 Javascript

微信小程序页面之间传参实例详解

Jan 13 Javascript

JavaScript设计模式之代理模式详解

Jun 09 Javascript

原生JS封装animate运动框架的实例

Oct 12 Javascript

swiper自定义分页器使用方法详解

Sep 14 Javascript

Vue实现拖放排序功能的实例代码

Jul 08 Javascript

详解vue v-model

Aug 31 Javascript

Angularjs注入拦截器实现Loading效果

Dec 28 #Javascript

AngularJS进行性能调优的7个建议

Dec 28 #Javascript

浅析AngularJS Filter用法

Dec 28 #Javascript

jquery实现倒计时功能

Dec 28 #Javascript

基于jquery实现瀑布流布局

Jun 28 #Javascript

详解AngularJS Filter（过滤器）用法

Dec 28 #Javascript

原生JavaScript实现瀑布流布局

Jun 28 #Javascript