Maison >interface Web >js tutoriel >Exemple de code pour créer une barre de navigation avec les compétences BootStrap_javascript

Exemple de code pour créer une barre de navigation avec les compétences BootStrap_javascript

WBOYoriginal: 2016-05-16 15:02:021700parcourir

Qu'est-ce que Bootstrap ?

Bootstrap est un framework front-end pour le développement rapide d'applications Web et de sites Web. Bootstrap est basé sur HTML, CSS et JAVASCRIPT.

J'essaie de comprendre la barre de navigation bootstrap depuis longtemps. Soit les côtés gauche et droit ne sont pas alignés horizontalement, soit les couleurs sont différentes. J'ai finalement compris et j'ai simplement mis le code ici et je l'utilise. directement dans le futur

Le code est le suivant :

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role = "navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">KKK</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">首页 <span class="sr-only"></span></a></li>
</ul>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">haha<span class="sr-only"></span></a></li>
<li><a href="#">haha<span class="sr-only"></span></a></li>
</ul>
</div>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Regardez les résultats

Exemple de code pour créer une barre de navigation avec les compétences BootStrap_javascript

Ce ci-dessus est l'exemple de code pour créer une barre de navigation avec BootStrap présenté par l'éditeur. J'espère qu'il vous sera utile !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à quatre façons de lier des événements avec jQueryArticle suivant：Introduction à quatre façons de lier des événements avec jQuery

Articles Liés

Voir plus