16-响应式布局（bootstrap框架）
响应式布局（bootstrap框架）
前言
响应式开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
| 设备划分 | 设计尺寸 | 尺寸 |
|---|---|---|
| 超小屏幕（手机） | 100% | <768px |
| 小屏幕设备（平板） | 750px | 768px<width<992px |
| 中屏幕（卓面显示器） | 970px | 992px<width<1200px |
| 宽屏设备（大桌面显示） | 1120px | >1200px |
响应式布局容器：响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。（布局容器的宽度是固定的）
原理：就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式布局。
bootstrap框架
1、快速开发工具
bootstrap前端开发框架：bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架。bootstrap是基于html、css、javascript的，它简洁灵活。使得web开发更加快速
中文网址：http://bootstrapt.css&&.com/
框架：顾名思义就是一套架构，它有一套比较完整的网页功能来解决方案，而且控制权再框架本身，有预制样式，组件，插件。使用者需要按照框架所规定的某种规范进行开发。
优点
标准化的HTML和css编码规范
提供了一套简洁、直观的组件，样式，插件等
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率
2、基本使用
去官网下载相关文件（js,css，font),在页面中引入相关的文件
因为bootstrap框架是基于Jquery开发的，所以引入bootstrap.js之前，先引入jquery.js
3、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。我们提供了两个作此用处的类。
注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。适用于单独制作移动端开发。
4、bootstrap栅格系统
栅格系统：栅格系统是通过一系列的行（row）与列（column）的组合来创建页面的布局，设置的内容就可以放在这些创建好的布局中
实现原理：通过定义容器的大小，平分为12份。调整内外边距。结合媒体查询
使用步骤
一行数据（row）必须包含在 .container或.container-fluid中，以便为其赋予合适的对齐方式和内边距
使用行在水平方向创建一组列
具体内容放在列内，列可以作为行的直接子元素内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格
通过设置padding从而创建列之间的间隙，让后面第一列和最后一列设置负值margin来抵消掉 padding的影响
栅格系统中指定1到12的值来表示其跨越的范围
（1）列组合
列组合就是通过更改数字来合并列，类似表格里的colspan（列合并）。不过使用起来非常简单。
<div class="container">//第一行<div class="row"><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div><div class="col-md-1">colmd-1</div></div>//第二行<div class="row"><div class="col-md-3">colmd-3</div><div class="col-md-3">colmd-3</div><div class="col-md-3">colmd-3</div><div class="col-md-3">colmd-3</div></div>//第三行<div class="row"><div class="col-md-8">colmd-8</div><div class="col-md-4">colmd-4</div></div>//第四行<div class="row"><div class="col-md-6">colmd-6</div><div class="col-md-6">colmd-6</div></div> </div>
（2）列偏移
有时候并不想让两个相邻的列挨在一起，这时候可利用栅格系统的列偏移（offset）功能实现，而不必再定义margin值。对于中等屏幕，使用.col-md-offset-*形式的样式就可以将列偏移到右侧比如：.col-md-offset-2，的意思是将元素向右移动2个列的宽度
<div class="container">//第一行<div class="row"><div class="col-md-4">col-md4</div>//第二列，偏移4个<div class="col-md-4 col-md-offset-4">col-md-4</div></div>//第二行<div class="row"><div class="col-md-4">col-md4</div><div class="col-md-4 col-md-offset-2">col-md-4</div></div>
</div>
（3） 列嵌套
列嵌套：删格系统内置的栅格系统内容将再次嵌套。简单理解就是对一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列的.col-sm-2等等元素存到以及有了的-col-sm-7里
列嵌套最好加一个行（row)这样可以取消父元素的padding值，而且高度和父级一样高
<div class="container"><div class="row"><div class="col-md-8"><div class="row"><div class="col-md-7"></div><div class="col-md-5"></div></div></div><div class="col-md-4"></div></div>
</div>（4）列排序
列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过.col-mdpush-和.col-md-pull-来实现这一目的
push:推动/pull:拉
<div class="container">//第一行<div class="row"><div class="col-md-3">col-md3</div><div class="col-md-9">col-md9</div></div>//第二行<div class="row"><div class="col-md-3 col-mdpush-9">col-md-3</div><div class="col-md-9 col-mdpull-3">col-md-9</div></div> </div> 默认情况下，col-md-9在左边，col-md-3在右边。如果要互换位置，需要将col-md-9列向右移动3个列的距离，也就是推3个列的offset，样式用col-md-push-3；而col-md-3则需要向左移动，也就是拉9个offset，样式用col-md-pull-9
注意：bootstrap4.0以上版本你已经废弃以上办法，改为order-（权重），默认值是0
5、响应式布局
<div class="container"><div class="row"><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"> </div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div><div class="col-lg-6 col-md-4 col-sm-3 col-xs-2"></div></div>
</div>为了加快移动设备友好的开发，利用媒体查询功能，并使用这些工具类可以针对不同的移动设备展示或隐藏页面内容
.hidden-xs: 超小屏幕隐藏
.hidden-sm：小屏幕隐藏
.hidden-md：中等屏幕隐藏
.hidden-lg：大屏幕隐藏
样式、组件、插件
都是通过类名来引用
小图标的注意事项
图标类不能和其他组件直接联合使用
不能在同一个元素上与其他类同存在
创建一个嵌套的span元素，并将图标应用到这个 span上
只对内容为空的元素起作用
对引入的图标位置有规定
图标字体全部位于../fonts/目录内，相对于预编译版CSS文件的应该是同级目录
js插件的引入方式
在前面章节曾介绍过，在HTML中引入bootstrap.js文件或bootstrap.min.js文件即可使用Bootstrap的JavaScript插件。Bootstrap提供了12种JavaScript插件，引入bootstrap.js文件就意味着这12种插件都引入到页面中了，随便哪个都可以使用。还有一种引入方式，就是单个引入JavaScript插件。在官网下载Bootstrap的时候如果选择源码下载，里面会有一个js文件夹，里面有单个的JavaScript插件文件，针对实际情况可以用到哪个引入哪个。
16-响应式布局（bootstrap框架）相关推荐
- 【HTML+CSS】移动端布局之响应式布局+Bootstrap框架
学习视频及笔记参考来源: 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一.响应式开发 1.响应式开发原理 原理:就是使 ...
- Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建 一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果 二.cssrem 插件 (px -> re ...
- 【Vue】Vue 项目前端响应式布局及框架搭建
文章目录 Vue 项目前端响应式布局及框架搭建 一.项目基本结构 二.项目分辨率响应式创建 1.flexible.js 2.引用 flexible 插件 3.修改 flexible 默认配置 4.cs ...
- 移动web开发 17-1 响应式布局 bootstrap首页 框架 阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理 核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法 当屏幕宽度<=768 ...
- 响应式布局——Bootstrap
二.BootStrap 1.1 BootStrap简介 目标:使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样 ...
- 【前端布局篇】响应式布局 Bootstrap 移动端布局
前言 1. 布局介绍 布局:layout 对事物的全面规划和安排 页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等. 网页布局:利用html搭建结构与内容 ...
- 响应式布局 bootstrap栅格系统
阿里百秀案例制作 1.1 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 项目结构搭建 Bootstrap 使用四步曲: 创建 ...
- 移动WEB开发之响应式布局--Bootstrap栅格系统
栅格系统简介 栅格系统英文为"grid systems",也有人翻译为"网格系统",它是指将页面布局划分为等宽的列,然后通过列数 的定义来模块化页面布局. Bo ...
- 移动端（响应式布局--阿里百秀）
技术栈:响应式布局 bootstrap框架 less flex html程序 <!DOCTYPE html> <html lang="en"><hea ...
- 响应式布局及bootstrap（实例）
说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...
最新文章
- linux日志idProduct,linux – 机器ID是uuid吗？
- c盘python27文件夹可以删除嘛_C盘的文件夹哪些可以删除
- 从城市治理到城市“智”理，AI 不仅是城市管理的“眼睛”
- Java知多少（42）泛型通配符和类型参数的范围
- 关于如何评价洗牌质量的猜想
- OverLoad与override的区别
- 从零入门 FreeRTOS 操作系统之任务的概念
- write up杂项：想蹭网先解开密码
- numpy pytorch 接口对应_拆书分享篇深度学习框架PyTorch入门与实践
- java Concurrent包学习笔记（一）：ExecutorService
- Bootstrap中过渡效果（Transition）模态框插件的使用案例
- 动手为王：由一条UPDATE语句引发的一波三折深入实践(含PPT)
- 说出来你可能不信，谷歌一年要给苹果交200亿保护费。
- 这些测试细节，你注意到了吗？
- Opencv之生成棋盘标定板
- Glide4.0源码全解析（二），load()背后的故事
- matlab色差,科学网—实用图片处理技巧（1）---MATLAB学习笔记 - 冯竟超的博文
- 运算放大器虚短和虚断
- CSS背景图片居中置顶
- 构件3扩大构件法的本质+W3是否等于W2 +角加速度α3是否等角加速度α2+科氏加速度诞生