Bootstrap-打造自己的轮播器

最新推荐文章于 2024-07-13 22:52:57 发布

牛迁迁

最新推荐文章于 2024-07-13 22:52:57 发布

阅读量4.6k

点赞数

分类专栏：【前段开发】文章标签： bootstrap 轮播器

本文链接：https://blog.csdn.net/u010028869/article/details/43852799

版权

【前段开发】专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在上篇博客中介绍了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提供给我们的是满足大多数人口味的最常用的一些样式，但是也会有无法满足咱们需求的时候，这时候就需要自己手动的添加一些样式，来满足需求。

欢迎交流！

牛迁迁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
12
评论
Bootstrap-打造自己的轮播器

在上篇博客中介绍了Bootstrap框架的一些基本情况。也通过一个小例子说明了如何具体在项目中使用这个框架。相信大家对这套框架已经有了一定认识。这篇博客就介绍一下Bootstrap实际应用在项目中时所遇到的一个问题。博客标题已经说明了这篇博客的内容将是关于Bootstrap轮播器的。什么是轮播器？轮播器大家经常看到，无论是视频网站、新闻网站还是某宝网站等等。他们的首页都会有一个轮播器，用来滚动显示一
复制链接

扫一扫

专栏目录