栅格系统

Bootstrap响应式前端框架笔记一——强大的栅格布局 一、Bootstrap？ Bootstrap是一款HTML，Css和JavaScript开发框架，其也支持开发者进行自定义构建，开发者也可以只打包自己需要的功能模块使用。Bootstrap的中文网址如下： http://v3.bootcss.com/ 。 Bootstrap是一款响应式的编程框架，所谓响应式，是指在不同屏幕尺寸的设备上，使用Bootstrap开发的项目可以自动进行布局调整适配。其响应式布局的核心是栅格系统，栅格系统将浏览器分隔成一定数量的行和列。默认栅格系统将浏览器窗口分为12列，开发者可以为元素设置其在对应设备尺寸中所占的列数。 二、均分与尺寸适配 Bootstrap将浏览器尺寸分为4个等级，分别为xs，sm，md和lg。xs是指浏览器宽度小于768时的状态，一般对应移动手机设备，sm指浏览器宽度大于768且小于992时的状态，其一般对应平板设备，md指浏览器宽度大于768且小于1200时的状态，一般对应正常的个人电脑，lg是指浏览器宽度大于1200时的状态。如下表所示： 在开发者使用栅格类对标签进行定义的时候，需要注意，如果只设置了高等级的栅格类，则在此等级以下的浏览器尺寸都将采用竖直堆叠，此等级及以上等级的浏览器尺寸中都将水平排列。例如，如果配置了两个标签的类都为为col-md-6

Bootstrap框架提供了一套响应式、移动设备的流式栅格系统，该系统通过行（row）与列（column）的组合来创建页面布局。大意为把整体分为固定多少格显示。 对于移动端显示布局，需要引入一个meta标签 /* 引入移动端窗口数据标签，则user-scalable=no是设置窗口是否可缩放 */ <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> 开始布局内容： 首先需要创建布局容器，容器可设置类名为container和container-fluid <div class="container"> ... </div> <div class="container-fluid"> ... </div> 区别在于：container是固定宽度内容居中显示，则container-fluid是宽度100% 容器内包含“行（row）与列（column）”，关于column的类名，可实现分辨率大小的调整 <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-5">第一列</div> <div class="col-xs-12 col-sm-4 col-md-5">第二列

移动设备优先 Bootstrap 3将对移动设备的友好支持直接融合进了框架的内核中，Bootstrap是移动设备优先的。 为了确保适当的绘制和触屏缩放，需要在head中添加viewport元数据标签。设置 meta 属性为 user-scalable=no 可以禁用视口缩放。 < meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" >　　 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。 .container 类用于固定宽度； .container-fluid 类(流式布局容器)用于 100% 宽度。两个类不能互相嵌套。 栅格系统 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，用于通过一系列的行（row）与列（column）的组合来创建页面布局，网页中的内容就可以放在创建好的栅格系统中。 “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中。 <div class="container"> <div class="row"> <div class="col-lg-1 col-md-3 con

Grid 栅格系统的使用 定义容器 .coninater { display: grid; } 多种方式定义单格 1. 按百分比划分 .coninater { display: grid; grid-template-rows: 50% 50%; grid-template-columns: 20% 20% 20% 20% 20%; } 2. 按比例划分 .coninater { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } 3. 自动填充 .coninater { display: grid; grid-template-rows: repeat(auto-fill, 100px); grid-template-columns: repeat(auto-fill, 100px); } 4. minmax 控制行范围的波动 .coninater { display: grid; grid-template-rows: repeat(2, minmax(50px, 100px)); grid-template-columns: repeat(3, 1fr); } 栅格间距 .coninater { display: grid; grid

阅读数：7 编辑 一、背景介绍 Flexbox 布局(FLexible Box)意在提供一个更为有效的方式来进行布局、对齐和分配一个容器内元素之间的空间，即使他们的大小是未知的或者动态的。 flex布局的主要思想是，让容器能够改变它的子元素的宽度/高度（甚至顺序），从而更好地填充可用的空间（主要是为了适应所有种类的设备和屏幕大小）。 最重要的，flexbox 布局是可以改变方向的。与之相对的是传统布局（block是垂直方向的从上到下，inline是水平方向的从左到右）。虽然他们在页面上表现良好，但是他们缺乏弹性（字面意义上的缺乏弹性）来适应大型的或者复杂的应用（尤其是遇到方向的改变、调整大小、伸展、收缩等等这些情况时）。 二、知识剖析 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross 三、常见问题 栅格布局的用法相信大家都很熟悉了，今天我们主要来探讨容器的padding 15px,行的margin -15px，列的padding

1.gdal包简介 gdal是空间数据处理的开源包，其支持超过100种栅格数据类型，涵盖所有主流GIS与RS数据格式，包括Arc/Info ASCII Grid(asc)，GeoTiff (tiff)，Erdas Imagine Images(img)，ASCII DEM(dem) 等格式。 2.安装gdal包 （1）通过此链接查找并下载gdal包： https://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame （根据自己的系统及python版本选择对应的gdal包） （2）在dos命令行下切换到包所在的文件夹，并运行pip install 包名进行安装。 3.读取栅格数据 #导入gdal包 from osgeo import gdal #导入numpy包（支持高维数组和矩阵运算，也提供了许多数组和矩阵运算的函数） import numpy as np #打开文件 dataset=gdal.Open("fdem.tif") #栅格矩阵的列数 im_width = dataset.RasterXSize #栅格矩阵的行数 im_height = dataset.RasterYSize #波段数 im_bands = dataset.RasterCount #仿射矩阵，左上角像素的大地坐标和像素分辨率。 #共有六个参数，分表代表左上角x坐标

1. 直接上bootstrap 4 <div class="row"> <div class="col-md-4 col-sm-3 col-lg-2"> <img src="images/logos.png" alt="" /> </div> </div> col-lg-2 ≥992px 大屏幕 摆放6个 col-md-3 ≥768px 中等屏幕摆放4个 一般用这个 col-sm-4 ≥576px 平板 摆放 三个 可以一起摆放 2. pull-right 左右浮动 3. 来源： https://www.cnblogs.com/nice2018/p/11763468.html

关于bootstrap的响应式布局，昨天看了杨老师的视频教学 https://www.bilibili.com/video/av18357039 豁然开朗，在这里记录一下 一：meta标签的引用 <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> 其实自己一直没有注意到，关于这个meta标签的引入，如果不引入这些标签，就无法实现响应式布局。 二：响应式按钮 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_content" aria-expanded="false"> 　　<span class="sr-only">Toggle navigation</span> 　　<span class="icon-bar"></span> 　　<span class="icon-bar"></span> 　　<span class="icon-bar"></span></button> 这个响应式按钮默认是不显示的

之前用来布局的方法： 1、table布局 2、float浮动及 position定位布局，需要考虑对其他元素的影响 3、flex弹性盒模型布局，可以解决排列方向，对齐方式，自适应尺寸的问题 现在学习一种新的布局方法：Grid布局，网格布局。是基于二维网格的布局系统，网格内部是一个格一个格的。和flex布局一样也分容器属性和项目属性。 声明容器 display: grid; 块级网格 display: inline-grid; 行内块级网格 display: subgrid; 定义子网格，子网格会继承父网格的一系列规格 grid-template-columns: 60px 60px 60px 60px; 用来定义网格列的宽度即轨道宽度，代码表示将容器划分为4列，列的宽度都是60px， 宽度可以随意的更改。 grid-template-rows: 60px 60px 60px 60px; 用来定义网格行的高度，代码表示将容器划分为4个行。通过以上两行代码就实现了一个4*4的网格划分了。 grid-gap: 5px; 默认值为0，用来控制网格的间距，准确地说是用来控制网格区域的间距。是grid-row-gap和grid-column-gap两个属性的缩写。 注：grid-gap只能创建列与列或行与行之间的间距，但不能创建列和行与网格容器边缘的间距。可设任何非负值，px、%

什么是Grid布局？ Grid布局即网格或者栅格布局，是一种基于二维网格布局系统。 一、兼容性 ie10、ie11支持带前缀-ms- 二、Grid布局 类似flex布局。grid布局分为重要的两部分，容器和子元素。 这里给父容器设置类container,子元素设置类item。 效果如下： 父容器的属性 1. display: grid | inline-grid | subgrid; grid: 生成块级网格 inline-grid: 生成行内网格 subgrid: 如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小。 2.设置行和列的大小grid-template-columns、grid-template-rows grid-template-columns：1px 10% auto ...;设置子元素的宽，值的单位可以px、rem、百分比等；同时值的个数表示列的个数 grid-template-rows：1px 10% auto ...;设置子元素的高，值的单位可以px、rem、百分比等；同时值的个数表示行的个数 例：3列*2行的6个网格 效果： 3. 单元格间距 grid-column-gap、 grid-row-gap、 grid-gap grid-column-gap: 单元格列间距 grid-row-gap：单元格行间距 grid-gap