Bootstrap-打造自己的轮播器

发布时间：2020-12-17 21:05:57 所属栏目：安全来源：网络整理

导读：在上篇博客中介绍了Bootstrap框架的一些基本情况。也通过一个小例子说明了如何具体在项目中使用这个框架。相信大家对这套框架已经有了一定认识。这篇博客就介绍一下Bootstrap实际应用在项目中时所遇到的一个问题。博客标题已经说明了这篇博客的内容将是关于

在上篇博客中介绍了Bootstrap框架的一些基本情况。也通过一个小例子说明了如何具体在项目中使用这个框架。相信大家对这套框架已经有了一定认识。

这篇博客就介绍一下Bootstrap实际应用在项目中时所遇到的一个问题。博客标题已经说明了这篇博客的内容将是关于Bootstrap轮播器的。

什么是轮播器？轮播器大家经常看到，无论是视频网站、新闻网站还是某宝网站等等。他们的首页都会有一个轮播器，用来滚动显示一些信息。

Bootstrap已经为咱们封装好了一个轮播器组件。
源码：

<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="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
         <div class="carousel-caption">标题 1</div>
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
         <div class="carousel-caption">标题 2</div>
      </div>
      <div class="item">
         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
         <div class="carousel-caption">标题 3</div>
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div> 
ext">&rsaquo;</a>
</div>

但是应用在实际项目中的时候，就会出现一些个性化的问题。比如：如果图片的颜色
较浅，这时候再采用Bootstrap默认的标题样式的话
，就会显得特别不搭。如下图：
而且他默认的字体也比较小

所以咱们需要进行私人订制。想法来自于土豆网
首先给标题部分添加上黑色半透膜的背景。
添加CSS样式

/* 给标题部分添加黑色半透膜背景 */
.carousel-caption { background-color:#333; opacity:0.8; z-index:1; }

然后在把文字用标签包括起来，并且添加样式：居左，缩进两个字符。

/* h标签 文字居左，缩进两个字符 */
.carousel-caption h3,h4
{ text-indent: 2em; text-align:left; }

显示效果：

但是还有点缺陷，标题块的显示位置不合适，并且背景色变黑后最下面的三个小圆圈很不搭调。

/* 去除li标签的图标显示 */
.carousel-indicators li
{ display:none; }

然后修改位置信息，有两种方式：
第一是，修改Bootstrap的源码，因为标题栏的样式是封装到Bootstrap里面的，咱们可以修改调试Bootstrap的源码，来达到想要的效果。

第二种，就是添加新的样式，来覆盖Bootstrap的样式。
当然推荐的还是第二种，人家的源码还是最好不要动啦。要注意的是，Bootstrap.css的引用一定要在新添加的样式前面，这涉及到覆盖问题。
CSS代码：

/* 修改标题栏的位置样式 */
.carousel-caption
{ bottom: 10px; padding-top: 0px; right: 30%; left: 1%; padding-bottom: 10px }

显示效果：

这样看着就很舒服了。

现在把整个源码提供下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>校园视频</title>

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/原装bootstrap.min.css">
<style type="text/css"> /* 设计轮播器中标题块的样式 */ .carousel-caption { /* 添加黑色半透明背景 */ background-color:#333; opacity:0.8; z-index:1; /* 标题栏的位置信息 */ bottom: 10px; padding-top: 0px; right: 30%; left: 1%; padding-bottom: 10px } /* h标签 文字居左，缩进两个字符 */ .carousel-caption h3,h4 { text-indent: 2em; text-align:left; } /* 去除li标签的图标显示 */ .carousel-indicators li { display:none; } </style>
<script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--轮播器-->
<div class="container" style="margin-top:15px">
  <div class="carousel slide" id="carousel-182631">
    <ol class="carousel-indicators">
      <li data-slide-to="0" data-target="#carousel-182631">&nbsp;</li>
      <li class="active" data-slide-to="1" data-target="#carousel-182631">&nbsp;</li>
      <li data-slide-to="2" data-target="#carousel-182631">&nbsp;</li>
    </ol>
    <div class="carousel-inner">
      <div class="item"><img alt="匹诺曹" src="1.jpg" />
        <div class="carousel-caption" > 
          <h3>匹诺曹</h3>
          <h4>李钟硕甜蜜牵手朴信惠，超强记者华丽蜕变中！土豆电视剧每周三、四晚21:00直播。</h4>
        </div>
      </div>
      <div class="item active"><img alt="何以笙箫默" src="2.jpg" />
        <div class="carousel-caption" >
          <h3>何以笙箫默</h3>
          <h4>钟汉良唐嫣创世极恋颜值爆表，精英律师海归摄影师再续前缘，多虐更多甜！本尤为盛行。</h4>
        </div>
      </div>
      <div class="item"><img alt="特工卡特 第一季" src="4.jpg" />
        <div class="carousel-caption" >
          <h3>特工卡特 第一季</h3>
          <h4>美国队长霸气女友变身百变特工，漫威超级英雄再战黑暗势力!</h4>
        </div>
      </div>
    </div>
    <a class="left carousel-control" data-slide="prev" href="#carousel-182631">&lsaquo;</a> <a class="right carousel-control" data-slide="next" href="#carousel-182631">&rsaquo;</a></div>
</div>
</body>
</html>

Bootstrap提供给我们的是满足大多数人口味的最常用的一些样式，但是也会有无法满足咱们需求的时候，这时候就需要自己手动的添加一些样式，来满足需求。

欢迎交流！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!