Loading... 15年6月份就对bootstrap有了一个初步的了解,无奈忙于琐事期间一直没有深入的学习过,最近看了下它的API,仿了下国外的一个小实例,感觉还是冗余代码太多,没有完全的利用好bootstrap。关于bootstrap的处女作,以此为念。  ``` <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="yawee"> <meta name="blog" content="https://yaw.ee"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="//lib.baomitu.com/Swiper/4.0.7/css/swiper.min.css"> <script src="//lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css"></script> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://file.yawzhou.com/cdn/swiper.jquery.min.js"></script> </head> <style type="text/css"> body { font-family: "Open Sans", sans-serif; font-size: 15px; color: #5F5F5F; } nav ul li { margin: 0 10px; } nav ul li a { width: 100%; color: #fff; font-size: 12px; font-weight: bold; } nav ul li a:hover { border-bottom: 3px solid #83C936; } .active { border-bottom: 3px solid #83C936; } header { background: url(http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/fullscreen-bg.jpg) no-repeat; } .color { position: absolute; top: 0; width: 100%; background: #242424; opacity: 0.6; } .navbar-nav { float: right; } .nav_bg { background: #313131; opacity: 1; transition: 1s; } .head_content { width: 100%; text-align: center; position: absolute; top: 5em; } .head_content h2 { color: #FFF; font-weight: 700; margin-bottom: 20px; font-size: 40px; } .head_content h4 { color: #fff; font-weight: 500; font-size: 28px; margin-bottom: 60px; } .head_content span { display: block; width: 150px; height: 45px; line-height: 45px; margin: 0 auto; background: #83C936; border-radius: 6px; } .head_content span a { display: block; width: 100%; height: 100%; color: #fff; text-decoration: none; border-color: #6ea92d; } .head_content span a:hover { background: #6ea92d; border-radius: 6px; } #a2, #a3, #a4, #a5, #a6 { padding: 60px 0; } .title { font-size: 48px; font-weight: 300; text-align: center; line-height: .8; } .title_hr { width: 60px; height: 30px; border-bottom: 1px solid #83C936; margin: 0 auto; margin-bottom: 50px; } .info i { font-size: 72px; border-bottom: 30px; } .info_t { font-size: 18px; font-weight: 700; } .pp { font-size: 18px; color: #929292; margin-bottom: 30px; } .prace { text-align: center; margin-top: 20px; } .prace_c { display: inline-block; vertical-align: middle; padding: 20px; margin: 0 8px; width: 25%; background-color: #FCFCFC; border: 1px solid #E7E7E7; border-top-width: 5px; border-top-color: #b9b9b9; } .prace_t { margin-bottom: 15px; font-size: 24px; font-weight: 700; color: #898989; } .prace strong { display: block; margin-bottom: 10px; font-size: 68px; font-weight: 300; color: #898989; line-height: 1; } .prace_c1 { margin: 50px 0; } .prace_t1 { position: absolute; top: -37px; left: 0px; width: 100%; padding: 8px; background: #83C936; color: #fff; } .team_c { text-align: center; margin-bottom: 15px; } .team_c img { width: 200px; height: 200px; margin: 0 auto; } .team_info { padding: 25px 20px; } .team_info ul li a { display: inline-block; vertical-align: middle; width: 40px; height: 40px; line-height: 42px; text-align: center; color: #fff; border-radius: 3px; } .form-minimal .form-control { box-shadow: none; border: none; border-bottom: 1px solid #dedede; border-radius: 0; } footer { padding: 50px 0 30px 0; margin-top: 50px; text-align: center; background-color: #f9f9f9; } .foot_nav { text-align: center; margin-bottom: 50px; } .foot_nav a { display: inline-block; padding: 0 8px; font-size: 13px; color: inherit; } .foot_icon { margin-bottom: 50px; } .foot_icon li { padding: 0 2px 5px 2px; } .foot_icon a { display: inline-block; vertical-align: middle; width: 40px; height: 40px; line-height: 42px; text-align: center; background-color: #9B9B9B; color: #fff; border-radius: 50%; } .copyright { font-size: 12px; } .copyright a { color: #83C936; } .fea_c { padding: 60px 0; text-align: center; } .fea_p { display: inline; line-height: 1; position: relative; color: #898989; font-weight: 300; font-style: italic; font-size: 48px; } .fea_p_hr { width: 100px; height: 50px; margin: 0 auto; margin-bottom: 40px; border-bottom: 3px solid #83C936; } .fea_t { font-weight: 700; font-size: 16px; margin-top: 10px; margin-bottom: 5px; } .swiper-pagination-bullet { width: 12px; height: 12px; } .swiper-pagination-bullet:hover { background: #869791; opacity: 1; } .swiper-pagination-bullet-active { background: #869791; } @media screen and (max-width: 992px) { .prace_c { width: 100%; margin-bottom: 50px; } .col-sm-6 { width: 100% !important; } } @media screen and (max-width: 768px) { .navbar-nav { width: 100%; margin: 0; } } </style> <body> <header id="a1"> <nav id="main-navbar" class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="font-size: 21px;background: #f3f3f3;width:40px;height: 38px;line-height: 20px;text-align: center"> <i class="fa fa-bars"></i> </button> <a href="" class="navbar-brand"><img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/logo.png"></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav nav-onepage"> <li><a id="a11" href="#a1" class="active">HOME</a></li> <li><a id="a22" href="#a2">OVERVIEW</a></li> <li><a id="a33" href="#a3">FEATRUES</a></li> <li><a id="a44" href="#a4">PRICING</a></li> <li><a id="a55" href="#a5">TEAM</a></li> <li><a id="a66" href="#a6">CONTACT</a></li> </ul> </div> </div> </nav> <div class="color"></div> <div class="head_content"> <h2 class="">FREE BUSINESS LANDING PAGE</h2> <h4>Save your time and money. Get your business started.</h4> <span><a href="">LEARN MORE</a></span> </div> </header> <div id="a2"> <div class="container"> <div class="title"> OVERVIEW </div> <div class="title_hr"></div> <p class="text-center" style="font-size: 21px;margin-bottom: 50px;">LANDEE is built for business owner, startup or creator to begin or boost their internet-visibility</p> <div class="row"> <div class="col-md-4"> <div class="info text-center"> <i class="fa fa-thumbs-o-up"></i> <h3 class="info_t">HANDCRAFTED</h3> <p>Enthusiastically redefine future-proof innovation vis-a-vis maintainable "outside the box" thinking. Completely evolve fully tested.</p> </div> </div> <div class="col-md-4"> <div class="info text-center"> <i class="fa fa-laptop"></i> <h3 class="info_t">ULTRA RESPONSIVE</h3> <p>Enthusiastically redefine future-proof innovation vis-a-vis maintainable "outside the box" thinking. Completely evolve fully tested.</p> </div> </div> <div class="col-md-4"> <div class="info text-center"> <i class="fa fa-star-o"></i> <h3 class="info_t">CLEAN DESIGN</h3> <p>Enthusiastically redefine future-proof innovation vis-a-vis maintainable "outside the box" thinking. Completely evolve fully tested.</p> </div> </div> </div> </div> </div> <div id="a3"> <div class="container"> <div class="title">FEATURES</div> <div class="title_hr"></div> <div class="row" style="margin-bottom: 90px;"> <div class="col-sm-7"> <h3 style="font-size: 24px;"><i class="fa fa-check-square-o"></i> Track Your Project</h3> <p class="pp">Conveniently iterate fully researched synergy for customer directed convergence. Quickly iterate clicks-and-mortar testing procedures and client-focused imperatives.</p> <p>Efficiently pursue efficient outsourcing rather than focused internal or "organic" sources. Authoritatively streamline B2C interfaces vis-a-vis one-to-one data. Holisticly simplify 24/365 materials through premium paradigms. Quickly procrastinate quality imperatives for low-risk high-yield e-markets. Collaboratively negotiate user-centric products and clicks-and-mortar.</p> </div> <div class="col-sm-5"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/feature1.png" class="img-responsive" alt="Feature"> </div> </div> <div class="row" style="margin-bottom: 90px;"> <div class="col-sm-6"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/feature2.png" class="img-responsive" alt="Feature"> </div> <div class="col-sm-6"> <h3 class="section-heading"><i class="fa fa-users"></i> Team Collaboration</h3> <p class="pp">Completely revolutionize interactive e-markets and goal-oriented quality vectors.</p> <p>Dynamically plagiarize high-payoff methods of empowerment through orthogonal resources. Uniquely re-engineer real-time niches before scalable catalysts for change.</p> </div> </div> <div class="row"> <div class="col-sm-7"> <h3 class="section-heading"><i class="fa fa-line-chart"></i> Evaluate Results</h3> <p class="pp">Conveniently iterate fully researched synergy for customer directed convergence.</p> <p>Holisticly simplify 24/365 materials through premium paradigms. Quickly procrastinate quality imperatives for low-risk high-yield e-markets. Collaboratively negotiate user-centric products and clicks-and-mortar.</p> </div> <div class="col-sm-5"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/feature3.png" class="img-responsive" alt="Feature"> </div> </div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="fea_c"> <p class="fea_p">It’s really, recommended free landing page</p> <div class="fea_p_hr"></div> <div class="fea_info"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/testimonial-author.png" style="border-radius: 50%;width: 60px;"> <div class="fea_t">Emily Murray</div> <span style="color: #adadad">CEO of TheCompany</span> </div> </div> </div> <div class="swiper-slide"> <div class="fea_c"> <p class="fea_p">Now, this is cool! Kudos to the guys behind it.</p> <div class="fea_p_hr"></div> <div class="fea_info"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/testimonial-author2.png" style="border-radius: 50%;width: 60px;"> <div class="fea_t">Edward Freeman</div> <span style="color: #adadad">Front-end Freelancer</span> </div> </div> </div> <div class="swiper-slide"> <div class="fea_c"> <p class="fea_p">It’s really, recommended free landing page</p> <div class="fea_p_hr"></div> <div class="fea_info"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/testimonial-author3.png" style="border-radius: 50%;width: 60px;"> <div class="fea_t">Howard Mendez</div> <span style="color: #adadad">Art Director of Dream Corp.</span> </div> </div> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> </div> </div> </div> <div id="a4"> <div class="container"> <div class="title">PRICING</div> <div class="title_hr"></div> <p class="text-center" style="font-size: 21px;margin-bottom: 50px;"> Choose your license based on your product purposes. <br>Free updates and free support. </p> <div class="prace"> <div class="prace_c"> <h4 class="prace_t"> SINGLE </h4> <p style="color:#b9b9b9">single installation, can’t be used on end-product that’s sold</p> <div class="prace_c1"> <strong>$16</strong> <span style="color: #ddd">per license</span> </div> <a href="" class="btn btn-default" style="background: #71787B;color: #fff;">PURCHASE</a> </div> <div class="prace_c" style="position: relative;"> <div class="prace_t1"> MOST POPULAR </div> <h4 class="prace_t"> MULTIPLE </h4> <p style="color:#b9b9b9">multiple installation, can’t be used on end-product that’s sold</p> <div class="prace_c1"> <strong>$64</strong> <span style="color: #ddd">per license</span> </div> <a href="" class="btn btn-default" style="background: #83C936;color: #fff;">PURCHASE</a> </div> <div class="prace_c"> <h4 class="prace_t"> EXTENDED </h4> <p style="color:#b9b9b9">multiple installation, can be used on end-product that’s sold</p> <div class="prace_c1"> <strong>$800</strong> <span style="color: #ddd">per license</span> </div> <a href="" class="btn btn-default" style="background: #71787B;color: #fff;">PURCHASE</a> </div> </div> </div> </div> <div id="a5"> <div class="container"> <div class="title">TEAM</div> <div class="title_hr"></div> <div class="row"> <div class="col-md-4"> <div class="team_c"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/person1.png" style="border-radius: 50%"> </div> <div class="team_info"> <h3 style="font-size: 18px;font-weight: 700;text-align: center">Kyle Freeman</h3> <h6 style="font-size: 14px;color: #777;text-align: center">Director</h6> <p style="margin: 15px 0 20px 0;text-align: center">Dramatically harness 2.0 products and leveraged sources. Dramatically drive intermandated expertise rather than clicks-and-mortar benefits.</p> <ul class="list-inline" style="text-align:center"> <li><a href="#" style="background: #3b5998"><i class="fa fa-facebook"></i></a></li> <li><a href="#" style="background: #ea4c89"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" style="background: #0077b5"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" style="background: #55acee"><i class="fa fa-twitter"></i></a></li> </ul> </div> </div> <div class="col-md-4"> <div class="team_c"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/person2.png" style="border-radius: 50%"> </div> <div class="team_info"> <h3 style="font-size: 18px;font-weight: 700;text-align: center">Samuel Collins</h3> <h6 style="font-size: 14px;color: #777;text-align: center">Senior Manager</h6> <p style="margin: 15px 0 20px 0;text-align: center">Dramatically harness 2.0 products and leveraged sources. Dramatically drive intermandated expertise rather than clicks-and-mortar benefits.</p> <ul class="list-inline" style="text-align:center"> <li><a href="#" style="background: #3b5998"><i class="fa fa-facebook"></i></a></li> <li><a href="#" style="background: #ea4c89"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" style="background: #0077b5"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" style="background: #55acee"><i class="fa fa-twitter"></i></a></li> </ul> </div> </div> <div class="col-md-4"> <div class="team_c"> <img src="http://demo.cssmoban.com/cssthemes4/tid_6_landee/assets/img/person3.png" style="border-radius: 50%"> </div> <div class="team_info"> <h3 style="font-size: 18px;font-weight: 700;text-align: center">Diana Douglas</h3> <h6 style="font-size: 14px;color: #777;text-align: center">Account Executive</h6> <p style="margin: 15px 0 20px 0;text-align: center">Dramatically harness 2.0 products and leveraged sources. Dramatically drive intermandated expertise rather than clicks-and-mortar benefits.</p> <ul class="list-inline" style="text-align:center"> <li><a href="#" style="background: #3b5998"><i class="fa fa-facebook"></i></a></li> <li><a href="#" style="background: #ea4c89"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" style="background: #0077b5"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" style="background: #55acee"><i class="fa fa-twitter"></i></a></li> </ul> </div> </div> </div> </div> </div> <div id="a6"> <div class="container"> <div class="title">CONTACT</div> <div class="title_hr"></div> <div class="row"> <div class="col-md-4"> <p> <strong><i class="icon icon_pin_alt"></i> ADDRESS</strong> <br> <span>12345 North Main Street <br> New York 123456</span> </p> <br> <p> <strong><i class="icon icon_phone"></i> PHONE</strong> <br> <span>Phone 1: 1-(558) 968-0400 (Quotation)</span> <br> <span>Phone 2: 1-(558) 968-1234 (General Inquiries)</span> </p> <br> <p> <strong><i class="icon icon_mail"></i> EMAIL</strong> <br> <span>Email : <a href="mailto:hello@yourdomain.com" style="color: #83C936">hello@yourdomain.com</a></span> </p> </div> <div class="col-md-8"> <form id="contact-form" class="form-horizontal form-minimal"> <div class="row" style="margin: 0"> <div class="col-sm-6" style="width: 48%"> <div class="form-group"> <label for="contact-name" class="control-label sr-only">Name</label> <input type="text" class="form-control" id="contact-name" placeholder="Name (required)" required=""> </div> </div> <div class="col-sm-6" style="width: 48%;float: right;"> <div class="form-group"> <label for="contact-email" class="control-label sr-only">Email</label> <input type="email" class="form-control" id="contact-email" placeholder="Email (required)" required=""> </div> </div> </div> <div class="form-group"> <label for="contact-subject" class="control-label sr-only">Subject</label> <div class="col-sm-12"> <input type="text" class="form-control" id="contact-subject" placeholder="Subject (optional)"> </div> </div> <div class="form-group"> <label for="contact-message" class="control-label sr-only">Message</label> <div class="col-sm-12"> <textarea class="form-control" id="contact-message" name="contact-message" rows="4" cols="30" placeholder="Message (required)" required=""></textarea> </div> </div> <div class="form-group"> <div class="col-sm-12"> <button type="submit" class="btn btn-primary" style="background: #83C936;border-color: #6ea92d">Submit Message</button> </div> </div> </form> </div> </div> </div> </div> <footer> <div class="container"> <div class="foot_nav"> <a href="">About</a> <a href="">Terms & Condition</a> <a href="">Help</a> </div> <ul class="list-inline foot_icon"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-rss"></i></a></li> <li><a href="#"><i class="fa fa-youtube-play"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> <div class="copyright"> Powered by <a href="https://yaw.ee" target="_blank">yawee</a> © 2013-2017 <a href="https://www.chinsea.net" target="_blank">Chinsea</a> Inc. </div> </footer> <script type="text/javascript" src="//lib.baomitu.com/Swiper/4.0.7/js/swiper.min.js"></script> <script type="text/javascript"> var winHeight = $(window).height(); var hH = $(".head_content").height(); $("header").css("height", winHeight + "px"); $(".color").css("height", winHeight + "px"); $(".head_content").css("top", winHeight / 2 - hH / 2 + "px"); $(window).scroll(function() { if ($(window).scrollTop() >= 200) { $("nav").addClass("nav_bg"); } else if ($(window).scrollTop() <= 200) { $("nav").removeClass("nav_bg"); } }) $(window).scroll(function() { //为页面添加页面滚动监听事件 var wst = $(window).scrollTop(); //滚动条距离顶端值 for (i = 1; i < 7; i++) { var oTop = $("#a" + i); if (!oTop.length) { return; } if (oTop.offset().top <= wst + 1) { $('nav li a').removeClass('active'); $("#a" + i + i).addClass('active'); } } }) $('nav li a').click(function() { $('nav li a').removeClass('active'); $(this).addClass('active'); }); //点击锚链接平滑滚动 $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 666); return false; } } }) </script> <script> var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', paginationClickable: true, autoplay: 2000, // effect : 'fade', // 如果需要前进后退按钮 // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev', // 如果需要滚动条 // scrollbar: '.swiper-scrollbar', }) </script> </body> </html> ``` 最后修改:2019 年 12 月 16 日 04 : 59 PM © 允许规范转载 赞赏 如果觉得我的文章对你有用,请随意赞赏 赞赏作者 支付宝微信
2 条评论
搞个中文版的看看哈
现在在自己写一套框架出来了,还在测试阶段,更适合国人用吧 :mrgreen: