Bootstrap之轮播css代码分析

来源：互联网发布：倪匡蔡澜直播的软件编辑：程序博客网时间：2024/05/21 22:26

Bootstrap之轮播部分css源码分析：

外层容器：

.carousel {position: relative;}

轮播指示器：宽度为父元素的60%；left：50%，margin-left:-30%，相当于边框到父元素的边框距离为20%，因为width：60%，20% 60% 20%，使得指示器div水平居中，在电脑端，大于768px，bottom：20px，由于ol 的margin-bottom：10px；20+10=30px，距离容器底端距离为30px。即轮播指示器宽度为60%，水平居中，距离底部30px。

  .carousel-indicators {  position: absolute;  bottom: 10px;  left: 50%;  z-index: 15;  width: 60%;  padding-left: 0;  margin-left: -30%;  text-align: center;  list-style: none;}

@media screen and (min-width: 768px) {  .carousel-control .glyphicon-chevron-left,  .carousel-control .glyphicon-chevron-right,  .carousel-control .icon-prev,  .carousel-control .icon-next {    width: 30px;    height: 30px;    margin-top: -10px;    font-size: 30px;  }  .carousel-control .glyphicon-chevron-left,  .carousel-control .icon-prev {    margin-left: -10px;  }  .carousel-control .glyphicon-chevron-right,  .carousel-control .icon-next {    margin-right: -10px;  }  .carousel-caption {    right: 20%;    left: 20%;    padding-bottom: 30px;  }  .carousel-indicators {    bottom: 20px;  }}

ul,ol {  margin-top: 0;  margin-bottom: 10px;}

轮播控制器：高度为100%，width为15%

.carousel-control {  position: absolute;  top: 0;  bottom: 0;  left: 0;  width: 15%;  font-size: 20px;  color: #fff;  text-align: center;  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);  background-color: rgba(0, 0, 0, 0);  filter: alpha(opacity=50);  opacity: .5;}

.carousel-control.right {//多类选择器，即必须同时拥有这两个类  right: 0;  left: auto;  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);  background-image:      -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5)));  background-image:         linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);  background-repeat: repeat-x;}

菜鸟教程网站轮播代码：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-2.0.3.js"></script><script src="js/bootstrap.min.js"></script></head><body><div class="row"><div class="col-md-3"><div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol>   <!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active"><img src="img/01.jpg" alt="First slide"></div><div class="item"><img src="img/02.jpg" alt="Second slide"></div><div class="item"><img src="img/03.jpg" alt="Third slide"></div></div><!-- 轮播（Carousel）导航 --><a class="carousel-control left" href="#myCarousel"    data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></a><a class="carousel-control right" href="#myCarousel"    data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div></div></div></body></html>

阅读全文

0 0