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>
bootstrap框架----像素的更多相关文章
- Web前端学习笔记:Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- bootstrap框架-----可见 隐藏
可见框架-像素选择 -block-inline :块内联元素 -inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格 可以设置宽度和 ...
- Bootstrap框架 inconfont font-awesome
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...
- Bootstrap 框架 day57
Bootstrap框架 Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...
- 响应式开发(二)-----Bootstrap框架的介绍
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的, ...
- day 49 Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580 ...
- Bootstrap框架的学习(一)
一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...
- 基于BootStrap框架构建快速响应的GPS部标监控平台
最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...
- BootStrap框架
简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...
随机推荐
- XtraFinder到底好在哪里(标签、隐藏文件、路径拷贝与显示、从这里启动)
类似Chrome的标签 自定义工具栏可添加一个快速显示与隐藏当前目录隐藏文件的功能 拷贝路径 cd 到当前目录这个功能跟PathFinder7类似 当然还有其他很多功能,比如这个返回上级目录,
- Aspect Oriented Programming using Interceptors within Castle Windsor and ABP Framework AOP
http://www.codeproject.com/Articles/1080517/Aspect-Oriented-Programming-using-Interceptors-wit Downl ...
- GoLang之协程
GoLang之协程 目前,WebServer几种主流的并发模型: 多线程,每个线程一次处理一个请求,在当前请求处理完成之前不会接收其它请求:但在高并发环境下,多线程的开销比较大: 基于回调的异步IO, ...
- 密钥文件snk
1.(what)是什么? 由一个程序集的标识组成并通过公钥和数字签名(针对该程序集生成)加强的名称,其中的标识包括程序集的简单文 本名称.版本号和区域性信息(如果提供的话). 2.(why)为什么 ...
- iOS-开启arc之后 NSNotificationCenter removeObserver 是否需要调用
开启ARC之后,NSNotificationCenter removeObserver 是否需要调用,在何时调用? 今天在stackoverflow上面看到一个问题,arc情况下是否需要调用remov ...
- mysql 定义function rand
MySQL获取随机数 如何通过MySQL在某个数据区间获取随机数? MySQL本身提供一个叫rand的函数,返回的v范围为0 <= v < 1.0. 介绍此函数的MySQL文档也介绍道 ...
- 阿里云9折推荐码:0LGVW2
阿里云9折推荐码:0LGVW2,第一次购买云服务器或云数据库可享受原价9折优惠.
- C#中页面之间传值传参的六种方法
QueryString是一种非常简单的传值方式,他可以将传送的值显示在浏览器的地址栏中.如果是传递一个或多个安全性要求不高或是结构简单的数值时,可以使用这个方法.但是对于传递数组或对象的话,就不能用这 ...
- [原创]C 语言select函数
参考链接:http://www.cnblogs.com/GameDeveloper/p/3406565.html 注意点: select() 只是执行一次的超时检测.重新进行select要重新设置“超 ...
- java中堆栈(stack)和堆(heap)(还在问静态变量放哪里,局部变量放哪里,静态区在哪里.....进来)
(1)内存分配的策略 按照编译原理的观点,程序运行时的内存分配有三种策略,分别是静态的,栈式的,和堆式的. 静态存储分配是指在编译时就能确定每个数据目标在运行时刻的存储空间需求,因而在编 译时就可以给 ...