<!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. MacPorts安装32位动态库

    http://superuser.com/questions/63198/install-32-bits-ports-on-snow-leopard

  2. MVC实现动态二级域名

    前段时间,一个朋友问我ASP.NET MVC下实现动态二级域名的问题.跟他聊了一些解决方案,这里也总结一下,以供参考. 相信大家都发现类似58同城这样的网站,成都的网址是cd.58.com 上海的是s ...

  3. Eclipse插件checkstyle安装使用

    方法一:   1.Eclipse中,选择Help->Software Updates->Find and Install   2.选择 Search for new features to ...

  4. Vim 的 tab 设置

    文章转自:http://blog.csdn.net/shell_picker/article/details/6033023 摘自 Vim 手册: 选项:1. tabstop:表示一个 tab 显示出 ...

  5. java常用类 --- Object

    Object类 Object类是所有Java类的父类,其位于java.lang包中.任何Java对象,如果没有显示定义父类则它默认Object类作为父类. 方法如下: 其中与线程相关的有5个方法: n ...

  6. Java实现zip压缩多个文件下载

    为了更好的演示,首先创建一个文件实体FileBean,包含了文件路径和文件名称: package com.javaweb.entity; import java.io.Serializable; /* ...

  7. 我常用的eclipse快捷键

    重写父类方法:右键点击, 进source,进override/implement 单行注释(或多行注释) Ctrl+/ 文档注释:shift+alt+J 整块注释: Ctrl+shift+/ 取消整块 ...

  8. Sql导出数据报错-->SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问

    SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT'OpenRowset/OpenDatasource' 的访问,因为此组件已作为此服 ...

  9. [译]在Mac上运行ASP.NET 5

    原文:http://stephenwalther.com/archive/2015/02/03/asp-net-5-and-angularjs-part-7-running-on-a-mac 这篇文章 ...

  10. nyoj 252 01串 动态规划( java)

    当n=2时, 输出 3:当n=3时, 输出 5:当n=4时, 输出 8: #### 分析: 当n=4时,如 0101 符合条件, 当第一个位置是0时,还剩3个位置 ,与n=3时个数相等: 符合条件的为 ...