参考资料：

　　bootstrap：http://www.bootcss.com/

汤姆大叔的博客： 《深入理解Bootstrap》http://item.jd.com/11462962.html

截图：

屏幕大于970px：

屏幕小于970px大于750px：

　

　`

小于780px：

页面代码：

 <!DOCTYPE html>

 <html lang="zh-CN">

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title></title>

     <link href="css/bootstrap.min.css" rel="stylesheet">

     <link href="css/index.css" rel="stylesheet">

     <!--[if lt IE 9]>

       <script src="js/html5shiv.min.js"></script>

      <script src="js/respond.min.js"></script>

     <![endif]-->

     <!--[if lte IE 6] -->

     <!--[if lte IE 7]>

       <link rel="stylesheet" type="text/css" href="css/bootstrap-ie6.css">

       <link rel="stylesheet" type="text/css" href="css/ie.css">

     <![endif]-->

   </head>

   <body>

     <nav>

         <div class="container">

             <div class="navbar navbar-default">

                 <div class="navbar-header">

                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                     <span class="sr-only">Toggle navigation</span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                     <span class="icon-bar"></span>

                   </button>

                   <a class="navbar-brand" href="#">SOCCER</a>

                 </div>

                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                   <ul class="nav navbar-nav navbar-right">

                     <li class="active"><a href="#">HOME</a></li>

                     <li><a href="#">ABOUT US</a></li>

                     <li><a href="#">GALLERY</a></li>

                     <li><a href="#">TRAINING</a></li>

                     <li><a href="#">NEWS & EVENTS</a></li>

                     <li><a href="#">CONTACT</a></li>

                   </ul>

                 </div>

             </div>

         </div>

     </nav>

     <div class="container-fluid search-for  ">

         <div class="container clearfix">

             <div class="input-group form-search">

                 <input type="text" class="form-input">

                 <input type="button" class="form-btn">

             </div>

             <div class=" share-main">

                 <a href="#" class="shareIcon-1"></a>

                 <a href="#" class="shareIcon-2"></a>

                 <a href="#" class="shareIcon-3"></a>

                 <a href="#" class="shareIcon-4"></a>

                 <a href="#" class="shareIcon-5"></a>

             </div>

         </div>

     </div>

     <div class="container-fluid">

         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000">

           <div class="carousel-inner" role="listbox">

             <div class="item active">

               <img src="data:images/bnr1.jpg" alt="...">

               <div class="carousel-captions">

                     <div class="carousel-title">

                         Sed ultricies elementum.

                     </div>

                     <div class="carousel-info">Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu,

                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.

                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.</div>

               </div>

             </div>

             <div class="item">

               <img src="data:images/bnr2.jpg" alt="...">

               <div class="carousel-captions">

                 <div class="carousel-title">Curabitur turpis posuere rutrum.</div>

                 <div class="carousel-info">

                     Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu,

                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.

                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.

                 </div>

               </div>

             </div>

             <div class="item">

               <img src="data:images/bnr3.jpg" alt="...">

               <div class="carousel-captions">

                 <div class="carousel-title">Sed ultricies elementum.</div>

                 <div class="carousel-info">Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu,

                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.

                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.</div>

               </div>

             </div>

           </div>

         </div>

     </div>

     <div class="container mt-20">

         <div class="row ">

             <div class="cl-r  col-xs-12 col-md-6 col-sm-6 mb-10">

                 <div class="news-block bg-pink">

                     <div>

                         <i class="icon-4"></i>

                     </div>

                     <div>

                         <h3>CHAMPIONS LEAGUE</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

             <div class=" col-md-6 col-sm-6 col-xs-12 mb-10">

                 <div class="news-block bg-bule">

                     <div>

                         <i class="icon-3"></i>

                     </div>

                     <div>

                         <h3>NEWS & EVENTS</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

         </div>

         <div class="row mb-10">

             <div class="cl-r col-md-6 col-sm-6 col-xs-12 mb-10">

                 <div class="news-block bg-red">

                     <div>

                         <i class="icon-1"></i>

                     </div>

                     <div>

                         <h3>TRAINING</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

             <div class=" col-md-6 col-sm-6 col-xs-12">

                 <div class="news-block bg-cyan">

                     <div>

                         <i class="icon-2"></i>

                     </div>

                     <div>

                         <h3>FINAL TOURNAMENT</h3>

                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>

                     </div>

                 </div>

             </div>

         </div>

         <div class="row mb-10">

             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">

                 <img src="data:images/c1.jpg" alt="">

                 <div>

                     <h3 class="colr-red">

                         Champion's League

                     </h3>

                     <p>

                         Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker.

                     </p>

                     <a href="#">Read More..</a>

                 </div>

             </div>

             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">

                 <img src="data:images/c2.jpg" alt="">

                 <div>

                     <h3 class="colr-red">

                         Women's Cup

                     </h3>

                     <p>

                         Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker.

                     </p>

                     <a href="#">Read More..</a>

                 </div>

             </div>

             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">

                 <img src="data:images/c3.jpg" alt="">

                 <h3 class="colr-red">

                     Final Tournment

                 </h3>

                 <p>

                     Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker.

                 </p>

                 <a href="#">Read More..</a>

             </div>

         </div>

         <div class="row mb-20">

             <div class=" col-sm-6 col-xs-12 col-md-4 bottom-list">

                 <h3 class="colr-red">

                     POPULAR TAGS

                 </h3>

                 <ul class="list-unstyled">

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>

                 </ul>

             </div>

             <div class=" col-xs-12 col-sm-6 col-md-4 bottom-list">

                 <h3 class="colr-red">

                     ABOUT

                 </h3>

                 <b>

                     Morbi sed arcu mollis, elementum erat venenatis, tincidunt tellus.

                 </b>

                 <img src="data:images/cnt.ab.jpg"  alt="">

                 <p>

                     Aenean ut condimentum magna, mattis pretium massa. Sed sollicitudin ullamcorper auctor. Duis vestibulum velit id augue pulvinar egestas. Morbi sed orci auctor, feugiat felis at, fermentum magna. In ac egestas lectus.

                 </p>

             </div>

             <div class="col-sm-12 col-xs-12 col-md-4 bottom-list-back">

                 <div>

                     <h3 class="colr-red">OUR COACHES</h3>

                     <div class="media">

                           <div class="media-left">

                             <a href="#">

                               <img class="media-object" data-src="holder.js/64x64"  src="data:images/ch1.jpg">

                             </a>

                           </div>

                           <div class="media-body">

                             <h4 class="media-heading">Phasellus at Tellus</h4>

                             <h5>Aenean vestibulum</h5>

                             <p>

                                 Donec ornare massa at velit fringilla, condimentum magna ornare tincidunt nulla dignissim.

                             </p>

                           </div>

                     </div>

                     <hr/>

                     <div class="media">

                           <div class="media-left">

                             <a href="#">

                               <img class="media-object" data-src="holder.js/64x64"  src="data:images/ch2.jpg">

                             </a>

                           </div>

                           <div class="media-body">

                             <h4 class="media-heading">Phasellus at Tellus

                             </h4>

                             <h5>Aenean vestibulum</h5>

                             <p>

                                 Donec ornare massa at velit fringilla, condimentum magna ornare tincidunt nulla dignissim.

                             </p>

                           </div>

                     </div>

                 </div>

             </div>

         </div>

     </div>

     <div class="footer">

         <div class="container">

             <div class="row">

                 <div class="col-sm-12 col-xs-12 col-md-5 copywrite">

                     <p>© 2015 All Rights Reseverd Design by <a href="http://w3layouts.com/">W3layouts</a> </p>

                 </div>

                 <div class="col-sm-12 col-xs-12 col-md-7 footer-main">

                      <ul class="footer-ul">

                          <li><a href="index.html">HOME</a></li>

                          <li><a href="index.html">ABOUT US</a></li>

                          <li><a href="index.html">GALLERY</a></li>

                          <li><a href="index.html">TRAINING</a></li>

                          <li><a href="index.html">NEWS &amp; EVENTS</a></li>

                          <li><a href="index.html">CONTACT</a></li>

                      </ul>

                 </div>

             </div>

         </div>

     </div>

     <script src="js/jquery.min.js"></script>

     <script src="js/bootstrap.min.js"></script>

     <!--[if lte IE 6]>

           <script type="text/javascript" src="js/bootstrap-ie.js"></script>

     <![endif]-->

   </body>

 </html>

index.css代码：

 body,html{font-family: 'Cabin', sans-serif;}

 ul,li{ padding:;margin:;}

 img{ max-width:100%; width:100%;}

 .clearfix:after{content: "";display: block;height:;clear: both;visibility: hidden;overflow: hidden;}

 .clearfix { *zoom:;}

 input{ margin:;padding:; background: none;border:none;}

 .mt-20{ margin-top:20px;}

 .mb-20{ margin-bottom:20px;}

 .mb-10{ margin-bottom:10px;}

 .cl-r{ padding-right:;;}

 .colr-red{color: #ed645c;}

 .container-fluid{ padding:;}

 .navbar-default{ background-color:#fff;border:none; margin-bottom:;font-family: 'Audiowide', cursive;}

 .navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ background-color: #fff; color: #ed645c;transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5;    -o-transition: all .5s; }

 .navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ color:#ed645c; font-weight:;font-family: 'Audiowide', cursive;}

 .navbar-brand{ font-size: 36px;}

 .carousel-inner>.item>a>img, .carousel-inner>.item>img {line-height:;width: 100%;background-color: #fff;}

 .search-for{  background-color: #ed645c; padding:18px 0; font-size:;}

 .form-search{ float:left; width:35%; font-size:;}

 .form-input{ width:70%;height:32px;font-size:14px;line-height:32px;padding:0 15px; background-color: #fff; vertical-align: top; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}

 .form-btn{ width:39px; height:32px; background: #fff url(../images/search1.png) no-repeat center center;vertical-align: top;border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

 .share-main{ float:right;margin-top:5px;}

 .share-main a{ display: inline-block; width:22px; height:22px;margin-left:10px; background: url(../images/social.png) no-repeat 0 0;}

 a.shareIcon-1{ background-position:-8px -4px; }

 a.shareIcon-1:hover{ background-position:-8px -41px; }

 a.shareIcon-2{ background-position:-44px -5px; }

 a.shareIcon-2:hover{ background-position:-44px -38px; }

 a.shareIcon-3{ background-position:-85px -5px; }

 a.shareIcon-3:hover{ background-position:-85px -38px; }

 a.shareIcon-4{ background-position:-125px -5px; }

 a.shareIcon-4:hover{ background-position:-125px -38px; }

 a.shareIcon-5{ background-position:-168px -8px; }

 a.shareIcon-5:hover{ background-position:-168px -41px; }

 .carousel-captions{ position: absolute; width: 56%;padding:2em;left:;top:35%; background:rgba(0,0,0,0.5); text-align: center; color: #fff;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; }

 .carousel-title{ font-size: 2em; overflow: hidden;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }

 .carousel-info{ font-size: 1.2em; line-height: 1.75em;margin:1em 2em; }

 .news-block{ padding:20px; color:#fff;}

 h3{font-family: 'Audiowide', cursive;}

 .bg-pink{ background-color: #ee987f;}

 .bg-bule{ background-color: #3277aa;}

 .bg-red{ background-color: #ed645c;}

 .bg-cyan{ background-color: #95bab4;}

 i.icon-1,i.icon-2,i.icon-3,i.icon-4{display: inline-block;width:54px;height:54px;margin-top:20px;}

 i.icon-1{  background: url(../images/cl.png) no-repeat 0px 0px;}

 i.icon-2{  background: url(../images/cl2.png) no-repeat 0px 0px;}

 i.icon-3{  background: url(../images/cl3.png) no-repeat 0px 0px;}

 i.icon-4{  background: url(../images/cl4.png) no-repeat 0px 0px;}

 .brief-info {}

 .brief-info h3{ font-size: 1.4em;line-height:20px;margin-top:15px;margin-bottom:10px; }

 .brief-info p{ color: #999; line-height: 1.5em; font-size: 14px;}

 .brief-info a{  display:inline-block;color: #000;margin-bottom:10px;}

 .brief-info a:hover{ text-decoration: none;}

 .bottom-list{}

 .bottom-list h3{ font-size: 1.85em;}

 .bottom-list ul{}

 .bottom-list li{ padding-left:17px;line-height: 40px; background: url(../images/marker.png) no-repeat 0 center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

 .bottom-list li a{ color: #999;}

 .bottom-list li a:hover{ color: #ed645c; text-decoration: none;}

 .bottom-list img{margin:0.625em 0;}

 .bottom-list p{color: #999;line-height: 1.5em;}

 .bottom-list-back{ padding:24px; background-color:#000;}

 .bottom-list-back h4{ color: #fff;}

 .bottom-list-back h5{ color: #de2e0b;}

 .bottom-list-back p{ color: #ccc;}

 .media-left{ width:20%;}

 .footer{ border-top:1px solid #000; padding:37px 0; font-size: 14px; }

 .footer p{ margin}

 .footer p a{color:#ed645c;}

 .footer-ul{ text-align: right;}

 .footer-ul li{ display: inline-block; padding:0 10px; text-align: center;}

 .footer-ul a{ color: #000;transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5;    -o-transition: all .5s;}

 .footer-ul a:hover{ color: #ed645c; text-decoration: none;}

 @media ( max-width: 970px ){

     .carousel-title{ font-size: 0.8em;}

     .carousel-info{ font-size: 0.5em; }

     .copywrite{ text-align: center;font-size: 0.8em;}

     .footer-ul{ text-align: center; font-size: 0.6em;}

     .carousel-captions{ width:90%;}

     .carousel-captions{ top:20%;}

 }

 @media ( max-width: 768px ){

     .carousel-captions{ padding:0.3em;}

     .carousel-title{ font-size: 1.5em;}

     .carousel-info{ font-size: 0.3em; }

     .cl-r{ padding-right:15px;}

 }

 @media ( max-width: 480px ){

     .carousel-info{ height: 6em; overflow: hidden;}

 }

 @media ( max-width: 320px ){

     .form-search{width: 100%;text-align: center;}

     .form-search{ float:none;}

     .share-main{ float:none; text-align: center;}

     .news-block h3{ font-size: 20px; margin:10px 0;}

     .footer-ul li{margin-bottom:5px;}

     .carousel-captions{ top:10%;}

     .carousel-info{ margin:10px; height:40px; overflow: hidden; font-size: 12px;}

     i.icon-1,i.icon-2,i.icon-3,i.icon-4{display: inline-block;width:24px;height:24px;margin-top:10px;  }

     i.icon-1{  background: url(../images/cl.png) no-repeat 0px 0px;background-size:100%;}

     i.icon-2{  background: url(../images/cl2.png) no-repeat 0px 0px;background-size:100%;}

     i.icon-3{  background: url(../images/cl3.png) no-repeat 0px 0px;background-size:100%;}

     i.icon-4{  background: url(../images/cl4.png) no-repeat 0px 0px;background-size:100%;}

 }

后记：

bootstrap的架构(出自《深入理解Bootstrap》);

其实是用less预编译 现在也有sass版本,bootstrap的less源码也不难只不过过于琐碎和众多的变量;

响应式主要依靠 @media ( max-width: 970px ){} 去从写 宽大大小,但本身@media不兼容 虽然bootstrap出了兼容插件bsie插件但本人做demo的时候测试也没有起作用。。。。

响应式bootstrap - demo的更多相关文章

  1. 50个令人惊奇的jQuery插件（对话框和表单篇）及免费的响应式bootstrap管理员后台界面主题 - Charisma

    http://www.woiweb.net/50-amazing-jquery-plugins.html 多文件文件下载 免费的响应式bootstrap管理员后台界面主题 – Charisma htt ...

  2. Java程序员的日常 —— 响应式导航Demo

    这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...

  3. 响应式布局 —— Demo

    响应式布局实例演示What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这 ...

  4. 实现响应式——Bootstrap的删格系统详解

    Bootstrap 今天和大家一起学习如今很流行的前端框架之一,Bootstrap框架. 前言 今天带大家看看Bootstrap框架,其实我呢主要还是用里面的删格系统,单单这个删格系统就比较强大了.其 ...

  5. 简单响应式Bootstrap框架中文官网页面模板

    链接:http://pan.baidu.com/s/1o7MQ6RC 密码:kee5

  6. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  7. 带你玩转JavaWeb开发之五-如何完成响应式开发页面

    响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...

  8. 响应式设计的5个CSS实用技巧

    正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...

  9. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

随机推荐

  1. 安装Laravel框架，利用composer

    学一学PHP框架--Laravel的设计思想. 先安装Laravel: Laravel的文档很全:参考 http://www.golaravel.com/ 既然文档很全,就简单说下几个重点.以下以安装 ...

  2. HTML页面全屏/退出全屏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Go 连接 mysql 数据库的简单测试.

    1. import 的时候 总是很慢 容易失败 所以 优先导入几个必须要的包 go get github.com/go-sql-driver/mysql 安装完之后 会在gopath 目录下发现相关的 ...

  4. 2019阿里P7最新总结Spring Boot面试问题

        Spring Boot一直是Spring生态系统的关键参与者.该项目通过其自动配置功能使我们的生活更加轻松.在本教程中,我们将介绍在求职面试中可能出现的一些与Spring Boot相关的最常见 ...

  5. 题解 P1601 【A+B Problem（高精）】

    P1601 A+B Problem(高精) 题目描述 高精度加法,x相当于a+b problem,b不用考虑负数. 输入输出格式 输入格式: 分两行输入a,b<=10^500 输出格式: 输出只 ...

  6. dubbo框架提供Main方法运行容器的几种方式（转）

      本文使用的是dubbo提供的主类com.alibaba.dubbo.container.Main启动容器. 主要区别是提供不同插件的的启动方式. 目录 一.项目内容  1.1.目录结构图  1.2 ...

  7. Raspberry pi connect temperature and humidity to onenet (移动云平台）

    工具 树莓派3 modelB 一个 dht11温湿度传感器一个  onenet平台 安装好requests库的python(一定要安装好不然代码不能正确运行,可以参考我的另一篇博文点击打开链接) 树莓 ...

  8. css---遮罩层

    <div id="body"> 显示页面的全部内容 <div id="open">打开弹框</div> </div&g ...

  9. Django_rbac_demo 权限控制组件框架模型

    rbac 权限控制组件 基于角色的权限控制 本质每个权限即为一个 URL 项目组件结构 表结构 Role (title, permission) -(ManyToManyField)-   User  ...

  10. rest framework 分页，版本

    分页 分页器的引入 from rest_framework.pagination import PageNumberPagination, LimitOffsetPagination, CursorP ...