부트 스트랩에서 이미지를 드롭 다운으로 만들려면 어떻게해야합니까?

부트 스트랩에서 이미지를 드롭 다운으로 만들려면 어떻게해야합니까?부트 스트랩에서 이미지를 드롭 다운으로 만들려면 어떻게해야합니까?

안녕하세요, 부트 스트랩에서 드롭 다운을 만들었습니다. 드롭 다운을 보려면 클릭 할 항목과 같은 이미지를 넣고 싶습니다.

다음은 아래 코드입니다.

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

출처

2016-07-24 CodeL

이미지 링크를 드롭 다운 버튼에 넣기 만하면됩니다. 코드 아래

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

출처

2016-07-24 15:13:20 WitVault

감사를 참조하십시오, 그것은했다. – CodeL

부트 스트랩에서 이미지를 드롭 다운으로 만들려면 어떻게해야합니까?

답변

관련 문제