响应式Bootstrap3婚礼HTML模板

所属分类:UI-布局

 32147  495  查看评论 (5)
分享到微信朋友圈
X
响应式Bootstrap3婚礼HTML模板 ie兼容10

① 替换背景图片、人物信息、替换时间

<!-- banner start  -->
    <header id="banner" class="banner">
    <div class="wrapper">
        <div id="background-carousel">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                  <!--
                      作者:zz
                      时间:2017-03-11
                      描述:轮播图片放在了item-no1、item-no2、item-no3样式中,若要修改,请至样式文件
                      -->
                    <div class="item item-no1 active"></div>
                    <div class="item item-no2"></div>
                    <div class="item item-no3"></div>
                  </div>
                </div>
            </div>
            <!-- /.background-carousel end -->
      <div class="container">
      <div class="row">
      <div class="col-sm-12 text-center">
      <span class="banner-logo">
      <!--
                   作者:zz
                   时间:2017-03-11
                   描述:修改人物信息
                   -->
      <h2>Mr.Li & Miss.Pan <small>are getting married</small></h2> 
      </span>
      </div>
      </div>
      <div class="row">
      <div class="col-sm-offset-3 col-sm-7">
      <div class="timing">
      <!--
                            作者:zz
                            时间:2017-03-11
                            描述:修改时间,通过修改data-date的属性值,达到效果
                            -->
                          <div id="count-down-2" style="height:140px;" data-date="2017-03-01 00:00:00">
                          </div>
                      </div>
                      <!-- /.timing -->
      </div>
      </div>
      </div>
      <div class="color-overlay-bg"></div>
    </div>
    <!-- /.color-overlay end -->
    </header>
<!-- banner end -->

② gallery婚纱照弹框效果的核心代码,见script.js中 194行 和 jquery.magnific-popup.js中1154 行,如下:

script.js
$('.gallery-popup').magnificPopup({
   .................
    }
});
jquery.magnific-popup.js
  
  $.magnificPopup.registerModule('image', {
   options: {
   ..............
   },
   .....
   getImage: function(item, template) {
   .......
   },
   onLoadError = function() {
   .......
   },
   ........
   return template;
});
相关插件-布局

bootstrap_admin后台管理模板

jQuery bootstrap响应式后台管理模板
  布局
 92169  556

基于BS的后台管理页面

基于BS的后台管理页面
  布局
 70061  603

iphone触屏手机界面

高仿iphone IOS 触屏手机界面
  布局
 34697  321

舒适电子商城模版

响应式电子商城,整套完整模版
  布局
 29426  399

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    嗯,?。 0
    2018/4/25 18:35:48
    涨知识了,老铁 回复
    熊猫IT木子韩 0
    2017/7/30 4:09:10
    0
    2017/5/26 15:05:23

    不错,效果很好

    回复
    mmmmm 0
    2017/4/5 20:58:05
    我是一颗苹果 0
    2017/3/29 11:52:59
    请问首页banner轮播的js是哪一个文件呢? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复