css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用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响应式布局——栅格的更多相关文章
- Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
- Bootstrap响应式布局介绍
一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...
- 前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...
- 模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示 一.媒体查询 媒体查询包含一个可选的媒体类 ...
- CSS学习笔记——响应式布局
响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...
- css 动画 和 响应式布局和兼容性
14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋 transform旋转 rotate旋转 scale放大 translate偏移量 skew倾斜度 transfo ...
- bootstrap响应式布局原理
百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...
- Bootstrap响应式布局(1)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- bootstrap 响应式布局
先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...
随机推荐
- UIscrollView 代理
// // UIDemoViewController.m // 06-1UIScrollDemo // // Created by k on 14-9-4. // Copyright (c) 2014 ...
- YII 1.0 发表文章用到的小物件
<?php $form = $this->beginWidget('CActiveForm',array('htmlOptions'=>array('enctype'=>'mu ...
- 2.7. 属性的各种设置选项(Core Data 应用程序实践指南)
可供配置的选项根据属性类型的不同有所变化,并不是每一种属性都能配置下列选项 Transient:勾选该选项,表示该属性不写入“持久化存储区”,这听起来很奇怪,但有时候,只需要把特性留在托管对象上下文就 ...
- DELPHI判断是否64位操作系统
function IsWin64: Boolean;var Kernel32Handle: THandle; IsWow64Process: function(Handle: Windows.TH ...
- mySQL内存及虚拟内存优化设置
为了装mysql环境测试,装上后发现启动后mysql占用了很大的虚拟内存,达8百多兆.网上搜索了一下,得到高人指点my.ini.再也没见再详细的了..只好打开my.ini逐行的啃,虽然英文差了点,不过 ...
- animate动画被锁在队列中不动怎么解决
[示例]: function scroll_to(obj){ $('html,body').animate({scrollTop:obj.position().top},700) ...
- 7-1 vim 编辑器
1. vi:visual interface. 1. vim:vi improved 这些都属于全屏编辑器,又是模式化编辑器 vim模式(3种) 编辑模式(命令模式) 输入模式 末行模式 模式转换 编 ...
- 天兔(Lepus)监控系统慢查询分析平台安装配置
被监控端要安装pt工具 [root@HE1~]## yum -y install perl-IO-Socket-SSL [root@HE1~]## yum -y install perl-DBI [r ...
- 进度条(ProgressBar)的功能与用法
进度条也是UI界面中一种非常实用的组件,通常用于向用户显示某个耗时操作完成的的百分比.进度条可以动态的显示进度,因此避免长时间的执行某个耗时的操作,让用户感觉程序失去了响应,从而更好的提高用户界面的友 ...
- oracle存储过程的基本语法
1.基本结构 CREATE OR REPLACE PROCEDURE 存储过程名字( 参数1 IN NUMBER, 参数2 IN NUMBER) IS变量1 INTEGER :=0;变量2 ...