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>

 

posted @ 2016-09-21 07:58  distant-遥远  阅读(293)  评论(0)  编辑  收藏  举报