移动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
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论