<!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. ecshop Admin后台删除(Ajxa删除，无跳转连接)

    关联文件Admin/goods.php?act=trash,     Admin/js/listtable.js html代码 <a href="javascript:;" ...

  2. @Autowired与@Resource的区别

    1.@Autowired与@Resource都可以用来装配bean. 都可以写在字段上,或写在setter方法上. 2.@Autowired默认按类型装配(这个注解是属业spring的),默认情况下必 ...

  3. C# 表达式树demo

    class Program { static void Main(string[] args) { //创建Expression参数 var left = System.Linq.Expression ...

  4. iOS开发 关于SEL的简单总结

    SEL就是对方法的一种包装.包装的SEL类型数据它对应相应的方法地址,找到方法地址就可以调用方法.在内存中每个类的方法都存储在类对象中,每个方法都有一个与之对应的SEL类型的数据,根据一个SEL数据就 ...

  5. _SYS_LIB="-lm -lnsl -ldl"

    -lm  是指连接libm.so     意思是连接数学库, -lnsl  如果涉及RPC编程,必然需要libnsl.so,因此必须在编译选项里加入 -lnsl.      gcc 编译选项 -L是要 ...

  6. 【9-7】XML学习笔记01

    Tips XML标签大小写敏感: XML文件一般使用国际化通用的编码“utf-8”,所以平时看到的XML文件的头部都会有这样的代码: <?xml version="1.0" ...

  7. 【9-6】Centos学习笔记

    linux文件系统结构 常用技巧 快捷键启动终端 su命令,使用超级用户登陆 visudo :编辑用户权限 tar xf 文件名:解压文件 Vim编辑器 Tips yum包管理:Yum(全称为 Yel ...

  8. 关于linux vi命令替换的使用说明

    转自:http://os.51cto.com/art/200907/140987.htm vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法( ...

  9. PostgreSQL中的时间操作总结

    取当前日期的函数: (1)       取当前时间:select now() (2)       取当前时间的日期: select current_date (3)       取当前具体时间(不含日 ...

  10. ASO优化总结(基于网络分享的知识总结归纳)

    如何优化应用标题? 注意关键字的长度,尽量保证每一个关键字小于10个字符.保持快速更新,因为每次更新,你都将有机会删除表现不佳的关键字以 及增添新的关键字.在ASO中使用关键字的正确做法 标题,并非越 ...