移动Web-响应式布局-BootStrap

响应式

媒体查询

目标:能够根据设备宽度的变化,设置差异化样式

l 开发常用写法
Ø 媒体特性常用写法
Ø max-width  (提示小于等于用)
Ø min-width  (提示大于等于用)

书写顺序

注意书写顺序

l min-width(从小到大写)
l max-width(从大到小写)

l 完整写法

关键词

l and
l only
l not

媒体类型

l 媒体是用来区分设备类型的,如屏幕设备、打印设备等,其中手机、电脑、平板都属于屏幕设备。

媒体特征

媒体特性主要用来描述媒体类型的具体特征,如当前屏幕的宽高、分辨率、横屏或竖屏等

外链式CSS引入

BootStrap

目标:知道 UI框架的作用
l UI框架概念
Ø 将常见效果进行统一封装后形成的一套代码, 例如:BootStrap。
l 作用
Ø 基于框架开发,效率高,稳定性高

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

 

 

使用步骤
1. 引入: BootStrap提供的CSS代码
2. 调用类:使用BootStrap提供的样式
Ø container:响应式布局版心类

BootStrap栅格系统

目标:使用BootStrap栅格系统布局响应式网页

l 栅格化是指将整个网页的宽度分成若干等份
l BootStrap3默认将网页分成12等

l .container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
l .container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%。
l 分别使用.row类名和 .col类名定义栅格布局的行和列。

注意:
1. container类自带间距15px;
2. row类自带间距-15px  (抵消container自带的内间距15px;)

全局样式

目标:掌握BootStrap手册用法,使用全局CSS样式美化标签

分类:
l 布局样式
l 内容美化样式

手册用法:
BootStrap预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点。
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

 

 

版权声明:
作者:zhuim521
链接:https://zhuimwl.com/71.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
移动Web-响应式布局-BootStrap
响应式 媒体查询 目标:能够根据设备宽度的变化,设置差异化样式 l 开发常用写法 Ø 媒体特性常用写法 Ø max-width  (提示小于等于用) Ø min-width  (提示……
<<上一篇
下一篇>>