快捷導(dǎo)航

基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果

更新時(shí)間：2016年07月22日 14:48:03 作者：老_蝸牛

這篇文章主要介紹了基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果,效果非常棒，需要的朋友可以參考下

代碼如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基于bootstrap的輪播廣告頁(yè)，帶圖片和文字</title>
<link rel="stylesheet" href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.carousel {
height: 500px;
}
.carousel .item {
height: 500px;
}
.carousel .item img {
width: 100%;
}
</style>
</head>
<body>
<!-- 輪播廣告 -->
<div id="LBbox" class="carousel slide" data-ride="carousel">
<!-- 圓點(diǎn)按鈕 -->
<ol class="carousel-indicators">
<li data-target="#LBbox" data-slide-to="0" class="active"></li>
<li data-target="#LBbox" data-slide-to="1"></li>
</ol>
<!-- 輪播內(nèi)容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="1 slide">
<div class="carousel-caption">
<h1>第四代 Intel Core 處理器</h1>
<p>無(wú)論是什么任務(wù)，配備 Intel HD Graphics 5000 圖形處理器的第四代 Intel Core 處理器都能應(yīng)對(duì)自如。</p>
<p>
<a href="#" class="btn btn-lg btn-primary" role="button">點(diǎn)我下載</a>
</p>
</div>
</div>
<div class="item">
<img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="2 slide">
<div class="carousel-caption">
<h1>MacBook Air</h1>
<p>有了新一代 802.11ac 技術(shù)，MacBook Air 令 Wi-Fi 速度超越極限。</p>
<p>
<a href="#" class="btn btn-lg btn-primary" role="button">點(diǎn)我下載</a>
</p>
</div>
</div>
</div>
<!-- 左按鈕 -->
<a href="#LBbox" class="left carousel-control" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一頁(yè)</span>
</a>
<!-- 右按鈕 -->
<a href="#LBbox" class="right carousel-control" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一頁(yè)</span>
</a>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

以上所述是小編給大家介紹的基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: