bootstrap css-网格系统
前言:第一次记录点东西,只能勉强算是笔记吧。博主自学前端,深知自己水水的,但还是向把自己学到的东西记录下来,这不刚学习了bootstrap的css部分,现在整理出笔记。
1,Bootstrap网格系统的基本网格结构
bootstrap网格的基本结构如下:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
其中,Bootstrap中的container class用于包裹页面上的内容。它所代表的样式如下
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
从bootstrap的基本网格结构,不难看出,bootstrap是使用行来创建列的水平组的。为了获得适当的内边距和对齐,行必须放在 .container class内。通过向行内添加带有 .col-*-* class 的<div>元素,可以快速创建网格布局。因为网格系统是通过横跨十二个可用的列来创建的,因此每一行中横跨的列数和始终是不大于十二。所以要创建三个宽度相等的列,则需要使用三个 .col-*-4 class。
2,网格选项
Bootstrap网格系统可以跨多个设备工作:
在超小设备上对行进行分列时,使用 .col-xs-* class ; 在小型设备上对行进行分列时,使用 .col-sm-* class ;
在中型设备上对行进行分列时,使用 .col-md-* class ; 在大型设备上对行进行分列时,使用 .col-lg-* class ;每一行的列数量和要确保是12列!
3,偏移
Bootstrap中偏移使用 .col-*-offset-* 类,该类通过增加列的左外边距来进行偏移,第一个*表示设备大小:xs,sm,md,lg.一般情况下是在大屏幕显示器上使用偏移,即 .col-md-offset-*。第二个*表示偏移量,范围是1~11.
例如:
<div class="container">
<h4>偏移前</h4>
<div class="row" >
<div class="col-md-6"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>bootstrap 网格系统1</p>
</div> </div>
<h4>偏移后</h4>
<div class="row" >
<div class="col-md-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>bootstrap 网格系统2</p>
</div> </div>
</div>
网页表现为:
4,嵌套
在一个已有的 .col-md-*列内新添加一个.row,并对其进行分列。被嵌套的行应包含一组列,同样这组列的个数不能超过12(没有必要12列全部占满)
例如下面(一行两列中的第二列被嵌套两行两列):
<div class="container">
<h3>列嵌套</h3>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >
<p>网格系统的第一列</p>
<p>在每一列中都可以添加一些内容</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第一列</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第二列</p>
</div>
</div>
<div class="row">
<div class="col-md-5" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第一列</p>
</div>
<div class="col-md-7" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第二列</p>
</div>
</div>
</div>
</div>
</div>
网页表现为:
5,排序
利用 .col-md-push-* 和 .col-md-pull-*类可以实现内置网格列的顺序,其中*的范围是1~11。
例如,在上面例子的基础上,交换第二列中,第二行中的两列:
<div class="container">
<h3>列嵌套</h3>
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >
<p>网格系统的第一列</p>
<p>在每一列中都可以添加一些内容</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<div class="row">
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第一列</p>
</div>
<div class="col-md-6" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>嵌套列中的第一行第二列</p>
</div>
</div>
<div class="row">
<div class="col-md-5 col-md-push-7" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第一列</p>
</div>
<div class="col-md-7 col-md-pull-5" style="background-color: #dedef8; box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>第二行第二列</p>
</div>
</div>
</div>
</div>
</div>
表现为:
6,总结
使用类有:
容器: .container 行: .row 列: .col-*-* 偏移:.col-*-offset-* 排序: .col-*-push-* .col-*-pull-*。
bootstrap css-网格系统的更多相关文章
- Bootstrap CSS 栅格、代码和表格
一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...
- Bootstrap CSS概览代码文字标注篇
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Jeet – 先进,直观,灵活的 CSS 网格系统
Jeet 是一个先进的,直观的 CSS 网格系统.通过使用预处理器的强大功能,我们现在可以通过实际分数(或者浮点数)来生成一个基于百分比宽度和间隔的网格.让你用更少的代码,更快的速度构建页面布局. 您 ...
- bootstrap布局 网格系统
Bootstrap 网格系统 本章节我们将讲解 Bootstrap 的网格系统(Grid System). Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewp ...
- bootstrap部分---网格系统;(几天没写博客了,为了潜心研究一下bootstrap)
1工作原理: (1)行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). (2)使用行来创建列的水平组. (3)内容应该放置在列内, ...
- (二)Bootstrap CSS 概览
在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 H ...
- 3.Bootstrap CSS 概述
1.HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 ...
- 2.Bootstrap CSS
Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...
- Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...
- Bootflat – 基于 Bootstrap CSS 框架的扁平化界面
Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...
随机推荐
- 【DS】排序算法之冒泡排序(Bubble Sort)
一.算法思想 冒泡排序是排序算法中比较有意思的一种排序方法,也很简单.其算法思想如下: 1)比较相邻的元素.如果第一个比第二个大,就交换他们两个. 2)对每一对相邻元素作同样的工作,从开始第一对到结尾 ...
- bzoj千题计划203:bzoj3994: [SDOI2015]约数个数和
http://www.lydsy.com/JudgeOnline/problem.php?id=3994 设d(x)为x的约数个数,给定N.M,求 用到的一个结论: 证明: 枚举n的约数i,枚举m的约 ...
- 【官方文档】Nginx模块Nginx-Rtmp-Module学习笔记(一) RTMP 命令详解
源码地址:https://github.com/Tinywan/PHP_Experience 说明: rtmp的延迟主要取决于播放器设置,但流式传输软件,流的比特率和网络速度(以及响应时间“ping” ...
- postman提取接口的返回值及动态设置变量(一)
一.提取接口返回值 1.当返回值是返回JSON时 let json = JSON.parse(responseBody); // responseBody是包含整个返回内容的字符串 let foo ...
- [整理]Assembly中的DLL提取
当机器上安装一些程序后,Assembly中的DLL会变得越来越丰富. 拿个常见问题来说明. 安装ReportViewer后其中会出现以下DLL. Microsoft.ReportViewer.Proc ...
- 解决PHP curl https时error 77(Problem with reading the SSL CA cert (path? access rights?))
服务器环境为CentOS,php-fpm,使用curl一个https站时失败,打开curl_error,捕获错误:Problem with reading the SSL CA cert (path? ...
- ASP.NET批量下载文件
一.实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务器上创建用于存储所选文件的临时文件夹,将所选文件拷贝至临时文件夹.然后调用 RAR程序,对临时文件夹进行压缩,然后输出到 ...
- 使用sso(cas)的时候报单点登录service不匹配问题分析及解决
最近在使用portal做企业门户网站,其中使用了sso.在集成了多个应用之后在portal中点击集成的应用报错 2017-05-31 08:37:16,950 ERROR [org.jasig.cas ...
- yui压缩JS和CSS文件
CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS. 压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参 ...
- 2017/05/16 java 基础 随笔
1,成员变量和局部变量的区别 1)在内存中的位置不同 成员变量:在堆内存(成员变量属于对象,对象进堆内存) 局部变量:在栈内存(局部变量属于方法,方法进栈内存) 2)初始化值不同 成员变量:有默认初始 ...