communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer： 2016-05-16 15:02:02
original
1676 Les gens l'ont consulté

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>
Copier après la connexion

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 !

Étiquettes associées：
bootstrap导航条
source：php.cn
Article précédent：Introduction à quatre façons de lier des événements avec jQuery Article suivant：Comparaison de jQuery Mobile et Kendo UI_Basics
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Bordure inférieure CSS sur la barre de navigation J'ai une barre de navigation et j'ai ajouté une ligne rouge en bas lorsqu'un élément de la...
Depuis 2024-04-06 15:04:41
0
2
347
Existe-t-il un moyen de définir la prop route dans vue ? Je souhaite accéder à un onglet spécifique de la page this.$router.push({name:"AdminN...
Depuis 2024-04-06 11:35:59
0
1
456
Routage imbriqué de React Router et utilisation des paramètres de recherche Lorsque j'utilise des paramètres de recherche dans un itinéraire React imbriqué, lorsque j...
Depuis 2024-04-05 13:48:33
0
1
1475
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal