Maison >interface Web >Tutoriel d'amorçage >Quels types de navigation le bootstrap propose-t-il ?
Quels types de navigation le bootstrap propose-t-il ?
- (*-*)浩original
- 2019-07-12 10:37:354444parcourir
Bootstrap peut créer une variété de navigations, notamment : une navigation de base basée sur des étiquettes et des capsules, une navigation empilée ou verticale basée sur des étiquettes et des capsules, des menus déroulants basés sur des étiquettes et des étiquettes de capsules, l'utilisation des listes de navigation pour créer une navigation empilée et JavaScript pour créer une navigation cliquable (différentes directions).
Balises de base (apprentissage recommandé : Tutoriel vidéo Bootstrap)
Deux classes CSS . nav et .nav-tabs sont utilisés pour créer une navigation de base basée sur des onglets. Dans la version Bootstrap v2.0.1, les styles de la classe CSS .nav sont déclarés dans les numéros de ligne 2176 à 2220 (qui contiennent également certains styles associés). Les numéros de ligne 2222 à 2267 contiennent des styles pour les onglets .nav.
L'exemple suivant montre comment utiliser Bootstrap pour créer une navigation de base basée sur des balises.
<div class="container"> <div class="row"> <div class="span6"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Balises de capsule de base
Une fois que vous savez comment créer une navigation de base basée sur des balises avec Bootstrap, il est facile de créer une navigation de base basée sur des capsules. Cela semble facile. Au lieu d'utiliser la classe .nav-tabs ici, utilisez la classe .nav-pills. Les styles pour .nav-pills se trouvent dans bootstrap.css aux lignes 2222 à 2224, répétés à nouveau dans bootstrap.css aux lignes 2268 à 2280 (utilisés en dernière instance).
L'exemple suivant montre comment créer une navigation de base basée sur des balises de capsule.
Exemple de navigation basé sur des balises de capsule de base Bootstrap
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Balises empilées ou verticales
Pour créer des balises empilées ou verticales basées sur la navigation par onglets, vous devez ajouter .nav-stacked, .nav et .nav-tabs à votre balisage, qui par défaut crée une navigation horizontale basée sur des onglets. Les numéros de ligne 2281 à 2309 contiennent le style .nav-stacked. Voici un exemple.
Exemple de navigation Bootstrap empilée ou basée sur des onglets verticaux
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Menu déroulant basé sur des onglets
Vous pouvez créer une liste déroulante basée sur des onglets à l'aide du menu Bootstrap navigation. Il existe quatre classes CSS - .dropdown, .dropdown-toggle, .dropdown-menu et .caret - dont vous avez besoin, ainsi que les classes .nav et .nav-tabs. Dans bootstrap.css (version 2.0.1), les numéros de ligne 1545 à 1547 contiennent le style de classe .dropdown, les numéros de ligne 1548 à 1553 contiennent le style .dropdown-toggle et les numéros de ligne 1576 à 1632 contiennent le style .dropdown-menu, Les numéros de ligne 1554 à 1575 contiennent le style .caret. Dans l'exemple de démonstration, une autre classe CSS .divider est également utilisée, mais n'est pas obligatoire.
Bien sûr, vous devez référencer trois fichiers JavaScript dans votre fichier HTML : jquery.js, bootstrap-dropdown.js et application.js. Tous ces éléments se trouvent dans le dossier docs/assets/js/.
Ce qui suit est un exemple.
Exemple de navigation dans le menu déroulant basé sur des balises Bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 基于标签的下拉菜单的导航实例</title>
<meta name="description" content="Bootstrap 基于标签的下拉菜单的导航实例">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
<style type="text/css">
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a data-toggle="dropdown" href="#">FrontEnd<b></b></a>
<ul>
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li><a data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>
Pour plus d'articles techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!