zoukankan      html  css  js  c++  java
  • bootstrap框架----像素

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
    div[class*='col-']{ background:#66; border:2px solid #000000;  height:50px; background:#006; color:#FFF;}
    </style>
    </head>
    
    <body>
    <div class="container">
    <div class="row">
         <div class="col-lg-4">col-lg-4适应1200像素 1200下则充填</div>
         <div class="col-lg-4">col-lg-4适应1200像素 1200下则充填</div>
          <div class="col-lg-4">col-lg-4适应1200像素 1200下则充填</div>
    </div>
    <div class="row">
         <div class="col-md-4">col-md-4适应960像素 960下则充填</div>
         <div class="col-md-4">col-md-4适应960像素 960下则充填</div>
         <div class="col-md-4">col-md-4适应960像素 960下则充填</div>
      </div>
     <div class="row">
         <div class="col-sm-4">col-sm-4适应768像素 768下则充填</div>
         <div class="col-sm-4">col-sm-4适应768像素 768下则充填</div>
         <div class="col-sm-4">col-sm-4适应768像素 768下则充填</div>
      </div>
      <div class="row">
         <div class="col-xs-4">col-xs-4不充填</div>
         <div class="col-xs-4">col-xs-4不充填</div>
         <div class="col-xs-4">col-xs-4不充填</div>
       </div>
        <div class="row">
         <div class="col-lg-4 col-md-6">col-lg-4 col-md-6低于md960像素则充填</div>
         <div class="col-lg-4 col-md-6">col-lg-4 col-md-6低于md960像素则充填</div>
          <div class="col-lg-4 col-md-6">col-lg-4 col-md-6低于md960像素则充填</div>
         </div>
    </body>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-1.11.1.js"></script>
    </html>

    -------------------------简单的图片框架加字体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
    div[class*='col-']{ background:#66; border:2px solid #000000;  height:50px; background:#006; color:#FFF;}
    </style>
    </head>
    
    <body>
    <div class="container">
    <div class="row">
         <div class="col-lg-3 col-md-4 col-sm-6">
         <div class="thumbnail">
         <img src="img/codeguide.png">
         <div class="caption">
         <h3>Bootstrap 编码规范</h3>
                        <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。 </p>
         </div>
         </div>
        </div>
         <div class="col-lg-3 col-md-4 col-sm-6">
         <div class="thumbnail">
         <img src="img/codeguide.png">
         <div class="caption">
         <h3>Bootstrap 编码规范</h3>
                        <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。 </p>
         </div>
        </div>
    </div>
         <div class="col-lg-3 col-md-4 col-sm-6">
         <div class="thumbnail">
         <img src="img/codeguide.png">
         <div class="caption">
         <h3>Bootstrap 编码规范</h3>
                        <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。 </p>
         </div>
        </div>
    </div>
         <div class="col-lg-3 col-md-4 col-sm-6">
         <div class="thumbnail">
         <img src="img/codeguide.png">
         <div class="caption">
         <h3>Bootstrap 编码规范</h3>
                        <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。 </p>
         </div>
        </div>
    </div>
    
    </div>
    </body>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-1.11.1.js"></script>
    </html>
  • 相关阅读:
    Delphi三层开发小技巧:TClientDataSet的Delta妙用
    Delphi ADOQuery的速度优化
    delphi ADOQUery中错误解决方法"无法为更新定位行。一些值可能已在最后...
    ClientDataSet中修改,删除,添加数据和Delta属性
    学习 SQL 语句
    Delphi处理数据网格DBGrid的编辑框 获取还没有提交到数据集的字段文本
    移动前端头部标签(HTML5 head meta)
    最全面的前端开发指南
    解决jQuery.live在mobile safari(iphone / ipad / ipod)绑定失败的问题
    jQuery滑动选取数值范围插件
  • 原文地址:https://www.cnblogs.com/hack-ing/p/5891295.html
Copyright © 2011-2022 走看看