<!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. Xcode文档安装

    找到所需文档的下载地址,搜索.dmg 安装位置

  2. Intent启动一个新的页面

    一,Intent(目的) 的分类 显式 Intent 构造函数重载之一: Intent intent = new Intent(FirstActivity.this,SecondActivity.cl ...

  3. Django笔记-登陆、注册（利用cookie实现）

    1.项目结构: 2.关键代码: settings.py INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'djang ...

  4. CPC CPM

    计算广告的分类: 根据广告主的计费方式,可以分为 千次展现付费 CPM(cost per thousand impressions) 主要用于品牌曝光,例如钻展业务 每次点击扣费 CPC(cost p ...

  5. iOS静态库小结--(yoowei)

    准备知识: 1.什么是库? 库是程序代码的集合,是共享程序代码的一种方式 2.根据源代码的公开情况,库可以分为2种类型 a.开源库 公开源代码,能看到具体实现 ,比如SDWebImage.AFNetw ...

  6. Orchard源码分析（4.4）：Orchard.Caching.CacheModule类

    概述 CacheModule也是一个Autofac模块.   一.CacheModule类 CacheModule将DefaultCacheManager注册为ICacheManager:       ...

  7. STM32向量表详细分析

    预备知识: DCD指令:用于分配一片连续的字存储单元(32bit),并将表达式的值初始化给该字存储单元,类似于C中定义数组并初始化.比如: DCD 0 的意思是:分配一个字存储单元,并将该单元初始化为 ...

  8. PHP访问MSSQL数据库（实例代码）

     本例子只作为简单的引导,实现一个简单的查询: <!DOCTYPE HTML> <html lang="en-US"> <head> <t ...

  9. Oracle 中count(1) 和count(*) 的区别

    count()与count(*)比较: 如果你的数据表没有主键,那么count()比count(*)快 如果有主键的话,那主键(联合主键)作为count的条件也比count(*)要快 如果你的表只有一 ...

  10. 解决前面有一篇文章中'flashplayer.so为什么要设置777权限的'问题 的 思考了

    列出某个目录下的所有内容? ls -A, -A等同于-a, 即是-all, 只是-A 不显示.和.. ll ls 某个目录, 如果它下面没有任何东西, 那么 就没有输出! 同时, ll某个目录, 不会 ...