gpt4 book ai didi

javascript - 扩展关于 ul li 背景图像的 Twitter Bootstrap 的正确方法是什么

转载 作者:行者123 更新时间:2023-11-28 02:45:26 25 4
gpt4 key购买 nike

我想为下拉菜单设置一个自己的背景图片(这是通过无序列表和列表项 -> 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com