In Bootstrap, Wie mache ich ein Bild zu einem Dropdown?

In Bootstrap, Wie mache ich ein Bild zu einem Dropdown?In Bootstrap, Wie mache ich ein Bild zu einem Dropdown?

Hallo, ich habe ein Dropdown in Bootstrap erstellt, ich möchte ein Bild so stellen, dass es das Element sein wird, klicken Sie, um das Dropdown zu sehen.

Hier ist mein Code unten.

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

Quelle

2016-07-24 CodeL

Setzen Sie einfach den Bildlink auf den Dropdown-Button. Siehe unten 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>

Quelle

2016-07-24 15:13:20 WitVault

Danke, es hat funktioniert. – CodeL

In Bootstrap, Wie mache ich ein Bild zu einem Dropdown?

Antwort

Verwandte Themen