zoukankan      html  css  js  c++  java
  • 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:响应式的列重置

    <!DOCTYPE html>
    <html>
    <head>
       <meta charset="utf-8"> 
       <title>Bootstrap 实例 - 响应式的列重置</title>
       <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
       <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
       <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
       <div class="row" >
          <div class="col-xs-6 col-sm-3" 
             style="background-color: #dedef8;
             box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
          <div class="col-xs-6 col-sm-3" 
             style="background-color: #dedef8;box-shadow: 
             inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat.
             </p>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                eiusmod tempor incididunt ut. 
             </p>
          </div>
    
          <div class="clearfix visible-xs"></div>
    
          <div class="col-xs-6 col-sm-3" 
             style="background-color: #dedef8;
             box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                laboris nisi ut aliquip ex ea commodo consequat. 
             </p>
          </div>
          <div class="col-xs-6 col-sm-3" 
             style="background-color: #dedef8;box-shadow: 
             inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim 
             </p>
          </div>
       </div>
    </div>
    
    </body>
    </html>

  • 相关阅读:
    函数与方法(方法前 +
    1362 : 修补木桶 -- 最长的最短边
    149. Max Points on a Line *HARD* 求点集中在一条直线上的最多点数
    148. Sort List -- 时间复杂度O(n log n)
    133. Clone Graph 138. Copy List with Random Pointer 拷贝图和链表
    debug && release
    静态库 && 动态库
    枚举
    获取当前用户所使用的是什么浏览器
    java实现在图片上编辑文本内容
  • 原文地址:https://www.cnblogs.com/tszr/p/10886206.html
Copyright © 2011-2022 走看看