bootstrap学习（一)栅格、布局
栅格：
栅格将整个屏幕分为12份，当使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内，所有的row必须在container内。
clo-md-* ：中等分辨率
<!-- 第一行分了12份 1:1:1、、、-->
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<!-- 第二行分了两份 8:4 如果屏幕为小屏是，第二份将为等分6:6-->
<div class="row">
<div class="col-md-8 col-sm-6">.col-md-8</div>
<div class="col-md-4 col-sm-6">.col-md-4</div>
</div>
<!-- 第三行分了3份 4:4:4 -->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<!-- 递四行分了2份 6:6 -->
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
媒体查询：（在特定分辨率的屏幕下显示不同的效果）
//当屏幕（浏览器）宽度大于767时，div的背景颜色就改为red
@media(min-width: 767px){
div{
background: red;
}
}
或
//当屏幕宽度在767px和1176px之间时，div的背景染色为red
@media(min-width: 767px) and (mxa-width: 1176px)
{
div{ background: red; }
}
栅格的用法：
bootstrap布局
container：会自动更具屏幕的大小调整宽度（具体显示参数，看栅格参数图）
container-fluid：不管什么分辨率，都将会铺满整个屏幕
1、固定布局<div class="container">
<body>
<div class="container">
...
</div>
</body>
//bootstrap.min.js中的具体代码
//默认外边界左右宽度为自动
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
} //屏幕宽度大于768是 container显示宽度为750
@media (min-width: 768px) {
.container {
width: 750px
}
} //屏幕宽度打野992时，container显示宽度为970
@media (min-width: 992px) {
.container {
width: 970px
}
} @media (min-width: 1200px) {
.container {
width: 1170px
}
}
2、流式布局<div class="container-fluid">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
//container-fluid 没有媒体查询，宽度都是自动调整
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto
}
2、响应式设计
通过在文档中的<head>标签里边添加合适的meta标签并引入一个额外的样式表，即可启用响应式css
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Bootstrap 所支持的几个media queries都放在了一个文件中， 可以让你的项目更灵活的去适应不同设备和屏幕分辨率。包括： 类型 布局宽度 列宽 间隙宽度
大屏幕 大于等于1200px 70px 30px
默认 大于等于980px 60px 20px
平板 大于等于768px 42px 20px
手机到平板 小于等于767px 流式列，无固定宽度
手机 小于等于480px 流式列，无固定宽度
/* 大屏幕 */
@media (min-width: 1200px) { ... } /* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... } /* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... } /* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }
清除浮动：
//以下情况： md-6 在超小屏幕下，显示为两行（显示为两行是因为浮动）；在小屏幕内显示为1行
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">aaa</div>
<div class="col-xs-6 col-sm-3">aaa</div>
<div class="col-xs-6 col-sm-3">aaa</div>
<div class="col-xs-6 col-sm-3">aaa</div>
</div>
</div>
以上为正常显示
//当第一个div中的内容过长时，他会向下扩展，会占用第三个div的位置，导致第三个div占用第四个div的位置。整体显示为三行内容
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div class="col-xs-6 col-sm-3">aaa</div>
<div class="col-xs-6 col-sm-3">aaa</div>
<div class="col-xs-6 col-sm-3">aaa</div>
</div>
</div>
想要清除这种情况 ，需要在第三个div前加入清除浮动样式
<div class="clearfix visible-xs"></div>
官方：https://v3.bootcss.com/css/#grid
bootstrap学习（一)栅格、布局的更多相关文章
- BootStrap学习之栅格布局
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的改变,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin用于生成更具语 ...
- bootstrap（关于栅格布局）
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...
- 【Bootstrap】 框架 栅格布局系统设计原理
前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会增加它的宽度,不加入的话排版会有问题. 不 ...
- BootStrap学习02栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap学习笔记-栅格系统
栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...
- bootstrap -- 学习之流动布局
Grid是什么? Grid 翻译成中文是格栅系统,不过还是不好理解,理解为一行12个格子可能更容易些.Grid可以把一行内容最多分成12个格子,而且可以根据需要来合并这12个格子中的其中某些格子.下面 ...
- bootstrap栅格布局学习历程
了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...
- bootstrap 学习笔记（1）---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- bootstrap学习总结-02 网格布局
1 网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...
- Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
随机推荐
- asp.net动态为网页添加关键词的代码
如下资料是关于asp.net动态为网页添加关键词的代码,希望能对小伙伴们有较大用.HtmlMeta keywords = new HtmlMeta();keywords.Name = "ke ...
- BZOJ5019[Snoi2017]遗失的答案——FWT+状压DP
题目描述 小皮球在计算出答案之后,买了一堆皮肤,他心里很开心,但是一不小心,就忘记自己买了哪些皮肤了.==|||万 幸的是,他还记得他把所有皮肤按照1-N来编号,他买来的那些皮肤的编号(他至少买了一款 ...
- 机器学习---感知机（Machine Learning Perceptron）
感知机(perceptron)是一种线性分类模型,通常用于二分类问题.感知机由Rosenblatt在1957年提出,是神经网络和支持向量机的基础.通过修改损失函数,它可以发展成支持向量机:通过多层堆叠 ...
- 差分约束 HDU - 1384 HDU - 3592 HDU - 1531 HDU - 3666
Intervals Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- 我的第一个微信小程序
今年国庆假期的时候,在家里带宝宝.想下载一个哄宝宝玩的游戏,从 App Store上搜索了一圈,发现评分高的基本上都是收费的.因为App Store上有限免机制,所以就萌发了做一款关注限免应用的小程序 ...
- Vue(小案例_vue+axios仿手机app)_购物车（计算商品总金额）
一.前言 1.计算总金额 2.点击删除按钮,删除对应的商品信息 3.当还没结算的时候,当用户跳到其他页面 ...
- jenkins+ant+jmeter接口测试
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl=" ...
- 野路子码农系列（2）Python中的类，可能是最通俗的解说
啥叫佩奇?啥叫类?啥叫面向对象?后面两个问题以前在大学里“祖传谭浩强”的时候我经常会有所疑问.老师说着一堆什么public, private,我都是一脸懵逼,啥叫私有?为啥要私有?然后就神游天外了…… ...
- 编译VisualVM源码解决乱码问题
编译VisualVM源码解决乱码问题 起因 今天在使用VisualVM对测试服务器进行JVM监控的时候,发现所有统计图的横纵坐标都是显示乱码(小方块),即使我的Ubuntu系统使用的是英文语言环境．奇 ...
- 《11招玩转网络安全》之第三招：Web暴力破解-Low级别
Docker中启动LocalDVWA容器,准备DVWA环境.在浏览器地址栏输入http://127.0.0.1,中打开DVWA靶机.自动跳转到了http://127.0.0.1/login.php登录 ...