做作业的时候遇见用css模拟Bootstrap的栅格布局，学习了一下。发现这个很有用，用来在不同的平台上得到很好地用户体验，比如Phone、Pad、大屏幕显示器、小屏幕显示器。自己模拟用css写了一下，用的是max-width、min-width子元素的宽度设置为不同的百分比，模拟栅格的12列。把100划分12份，用浮动宽度超出会自动换行，下面是段代码，以后会认真学习bootstrap。

 　　<style type="text/css">
 #container1{min-width:768px;height:300px;background:#ffcc00;margin-bottom:100px;}
 body div{margin:5px 1px 5px 1px;}
 #container1 .col-md-4{width:32%;height:50px;background:pink;float:left;}
 #container1 .col-md-3{width:24%;height:50px;background:greenyellow;float:left;}
 #container1 .col-md-6{width:48%;height:50px;background:green;float:left;}
 #container1 .col-md-1{width:8%;height:50px;background:bisque;float:left;}
 #container1 .col-md-2{width:16%;height:50px;background:black;float:left;}

 #container2{max-width:768px;height:300px;background:pink;}
 #container2 .col-md-2{width:16%;height:50px;background:green;float:left;}
 #container2 .col-md-6{width:48%;height:50px;background: green;float:left;}
 #container2 .col-md-8{width:64%;height:50px;background: red;float:left;}
 #container2 .col-md-12{width:96%;height:50px;background: yellow;float:left;}
 #container2 .col-md-3{width:24%;height:50px;background: blue;float:left;}
 </style>
 </head>
 <body>
 <div id="container1">
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
 <div class="col-md-4"></div>
 <div class="col-md-3"></div>
 <div class="col-md-6"></div>
 <div class="col-md-3"></div>
 <div class="col-md-1"></div>
 <div class="col-md-1"></div>
 <div class="col-md-2"></div>
 <div class="col-md-2"></div>
 <div class="col-md-6"></div>
 <div class="clear" style="clear:both"></div>
 </div>
 <div id="container2">
 <div class="col-md-6"></div>
 <div class="col-md-6"></div>
 <div class="col-md-12"></div>
 <div class="col-md-3"></div>
 <div class="col-md-6"></div>
 <div class="col-md-3"></div>
 <div class="col-md-2"></div>
 <div class="col-md-2"></div>
 <div class="col-md-8"></div>
 <div class="col-md-3"></div>
 <div class="col-md-3"></div>
 <div class="clear" style="clear:both"></div>
 </div>

css模拟Bootstrap响应式布局——栅格的更多相关文章

  1. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  2. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  3. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  4. 模拟Bootstrap响应式网格系统

    Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...

  5. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  6. css 动画 和 响应式布局和兼容性

    14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋 transform旋转 rotate旋转 scale放大 translate偏移量 skew倾斜度 transfo ...

  7. bootstrap响应式布局原理

    百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...

  8. Bootstrap响应式布局(1)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. bootstrap 响应式布局

    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...

随机推荐

  1. CMake Tutorial

    1.最简实例 使用cmake的最简实例是由一个源程序文件生成一个可执行文件.例如由下述C++源程序文件生成可执行文件tutorial. main.cpp #include<iostream> ...

  2. RACSingle 有效的两种方式

    第一种当然是subscribeNext 另外还有一种就是作为Command的enablesingle也相当于被订阅了.

  3. xhtmlrenderer渲染pdf，中文换行

    在实际开发中,发现在table中显示中文,渲染出来的pdf,中文内容不自动换行.经过搜索发现了一种解决方案,如下: 重写Breaker,修改right计算方式 /* * Breaker.java * ...

  4. SimpleDateFormat解析的时候字符串过长问题

    竟然不会报错: try { SimpleDateFormat dateFormatFrom = new SimpleDateFormat("yyyyMMddHHmmss"); St ...

  5. Android开发系列之事件拦截机制

    对于Android开发者来说理解事件传递机制的重要性,我想应该是不言而喻的.在一个Activity里面,我们经常会重写onTouchEvent事件,可是重写结束之后,对于是返回true还是返回fals ...

  6. zookeeper 介绍

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,它包含一个简单的原语集,分布式应用程序可以基于它实现同步服务,配置维护和命名服务等. Zookeeper是hadoop的一个子项目 ...

  7. 定时任务管理中心（dubbo＋spring）－我们到底能走多远系列47

    我们到底能走多远系列47 扯淡: 又是一年新年时,不知道上一年你付出了多少,收获了多少呢?也许你正想着老板会发多少奖金,也许你正想着明年去哪家公司投靠. 这个时间点好好整理一下,思考总结一下,的确是个 ...

  8. vijos P1001 谁拿了最多奖学金

    vijos P1001 谁拿了最多奖学金 描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末平均成绩高于80分(&g ...

  9. JDK1.8源码阅读系列之三：Vector

    本篇随笔主要描述的是我阅读 Vector 源码期间的对于 Vector 的一些实现上的个人理解,用于个人备忘,有不对的地方,请指出- 先来看一下 Vector 的继承图: 可以看出,Vector 的直 ...

  10. 三层——c#版

    首先,向大家通知一个好消息--我的三层终于实现了!!!这两天,一直在调一个bug一直链接不上数据库,弄得我死的心都有了.就在昨天,当我把一个","改成了":"后 ...