zoukankan      html  css  js  c++  java
  • 响应式bootstrap

    参考资料:

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

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

    截图:

    屏幕大于970px:

     

    屏幕小于970px大于750px

     

     `

    小于780px:

    页面代码:

      1 <!DOCTYPE html>
      2 <html lang="zh-CN">
      3   <head>
      4     <meta charset="utf-8">
      5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6     <meta name="viewport" content="width=device-width, initial-scale=1">
      7     <title></title>
      8     <link href="css/bootstrap.min.css" rel="stylesheet">
      9     <link href="css/index.css" rel="stylesheet">
     10 
     11     <!--[if lt IE 9]>
     12       <script src="js/html5shiv.min.js"></script>
     13      <script src="js/respond.min.js"></script>
     14     <![endif]-->
     15     <!--[if lte IE 6] -->
     16 
     17     <!--[if lte IE 7]>
     18       <link rel="stylesheet" type="text/css" href="css/bootstrap-ie6.css">
     19       <link rel="stylesheet" type="text/css" href="css/ie.css">
     20     <![endif]-->
     21 
     22   </head>
     23   <body> 
     24     <nav>
     25         <div class="container">
     26             <div class="navbar navbar-default">
     27                 <div class="navbar-header">
     28                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
     29                     <span class="sr-only">Toggle navigation</span>
     30                     <span class="icon-bar"></span>
     31                     <span class="icon-bar"></span>
     32                     <span class="icon-bar"></span>
     33                   </button>
     34                   <a class="navbar-brand" href="#">SOCCER</a>
     35                 </div>
     36                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     37                   <ul class="nav navbar-nav navbar-right">
     38                     <li class="active"><a href="#">HOME</a></li>
     39                     <li><a href="#">ABOUT US</a></li>
     40                     <li><a href="#">GALLERY</a></li>
     41                     <li><a href="#">TRAINING</a></li>
     42                     <li><a href="#">NEWS & EVENTS</a></li>
     43                     <li><a href="#">CONTACT</a></li>
     44                   </ul>
     45                 </div>
     46             </div>
     47         </div>    
     48     </nav> 
     49     <div class="container-fluid search-for  ">
     50         <div class="container clearfix">
     51             <div class="input-group form-search">
     52                 <input type="text" class="form-input">
     53                 <input type="button" class="form-btn">
     54             </div>
     55             <div class=" share-main">
     56                 <a href="#" class="shareIcon-1"></a>
     57                 <a href="#" class="shareIcon-2"></a>
     58                 <a href="#" class="shareIcon-3"></a>
     59                 <a href="#" class="shareIcon-4"></a>
     60                 <a href="#" class="shareIcon-5"></a>
     61             </div>
     62         </div>
     63     </div>
     64     <div class="container-fluid">
     65         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000">
     66           <div class="carousel-inner" role="listbox">
     67             <div class="item active">
     68               <img src="images/bnr1.jpg" alt="...">
     69               <div class="carousel-captions">
     70                     <div class="carousel-title">
     71                         Sed ultricies elementum.
     72                     </div>
     73                     <div class="carousel-info">Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu, 
     74                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.
     75                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.</div>
     76               </div>
     77             </div>
     78             <div class="item">
     79               <img src="images/bnr2.jpg" alt="...">
     80               <div class="carousel-captions">
     81                 <div class="carousel-title">Curabitur turpis posuere rutrum.</div>
     82                 <div class="carousel-info">
     83                     Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu, 
     84                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.
     85                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.
     86                 </div>
     87               </div>
     88             </div>
     89             <div class="item">
     90               <img src="images/bnr3.jpg" alt="...">
     91               <div class="carousel-captions">
     92                 <div class="carousel-title">Sed ultricies elementum.</div>
     93                 <div class="carousel-info">Lorem Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec a odio quam. Aenean ipsum arcu, 
     94                   luctus vel ultricies ut, commodo sed turpis. Phasellus tristique lorem sit amet tellus dignissim hendrerit.
     95                   In hac habitasse platea dictumst. Sed vehicula volutpat varius elit. consectetur adipiscing elit.</div>
     96               </div>
     97             </div>
     98           </div>
     99         </div>
    100     </div>
    101     <div class="container mt-20">
    102         <div class="row ">
    103             <div class="cl-r  col-xs-12 col-md-6 col-sm-6 mb-10">
    104                 <div class="news-block bg-pink">
    105                     <div>
    106                         <i class="icon-4"></i>
    107                     </div>
    108                     <div>
    109                         <h3>CHAMPIONS LEAGUE</h3>
    110                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
    111                     </div>
    112                 </div>
    113             </div>
    114             <div class=" col-md-6 col-sm-6 col-xs-12 mb-10">
    115                 <div class="news-block bg-bule">
    116                     <div>
    117                         <i class="icon-3"></i>
    118                     </div>
    119                     <div>
    120                         <h3>NEWS & EVENTS</h3>
    121                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
    122                     </div>
    123                 </div>
    124             </div>
    125         </div>
    126         <div class="row mb-10">
    127             <div class="cl-r col-md-6 col-sm-6 col-xs-12 mb-10">
    128                 <div class="news-block bg-red">
    129                     <div>
    130                         <i class="icon-1"></i>
    131                     </div>
    132                     <div>
    133                         <h3>TRAINING</h3>
    134                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
    135                     </div>
    136                 </div>
    137             </div>
    138             <div class=" col-md-6 col-sm-6 col-xs-12"> 
    139                 <div class="news-block bg-cyan">
    140                     <div>
    141                         <i class="icon-2"></i>
    142                     </div>
    143                     <div>
    144                         <h3>FINAL TOURNAMENT</h3>
    145                         <p>Vestibulum malesuada nisi sit amet justo ullamcorper, non convallis justo consequat Integer et urna bibendum elit accumsan interdum.</p>
    146                     </div>
    147                 </div>
    148             </div>
    149         </div>
    150         <div class="row mb-10">
    151             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">
    152                 <img src="images/c1.jpg" alt="">
    153                 <div>
    154                     <h3 class="colr-red">
    155                         Champion's League
    156                     </h3>
    157                     <p>
    158                         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.
    159                     </p>
    160                     <a href="#">Read More..</a>
    161                 </div>
    162             </div>
    163             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">
    164                 <img src="images/c2.jpg" alt="">
    165                 <div>
    166                     <h3 class="colr-red">
    167                         Women's Cup
    168                     </h3>
    169                     <p>
    170                         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.
    171                     </p>
    172                     <a href="#">Read More..</a>
    173                 </div>
    174             </div>
    175             <div class="col-md-4 col-sm-4 col-xs-12 brief-info">
    176                 <img src="images/c3.jpg" alt="">
    177                 <h3 class="colr-red">
    178                     Final Tournment
    179                 </h3>
    180                 <p>
    181                     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.
    182                 </p>
    183                 <a href="#">Read More..</a>
    184             </div>
    185         </div>
    186         <div class="row mb-20">
    187             <div class=" col-sm-6 col-xs-12 col-md-4 bottom-list">
    188                 <h3 class="colr-red">
    189                     POPULAR TAGS
    190                 </h3>
    191                 <ul class="list-unstyled">
    192                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    193                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    194                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    195                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    196                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    197                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    198                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    199                     <li><a href="#">Ut vehicula nisl ut purus tempus aliquet.</a></li>
    200                 </ul>
    201             </div>
    202             <div class=" col-xs-12 col-sm-6 col-md-4 bottom-list">
    203                 <h3 class="colr-red">
    204                     ABOUT
    205                 </h3>
    206                 <b>
    207                     Morbi sed arcu mollis, elementum erat venenatis, tincidunt tellus.
    208                 </b>
    209                 <img src="images/cnt.ab.jpg"  alt="">
    210                 <p>
    211                     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.
    212                 </p>
    213             </div>
    214             <div class="col-sm-12 col-xs-12 col-md-4 bottom-list-back">
    215                 <div>
    216                     <h3 class="colr-red">OUR COACHES</h3>
    217                     <div class="media">
    218                           <div class="media-left">
    219                             <a href="#">
    220                               <img class="media-object" data-src="holder.js/64x64"  src="images/ch1.jpg">
    221                             </a>
    222                           </div>
    223                           <div class="media-body">
    224                             <h4 class="media-heading">Phasellus at Tellus</h4>
    225                             <h5>Aenean vestibulum</h5>
    226                             <p>
    227                                 Donec ornare massa at velit fringilla, condimentum magna ornare tincidunt nulla dignissim.
    228                             </p>
    229                           </div>
    230                     </div>
    231                     <hr/>
    232                     <div class="media">
    233                           <div class="media-left">
    234                             <a href="#">
    235                               <img class="media-object" data-src="holder.js/64x64"  src="images/ch2.jpg">
    236                             </a>
    237                           </div>
    238                           <div class="media-body">
    239                             <h4 class="media-heading">Phasellus at Tellus
    240                             </h4>
    241                             <h5>Aenean vestibulum</h5>
    242                             <p>
    243                                 Donec ornare massa at velit fringilla, condimentum magna ornare tincidunt nulla dignissim.
    244                             </p>
    245                           </div>
    246                     </div>
    247                 </div>
    248             </div>
    249         </div>
    250     </div>
    251     <div class="footer">
    252         <div class="container">
    253             <div class="row">
    254                 <div class="col-sm-12 col-xs-12 col-md-5 copywrite">
    255                     <p>© 2015 All Rights Reseverd Design by <a href="http://w3layouts.com/">W3layouts</a> </p>
    256                 </div>
    257                 <div class="col-sm-12 col-xs-12 col-md-7 footer-main">
    258                      <ul class="footer-ul">
    259                          <li><a href="index.html">HOME</a></li>
    260                          <li><a href="index.html">ABOUT US</a></li>
    261                          <li><a href="index.html">GALLERY</a></li>
    262                          <li><a href="index.html">TRAINING</a></li>
    263                          <li><a href="index.html">NEWS &amp; EVENTS</a></li>
    264                          <li><a href="index.html">CONTACT</a></li>
    265                      </ul>
    266                 </div>
    267             </div>
    268         </div>
    269     </div>
    270     <script src="js/jquery.min.js"></script>
    271     <script src="js/bootstrap.min.js"></script>
    272     <!--[if lte IE 6]>
    273           <script type="text/javascript" src="js/bootstrap-ie.js"></script>
    274     <![endif]-->
    275   </body>
    276 </html>
    View Code

    index.css代码:

      1 body,html{font-family: 'Cabin', sans-serif;}
      2 ul,li{ padding:0;margin:0;}
      3 
      4 img{ max-width:100%; width:100%;}
      5 .clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden;}
      6 .clearfix { *zoom: 1;}
      7 input{ margin:0;padding:0; background: none;border:none;}
      8 .mt-20{ margin-top:20px;}
      9 .mb-20{ margin-bottom:20px;}
     10 .mb-10{ margin-bottom:10px;}
     11 .cl-r{ padding-right:0;;}
     12 
     13 .colr-red{color: #ed645c;}
     14 .container-fluid{ padding:0;}
     15 .navbar-default{ background-color:#fff;border:none; margin-bottom:0;font-family: 'Audiowide', cursive;}
     16 .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; }
     17 
     18 .navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{ color:#ed645c; font-weight: 600;font-family: 'Audiowide', cursive;}
     19 .navbar-brand{ font-size: 36px;}
     20 
     21 .carousel-inner>.item>a>img, .carousel-inner>.item>img {line-height: 1;width: 100%;background-color: #fff;}
     22 .search-for{  background-color: #ed645c; padding:18px 0; font-size: 0;}
     23 .form-search{ float:left; width:35%; font-size: 0;}
     24 .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;}
     25 .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;}
     26 .share-main{ float:right;margin-top:5px;}
     27 .share-main a{ display: inline-block; width:22px; height:22px;margin-left:10px; background: url(../images/social.png) no-repeat 0 0;}
     28 a.shareIcon-1{ background-position:-8px -4px; }
     29 a.shareIcon-1:hover{ background-position:-8px -41px; }
     30 a.shareIcon-2{ background-position:-44px -5px; }
     31 a.shareIcon-2:hover{ background-position:-44px -38px; }
     32 a.shareIcon-3{ background-position:-85px -5px; }
     33 a.shareIcon-3:hover{ background-position:-85px -38px; }
     34 a.shareIcon-4{ background-position:-125px -5px; }
     35 a.shareIcon-4:hover{ background-position:-125px -38px; }
     36 a.shareIcon-5{ background-position:-168px -8px; }
     37 a.shareIcon-5:hover{ background-position:-168px -41px; }
     38 .carousel-captions{ position: absolute; width: 56%;padding:2em;left:0;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; }
     39 .carousel-title{ font-size: 2em; overflow: hidden;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
     40 .carousel-info{ font-size: 1.2em; line-height: 1.75em;margin:1em 2em; }
     41 .news-block{ padding:20px; color:#fff;}
     42 h3{font-family: 'Audiowide', cursive;}
     43 .bg-pink{ background-color: #ee987f;}
     44 .bg-bule{ background-color: #3277aa;}
     45 .bg-red{ background-color: #ed645c;}
     46 .bg-cyan{ background-color: #95bab4;}
     47 i.icon-1,i.icon-2,i.icon-3,i.icon-4{display: inline-block;width:54px;height:54px;margin-top:20px;}
     48 i.icon-1{  background: url(../images/cl.png) no-repeat 0px 0px;}
     49 i.icon-2{  background: url(../images/cl2.png) no-repeat 0px 0px;}
     50 i.icon-3{  background: url(../images/cl3.png) no-repeat 0px 0px;}
     51 i.icon-4{  background: url(../images/cl4.png) no-repeat 0px 0px;}
     52 .brief-info {}
     53 .brief-info h3{ font-size: 1.4em;line-height:20px;margin-top:15px;margin-bottom:10px; }
     54 .brief-info p{ color: #999; line-height: 1.5em; font-size: 14px;}
     55 .brief-info a{  display:inline-block;color: #000;margin-bottom:10px;}
     56 .brief-info a:hover{ text-decoration: none;}
     57 .bottom-list{}
     58 .bottom-list h3{ font-size: 1.85em;}
     59 .bottom-list ul{}
     60 .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;}
     61 .bottom-list li a{ color: #999;}
     62 .bottom-list li a:hover{ color: #ed645c; text-decoration: none;}
     63 .bottom-list img{margin:0.625em 0;}
     64 .bottom-list p{color: #999;line-height: 1.5em;}
     65 .bottom-list-back{ padding:24px; background-color:#000;}
     66 .bottom-list-back h4{ color: #fff;}
     67 .bottom-list-back h5{ color: #de2e0b;}
     68 .bottom-list-back p{ color: #ccc;}
     69 .media-left{ width:20%;}
     70 .footer{ border-top:1px solid #000; padding:37px 0; font-size: 14px; }
     71 .footer p{ margin}
     72 .footer p a{color:#ed645c;}
     73 .footer-ul{ text-align: right;}
     74 .footer-ul li{ display: inline-block; padding:0 10px; text-align: center;}
     75 .footer-ul a{ color: #000;transition: all .5s;-moz-transition: all .5s;-webkit-transition: all .5;    -o-transition: all .5s;}
     76 .footer-ul a:hover{ color: #ed645c; text-decoration: none;}
     77 
     78 
     79 
     80 @media ( max- 970px ){
     81     .carousel-title{ font-size: 0.8em;}
     82     .carousel-info{ font-size: 0.5em; }
     83     .copywrite{ text-align: center;font-size: 0.8em;}
     84     .footer-ul{ text-align: center; font-size: 0.6em;}
     85     .carousel-captions{ width:90%;}
     86     .carousel-captions{ top:20%;}
     87 }
     88 @media ( max- 768px ){
     89     .carousel-captions{ padding:0.3em;}
     90     .carousel-title{ font-size: 1.5em;}
     91     .carousel-info{ font-size: 0.3em; }
     92     .cl-r{ padding-right:15px;}
     93 }
     94 @media ( max- 480px ){
     95     .carousel-info{ height: 6em; overflow: hidden;}
     96 }
     97 @media ( max- 320px ){
     98     
     99     .form-search{width: 100%;text-align: center;}
    100     .form-search{ float:none;}
    101     .share-main{ float:none; text-align: center;}
    102     .news-block h3{ font-size: 20px; margin:10px 0;}
    103     .footer-ul li{margin-bottom:5px;}
    104     .carousel-captions{ top:10%;}
    105     .carousel-info{ margin:10px; height:40px; overflow: hidden; font-size: 12px;}    
    106     i.icon-1,i.icon-2,i.icon-3,i.icon-4{display: inline-block;width:24px;height:24px;margin-top:10px;  }
    107     i.icon-1{  background: url(../images/cl.png) no-repeat 0px 0px;background-size:100%;}
    108     i.icon-2{  background: url(../images/cl2.png) no-repeat 0px 0px;background-size:100%;}
    109     i.icon-3{  background: url(../images/cl3.png) no-repeat 0px 0px;background-size:100%;}
    110     i.icon-4{  background: url(../images/cl4.png) no-repeat 0px 0px;background-size:100%;}
    111     
    112 }
    113         
    View Code

    后记:

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

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

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

  • 相关阅读:
    php数据库常用函数
    什么是RESTful API
    RESTful API 设计指南
    json和jsonp的使用区别
    Memcached, Redis, MongoDB区别
    入门系列之在Nginx配置Gzip
    100行代码搞定抖音短视频App,终于可以和美女合唱了。
    游戏开发者注意!这个音频SDK可以完美兼容所有主流游戏引擎
    快速上手:在CVM上安装Apache
    聚焦小游戏技术生态,腾讯游戏云GAME-TECH落地厦门
  • 原文地址:https://www.cnblogs.com/auok/p/4674118.html
Copyright © 2011-2022 走看看