参考资料：

　　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. 2、FreeRTOS任务相关API函数

    1.任务相关的API函数 函数存在于task.c中,主要的函数有: xTaskCreate():使用动态的方法创建一个任务: xTaskCreatStatic():使用静态的方法创建一个任务(用的非常 ...

  2. docker pull报错failed to register layer: Error processing tar file(exit status 1): open permission denied

    近来在一个云主机上操作docker pull,报错如下: failed to register layer: Error processing ): open /etc/init.d/hwclock. ...

  3. [Oracle维护工程师手记]为什么flashback 的时候既需要 flashback log ,又需要 archive log?

    为什么flashback 的时候既需要 flashback log ,又需要 archive log 呢? 如果数据库的活动不是很频繁,可以看到,其flashback log 是比较小的.那么是通过怎 ...

  4. keepalived--小白博客

    一.HA集群中的相关术语 1.节点(node) 运行HA进程的一个独立主机,称为节点,节点是HA的核心组成部分,每个节点上运行着操作系统和高可用软件服务,在高可用集群中,节点有主次之分,分别称之为主节 ...

  5. 移动端头部固定,上划逐渐透明 (vue)

    移动端头部固定,上划逐渐透明 <template> <div> <router-link tag="div" to="/" cla ...

  6. HTTP状态码表

    HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.所有状态码的第一个数字代表了响应的五种状态之一. 1xx消息 这一类型的状态码,代表请求已被 ...

  7. RecyclerView的点击、滑动、拖动事件

    效果图: 在gradle里导包   implementation 'com.android.support:recyclerview-v7:28.0.0' activity_main <?xml ...

  8. redis优化

    一.配置文件优化 bind 127.0.0.1 //允许连接的ip,如果就本机连接最后127.0.0.1 protected-mode yes //是否开启保护模式.默认开启,如果没有设置bind项的 ...

  9. Java基础：Java变量、数据类型、运算符（2）

    1. 标识符和关键字 1.1 标识符 标识符是用来标识类名.对象名.变量名.方法名.类型名.数组名.文件名的有效序列. Java规定,标识符由字母.数字.下划线“_”.美元符号“$”组成,并且首字母不 ...

  10. BEX5下增加sessionStorage监听器实现页面间数据刷新

    场景: A页面修改了数据,希望B页面能进行及时的同步前端数据,但是假如当A页面修改保存后,去获得B页面的model对象,会增加开发的难度,同时A页面也不能重复利用:假如在B页面的激活事件里面写刷新代码 ...