In bootstrap, How do I make an image a dropdown?

前端未结

关注

 1  1147

Hi, I have created a dropdown in bootstrap, I want to put an image such that it will be the item to click so as to see t

相关标签:

1条回答

长发绾君心

2021-02-15 00:33

Just put the image link on the dropdown button. See below 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>

0 讨论(0)