ano*_*mle 8 bootstrap-accordion
我正在研究这个项目，并尝试在手风琴打开时更改其背景颜色。我喜欢它关闭时的齐平，但不喜欢它打开时的白色背景。
\n我还试图改变箭头的位置，使它们处于一条直线上。
\n这是我到目前为止所拥有的：
\nconsole.log(1)\n$(".accordion-button").click(function(){\n console.log(2)\n var dest = $(this).attr("data-bs-target");\n $(dest)[0].scrollIntoView();\n});\n.accordion-button:not(.collapsed)::after {\n background-image: url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\' fill=\'%23FEB7EE\'%3e%3cpath fill-rule=\'evenodd\' d=\'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\'/%3e%3c/svg%3e");\n}body {\n background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));\n opacity: 1;\n position: relative;\n overflow: scroll;\n }\n\n.accordion-title {\n font-variant-caps: titling-caps;\n position: absoulte;\n}\n\n.accordion-button {\n font-size: 20px;\n font-family: Red Rose;\n color: #FEB7EE !important;\n}\n\n.accordion-button:after {\n background-image: url("data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\' fill=\'%23FEB7EE\'><path fill-rule=\'evenodd\' d=\'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\'/></svg>") !important;\n }\n.accordion-header:collapse {background-color:black !important;}\n.accordion-button collapse {\n color: rgb(224, 16, 176);\n }\nh1 {\n font-family: Red Rose;\n color: #FEB7EE;\n}\nh2 {\n font-family: Raleway;\n color: #FEB7EE;\n}\np {\n font-family: Raleway;\n}<!--html-->\n<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">\n<!--javascript-->\n<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>\n\n<!DOCTYPE html>\n<html lang="eng">\n<head>\n <link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />\n <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />\n <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>\n\n <!--<script type="module">\n import { Toast } from \'bootstrap.esm.min.js\'\n\n Array.from(document.querySelectorAll(\'.toast\'))\n .forEach(toastNode => new Toast(toastNode))\n</script>-->\n<!-- Required meta tags -->\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n\n<!-- Bootstrap CSS -->\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.rtl.min.css" integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">\n\n</head>\n\n <body>\n<div class="container">\n<div class="row">\n<div class="col-md-6">\n\n<!--bootstrap-->\n \n<title>Raspberry Pilot</title>\n<!--intro-->\n<h1 class="display-1">Raspberry Pi-lot</h1>\n<h2 class="display-6">The Raspberry Pi may be a computer smaller than a deck of cards, but you\xe2\x80\x99ll be surprised what it can do!</h1>\n<!--accordion-->\n<div class="accordion accordion-flush" id="accordionFlushExample">\n<!--about-->\n <div class="accordion-item">\n <h2 class="accordion-header" id="flushAbout">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"()>\n About\n </button>\n </h2>\n <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">\n <div class="accordion-body about"><p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy way to learn programming and computing.</p></div>\n </div>\n </div>\n <!--ingredients-->\n <div class="accordion-item">\n <h2 class="accordion-header" id="flushIngredients">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">\n What You\'ll Need\n </button>\n </h2>\n <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">\n <div class="accordion-body"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">\n <h3>Raspberry Pi</h3>\n <p>Go with models 3 and higher.</p>\n <img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">\n <h3>HDMI Monitor</h3>\n <p>An HDMI TV works too!</p>\n <img src="" alt="SD card icon" class="img-fluid" width="100" height="100">\n <h3>SD Card</h3>\n <p>Aim for at least 8GB.</p>\n <img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">\n <h3>USB Mouse</h3>\n <p>You can switch to a wireless mouse later.</p>\n <img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">\n <h3>USB Keyboard</h3>\n <p>You can switch to a wireless keyboard later.</p>\n <img src="" class="img-fluid" alt="power supply icon" width="100" height="100">\n <h3>Power Supply</h3>\n <p>Standard 5V USB C or Micro depending on the model.</p>\n </div>\n </div>\n </div>\n <!--SetUp-->\n <div class="accordion-item">\n <h2 class="accordion-header" id="flushSetUp">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">\n Set Up\n </button>\n </h2>\n <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">\n <div class="accordion-body"><h4>Set up your SD card.</h4>\n <p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>\n <a href="url"> Link to download NOOBS </a>\n <h4>Plug everything in.</h4>\n <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"\n <p>Make sure everything is plugged in before turning it on.</p>\n </div>\n </div>\n </div>\n <!--options-->\n <div class="accordion-item">\n <h2 class="accordion-header" id="flushOptions">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">\n What Can You Do?\n </button>\n </h2>\n <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">\n <div class="accordion-body"><h4>Set up your SD card.</h4>\n <p>Install NOOBS via Raspbian, then insert it into the Raspberry Pi. </p>\n <a href="url"> Link to download NOOBS </a>\n <h4>Plug everything in.</h4>\n <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"\n <p>Make sure everything is plugged in before turning it on.</p></div>\n </div>\n </div>\n\n <!--python-->\n <div class="accordion-item">\n <h2 class="accordion-header" id="flushPython">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">\n Code with Python\n </button>\n </h2>\n <div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">\n <div class="accordion-body"><h4>Open Thonny</h4>\n <p>Use Thonny to create new programs and systems on your Raspberry Pi </p>\n <a href="url"> Link to see what you can do with Python </a>\n <h4>Learn Python</h4>\n <img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">"\n </div>\n </div>\n </div>\n<!--accessories-->\n<div class="accordion-item">\n <h2 class="accordion-header" id="flushAccessories">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">\n Add Ons & Accessories\n </button>\n </h2>\n <div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">\n <div class="accordion-body"><div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">\n <div class="carousel-indicators">\n <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>\n <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>\n <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>\n </div>\n <div class="carousel-inner">\n <div class="carousel-item active" data-bs-interval="10000">\n <img src="..." class="d-block w-100 img-fluid" alt="...">\n <div class="carousel-caption d-none d-md-block">\n <h5>First slide label</h5>\n <p>Some representative placeholder content for the first slide.</p>\n </div>\n </div>\n <div class="carousel-item" data-bs-interval="2000">\n <img src="..." class="d-block w-100 img-fluid" alt="...">\n <div class="carousel-caption d-none d-md-block">\n <h5>Second slide label</h5>\n <p>Some representative placeholder content for the second slide.</p>\n </div>\n </div>\n <div class="carousel-item">\n <img src="..." class="d-block w-100" alt="...">\n <div class="carousel-caption d-none d-md-block">\n <h5>Third slide label</h5>\n <p>Some representative placeholder content for the third slide.</p>\n </div>\n </div>\n <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">\n <span class="carousel-control-prev-icon" aria-hidden="true"></span>\n <span class="visually-hidden">Previous</span>\n </button>\n <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">\n <span class="carousel-control-next-icon" aria-hidden="true"></span>\n <span class="visually-hidden">Next</span>\n </button>\n </div>\n </div>\n </div>\n</div>\n\n <!--sensehat-->\n <div class="accordion-item" >\n <h2 class="accordion-header" id="flushSenseHat">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">\n SenseHat\n </button>\n \n </h2>\n <div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">\n <img src="" class="img-fluid" alt="SenseHat Demo" width="200" height="250">\n <pre>\n <code>\n from sense_hat import SenseHat\n sense = SenseHat()\n\n # Define some colours\n g = (0, 255, 0) # Green\n b = (0, 0, 0) # Black\n\n # Set up where each colour will display\n creeper_pixels = [\n g, g, g, g, g, g, g, g,\n g, g, g, g, g, g, g, g,\n g, b, b, g, g, b, b, g,\n g, b, b, g, g, b, b, g,\n g, g, g, b, b, g, g, g,\n g, g, b, b, b, b, g, g,\n g, g, b, b, b, b, g, g,\n g, g, b, g, g, b, g, g\n ]\n\n # Display these colours on the LED matrix\n sense.set_pixels(creeper_pixels)\n </code>\n </pre>\n </div>\n </div>\n <!--projects-->\n <div class="accordion-item">\n <h2 class="accordion-header" id="flushSenseHat">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">\n SenseHat Projects\n </button>\n </h2>\n <div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">\n <div class="accordion-body">\n <div class="card-group">\n <div class="card">\n <img src="..." class="card-img-top" alt="...">\n <div class="card-body">\n <h5 class="card-title">Project 1</h5>\n <p class="card-text">This will be a cool project idea.</p>\n </div>\n </div>\n <div class="card">\n <img src="..." class="card-img-top" alt="...">\n <div class="card-body">\n <h5 class="card-title">Project 2</h5>\n <p class="card-text">Another cool project. </p>\n </div>\n </div>\n <div class="card">\n <img src="..." class="card-img-top" alt="...">\n <div class="card-body">\n <h5 class="card-title">Project 3</h5>\n <p class="card-text">Last cool project goes here.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <!--resources-->\n <div class="accordion-item">\n <h2 class="accordion-header" id="flushResources">\n <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">\n Raspberry Pi Resources\n </button>\n </h2>\n <div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">\n <div class="accordion-body">\n <ul class="list-group list-group-flush">\n <li class="list-group-item">Link</li>\n <li class="list-group-item">Another Link</li>\n <li class="list-group-item">Another another link</li>\n <li class="list-group-item">Fourth link</li>\n <li class="list-group-item">Last link</li>\n </ul>\n </div>\n </div>\n </div>\n <!--end tag-->\n </div>\n </div>\n</body>\n<link href="./stylesheet.css" rel="stylesheet"/>\n<script src="script.js"></script>\n</html>小智 14
在你的文件 stylesheet.css 中非常简单，添加这段代码
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #FEB7EE;
}
| 归档时间： |
|
| 查看次数： |
9949 次 |
| 最近记录： |