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

前端未结

关注

 2  1098

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

相关标签:

2条回答

隐瞒了意图╮

2021-02-15 00:18

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)

予麋鹿

2021-02-15 00:21

If you want a pure image as the dropdown toggle, you can use an anchor (a) instead of a button to have only the image displayed.

<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>

0 讨论(0)