参考资料：

　　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. P1577 切绳子

    P1577 切绳子 题目描述 有N条绳子,它们的长度分别为Li.如果从它们中切割出K条长度相同的 绳子,这K条绳子每条最长能有多长?答案保留到小数点后2位. 输入输出格式 输入格式: 第一行两个整数N ...

  2. enex 转 md 格式的几种方式(免费版/氪金版)

    因为最近有读者投稿,用的是印象笔记,文件格式为 .enex ,一般发文章都用 markdown 格式,这叫我好生苦恼,于是乎,Google 搜了一下,找到了如下解决办法. 氪金版: 我只找到了一款比较 ...

  3. HTML/CSS 速写神器 Emmet语法

    Emmet 是高效.快速编写 HTML 和 CSS 代码的一种插件,如果还不了解,请戳Emmet — the essential toolkit for web-developers,再根据你使用的编 ...

  4. First ServiceStack Service

    博客1:ServiceStack Web Service 创建与调用简单示列 博客2:Hbuilder+vs2017 web api开发app 官方文档:servicestack docs 1.手动下 ...

  5. （hdu 6024） Building Shops

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6024 Problem Description HDU’s n classrooms are on a ...

  6. 监听 在xshell中

  7. 【学习总结】Git学习-GIT工作流-千峰教育（来自B站）

    Git工作流指南 - av32575602 文档资料 目录: 1-什么是版本控制系统 2-工作流简介 3-集中式工作流 4-功能分支工作流 5-GitFlow工作流 小记: 初看差点放弃了,不过后面还 ...

  8. Linux Redhat 7.6 操作系统 下载安装详解

    redhat 系统镜像分享 [百度网盘分享] (https://pan.baidu.com/s/1ALM6v1dAtPwmEt2tmyTghg ) 提取码:2i4o redhat 7.6版本安装详解 ...

  9. JarvisOJ Misc webshell分析

    分析压缩包中的数据包文件并获取flag.flag为32位大写md5. 神仙们还是强啊,webshell主要看http流,再过滤只剩下post请求 可以使用 http.request.method == ...

  10. Arrays 三种基本常用法

    一:背景 jdk中为了便于开发,给开发者提供了Arrays类,其中包含了很多数组的常用操作.例如快速输出.排序.查找等 二: import java.util.Arrays; //(需要引用class ...