Bootstrap implements the default navigation bar effect_javascript skills-JS Tutorial-php.cn

Bootstrap implements the default navigation bar effect_javascript skills

WBOY

Release： 2016-05-16 15:23:06

Original

1440 people have browsed it

The navigation bar is a great feature and a prominent feature of a Bootstrap website. Navigation bar is a responsive meta component that serves as the navigation header of an application or website. The navigation bar collapses in mobile viewports and expands horizontally as the available viewport width increases. At its core, the Bootstrap navigation bar includes defining styles for the site name and basic navigation.
The steps to create a default navigation bar are as follows:

Add class .navbar, .navbar-default (black text on white background), navbar-inverse (white text on black background) to the
tag
Add role="navigation" to the above element to help increase accessibility.
Add a header class .navbar-header to the
element, which contains an element with class navbar-brand. This will make the text appear larger.

To add links to the navigation bar, simply add an unordered list with class .nav, .navbar-nav.

The following example demonstrates this:

<!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>

Copy after login

The effect is as follows:

Put it

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

Copy after login

changed to

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

Copy after login

The effect is as follows:

The above is the code for Bootstrap to implement the default navigation bar effect. I hope it will be helpful to everyone's learning.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Bootstrap implements the default navigation bar effect_javascript skills