我正在尝试复制并粘贴从 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>
答案 0 :(得分: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 :)