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>

  • 相关阅读:
    在UNICODE编码格式下, CString 转换为 char* :
    inet_ntop(), inet_pton(), htonl(), ntohl()
    'bool std::operator <(const std::_Tree<_Traits> &,const std::_Tree<_Traits> &)'
    NMAKE:fatal error U1077.“...cl.exe” return code 0xc0000135
    拷贝(复制)构造函数和赋值函数
    GIS 地图中术语解释
    Linux 下防火墙端口设置
    LInux 下安装jdk
    ln 命令
    zip命令
  • 原文地址:https://www.cnblogs.com/tszr/p/10886235.html
Copyright © 2011-2022 走看看