Saya sedang membuat tapak web menggunakan Bootstrap 5. Dalam pengepala tapak web saya menggunakan Carousel daripada Bootstrap untuk pengepala saya. Imej karusel juga membenarkan teks dan butang dipaparkan. Saya mahu imej, teks dan butang menjadi responsif. Saya cuba menggunakan pertanyaan media tetapi saya tidak tahu bagaimana untuk melakukannya.
test.html
<!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>
test.css
.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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pertanyaan media ditulis seperti berikut:
@media screen and (min-width: 900px) { .carousel-inner{ color:#000; } }Saya mendapati bahawa apabila menggunakan bootstrap, anda perlu menambah !penting pada penghujung untuk dibaca:
@media screen and (min-width: 900px) { .carousel-inner{ color:#000 !important; } }Jika anda ingin mengetahui lebih lanjut tentang pertanyaan media, lihat artikel ini: https://www.w3schools.com/css/css3_mediaqueries.asp
(Jelas sekali, anda mungkin tidak mahu menukar warna fon, ini hanya contoh.)