Je crée un site Web en utilisant Bootstrap 5. Dans l'en-tête du site Web, j'utilise Carousel de Bootstrap pour mon en-tête. Les images carrousel permettent également d’afficher du texte et des boutons. Je veux que les images, le texte et les boutons soient réactifs. J'ai essayé d'utiliser des requêtes multimédias mais je ne sais pas comment faire.
<!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>
La requête média s'écrit comme suit :
J'ai trouvé que lors de l'utilisation de bootstrap, vous devez ajouter !important à la fin pour être lu :
Si vous souhaitez en savoir plus sur les requêtes média, consultez cet article : https://www.w3schools.com/css/css3_mediaqueries.asp
(Évidemment, vous ne voudrez peut-être pas changer la couleur de la police, ce n'est qu'un exemple.)