1. 介绍
1.1 响应式
根据不同的设别的屏幕大小,而显示不同样式的页面,但使用代码是同一份的
1.2 响应式实现
主要是css3的媒体查询功能(css是静态语言 没有逻辑判断)
if(屏幕大小>1024px){
// 使用样式1
}else if(屏幕大小>728px){
// 使用样式2
}
1.3 响应式框架
bootstrap是响应式框架的一种
2. bootstrap startup
1 下载bootstrap的框架压缩包
2 解压压缩包
3 环境搭建
4 页面布局(对页面进行区域划分)
5 填充每个区域的内容(copy过程)
3. bootstrap的布局
3.1 原始方式
table -- 缺点:加载慢 div+css -- 缺点:学习成本高 不易操作
3.2 bootstrap方式
吸取了table和div+css各自的优点 进行页面布局-----栅格系统布局
3.2.1 栅格布局
1 每一行会划分为12块
2 栅格系统可以通过属性 去进行响应式
class:col-md-* == column-middle-num 在中型屏幕 div占据num块 div是否显示和隐藏
4. bootstrap的compnent
1 全局css样式:静态样式信息
2 组件:具有一定样式和功能的html组件
3 js插件:使用js实现的一些插件的集合
原文地址:https://cloud.tencent.com/developer/article/2024199
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。