Question

我正在尝试复制并粘贴从 https://mdbootstrap.com/docs/standard/extended/weather/ 获得的引导程序代码

它是#4 产品。但是，我想知道是我做错了什么还是只是大部分免费引导程序代码不起作用？

谁能解释一下？

<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head>
 <meta charset="utf-8">
 <title></title>
  </head>

 <style>
 .gradient-custom {
 /* fallback for old browsers */
  background: #ffffff;

/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 236, 210, 1));

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 236, 210, 1))

 }



.carousel-indicators li {
background-color: #282828;
width: 7px;
height: 7px;
border-radius: 50%;


 }
 </style>

  <div class="row d-flex justify-content-center align-items-center h-100" style="color: #282828;">
    <div class="col-md-9 col-lg-7 col-xl-5">

      <div class="card mb-4 gradient-custom" style="border-radius: 25px;">
        <div class="card-body p-4">

          <div id="demo1" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators mb-0">
              <li data-target="#demo1" data-slide-to="0" class="active"></li>
              <li data-target="#demo1" data-slide-to="1"></li>
              <li data-target="#demo1" data-slide-to="2"></li>
            </ul>
            <!-- Carousel inner -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="d-flex justify-content-between mb-4 pb-2">
                  <div>
                    <h2 class="display-2"><strong>23°C</strong></h2>
                    <p class="text-muted mb-0">Coimbra, Portugal</p>
                  </div>
                  <div>
                    <img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-weather/ilu3.png" width="150px">
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="card mb-4" style="border-radius: 25px;">
        <div class="card-body p-4">

          <div id="demo2" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators mb-0">
              <li data-target="#demo2" data-slide-to="0"></li>
              <li data-target="#demo2" data-slide-to="1" class="active"></li>
              <li data-target="#demo2" data-slide-to="2"></li>
            </ul>
            <!-- Carousel inner -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="d-flex justify-content-around text-center mb-4 pb-3 pt-2">
                  <div class="flex-column">
                    <p class="small"><strong>21°C</strong></p>
                    <i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>12:00</strong></p>
                    <p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>2°C</strong></p>
                    <i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>1:00</strong></p>
                    <p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>20°C</strong></p>
                    <i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>2:00</strong></p>
                    <p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>19°C</strong></p>
                    <i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>3:00</strong></p>
                    <p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>18°C</strong></p>
                    <i class="fas fa-cloud-showers-heavy fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>4:00</strong></p>
                    <p class="mb-0 text-muted" style="font-size: .65rem;">PM</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="card" style="border-radius: 25px;">
        <div class="card-body p-4">

          <div id="demo3" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ul class="carousel-indicators mb-0">
              <li data-target="#demo3" data-slide-to="0"></li>
              <li data-target="#demo3" data-slide-to="1"></li>
              <li data-target="#demo3" data-slide-to="2" class="active"></li>
            </ul>
            <!-- Carousel inner -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="d-flex justify-content-around text-center mb-4 pb-3 pt-2">
                  <div class="flex-column">
                    <p class="small"><strong>21°C</strong></p>
                    <i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>Mon</strong></p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>20°C</strong></p>
                    <i class="fas fa-sun fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>Tue</strong></p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>16°C</strong></p>
                    <i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>Wed</strong></p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>17°C</strong></p>
                    <i class="fas fa-cloud fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>Thu</strong></p>
                  </div>
                  <div class="flex-column">
                    <p class="small"><strong>18°C</strong></p>
                    <i class="fas fa-cloud-showers-heavy fa-2x mb-3" style="color: #ddd;"></i>
                    <p class="mb-0"><strong>Fri</strong></p>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>

</div>

Answer 1

尝试在您的 <head>...</head> 部分中添加以下链接。

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css"
  rel="stylesheet"
/>

或

如果您正在为您的项目使用节点包管理器，请尝试使用此命令安装它。 npm i mdb-ui-kit

始终遵循documentation :)

为什么引导程序对我不起作用？

1 个答案: