我正在使用 Bootstrap 5 製作一個網站。在網站的標題中,我使用 Bootstrap 中的輪播作為我的標題。輪播圖像還允許顯示文字和按鈕。我希望圖像、文字和按鈕具有響應能力。我嘗試使用媒體查詢,但我不知道該怎麼做。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Home | </title> <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="../css/index.css" /> <!-- <link rel="stylesheet" href="./css/dropdown.css" /> --> <link rel="stylesheet" data-purpose="Layout StyleSheet" title="Default" disabled href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d" > <link rel="stylesheet" data-purpose="Layout StyleSheet" title="Web Awesome" href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css" > <link rel="icon" type="image/x-icon" href="/Bootstrap-Project/images/favicon-32x32.png"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- SHOWCASE START --> <section> <div id="herocarousel" class="carousel slide" data-bs-ride="carousel" > <div class="carousel-indicators"> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="3" aria-label="Slide 4"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="4" aria-label="Slide 5"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="5" aria-label="Slide 6"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="6" aria-label="Slide 7"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="7" aria-label="Slide 8"></button> </div> <div class="carousel-inner"> <div class="carousel-item active c-item"> <img src="./assets/networking-connections-004.jpeg" class="d-block w-100 c-img" alt="..."> <div class="carousel-caption top-0 mt-4"> <p class="mt-5 text-uppercase" id="sub-header">Get your unique solution</p> <h1 class="display-1 fw-bolder text-capitalize">Project___ Name_____</h1> <button class="btn btn-primary px-4 py-2 fs-5 mt-5" id="button">Submit a Ticket</button> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#herocarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#herocarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </section> <!-- SHOWCASE CLOSE --> </body> </html>
.c-item { height: 90%; } .c-img { height: 100%; object-fit: cover; filter: brightness(0.6); } #team-img { height: 100%; object-fit: cover; }
.c-item { height: 90%; } .c-img { height: 100%; object-fit: cover; filter: brightness(0.6); } #team-img { height: 100%; object-fit: cover; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Home | </title> <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="../css/index.css" /> <!-- <link rel="stylesheet" href="./css/dropdown.css" /> --> <link rel="stylesheet" data-purpose="Layout StyleSheet" title="Default" disabled href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d" > <link rel="stylesheet" data-purpose="Layout StyleSheet" title="Web Awesome" href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css" > <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css" > <link rel="icon" type="image/x-icon" href="/Bootstrap-Project/images/favicon-32x32.png"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <!-- SHOWCASE START --> <section> <div id="herocarousel" class="carousel slide" data-bs-ride="carousel" > <div class="carousel-indicators"> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="2" aria-label="Slide 3"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="3" aria-label="Slide 4"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="4" aria-label="Slide 5"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="5" aria-label="Slide 6"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="6" aria-label="Slide 7"></button> <button type="button" data-bs-target="#herocarousel" data-bs-slide-to="7" aria-label="Slide 8"></button> </div> <div class="carousel-inner"> <div class="carousel-item active c-item"> <img src="./assets/networking-connections-004.jpeg" class="d-block w-100 c-img" alt="..."> <div class="carousel-caption top-0 mt-4"> <p class="mt-5 text-uppercase" id="sub-header">Get your unique solution</p> <h1 class="display-1 fw-bolder text-capitalize">Project___ Name_____</h1> <button class="btn btn-primary px-4 py-2 fs-5 mt-5" id="button">Submit a Ticket</button> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#herocarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#herocarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </section> <!-- SHOWCASE CLOSE --> </body> </html>
P粉2210464252023-09-18 00:52:56
媒體查詢的寫法如下:
@media screen and (min-width: 900px) { .carousel-inner{ color:#000; } }
我發現在使用bootstrap時,你需要在最後加上!important才能被讀取:
@media screen and (min-width: 900px) { .carousel-inner{ color:#000 !important; } }
如果想了解更多關於媒體查詢的內容,請查看這篇文章:https://www.w3schools.com/css/css3_mediaqueries.asp
#(顯然,你可能不是想改變字體顏色,這只是一個例子。)