<!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>

bootstrap框架----像素的更多相关文章

  1. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  2. bootstrap框架-----可见 隐藏

    可见框架-像素选择 -block-inline  :块内联元素 -inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格 可以设置宽度和 ...

  3. Bootstrap框架 inconfont font-awesome

    Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...

  4. Bootstrap 框架 day57

    Bootstrap框架  Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...

  5. 响应式开发(二)-----Bootstrap框架的介绍

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...

  6. day 49 Bootstrap框架和inconfont、font-awesome使用

    Bootstrap框架和inconfont.font-awesome使用   iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580 ...

  7. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  8. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  9. BootStrap框架

    简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...

随机推荐

  1. CSS 控制Html页面高度导致抖动问题的原因

    CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码: html,body{ overflow-y:scroll;} ht ...

  2. Database Initialization Strategies in Code-First:

    You already created a database after running your Code-First application the first time, but what ab ...

  3. 序列化模块之 pickle 和 json

    用于序列化的两个模块: json,用于字符串 和 python数据类型间进行转换 pickle,用于python特有的类型 和 python的数据类型间进行转换 Json模块提供了四个功能:dumps ...

  4. Hibernate 应用

    完善的持久化层应该达到以下目标: 1.代码可重用性高,能够完成所有的数据库访问操作. 2.如果有需要的话,能够支持多种数据库平台. 3.具有相对独立性,当持久化层的实现发生变化,不会影响上层的实现. ...

  5. python __future__ package的几个特性

    我学习python过程, 和学习其它编程知识一样, 不是先读大部头书系统学习, 而是看博客和直接实践, 慢慢将这些知识点连成线, 再扩展到面. 这个过程缺点和优点都很明显. 缺点是, 有些知识点可能因 ...

  6. C#集合类图继承关系一览表

  7. [译]git rebase -i

    使用rebase -i会在终端出现一个交互页面. 在这个交互页面中我们可以对要rebase的commit做一定的修改. 用法 git rebase -i <master> 把当前的分支的c ...

  8. AngularJS API之isXXX()

    Angular中保存了很多的判断方法,可以用来验证对象是否符合某种要求,详细的参考代码样例即可 <html> <head> <meta http-equiv=" ...

  9. UIGestureRecognizer

    •为了完成手势识别,必须借助于手势识别器----UIGestureRecognizer • •利用UIGestureRecognizer,能轻松识别用户在某个view上面做的一些常见手势 • •UIG ...

  10. svg技术（可缩放矢量图形）介绍

    公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要3d,立体感,功能要强大等到:平台现有控件都是用的一个开源flash,我对flash虽然会一点但 ...