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

Jquery知识点一 Jquery的ready和Dom的onload的区别

Jan 15 Javascript

Jquery 点击按钮显示和隐藏层的代码

Jul 25 Javascript

jquery ajax return没有返回值的解决方法

Oct 20 Javascript

js+xml生成级联下拉框代码

Jul 24 Javascript

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

Mar 22 Javascript

解析Javascript中中括号“[]”的多义性

Dec 03 Javascript

JQuery解析XML的方法小结

Apr 02 Javascript

js实现模糊匹配功能

Feb 15 Javascript

把JavaScript代码改成ES6语法不完全指南(分享)

Sep 10 Javascript

详解swipe使用及竖屏页面滚动方法

Jun 28 Javascript

详解Angular Forms中自定义ngModel绑定值的方式

Dec 10 Javascript

Vue路由模块化配置的完整步骤

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