Version améliorée de la barre latérale responsive Bootstrap

La barre latérale joue un rôle important dans la conception réactive. Lorsque l'écran est petit comme celui des téléphones mobiles, une barre latérale adaptable à la taille de l'écran peut ajouter de la couleur au site Web. Dans le cadre de Bootstrap, des composants de barre de navigation et de menu déroulant sont fournis. Pour plus de détails, veuillez consulter la documentation officielle de Bootstrap sur le site Web. Voici un aperçu.
L'article combine le menu de navigation et le menu déroulant, puis conçoit et améliore la fabrication de la barre latérale.

html:　

<div class="container">
 <nav class="navbar navbar-par défaut mynavbar">
 <div class="container-fluide">
  !--bouton-->
  <div class="navbar-en-tête">
  <button type="button" class="navbar-bouton collapse btn-sider" data-toggle="collapse" data-target="#side-menu" aria-expanded="false">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  </div>
  !-- Contenu de la barre de navigation -->
  <div class="collapse navbar-collapse" id="side-menu">
  <ul class="nav navbar-nav" id="side-item">
   <li><a href="#">Développement backend</a></li>
   <li><a href="#">Base de données</a></li>
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Développement front-end <span class="caret"></span></a>
   !--bouton de menu déroulant-->
   <ul class="dropdown-menu">
    <li><a href="#">HTML/CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Bootstrap</a></li>
    <li><a href="#">node.js</a></li>
   </ul>
   </li>
   <li><a href="#">移动开发</a></li>
   <li><a href="#">视觉设计</a></li>
   <li><a href="#">云计算</a></li>
  </ul>
  </div>
 </div>
 </nav>
</div>

　css:

 .mynavbar{
  background-color: #fff;
  border:none;
 }
 .navbar-header,#side-item{
  background-color: #0b3558;
 }
 #side-menu>ul>li>a{
  color:#fff;
  font-size: 18px;
  font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato;
 }
 #side-menu>ul{
  width: 100%;
 }
 #side-menu>ul>li{
  text-align: center;
  width: 16%;
  margin-left: 5px;
 }
 #side-menu .dropdown-menu {
  border: none;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
 #side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover {
  color: #24b0ff;
  text-decoration: none;
  background-color: transparent;
 }
 .btn-sider{
  float: left;
  border:none;
  outline: none;
  margin-left: 10px;
 }
 .mynavbar .btn-sider .icon-bar{
  background-color:#fff;
  width:23px;
  height:3px;
 }
 .mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover {
  background-color: transparent;
 }
 @media (max-width: 768px) {
  .container {
  padding-left: 0px;
  }
  #side-menu{
  border: none;
  }
  #side-item{
  background: rgba(43, 54, 67, 0.97);
  }
  #side-menu>ul {
  margin-top: 0px;
  margin-right: 0px;
  margin-left: -15px;
  margin-bottom: 0px;
  width: 40%;
  height: 999px;
  }
  #side-menu>ul>li {
  text-align: left;
  width:100%;
  margin-left:0px;
  }
  #side-menu>ul>li a{
  font-size:16px;
  }
  #side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
  background-color: #38a99c;
  color:#fff;
  }
  #side-menu .dropdown-menu{
  box-shadow:none;
  }
  #side-menu .dropdown-menu li a{
  padding-top:10px;
  color:#fff;
  }
 }

Voici la totalité du contenu de cet article, j'espère que cela peut aider à votre apprentissage, et j'espère aussi que vous souteniez davantage le tutoriel d'entraînement.

Si vous souhaitez approfondir davantage, vous pouvez cliquer ici pour apprendre, et voici deux sujets fascinants supplémentaires : Tutoriel de Bootstrap, Tutoriel pratique Bootstrap

Déclaration : Le contenu de cet article est tiré du réseau, propriété de l'auteur original, le contenu est contribué et téléchargé par les utilisateurs d'Internet, ce site ne possède pas de propriété, n'a pas été traité par l'éditeur humain et n'assume aucune responsabilité juridique. Si vous trouvez du contenu présumé de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, le site supprimera immédiatement le contenu présumé de violation de droits d'auteur.).