En-tête fixe BootStrap avec bouton bascule

depuis hier, j'essayais de concevoir un en-tête fixe spécifique en première position pour mon site web. Je suis débutant pour le bootstrap mais je sais comment concevoir un en-tête fixe sur le dessus de l'écran en utilisant le bootstrap. Mais je veux savoir en-tête de conception en utilisant l'option de bascule qui devrait être simlar à l'en-tête du site Web suivant:En-tête fixe BootStrap avec bouton bascule

https://www.sitepoint.com/community/t/horizontal-subnavigation-in-bootstrap-3/225086

Dans le site mentionné ci-dessus, ils ont utilisé l'option de bascule dans le coin supérieur droit et quand on clique dessus alors il montrera les articles dans la liste verticale mais je le veux dans une liste horizontale. Ma conception devrait

Capture d'écran:

enter image description here

Source

2017-08-26 Shalabh Saxena

Enfin, j'ai pu terminer la partie de la conception. code suivant fonctionne pour moi:

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topmenu"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <img src="~/Content/img/logo.png" style="padding-top:6px" class="pull-left" /> 

       <ul class="nav navbar-nav"> 
        <li class="dropdown"> 
         <a href="#" data-toggle="collapse" data-target="#one">Menu1</a> 
        </li> 
        <li>@Html.ActionLink("Menu2", "Index", "Home")</li> 
        <li>@Html.ActionLink("Menu3", "Index", "Home")</li> 
        <li>@Html.ActionLink("Menu4", "Index", "Home")</li> 
       </ul> 
      </div> 
     </div> 

     <div class="panel navbar-inverse" id="submenu"> 
      <ul class="nav navbar-nav collapse" id="one"> 
       <li>@Html.ActionLink("Submenu1", "Submenu1", "Submenu1Controller")</li> 
       <li>@Html.ActionLink("Submenu2", "Submenu2", "Submenu2Controller")</li> 
       <li>@Html.ActionLink("Submenu3", "Submenu3", "Submenu3Controller")</li> 
       <li>@Html.ActionLink("Submenu4", "Submenu4", "Submenu4Controller")</li> 
       <li>@Html.ActionLink("Submenu5", "Index", "Home")</li> 
      </ul> 
     </div> 

    </nav> 


    <div class="container-fluid body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - My Website</p> 
     </footer> 
    </div> 
</body> 

slight adjustments to the .panel css in bootstrap.css file to make 

.panel { 
    margin-bottom: 0px; 
    background-color: #fff; 
    border: .5px solid transparent; 
    border-radius: 4px; 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
      box-shadow: 0 1px 1px rgba(0, 0, 0, .05); 
}

J'ai changé la marge inférieure à 0px 20px de frontière et .5px de 1px

Source

2017-08-26 23:48:29

En-tête fixe BootStrap avec bouton bascule

Répondre

Questions connexes