Home >Web Front-end >JS Tutorial >BootStrap responsive navigation bar example introduction_javascript skills

BootStrap responsive navigation bar example introduction_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:01:592116browse

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster. The responsive navigation bar allows you to view different effects on different devices.

Let me share the code with you:

<header role="banner">
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Bootstrappin'</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
</header>

data-toggle=”collapse” Expected Behavior

BootStrap responsive navigation bar example introduction_javascript skills
BootStrap responsive navigation bar example introduction_javascript skills
BootStrap responsive navigation bar example introduction_javascript skills

The above content is an example of BootStrap responsive navigation bar introduced by the editor. I hope it will be helpful to everyone!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn