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

前端 未结 2 1084
自闭症患者
自闭症患者 2021-02-14 23:59

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

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)
提交回复
热议问题