我想为下拉菜单设置一个自己的背景图片(这是通过无序列表和列表项 -> ul 和 li 完成的)。
使用 Twitter Bootstrap 实现这一点的适当方法是什么？
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<!--<button class="my-btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example-->
<button class="my-btn my-btn-primary my-dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
我假设您想在整个菜单 ( <ul> ) 而不是每个列表项 ( <li> ) 中添加图像。
这里有一个 Fiddle 展示了它是如何完成的:https://jsfiddle.net/m0nk3y/c6dqeufr/
我所做的只是在 <ul> 上应用背景图像使用 CSS，像这样:
.dropdown .dropdown-menu {
background: url(http://www.adelepham.com/deepthoughts/gray-pattern.jpg) no-repeat center center;
}
关于javascript - 扩展关于 ul li 背景图像的 Twitter Bootstrap 的正确方法是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41784360/