Bootstrap-打造自己的轮播器

来源：互联网发布：c语言分布式服务框架编辑：程序博客网时间：2024/06/07 01:56

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

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

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

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

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myCarousel"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel slide"</span>></span>   <span class="hljs-comment"><!-- 轮播（Carousel）指标 --></span>   <span class="hljs-tag"><<span class="hljs-title">ol</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-indicators"</span>></span>      <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">"#myCarousel"</span> <span class="hljs-attribute">data-slide-to</span>=<span class="hljs-value">"0"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>      <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">"#myCarousel"</span> <span class="hljs-attribute">data-slide-to</span>=<span class="hljs-value">"1"</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>      <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">"#myCarousel"</span> <span class="hljs-attribute">data-slide-to</span>=<span class="hljs-value">"2"</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span>   <span class="hljs-tag"></<span class="hljs-title">ol</span>></span>      <span class="hljs-comment"><!-- 轮播（Carousel）项目 --></span>   <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-inner"</span>></span>      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item active"</span>></span>         <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/wp-content/uploads/2014/07/slide1.png"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"First slide"</span>></span>         <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-caption"</span>></span>标题 1<span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item"</span>></span>         <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/wp-content/uploads/2014/07/slide2.png"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"Second slide"</span>></span>         <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-caption"</span>></span>标题 2<span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item"</span>></span>         <span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"/wp-content/uploads/2014/07/slide3.png"</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"Third slide"</span>></span>         <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-caption"</span>></span>标题 3<span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>   <span class="hljs-tag"></<span class="hljs-title">div</span>></span>   <span class="hljs-comment"><!-- 轮播（Carousel）导航 --></span>   <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-control left"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#myCarousel"</span>       <span class="hljs-attribute">data-slide</span>=<span class="hljs-value">"prev"</span>></span>&lsaquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span>   <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-control right"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#myCarousel"</span>       <span class="hljs-attribute">data-slide</span>=<span class="hljs-value">"next"</span>></span>&rsaquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> ext">&rsaquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> </code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>

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

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

<code class="hljs css has-numbering"><span class="hljs-comment">/* 给标题部分添加黑色半透膜背景 */</span><span class="hljs-class">.carousel-caption</span> <span class="hljs-rules">{      <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#333</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"><span class="hljs-number">0.8</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">z-index</span>:<span class="hljs-value"><span class="hljs-number">1</span></span></span>;<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

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

<code class="hljs css has-numbering"><span class="hljs-comment">/* h标签 文字居左，缩进两个字符 */</span><span class="hljs-class">.carousel-caption</span> <span class="hljs-tag">h3</span> ,<span class="hljs-tag">h4</span><span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">text-indent</span>:<span class="hljs-value"> <span class="hljs-number">2</span>em</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value">left</span></span>;<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

显示效果：
这里写图片描述

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

<code class="hljs css has-numbering"><span class="hljs-comment">/* 去除li标签的图标显示 */</span><span class="hljs-class">.carousel-indicators</span> <span class="hljs-tag">li</span><span class="hljs-rules">{     <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">none</span></span>;<span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

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

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

<code class="hljs css has-numbering"><span class="hljs-comment">/* 修改标题栏的位置样式 */</span><span class="hljs-class">.carousel-caption</span><span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">bottom</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">right</span>:<span class="hljs-value"> <span class="hljs-number">30</span>%</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> <span class="hljs-number">1</span>%</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px</span></span></span>}</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>

显示效果：这里写图片描述

这样看着就很舒服了。

现在把整个源码提供下：

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span><span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">xmlns</span>=<span class="hljs-value">"http://www.w3.org/1999/xhtml"</span>></span><span class="hljs-tag"><<span class="hljs-title">head</span>></span><span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Type"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"text/html; charset=utf-8"</span> /></span><span class="hljs-tag"><<span class="hljs-title">title</span>></span>校园视频<span class="hljs-tag"></<span class="hljs-title">title</span>></span><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>  <span class="hljs-attribute">href</span>=<span class="hljs-value">"bootstrap-3.3.0-dist/dist/原装bootstrap.min.css"</span>></span><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css"><span class="hljs-comment">/* 设计轮播器中标题块的样式 */</span><span class="hljs-class">.carousel-caption</span><span class="hljs-rules">{ <span class="hljs-comment">/* 添加黑色半透明背景 */</span>    <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"><span class="hljs-hexcolor">#333</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">opacity</span>:<span class="hljs-value"><span class="hljs-number">0.8</span></span></span>;    <span class="hljs-rule"><span class="hljs-attribute">z-index</span>:<span class="hljs-value"><span class="hljs-number">1</span></span></span>; <span class="hljs-comment">/* 标题栏的位置信息 */</span>    <span class="hljs-rule"><span class="hljs-attribute">bottom</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">0</span>px</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">right</span>:<span class="hljs-value"> <span class="hljs-number">30</span>%</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> <span class="hljs-number">1</span>%</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-number">10</span>px</span></span></span>}<span class="hljs-comment">/* h标签 文字居左，缩进两个字符 */</span><span class="hljs-class">.carousel-caption</span> <span class="hljs-tag">h3</span> ,<span class="hljs-tag">h4</span><span class="hljs-rules">{    <span class="hljs-rule"><span class="hljs-attribute">text-indent</span>:<span class="hljs-value"> <span class="hljs-number">2</span>em</span></span>;    <span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value">left</span></span>;<span class="hljs-rule">}</span></span><span class="hljs-comment">/* 去除li标签的图标显示 */</span><span class="hljs-class">.carousel-indicators</span> <span class="hljs-tag">li</span><span class="hljs-rules">{     <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">none</span></span>; <span class="hljs-rule">}</span></span></span><span class="hljs-tag"></<span class="hljs-title">style</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span>  <span class="hljs-attribute">src</span>=<span class="hljs-value">"bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"></<span class="hljs-title">head</span>></span><span class="hljs-tag"><<span class="hljs-title">body</span>></span><span class="hljs-comment"><!--轮播器--></span><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"container"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"margin-top:15px"</span>></span>  <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel slide"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"carousel-182631"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">ol</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-indicators"</span>></span>      <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">data-slide-to</span>=<span class="hljs-value">"0"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">"#carousel-182631"</span>></span>&nbsp;<span class="hljs-tag"></<span class="hljs-title">li</span>></span>      <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span> <span class="hljs-attribute">data-slide-to</span>=<span class="hljs-value">"1"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">"#carousel-182631"</span>></span>&nbsp;<span class="hljs-tag"></<span class="hljs-title">li</span>></span>      <span class="hljs-tag"><<span class="hljs-title">li</span> <span class="hljs-attribute">data-slide-to</span>=<span class="hljs-value">"2"</span> <span class="hljs-attribute">data-target</span>=<span class="hljs-value">"#carousel-182631"</span>></span>&nbsp;<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"></<span class="hljs-title">ol</span>></span>    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-inner"</span>></span>      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"匹诺曹"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"1.jpg"</span> /></span>        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-caption"</span>   ></span>           <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>匹诺曹<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>          <span class="hljs-tag"><<span class="hljs-title">h4</span>></span>李钟硕甜蜜牵手朴信惠，超强记者华丽蜕变中！土豆电视剧每周三、四晚21:00直播。<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item active"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"何以笙箫默"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"2.jpg"</span> /></span>        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-caption"</span>   ></span>          <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>何以笙箫默<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>          <span class="hljs-tag"><<span class="hljs-title">h4</span>></span>钟汉良唐嫣创世极恋颜值爆表，精英律师海归摄影师再续前缘，多虐更多甜！本尤为盛行。<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"item"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">alt</span>=<span class="hljs-value">"特工卡特 第一季"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"4.jpg"</span> /></span>        <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"carousel-caption"</span>  ></span>          <span class="hljs-tag"><<span class="hljs-title">h3</span>></span>特工卡特 第一季<span class="hljs-tag"></<span class="hljs-title">h3</span>></span>          <span class="hljs-tag"><<span class="hljs-title">h4</span>></span>美国队长霸气女友变身百变特工，漫威超级英雄再战黑暗势力!<span class="hljs-tag"></<span class="hljs-title">h4</span>></span>        <span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"></<span class="hljs-title">div</span>></span>    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>    <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"left carousel-control"</span> <span class="hljs-attribute">data-slide</span>=<span class="hljs-value">"prev"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#carousel-182631"</span>></span>&lsaquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span> <span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"right carousel-control"</span> <span class="hljs-attribute">data-slide</span>=<span class="hljs-value">"next"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#carousel-182631"</span>></span>&rsaquo;<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span><span class="hljs-tag"></<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li><li>60</li><li>61</li><li>62</li><li>63</li><li>64</li><li>65</li><li>66</li><li>67</li><li>68</li><li>69</li><li>70</li><li>71</li><li>72</li><li>73</li><li>74</li><li>75</li><li>76</li><li>77</li><li>78</li></ul>

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

欢迎交流！

0 0