bootstrap之响应式开发-栅栏系统
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行样式布局和样式的设置，从而适配不同设备的目的。
| 设备划分 | 尺寸区别 | 响应式尺寸划分 |
|---|---|---|
| 超小屏幕（手机） | <768px | 100% |
| 小屏设备（平板） | >=768px ~<992px | 750px+ |
| 中等屏幕（桌面显示器） | >=992px~<1200px | 970px |
| 宽屏设备（大桌面显示器） | >=1200px | 1170px |
响应式布局容器
响应式需要一个父级做为容器布局，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式改变。
布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预定义了这个类，解耦a.container。
它提供了两个作此用处的类：
.container 定义了在不同类型屏幕的媒体查询
.container-fluid
流式布局容器 百分百宽度
占据全部视口（viewport的容器）
适合于单独做移动端开发
bootstrap使用栅格系统来控制排版，按照不同屏幕划分为1~12等份
行（row）可以去除父容器作用15px的边距
可以通过样式来控制在不同屏幕大小使元素占据每行row中列column的数量
.col-xs- 超小 .col-sm- 小 .col-md- 中等 .col-lg- 大
列（column）大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每列默认有15px的padding
可以同时拥有多个设备的类名，以便划分不同份数，例如 class=“col-md-4 col-lg-3 col-sm-6”
演示项目：
阿里百秀：响应式布局网页，根据调整浏览器大小改变组件布局
bootstrap之响应式开发-栅栏系统相关推荐
- 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 微金所页面制作（Bootstrap 响应式开发 栅格布局 响应式布局）
该页面适用于 PC端 和 移动端,在响应式开发的媒体查询下能够适配所有屏幕. 一.页面效果 二.结构样式说明 (需引入bootstrap 相关样式文件) 结构分为八块: 头部块:.wjs_header ...
- Bootstrap 响应式开发(2021.10.13)
目录 一.响应式开发 1.框架含义 2.响应式 3.响应式尺寸划分 二.Bootstrap简介 1.Bootstrap概念 2.查阅Bootstrap文档 3.Bootstrap的使用 (1)创建文件 ...
- 关于响应式开发的设计规范
◆ ◆ ◆ 一.响应式开发知识要点 本段内容由艾艺前端技术部Jay给大家分享: 现在都流行说做响应式开发,然而什么是响应式开发呢? 专业术语-响应式 简单来说,就是页面应该有能力去自动响应用户的设 ...
- linux字体栅格化,响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言...
1.响应式开发介绍 a.网页布局方式 b.响应式布局 优点:用一个页面适配不同终端的展示 缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的 ...
- 用rem来做响应式开发
电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的.但前一个项 ...
- springboot 使用webflux响应式开发教程（二）
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作 webservice websocket 创建项目,artifactId = tradin ...
- 响应式开发---网页的布局方式、媒体查询、栅格化布局、less语言
1.响应式开发介绍 a.网页布局方式 b.响应式布局 优点:用一个页面适配不同终端的展示 缺点:产生代码冗余,同时使网页体积变得很庞大,不会因为终端的改变而改变网页的体积,不同终端上有些没有显示出来的 ...
最新文章
- Netty with protobuf（二）
- Android百度地图显示空白（只有格子）的具体真实解决方法
- Lang.NEXT 2012相关Session
- ASP.NET Core中如何调整HTTP请求大小的几种方式
- python长整数相乘_python写的大整数相乘的方法
- 前端学习（1413）：多人管理33修改2（未能完结）
- linux mysql修改数据表结构语法
- C++STL源码剖析之vector
- 数据预处理之数据清洗案例
- 3194. 【HNOI模拟题】化学（无标号无根树计数）
- 细胞穿膜肽( CPPs)偶联肽核酸H region-PNA|Arg-PNA|Lys-PNA|Cationic-PNA|47Tat57-PNA的特性
- 仿ZAKER的windows phone风格主界面
- java设置select选中_按值设置选择选项'selected'
- rep（）函数的学习
- JdbcTemplate的使用
- 运用人性,七情六欲聊运营
- 遗传算法matlab优化实例,用遗传算法优化BP神经网络的Matlab编程实例
- Vertx DNS解析源码
- PyCharm打包失败及Pyinstall无法安装问题的解决
- 百度AI人脸识别的学习总结