bootsrap是一个前端的框架,重点是里面的栅格系统!
屏幕尺寸(宽度)
-
超小屏幕,如:手机,尺寸 <768
-
小型屏幕:如:平板,尺寸 >=768,<992
-
中等屏幕:如:电脑,尺寸 >=992,<1200
-
超大屏幕:如:电视,尺寸 >=1200
响应式布局
-
根据不同的客户端,显示不同的效果,就称为响应式布局。
-
由于移动端设备访问网站的比例大幅提升(已经称为主流),因此我们设计网站时需要移动设备优先。
解决方案
-
根据不同的客户端,跳转到不同的网站
-
适合于几乎无法兼容显示的大型网站,如:京东等
-
解决:
window.navigator['userAgent']
可以获取客户端类型
-
-
使用媒体查询
-
语法:
@media 媒体查询标志 [only] screen [只]支持屏幕 and 并且的意思,用于条件 min-width 最小宽度 max-width 最大宽度 min-height 最小高度(了解) max-height 最大高度(了解)
-
使用方式1
<style> @media screen and (max-width:992px) and (min-width:768px) { div { width: 100%; height: 200px; background: blue; } } </style>
-
使用方式2
<style> @import url(02-chaoxiao.css) screen and (max-width:768px); </style>
-
使用方式3
<head> <link type="text/css" rel="stylesheet" href="02-chaoda.css" media="screen and (min-width:1200px)" /> </head>
-
viewport
-
说明:viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做"视区"。
-
width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
-
height:和 width 相对应,指定高度。
-
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
-
maximum-scale:允许用户缩放到的最大比例。
-
minimum-scale:允许用户缩放到的最小比例。
-
user-scalable:用户是否可以手动缩放。
-
示例:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
尺寸单位
-
px:像素,绝对单位
-
%:百分比,相对于父级元素的百分比
-
em:相对于父级元素的倍数
-
rem:相对于HTML元素的倍数
bootstrap
-
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
-
是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
-
中文官网:www.bootcss.com
-
下载:用于生产环境的版本
-
使用:
-
拷贝基础模板,修改依赖文件路径。
-
布局容器
-
两边留空白:container
-
100%宽度:container-fluid
-
-
栅格系统
-
将整个元素宽度平均为12等分,以后设置宽度时只需要指定多少份即可
-
表示一行:
<div class="row"></div>
-
超小(col-xs-份数)、小型(col-sm-份数)、中等(col-md-份数)、超大(col-lg-份数)
-
列偏移:col-md-offset-份数
-
列嵌套:也就是已经分割的div可以继续使用栅格系统继续分割
-
列排序:
-
左拉:col-md-pull-份数
-
右推:col-md-push-份数
-
-
-