interface Web
Tutoriel d'amorçage
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
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 ></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 ></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 ></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 id="首页内容">首页内容</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h1 id="个人资料">个人资料</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h1 id="联系方式">联系方式</h1>
这里可以放文字、列表等一切页面元素
</div>
</div>
</div>
<script ></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 id="首页内容">首页内容</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h1 id="个人资料">个人资料</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h1 id="联系方式">联系方式</h1>
这里可以放文字、列表等一切页面元素
</div>
</div>
</div>
</div>
<script ></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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment faire le centrage vertical de bootstrap
Apr 07, 2025 pm 03:21 PM
Utilisez Bootstrap pour implémenter Centering vertical: Flexbox Méthode: Utilisez les classes D-Flex, Justify-Content-Center et Align-Items-Center pour placer des éléments dans le conteneur Flexbox. Méthode de classe Align-Items-Center: Pour les navigateurs qui ne prennent pas en charge FlexBox, utilisez la classe Align-Items-Center, à condition que l'élément parent ait une hauteur définie.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment obtenir la barre de recherche bootstrap
Apr 07, 2025 pm 03:33 PM
Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche: détermine l'ID ou le nom de la barre de recherche. Utilisez JavaScript pour obtenir des éléments DOM. Obtient la valeur de l'élément. Effectuer les actions requises.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
