comment faire ce genre de menu déroulant dans Bootstrap

-1

comment faire ce genre de menu déroulant dans Bootstrap

J'ai fait simple avec barre de navigation bootstrap,

maintenant comment faire des listes déroulantes navbar à ce que la photo ajoutée?

ayant un bord triangulaire marqué dans le cercle rouge.

J'ai aussi essayé this example mais pas oeuvra '(

Mon code est donnée ici:

<!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> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     </ul> 
 
     
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
    </body> 
 
</html>

Source

2017-09-03 Amin

Les questions demandant une aide générale sont déconseillées dans Stack Overflow. Avant de poster une question, il est prévu que vous ayez ** recherché votre problème et que vous ayez bien tenté d'écrire le code vous-même **. Si vous êtes bloqué sur quelque chose * spécifique *, revenez et incluez un résumé de ce que vous avez essayé et du code approprié dans un [Exemple minimal, complet et vérifiable] (https://stackoverflow.com/help/mcve). Veuillez lire [Combien d'effort de recherche est attendu des utilisateurs de Stack Overflow] (https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) – FluffyKitten

En fait, je suis resté coincé dans la création de cette forme triangulaire (marquée en cercle rouge) – Amin

Vous devez toujours * nous montrer le code que vous avez déjà * dans un [exemple minimal, complet et vérifiable] (https://stackoverflow.com/help/mcve) afin que nous puissions vous aider. – FluffyKitten

Live Demo: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h

code pour la liste déroulante

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    .dropdown-menu:before { 
    position: absolute; 
    top: -7px; 
    left: 9px; 
    display: inline-block; 
    border-right: 7px solid transparent; 
    border-bottom: 7px solid #ccc; 
    border-left: 7px solid transparent; 
    border-bottom-color: rgba(0, 0, 0, 0.2); 
    content: ''; 
} 

.dropdown-menu:after { 
    position: absolute; 
    top: -6px; 
    left: 10px; 
    display: inline-block; 
    border-right: 6px solid transparent; 
    border-bottom: 6px solid #ffffff; 
    border-left: 6px solid transparent; 
    content: ''; 
} 
    </style> 
</head> 
<body> 

<div class="container"> 
    <h2>Dropdowns</h2> 
    <p>The .divider class is used to separate links inside the dropdown menu with a thin horizontal line:</p> 
    <div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><a href="#">HTML</a></li> 
     <li><a href="#">CSS</a></li> 
     <li><a href="#">JavaScript</a></li> 
     <li class="divider"></li> 
     <li><a href="#">About Us</a></li> 
    </ul> 
    </div> 
</div> 

</body> 
</html>

Source

2017-09-03 11:22:14

celui avec le bord triangulaire marqué dans le cercle rouge – Amin

@Amin: CSS ajouté pour la liste déroulante maintenant il est exactement le même que vous regardez. –

comment faire ce genre de menu déroulant dans Bootstrap

Répondre

Questions connexes