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网格布局学习 ...
随机推荐
- HTML5 & auto download image
HTML5 & auto download image https://www.sitepoint.com/new-html5-attributes-hyperlinks-download-m ...
- codeforces469B
Chat Online CodeForces - 469B 问题描述 你和你的朋友经常在网上聊天.你的朋友作息规律每天只会在p个时间段[ai,bi]在线.你作息混乱,假设你在t时刻起床,那么你会在q个 ...
- codeforces518B
Tanya and Postcard CodeForces - 518B 有个小女孩决定给他的爸爸寄明信片.她已经想好了一句话(即长度为n的字符串s),包括大写和小写英文字母.但是他不会写字,所以她决 ...
- poj3061(尺取法）
---恢复内容开始--- 题目意思:给你一段非负序列,再给你一个值k,找出这段序列中最少的连续子序列使得和为k: 解题思路:因为都是正数,我们只需要找到一段区间不大于k,就停止,然后左边趋近看是否能得 ...
- unorder_map 自定义KEY
1. boost::unorder_map 实现自定义KEY // boostLibTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" ...
- BZOJ4555 HEOI2016/TJOI2016求和（NTT+斯特林数）
S(i,j)=Σ(-1)j-k(1/j!)·C(j,k)·ki=Σ(-1)j-k·ki/k!/(j-k)!.原式=ΣΣ(-1)j-k·ki·2j·j!/k!/(j-k)! (i,j=0~n).可以发现 ...
- BZOJ4516 SDOI2016生成魔咒（后缀数组+平衡树）
一个字符串本质不同的子串数量显然是总子串数减去所有height值.如果一个个往里加字符的话,每次都会改动所有后缀完全没法做.但发现如果从后往前加的话,每次只会添加一个后缀.于是我们把字符串倒过来,每次 ...
- Leapin' Lizards HDU - 2732 （恶心的建图。。)
这道题其实不难...就是建图恶心了点....emm... 题意: 多源多汇 + 拆边 青蛙跳柱子, 每根柱子都有一定的承载能力, 青蛙跳上去之后柱子的承载能力就会减一,跳到边界就能活 跳不到就over ...
- bzoj5280/luogu4376 MilkingOrder (二分答案+拓扑序)
二分答案建图,然后判环,就可以了. 字典序输出的话,只要做拓扑序的时候用优先队列来维护就可以了. (其实判环也可以用拓扑序...) #include<cstdio> #include< ...
- Elasticsearch利用cat api快速查看集群状态、内存、磁盘使用情况
使用场景 当Elasticsearch集群中有节点挂掉,我们可以去查看集群的日志信息查找错误,不过在查找错误日志之前,我们可以通过elasticsearch的cat api简单判断下各个节点的状态,包 ...