做作业的时候遇见用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. ubuntu系统内核替换

    此处将内核由高版本替换成低版本.替换前的系统为ubuntu 12.04 kernel 3.8.0. 替换后的内核版本为2.6.35. 首先下载需要替换的内核文件,下载链接:https://www.ke ...

  2. 七 APPIUM Android 定位方式

    1.定位元素应用元素   1.1通过id定位元素 Android里面定位的id一般为resrouce-id: 代码可以这样写: WebElement element = driver.findElem ...

  3. SqlParameter 使用

                SqlParameter[] param = new SqlParameter[]             {                 new SqlParameter ...

  4. 1.1.3.托管对象上下文（Core Data 应用程序实践指南）

    管理托管对象的生命周期(lifecycle).还有其它功能:faulting.变更追踪(change tracking).验证(validation)等. faulting:只把用到的那一部分数据从持 ...

  5. IOS Cell重用机制

    重用机制: -(UITableViewCell *)tableView: (UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *) ...

  6. pace.js原理简介

    简介: 不少童鞋可能都使用过pace.js:http://github.hubspot.com/pace/docs/welcome/ 只要在页面上引入pace.js和相关的css,并不需要对业务逻辑做 ...

  7. Linux下的文件目录结构详解

    Linux下的文件目录结构详解 / Linux文件系统的上层根目录 /bin 存放用户可执行的程序 /boot 操作系统启动时所需要的文件 /dev 接口设备文件目录,例如:had表示硬盘 /etc ...

  8. 封装 INI 文件读写函数

    delphi读写ini文件实例 //--两个过程,主要实现:窗体关闭的时候,文件保存界面信息:窗体创建的时候,程序读取文件文件保存的信息. //--首先要uses IniFiles(单元) //--窗 ...

  9. loading.io一个loading图标网站，跟大家分享

    loading.io是官方网址在首页选一款loading图标,看到左上角的 Try it now中有选中的图标后,可通过光标滑动选择图标大小,然后再点右边的get svg或get css等下载即可

  10. Flex中操作XML的E4X方法

    用于处理 XML 的 E4X 方法 Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本   ECMAScript for XML 规范定义了一组用于使用 XML 数据的类 ...