拥Bootstrap入怀——幻灯片好屏轮播篇

置顶文章:《纯CSS打造银色MacBook Air(完整版本)》

上一篇:《拥Bootstrap入怀——导航栏篇》

作者:myvin

描绘在面前

于该博文中,我依然做自己举行的百般景色网页来聊一下Bootstrap的应用,网页截图如下:

图片 1

完网页的成效和代码可以点击这里翻开或到CodePen及查看。我们又于这边更一下夫网页要达的几乎独主要职能,看罢达成一致首博文的良哥哥美女们方可直接跨越了就同样段子了:

  1. 导航栏的登陆、注册按钮点击后弹有登陆、注册modal自律,并且登陆、注册窗口可切换,菜单栏为响应式

  2. 导航栏中之山水选择可下拉,点击下拉着之九寨沟``丽江``水帘洞会固定到相应的tab

  3. 幻灯片大屏轮播

  4. tab页点击切换

及同一首博文受我们大概且了聊导航栏的有关内容,想打听还是回顾一下之可以点击这里查看达亦然篇博文。今天我们又聊聊幻灯片大屏轮播这有的。想先目睹下充分屏轮播效应落实之可以点击这里查看。

幻灯片大屏轮播

事先叫有大屏轮播的准完整代码:

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

        <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="C:/Users/Lenovo/Desktop/Test/bootstrappic1.jpg" alt="九寨沟">
              <div class="carousel-caption">
                <h1>九寨沟</h1>
                <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内,是中国第一个以保护自然风景为主要目的的自然保护区,同时,也是中国著名风景名胜区和全国文明风景旅游区示范点。</p>
              </div>
            </div>
            <div class="item">
              <img src="C:/Users/Lenovo/Desktop/Test/bootstrappic1.jpg" alt="丽江">
              <div class="carousel-caption">
                <h1>丽江</h1>
                <p>丽江古城,又名“大研古镇”,海拔2,400米(旅游要防内源氧缺乏症),是丽江纳西族自治县的中心城市,是中国历史文化名城之一,世界文化遗产,国家5A级旅游景区,全国文明风景旅游区示范点。</p>
              </div>
            </div>
            <div class="item">
              <img src="C:/Users/Lenovo/Desktop/Test/bootstrappic1.jpg" alt="水帘洞">
              <div class="carousel-caption">
                <h1>水帘洞</h1>
                <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处,是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>
              </div>
            </div>
          </div>

          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

            Previous
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

            Next
          </a>
        </div>

中,该段代码是轮播图下方的老三个飞跃切换的有些圆点:

          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

该段代码是轮播图切换的上下两只箭头:

          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

            Previous
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

            Next
          </a>

大屏轮播下是含有风景圆图的老三段子简介:

        <div class="container col-md-10 col-md-offset-1" id="container-produce">
          <div class="row" id="threecols">
            <div class="col-md-4">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_jiuzhaigou.jpg" alt="scenery1" class="img-circle">
              <h1>九寨沟</h1>
              <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内,是中国第一个以保护自然风景为主要目的的自然保护区。</p>
              <a type="button" class="btn btn-default">更多..</a>
            </div>
            <div class="col-md-4">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_lijiang.jpg" alt="scenery2" class="img-circle">
              <h1>丽江</h1>
              <p>丽江古城,又名“大研古镇”,海拔2,400米(旅游要防内源氧缺乏症),是丽江纳西族自治县的中心城市,是中国历史文化名城之一,世界文化遗产。</p>
              <a type="button" class="btn btn-default">更多..</a>
            </div>
            <div class="col-md-4">
              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_shuiliandong.jpg" alt="scenery3" class="img-circle">
              <h1>水帘洞</h1>
              <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处,风景宜人,是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>
              <a type="button" class="btn btn-default">更多..</a>
            </div>
          </div>

其中,col-md-10接近让下方三段简介总共占10排,col-md-4类似让每段简介分别占4排列。

运转以上代码后,我们面对的实在并无是咱们怀念如果之力量,轮播图紧挨在下的老三段落简介,图片大之小语无伦次,而且还来没出填充满的边缘,所以地方说之凡准代码,所以我们尚用上一些代码来全面。

首先我们于carousel好像添加代码,限制整个轮播区域之大大小小,为了视觉及之优美,并和人间的老三段简介间隔70px

      .carousel{
        height:500px;
        margin-bottom: 70px;
      }

以为叫carousel类下的item仿佛增长样式:

      .carousel .item{
        height:500px;
      }

最后为填充侧边的空,将轮播的图纸百分百据为己有满浏览器宽度:

      .carousel .item img{
        width:100%;
      }

自行添加上即三截代码后运行,貌似没有呀bug,但万一拿浏览器缩小缩小再压缩,令人“欣慰”的景象终于出现了:

图片 2

俺们看下的那段黑白过度的条儿。因为咱们于轮播图片容器限制了500px的莫大,所以当页面缩小自适应时出于容器500px的高度限制,图片则于缩小,容器依然维持无更换。明白了原因,当然修改的方吧非常简单,我们好以height特性替换成max-height属性:

      .carousel .item{
        max-height:500px;
      }

然,图片容器也会就从适应。

至于三段子简单介绍,大家简单看看就好。

稍许了个了断

他日接着聊tab切换。

祝愿大家全平安。

转载请记得说明作者及出处哦-.-
作者:myvin
初稿出处:http://www.cnblogs.com/myvin/p/4730029.html

下一篇:《JS的一部分笔记(一)》

置顶文章:《纯CSS打造银色MacBook Air(完整版本)》

相关文章