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">
    
       <h1>Hello, world!</h1>
    
       <div class="row">
    
          <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
             inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <h4>第一列</h4>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
    
          <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
             inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
             <h4>第二列 - 分为四个盒子</h4>
             <div class="row">
                <div class="col-md-6" style="background-color: #B18904;
                   box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                   <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                      assumenda minim organic quis.
                   </p>
                </div>
                <div class="col-md-6" style="background-color: #B18904;
                   box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                   <p> 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>
                </div>
             </div>
    
             <div class="row">
                <div class="col-md-6" style="background-color: #B18904;
                   box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                   <p>quis nostrud exercitation ullamco laboris nisi ut 
                      aliquip ex ea commodo consequat.
                   </p>
                </div>   
                <div class="col-md-6" style="background-color: #B18904;
                   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>
    
       </div>
    
    </div>
    
    </body>
    </html>

  • 相关阅读:
    浅谈Tarjan算法及思想
    浅谈前向星
    线段树初步
    树状数组的简单运用
    字典树(trie树)的指针简单实现pascal
    排序专辑
    POJ 2155 Matrix (矩形)
    区间动态规划
    hdu-2795 Billboard---线段树
    hdu-1754 I Hate It---线段树模板题
  • 原文地址:https://www.cnblogs.com/tszr/p/10886235.html
Copyright © 2011-2022 走看看