Comment créer la barre de navigation et le bouton Bootstrap standard pour les appareils mobiles
Publié: 2022-02-16
Bootstrap est un framework HTML, CSS et JavaScript. En l'utilisant, vous pouvez facilement créer des sites Web réactifs pour les mobiles. Il vous offre de nombreux styles CSS prédéfinis pour les éléments Web, y compris les barres de navigation.
Dans ce didacticiel, vous apprendrez à créer facilement une barre de navigation réactive Bootstrap de base. Ensuite, vous apprendrez à utiliser un bouton de barre de navigation standard Bootstrap pour les appareils mobiles.
Pour pouvoir utiliser Bootstrap, vous devez d'abord l'installer. Pour les besoins de ce didacticiel, vous pouvez l'installer n'importe où sur votre PC local - il n'est pas nécessaire qu'il s'agisse d'un serveur Web. Faisons le ensemble.
Étape 1. Télécharger Bootstrap
- Rendez-vous sur getboostrap.com et cliquez sur le bouton "Télécharger Bootstrap":
- Sur la page "Getting Started" suivante, cliquez sur un autre bouton "Download Bootstrap":
- Enregistrez ce fichier n'importe où sur votre disque dur :
Étape 2. Installez Bootstrap sur votre PC local
- Décompressez ce fichier
- Renommez le dossier résultant en bootstrap
Étape 3. Créer un fichier index.html de base
- Dans votre dossier d' amorçage , créez un fichier index.htm l avec le code suivant :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>Étape 4. Créer une barre de navigation réactive
- Juste en dessous de la div du corps d'ouverture, créez une nouvelle div avec la classe Bootstrap du conteneur :
<div class="container"><!-- Start navbar container div -->
- Appuyez plusieurs fois sur Entrée pour créer de l'espace et fermer cette nouvelle div :
</div><!-- Finish navbar container div -->
- Dans votre nouvelle div de conteneur, créez la balise de navigation pour votre nouvelle barre de navigation :
<nav class="navbar navbar-default">
- Sur votre clavier, appuyez plusieurs fois sur la touche Entrée et fermez la balise :
- À l'intérieur de la balise de navigation , créez un autre conteneur div et commencez à créer le contenu réel de la barre de navigation :
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Supprimez la balise <h1> et son contenu.
- Trouvez où se ferme votre div d'en-tête de barre de navigation et juste en dessous, créez un autre div, sans classes pour le moment.
- À l'intérieur de cette div, démarrez une liste non ordonnée contenant les éléments réels de votre barre de navigation réactive :
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- Enregistrez votre fichier index.html.
- Ouvrez ce fichier dans votre navigateur. Vous devriez maintenant voir votre barre de navigation réactive. Vous êtes presque prêt à en faire la barre de navigation mobile standard. Avant de le faire, améliorons-le légèrement.
- Veuillez revenir à votre fichier index.html .
- Dans votre balise de navigation , remplacez la valeur par défaut par inverse pour obtenir le code suivant :
<nav class="navbar navbar-inverse">
- Enregistrez le fichier.
- Revenez sur votre site et actualisez la page. Votre barre de navigation est un peu plus agréable maintenant :
Bien joué! Votre barre de navigation réactive est maintenant prête pour que vous puissiez continuer à travailler dessus.
Regardez la vidéo ci-dessous pour savoir comment remplacer la barre de navigation que vous venez de créer par le bouton de menu Bootstrap standard pour les utilisateurs mobiles.