bootstrop框架----像素

<!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>
时间： 2024-10-18 21:29:23

bootstrop框架----像素的相关文章

bootstrop框架-----可见 隐藏

可见框架-像素选择 -block-inline  :块内联元素 -inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格 可以设置宽度和高度地块元素的属性 visible-md sd sx  -   block-inline  ;  inline-block; hidden:隐藏用法=visible: class='pull left'    左浮动     class='pull right'   右浮动 affix:绝对定位! 

合并_g2014___09微信开发合并

价值万元的微信教程一 目录 价值万元的微信教程一????1 一.简介????2 二.为什么要学习微信开发课程????2 三.微信与微信公众平台的区别????2 四.什么是微信公众平台????2 五.前期准备????3 六.微信的两种运营模式????3 1.编辑模式????3 七.开发者模式????5 1)微信验证接口下载????7 2)微信验证接口分析????7 3)微信响应接口????8 4)微信的6大接收接口????9 1) 文本消息????9 2)图片消息????10 3)语音消息????

HTML中的表格、表单元素与框架的构建

表格 <table></table>表格 width: 宽度可用像素或百分比: height:高度可用像素或百分比: border:边框宽度: cellpadding:内容跟单元格边框的边距 常用0: cellspacing:单元格之间的间距  常用0: align: 对齐方式: bgcolor:背景色: <tr></tr> 行 align:一行内容的水平对齐方式: valign: 垂直对齐方式: <td></td> 单元格 <

微信小程序开发—小程序框架详解（二）

上一节讲了微信小程序的目录结构及各个文件的作用,主要介绍了小程序的配置文件及其支持的配置属性. 本节主要从逻辑层和视图层来说明小程序的框架. 小程序的逻辑层由js完成,视图层由微信提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)文件来完成. 其中官方给出的解释:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件.同时由于zepto/jquery 会使用到w

Android Multimedia框架总结（十四）Camera框架初识及自定义相机案例

转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52738492 前言:国庆节告一段落,又是新一月,上月主要是围绕MediaPlayer相关展开,从今天开始,开始分析多媒体框架中的Camera模块,看下今天的Agenda: Camera拍照 Camera录像 新API android.hardware.camera2 新旧API特点对比 Camera自定义相机 新API andro

27款经典的CSS框架

利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框架,你可以选用. 1. 960gs 960 像素的页面宽度似乎成为了一种设计标准,在当前各种分辨率下,能够很好地展现网页内容.提供较为常用的尺寸来简化网页设计过程,使工作简单高效. 2. YUI 2: Grids CSS 芒果曾经介绍过由雅虎开发小组推出的 YUI,而这个 YUI Grids CSS

详解OS X和iOS图像处理框架Core Image

转自:http://www.csdn.net/article/2015-02-13/2823961-core-image 摘要:本 文结合实例详解了OS X和iOS图像处理框架Core Image的使用,如何通过Core Image来创建和使用iOS的内置滤镜,非常适合初学者学习.虽然示例代码是用Swift写的iOS程序,不过实现概念很容易转换到 Objective-C和OS X. 这篇文章会为初学者介绍一下Core Image,一个OS X和iOS的图像处理框架. 如果你想跟着本文中的代码学习

我的java学习笔记(21)关于框架定位

1.AWT和Swing中框架和组件类的继承层次. 2.组件类的很多方法是以获取或设置方法对形式出现的. public String getTitle(); public void setTitle(Stirng title); 3.对于类型为boolean的属性,获取方法由is开头. public boolean isLocationByPlatform(); public void setLocationByPlatform(boolean b); 4.如果没有明确地指出指定框架的大小,所有框

android多媒体框架学习 详解 最新版本

一:多媒体框架概述   jellybean 的多媒体跟以前的版本,通过对比没啥变化,最大的变化是google终于舍得给multimedia建个独立的git了(framework/av),等你好久了!也体现了media 在整个android系统中的重要性!framework/av下都是些C/C++代码(libmedia,libmediaplayerservice,libstagefright),jni和 java api 还是保留在原来的位置,改革还不够彻底,但还是迈出了这一步,以后维护能更好的进