CSS进阶之模拟Bootstrap网格布局
目前暂时实现效果，容后面整理心得，先贴上源代码。
源码
<!DOCTYPE html>
<html> <head>
<title>demo bootstrap</title>
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
<!-- <script type="text/javascript" src="dist/js/bootstrap.js"></script> -->
<style type="text/css">
.my-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
} @media (min-width: 768px) {
.my-container {
width: 750px;
}
} @media (min-width: 992px) {
.my-container {
width: 970px;
}
} @media (min-width: 1200px) {
.my-container {
width: 1170px;
}
} /*用于清除网格浮动造成的影响*/
.my-row:before,
.my-row:after {
display: table;
content: " ";
} .my-row:after {
clear: both;
} .my-row {
margin-right: -15px;
margin-left: -15px;
} .my-col-lg-4,
.my-col-md-6,
.my-xs-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
/*----*/
float: left;
} @media (min-width:768px) {
.my-xs-12 {
width: 100%;
}
.my-col-xs-12:after {
display: block;
content: 'after my-col-xs-12 min-width: 768px';
color: red
}
.my-col-xs-12:before {
display: block;
content: 'before my-col-xs-12 min-width: 768px';
color: red
}
} @media (min-width: 992px) {
.my-col-md-6 {
width: 50%;
}
.my-col-md-6:after {
display: block;
content: 'after col-md-6 min-width: 992px';
color: red
}
.my-col-md-6:before {
display: block;
content: 'before col-md-6 min-width: 992px';
color: red
}
} @media (min-width: 1200px) {
.my-col-lg-4 {
width: 33.3333333%;
}
.my-col-lg-4:after {
display: block;
content: 'after col-lg-4 min-width: 1200px';
color: yellow
}
.my-col-lg-4:before {
display: block;
content: 'before col-lg-4 min-width: 1200px';
color: yellow
}
}
</style>
</head> <body style="background-color: #eee">
<div class="container" style="background-color: #aaa;padding: 15px;">
<div class="row" style="background-color: #bbb;padding: 15px;">
<div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div>
<div class="col-lg-4 col-md-6" style="height: 300px;background-color: #fff"></div>
<div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div>
</div>
</div>
<div class="my-container" style="background-color: #aaa;padding: 15px;">
<div class="my-row" style="background-color: #bbb;padding: 15px;">
<div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000">X</div>
<div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #fff"></div>
<div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000"></div>
</div>
</div>
</body> </html>
效果图：
width>1200px:
width:1200-992px:
width:0-768px:
笔记
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
参考文献
[1] CSS3 响应式布局： @media (min/max-width:***) @font-face
CSS进阶之模拟Bootstrap网格布局的更多相关文章
- 使用BootStrap网格布局进行一次演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
- bootstrap 网格布局
一:基本的网格布局 <div class="container"> <div class="row"> <div class=&q ...
- css进阶 01-CSS中的非布局样式
01-CSS中的非布局样式 #前言 CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括: 字体.字重.颜色.大小.行高 背景.边框 滚动.换行 装饰性属性(粗体.斜体.下划线)等. 这篇文 ...
- 第三篇bootstrap 网格基础
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为c ...
- css模拟Bootstrap响应式布局——栅格
做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...
- 不用bootstrap，只用CSS创建网格布局
本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
随机推荐
- poj1062昂贵的聘礼（枚举+最短路）
题意:就是一个点能够被另一个点取代,通过花费一定的金币,注意就是你和某个人交易了,如果这个人的等级和酋长的等级差的绝对值超过m,酋长就不会和你交易了: 思路:这里要注意到,我们最终的目的是找到一条最短 ...
- python 模块之-re
就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节码,然后由用 C 编写的匹 ...
- ZOJ1363 Chocolate 【生成函数】 【泰勒展开】
题目大意: 有c种不同的巧克力,每种无限个,意味着取出每种的几率每次为1/c.现在你需要取n次.然后将统计每种取出来的巧克力的数量.若为偶数则舍去,否则留下一个.问最后留下m个的概率是多少. 题目分析 ...
- codeforces 793B. Igor and his way to work
B. Igor and his way to work time limit per test 3 seconds memory limit per test 256 megabytes input ...
- MT【6】等比数列和的极限
评:利用等比数列求和公式给出所求数列,再利用反证法证明唯一性.这种反证方法印象中本科高等代数里讲初等对称多项式时出现过.
- 自学Aruba3.1-Aruba配置架构-WLAN配置架构
点击返回:自学Aruba之路 自学Aruba3.1-Aruba配置架构- WLAN配置架构 WLAN配置架构 1. AP group : Aruba无线控制器通过AP Group来构建无线网络配置参 ...
- 沉迷Link-Cut tree无法自拔之：[BZOJ2594][Wc2006]水管局长数据加强版
来自蒟蒻 \(Hero \_of \_Someone\) 的 \(LCT\) 学习笔记 $ $ 这应该算是道套路题吧, 如果将图中的边转换成点, 再将边权变点权, 就可以用 \(LCT\) 来维护了 ...
- Azure KeyVault设置策略和自动化添加secrets键值对
一. 关于Azure Key Vault Azure 密钥保管库可帮助保护云应用程序和服务使用的加密密钥和机密. 借助 Key Vault,可使用密钥来加密密钥和机密(例如身份验证密钥.存储帐户密钥. ...
- pthread_cond_wait() 函数的使用
1. 首先pthread_cond_wait 的定义是这样的 The pthread_cond_wait() and pthread_cond_timedwait() functions are us ...
- CF1043
找个下午打了场CF,结果被某uranus吊打......一千多名,过弱. T1,一眼二分了,后来发现题解是O(1)的hhh T2,题意精炼一下就是让你找一个串的循环节个数,直接n²枚举..... T3 ...