web-dev-qa-db-fra.com

Dans le bootstrap, comment puis-je faire une image une liste déroulante?

Dans le bootstrap, comment puis-je faire une image une liste déroulante?

Salut, j'ai créé une liste déroulante dans le bootstrap, je veux mettre une image telle que ce sera l'élément sur lequel cliquer pour voir la liste déroulante.

Voici mon code ci-dessous.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started with Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">
      <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-limanAbba-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="#">LimanAbba</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-limanAbba-navbar-collapse-1">  

      <div class="navbar-header navbar-right">
        <ul class="nav navbar-nav">
           <li><a href="#">Freelance</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>\
           <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span><ul class="dropdown-menu">
        <li><a href="#">Liman</a></li>
        <li><a href="#">Code90</a></li>
        <li><a href="#">Coding</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
        </ul>
      </div>
    </div>
</nav>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
imagetwitter-bootstrapdropdown
7
CodeL

Mettez simplement le lien de l'image sur le bouton déroulant. Voir ci-dessous le code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>   
<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown with image link.</p>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
     <img src="http://placehold.it/350x150">
       <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 1</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 2</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 3</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 4</a></li>
    </ul>
  </div>
</div>

</body>
12
WitVault

Si vous voulez une image pure comme bascule déroulante, vous pouvez utiliser une ancre (a) au lieu d'une button pour afficher uniquement l'image.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body>  

  <div class="container">
    <h2>Pure Image Dropdown</h2>
    <p>Click the image to see the dropdown</p>
    <div class="dropdown">
      <a href="#" id="imageDropdown" data-toggle="dropdown">
        <img src="https://picsum.photos/50">
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 3</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu item 4</a></li>
      </ul>
    </div>
  </div>

</body>
2
Jake