Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
So machen Sie Header-Bilder, Text und Schaltflächen responsiv
P粉604507867
P粉604507867 2023-09-17 09:51:15
0
1
735

Ich erstelle eine Website mit Bootstrap 5. Im Header der Website verwende ich Carousel von Bootstrap für meinen Header. Karussellbilder ermöglichen auch die Anzeige von Text und Schaltflächen. Ich möchte, dass die Bilder, Texte und Schaltflächen responsiv sind. Ich habe versucht, Medienabfragen zu verwenden, weiß aber nicht, wie das geht.

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&nbsp;a&nbsp;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&nbsp;a&nbsp;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粉604507867
P粉604507867

Antworte allen(1)
P粉221046425
P粉2210464252023-09-18 00:52:56 1 Etage

媒体查询的写法如下：

@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

(显然，你可能不是想改变字体颜色，这只是一个例子。)

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage