부트스트랩에서는 어떤 캐러셀 템플릿을 사용할 수 있나요?
- PHPz원래의
- 2018-04-14 16:16:391393검색
이번에는 부트스트랩에서 사용할 수 있는 캐러셀 템플릿과 부트스트랩 캐러셀 템플릿 사용 시 주의사항에 대해 알려드리겠습니다.
이 기사의 예는 참고용으로 부트스트랩 캐러셀 템플릿 표시에 대한 특정 코드를 공유합니다. 구체적인 내용은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
<style type="text/css">
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel .item img {
width: 100%;
}
.carousel-caption {
z-index: 10;
}
</style>
</head>
<body>
<!-- 轮播 -->
<p id="ad-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="0" class="active"></li>
<li data-slide-to="1"></li>
<li data-slide-to="2"></li>
</ol>
<p class="carousel-inner">
<p class="item active">
<img src="http://img.glzy8.com/upfiles/www/ppt/jpg/24675.jpg" alt="1 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
<p class="item">
<img src="2F1-130516091446402.jpg" alt="2 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
<p class="item">
<img src="-110910214P238.jpg" alt="3 slide">
<p class="container">
<p class="carousel-caption">
文本区域
</p>
</p>
</p>
</p>
<a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
class="glyphicon glyphicon-chevron-right"></span></a>
</p>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>
이 기사의 사례를 읽은 후 해당 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!
추천 도서: 부트스트랩 튜토리얼
위 내용은 부트스트랩에서는 어떤 캐러셀 템플릿을 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.