bootstrap Grid布局(网格布局)

基本网络结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
container:容器,用来盛庄里面的div的
row:列,列里面用来嵌套行
col:行
偏移列
为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
在下面的实例中,我们有 <div class="col-md-6">..</div>,我们将使用 .col-md-offset-3 class 来居中这个 div。
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-offset-3">
里面的元素,在会被居中,在sm以上
</div>
</div>
</div>
列嵌套

实现复杂的盒子,需要行列的相互嵌套,及行中不可直接嵌套行,而是需要添加列
bootstrap Grid布局(网格布局)的更多相关文章
- Python pyQt4/PyQt5 学习笔记3(绝对对位,盒布局,网格布局)
本节研究布局管理的内容. (一)绝对对位 import sys from PyQt4 import QtGui class Example(QtGui.QWidget): def __init__( ...
- Bootstrap系列 -- 10. 网格布局
一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...
- 网页布局——grid弹性网格布局
网格布局(Grid)是最强大的 CSS 布局方案. Flexbox 是为一维布局设计的,而 Grid 是为二维布局设计. grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它 ...
- Android笔记(十一) Android中的布局——网格布局
网格布局是Android4.0新增的布局管理器,因此需要在Android4.0之后的版本才可以使用,之前的平台使用该布局的话,需要导入相应的支持库. GridLayout的作用类似于HTML中的tab ...
- css布局 - 九宫格布局的方法汇总(更新中...)
目录: margin负值实现 祖父和亲爹的里应外合 换个思路 - li生了儿子帮大忙. 借助absolute方位值,实现自适应的网格布局 cloumn多栏布局 grid display: table: ...
- 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- bootstrap学习总结-02 网格布局
1 网格布局 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. <!DOCTYPE html> ...
- 转:Bootstrap研究 精巧的网格布局系统
本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System).本文讨论第一种 ...
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
随机推荐
- npm ERR! { Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\node_cache\_locks'
vue项目安装json-server报错npm ERR! { Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodej ...
- python+selenium+chromewebdriver或Firefox的环境搭建
插件下载地址 chromewebdriver:https://chromedriver.storage.googleapis.com/index.html?path=2.26/放置在python下的S ...
- 为什么总是弹出报错“百度未授权使用地图API”?
今天打开网站的时候出现了这个问题“百度未授权使用地图API, 可能是因为您提供的密钥不是有效的百度开放平台密钥或此密钥未对本应用的百度地图JavasoriptAPI授权.…”经过研究终于知道什么原因了 ...
- /usr/bin/python^M: bad interpreter: No such file or dir解决办法
Linux直接./xx.py执行python脚本时报错 修改脚本文件编码 $vi xx.py $set ff=unix $:wq
- 插件化框架解读之android系统服务实现原理(五)
阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 一.系统服务提供方式 1.我们平时最常见的系统服务使用方式 Wi ...
- 【题解】LCIS
题目描述 给定两个整数序列,写一个程序求它们的最长上升公共子序列. 输入格式 每个序列用两行表示,第一行是长度L,第二行是该序列. 输出格式 在第一行,输出该LCIS的长度.第二行,输出该LCIS. ...
- Linux中通过grep命令检索文件内容和指定内容前后几行
原文链接: https://www.linuxidc.com/Linux/2017-11/148390.htm Linux系统中搜索.查找文件中的内容,一般最常用的是grep命令,另外还有egrep命 ...
- HDU2732 Leapin' Lizards
Leapin' Lizards Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 任正非:5G技术只独家卖给美国!不卖给韩国、日本、欧洲
https://v.qq.com/x/page/g3001d0xvxe.html 我只转个标题,细节不管了. 呃,实际上就是说,老任头也决定向美国低头了,对不. 不过,也确实没办法. 该起床吃钙片了.
- js高级编程思想
js惰性思想: 能够执行一次就搞定绝对不会执行第二次 function createXHR(){ var xhr=null, falg=false, ary=[ function(){ return ...