bootstrap基础学习【网格系统】(三)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap基础学习【网格系统】(三)</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body style="padding-left: 20px;">
<h3><strong>1.实现原理</strong></h3>
Bootstrap框架中的网格系统就是将容器平分成12份。 <h3><strong>2.工作原理</strong></h3>
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
针对不同的浏览器分辨率,宽度也不一样:自动、750px、970px和1170px
1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。
3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素
4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响
<style>
[class *= col-]{
background-color: #eee;
border: 1px solid #ccc;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<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>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
</div> <h3><strong>3.列偏移</strong></h3>
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。
要保证列与偏移列的总数不超过12,不然会致列断行显示
<div class="container">
<h4>列向右移动四列的间距</h4>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
</div>
<br />
<h4>发生行断裂</h4>
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
<div class="col-md-4">col-md-4</div>
</div>
</div> <h3><strong>4.列排序</strong></h3>
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>
</div>
</div> <h3><strong>5.列的嵌套</strong></h3>
<style>
[class *= col-]{
background-color: #eee;
border: 1px solid #ccc;
}
[class *= col-] [class *= col-] {
background-color: #f36;
border:1px dashed #fff;
color: #fff;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-8">
我的里面嵌套了一个网格
<div class="row">
<div class="col-md-6">col-md-6</div>
<div class="col-md-6">col-md-6</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">
我的里面嵌套了一个网格
<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>
</div>
</div>
</div>
</body>
</html>
bootstrap基础学习【网格系统】(三)的更多相关文章
- bootstrap基础学习【导航条、分页导航】(五)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【表单含按钮】(二)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
- bootstrap基础学习【菜单、按钮、导航】(四)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap基础学习【排版】(一)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JavaScript 基础 学习(三)
JavaScript 基础 学习(三) 事件三要素 1.事件源: 绑定在谁身上的事件(和谁约定好) 2.事件类型: 绑定一个什么事件 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
- bootstrap基础学习(四)——网格系统(列的偏移、排序、嵌套)
网格系统——列偏移.列排序.列嵌套 列偏移:有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来.这个时候就可以使用列偏移(offset)功能来实现.使用列偏移也非 ...
- bootstrap基础学习小记(三)网格简介
网格系统:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootst ...
- Bootstrap<基础二> 网格系统
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格 ...
随机推荐
- bootstrap的css和js
css:<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel=" ...
- SP703 SERVICE - Mobile Service
思路:DP 提交:1次 题解: 我们把处理到的要求作为阶段. \(f[i][x][y][z]\)表示第 \(i\) 个要求,三个人分别的位置. 发现这样有很多无用状态,因为显然在第 \(i\) 个要求 ...
- 005_linux驱动之_class_device_create函数
(一)解析class_device_create函数 (二)当我们使用class_create创建一个类之后我们就可以使用class_device_create函数在这个类下面创建一个设备了,cl ...
- Activiti服务类- RepositoryService服务类
Activity服务类-1 RepositoryService服务类一共47个接口1.创建部署//开始创建一个新的部署.DeploymentBuilder createDeployment(); 2. ...
- 【luogu4145】上帝造题的七分钟2 / 花神游历各国--区间开根-线段树
题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是便有了对一段 ...
- CF1197B
CF1197B 题意: 出n个柱子,每个柱子一个圆盘,其半径各不相同,每次只能将柱子上只有一个圆盘的移到相邻位置,问能否全部移到一个柱子上. 解法: 思路题. 如果所有盘子都能移动到同一个柱子上,那么 ...
- ORM SQLAlchemy 表于表的关系
1表与表之间三种关系 1.1 一对一关系 举例: 一个丈夫对应一个妻子,一个妻子对应一个丈夫 1.2 一对多关系 举例:一个人可以拥有多辆汽车,要求查询某个人拥有的所有车辆 分析:这种情况其实也可以采 ...
- 在一串字符串中找到与正则表达式匹配的字符串?(例如:export_20170717_out.log 找到20170717)
如题:提取字符串:export_20170717_out.log 对应的日期: package dodo; import java.util.regex.Matcher; import java.ut ...
- Linux下的crontab定时执行任务简要说明
在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.cron的配置文件称为“cr ...
- 第11组 Alpha冲刺(5/6)
第11组 Alpha冲刺(5/6) 队名 不知道叫什么团队 组长博客 https://www.cnblogs.com/xxylac/p/11898559.html 作业博客 https://edu ...