一,简介
Bootstrap是基于HTML,CSS,Javascript开发的简洁,直观,强悍的前端开发框架,使得web开发更加的快捷。
二,特性
-
构成
a,基本结构:bootstrap提供一个带有网格系统,链接样式,背景的基本栅栏结构
b,CSS:含有一个优秀的栅栏布局和全局CSS样式
c,组件:bootstrap包含了丰富的组件库,里面涵盖了web开发常见的几十种组件
d,Javascript插件:bootstrap包含了十几个自定义的javascript插件
e,定制:可以进行组件和变量之间的定制升级,从而得到自己想要的版本,这样可以极大提高开发的灵活性。 -
功能
响应式,开发快捷,组件丰富,简单灵活响应式web开发是让用户通过不同尺寸的浏览器获得良好是觉得一种方法。(兼容不同的终端)
三,响应式开发流程
- 将bootstrapt文件拷贝到项目中
- 添加meta标签
- 引用bootstrapt.css文件
四,响应式布局结构
在Bootstrapt中最重要的属性就是viewport,这个属性可以控制网页在不同终端显示的效果。
viewport重要属性:
width:宽度
initial-scale:设置页面的初始缩放值,为一个浮点数
minimum-scale:允许用户设置的最小缩放值
maximum-scale:允许用户设置的最大缩放值
height:高度
user-scalable:是否允许用户进行缩放(yes 或者 no)
以上属性都是通过<meta>标签来设置的,例如:
<meta name="viewport" content="width=device-width,inital-scale=1">
五,设计响应式网站
终端的页面宽度:
pc端:1280px,1440px,1920px......
ipad:768px,834px,1024px......
移动端:320px,375px,414px......
实现响应式布局还会用到CSS的media媒体查询,media媒体查询可以让我们根据设备显示器的特性(如视口宽度,屏幕比例,设备方向)为其设定CSS样式。media媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,在media媒体查询中,可用于检测的媒体特性有width,height和color等。使用media媒体查询可以在不改变页面内容的情况下,为特定输出设备定制显示效果。
media媒体查询的方法:
1.作为css外链引入
<link rel="stylesheet media="screen and (min-width:600px)" href="style.css" type="text/css" />
2.直接在css中使用
@media screen' and (min-width-width:600px) and (max-width:900px){css属性:css属性值}
六,栅格化布局
栅格化布局实际上就是网格(使用栅格化布局之后,页面是行和列组合的)
容器:”行(row)“必须包含在”。container(固定宽度:不会自动占满整行)“或”.container-fluid(宽度:自动占满整行)“中,一边为其赋予合适的排列(alignment)和内补(padding)。
rem:实际上是设置列的高度的属性,rem的值是整数,代表的高度是rem值*字体像素的大小
七,水平布局和垂直布局
水平布局:justify-content-类型
justify-content-start:起始位置对齐
justify-content-center:居中对齐
justify-content-end:结束位置对齐
justify-content-around:两边等间距分散对齐
justify-content-between:两边不留间距分散对齐
垂直布局:align-items-类型(类型:start,center,end)
混合布局:align-self-类型
八,栅格排序和偏移
排序:order-数值(根据数值的大小熊小到大排序)
偏移:offset-数字