<!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. centos 7.0 修改ssh默认连接22端口 和 添加防火墙firewalld 通过端口

    首先 先做的就是 修改ssh的默认端口22 需要修改文件 /etc/ssh/sshd_config 使用命令 vi /etc/ssh/sshd_config [root@localhost ~]# v ...

  2. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  3. 让Xcode的控制台支持LLDB类型的打印

    这个技巧个人认为非常有用 当Xcode在断点调试的时候,在控制台中输入 po self.view.frame 类似这样的命令会挂掉,不信可以亲自去试试(Xcode7 以后支持LLDB类型的打印) 那么 ...

  4. 新浪微博客户端(59)-hitTest withEvent方法的使用说明

    iOS中的触摸事件总是由最顶层的View首先得到的,当这个View得到该触摸事件的时候可以选择通过 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEv ...

  5. 【转】使用Eclipse构建Maven项目 (step-by-step)

    安装eclipse 及配置maven时,参考的资料!!! from:http://blog.csdn.net/qjyong/article/details/9098213 Maven这个个项目管理和构 ...

  6. 弹出框三 之 sweetalert

    1下载sweetalert 2.引入到项目中 <link href="~/Content/sweetalert.css" rel="stylesheet" ...

  7. jquery客户端验证插件

    http://www.cnblogs.com/masing/articles/2157420.html http://www.oschina.net/p/jquery+formvalidator ht ...

  8. hdu4970 Killing Monsters （差分数列）

    2014多校9 1011 http://acm.hdu.edu.cn/showproblem.php?pid=4970 Killing Monsters Time Limit: 2000/1000 M ...

  9. [译]bare repository

    git init --bare 使用--bare创建的repository没有工作目录, 在这个repository中不能修改文件和commit. 中心repository必须是bare reposi ...

  10. Update-Package : Unable to load the service index for source https://api.nuget.org/v3/index.json.

    由于更改了项目"属性"的"目标框架"(原来的框架是".NET Frameword4.5"改为了".NET Frameword4&q ...