响应式布局(bootstrap框架)
前言
-
响应式开发原理:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
设备划分 | 设计尺寸 | 尺寸 |
---|---|---|
超小屏幕(手机) | 100% | <768px |
小屏幕设备(平板) | 750px | 768px<width<992px |
中屏幕(卓面显示器) | 970px | 992px<width<1200px |
宽屏设备(大桌面显示) | 1120px | >1200px |
-
响应式布局容器:响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果。(布局容器的宽度是固定的)
-
原理:就是在不同的屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式布局。
bootstrap框架
1、快速开发工具
-
bootstrap前端开发框架:bootstrap来自Twitter(推特),是目前最受欢迎的前端框架。bootstrap是基于html、css、javascript的,它简洁灵活。使得web开发更加快速
-
框架:顾名思义就是一套架构,它有一套比较完整的网页功能来解决方案,而且控制权再框架本身,有预制样式,组件,插件。使用者需要按照框架所规定的某种规范进行开发。
优点
-
标准化的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插件文件,针对实际情况可以用到哪个引入哪个。