Maison > Article > interface Web > Comment ajouter des composants de navigation et des composants d'onglets dans Bootstrap ? Une brève analyse de l'utilisation
Comment ajouter des composants de navigation et des composants d'onglets dans Bootstrap ? Une brève analyse de l'utilisation
- 青灯夜游avant
- 2021-11-23 18:48:441987parcourir
Cet article vous guidera à travers les composants de navigation et d'onglets dans bootstrap, et vous présentera comment utiliser le composant de navigation et le composant d'onglets. J'espère qu'il sera utile à tout le monde !
1 Bases de la navigation
La barre de navigation est une fonction nécessaire du système du site Web. Dans le passé, il fallait beaucoup d'efforts pour créer une barre de navigation. Désormais, avec la navigation Bootstrap5, cela ne prend que quelques instants. une belle barre de navigation. Copiez et collez simplement et vous avez terminé. [Recommandation associée : "tutoriel bootstrap"]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<ul>
<li>
<a class="nav-link href="#">首页</a>
</li>
<li>
<a href="#">文章</a>
</li>
<li>
<a href="#">图片</a>
</li>
<li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</li>
</ul>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Vous pouvez également rendre votre code plus concis
<nav class="nav"> <a class="nav-link" href="#">首页</a> <a class="nav-link" href="#">文章</a> <a class="nav-link" href="#">图片</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a> </nav>
Ce code affiche la même chose que ci-dessus Quant aux boutons indisponibles à l'intérieur, sauf si cela est dû à Pour certains. à des fins particulières (par exemple, il est accessible aux membres mais pas aux gens ordinaires), sinon il n'est pas nécessaire de le mettre au menu.
Les deux méthodes d'écriture ont leurs propres avantages ;
- La première est plus organisée et plus claire lorsqu'il y a d'autres éléments décoratifs dans la navigation, comme des icônes, etc. De plus, vous pouvez également modifier le lien en écrivant le style classe de li Méthode d'affichage, même dans certaines entreprises, la performance au travail des employés sera évaluée par la quantité de code (j'ai entendu dire que de nombreuses entreprises le faisaient).
- Le second est plus concis. Ce que le second peut réaliser peut être réalisé par le premier, mais l'inverse n'est pas vrai. Après tout, la version allégée a castré certaines fonctions.
- J'utiliserai le deuxième type pour les démonstrations suivantes. Ce ne sera pas un problème de passer au premier type pour toutes les démonstrations.
2 Styles courants
2.1 Alignement horizontal
En utilisant la classe générale flexbox, vous pouvez facilement modifier l'alignement horizontal de la navigation. La navigation est alignée à gauche par défaut et vous pouvez facilement la modifier au centre ou à droite.
- Utilisez .justify-content-center pour l'alignement au centre :
- Utilisez .justify-content-end pour l'alignement à droite :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<nav class="nav justify-content-center">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
<nav class="nav justify-content-end">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
Vous pouvez également constater que plusieurs navigations peuvent être placées sur une page.
2.2 Navigation verticale
Changez la navigation en navigation verticale en utilisant la classe générique .flex-column. Si vous souhaitez uniquement empiler sous des fenêtres spécifiques, utilisez la version réactive (par exemple .flex-sm-column).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<nav class="nav flex-column">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
<nav class="nav flex-sm-column">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
ps : Cette réponse est verticale lorsqu'elle est supérieure au point d'arrêt, car la navigation verticale est généralement utilisée pour la navigation secondaire ou la navigation dans la page. Si l'écran est trop petit, la navigation verticale occupe l'espace de lecture, donc ce n'est pas nécessaire. Si vous souhaitez masquer la fonction de navigation horizontale lorsque l'écran est réduit, la barre d'outils de navigation du chapitre suivant sera présentée en détail.
2.3 Style d'onglet
Utilisez la navigation de base et ajoutez des onglets .nav pour générer une interface avec des onglets paginés. Créez des blocs commutables via le plugin JavaScript de pagination dans la section « Utilisation des onglets » ci-dessous. Le style de l'onglet est très simple. Si vous souhaitez implémenter des fonctions spécifiques, nous le présenterons en détail plus tard, et il y aura également du code détaillé plus tard.
2.4 Capsules
Les capsules sont utilisées de la même manière que les onglets, mais utilisent des .nav-pills au lieu des onglets de navigation :
<ul class="nav nav-pills">
2.5 Remplir et aligner
.le contenu .nav a deux largeurs de classe pour l'expansion , l'utilisation de .nav-fill allouera de l'espace au contenu de l'élément .nav de manière proportionnelle. Notez que cela occupe tout l’espace horizontal, mais que tous les éléments de navigation n’ont pas la même largeur.
Veuillez utiliser .nav-justified pour créer des éléments de largeur égale. Tout l'espace horizontal sera occupé par les liens de navigation, mais contrairement au remplissage .nav ci-dessus, chaque élément de navigation aura la même largeur.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">文章</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">图片</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
</li>
</ul>
<br><br>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">文章</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">图片</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
</li>
</ul>
Vous pouvez comparer la différence entre les deux alignements.
3 Extension supplémentaire des composants de navigation
3.1 Utilisation de classes utilitaires de boîte flexible
Si vous avez besoin de modifications de navigation réactives, veuillez utiliser une série de classes communes de boîte flexible. Ces classes générales offrent plus de personnalisation entre les points d'arrêt. Dans l'exemple ci-dessous, notre navigation sera empilée sous le petit point d'arrêt et disposée horizontalement à partir du petit point d'arrêt pour remplir toute la largeur disponible.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div>
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>Afficher sous différentes largeurs de navigateur.
3.2 使用下拉列表
加入额外的HTML和下拉菜单JavaScript插件
带下拉列表的选项卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<br><br><br>
<ul class="nav nav-tabs">
<li>
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><hr></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
带下拉列表的胶囊只需要将nav-tabs换成nav-pills
<ul class="nav nav-pills">
4 使用选项卡
4.1 普通选项卡
前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
</li>
<li role="presentation">
<button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
</li>
<li role="presentation">
<button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
</li>
</ul>
<div id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h1>首页内容</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h1>个人资料</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h1>联系方式</h1>
这里可以放文字、列表等一切页面元素
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
4.2 胶囊选项卡
跟前面胶囊一样，只是换一个标签这么简单。
<ul class="nav nav-pills" id="myTab" role="tablist">
4.3 垂直胶囊选项卡
这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。
需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div>
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
<button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
<button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
</div>
<div id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h1>首页内容</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h1>个人资料</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h1>联系方式</h1>
这里可以放文字、列表等一切页面元素
</div>
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
4.4 淡入淡出效果
要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。
更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！
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!
Articles Liés
Voir plus- Une brève discussion sur la façon d'envelopper les colonnes dans la disposition de la grille Bootstrap
- Une brève discussion sur la façon de trier et de décaler les colonnes dans la disposition de la grille Bootstrap
- Parlons du composant image et du composant contour dans Bootstrap
- Comment utiliser les tableaux dans Bootstrap ? Une brève analyse de l'utilisation de tables puissantes