响应式布局（其次）
响应式布局
- 一.响应式开发
- 二.bootstrap前端开发框架
- 1.原理
- 2.优点
- 3.版本问题
- 4.使用
- （1）创建文件夹结构
- （2）创建html骨架结构
- （3）引入相关样式
- （4）书写内容
- 5.布局容器（已经划分好）
- 三.bootstrap栅格系统
- 1.原理
- 2.使用（有行列）
- （1）参数介绍及使用
- （2）列嵌套
- （3）列偏移（offset）
- （4）列排序（push pull）
- 三.响应式工具（隐藏和显示）（hidden和visible)
一.响应式开发
原理
布局容器
应用
例子
代码块
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.container {width: 750px;margin: 0 auto;}.container ul li {float: left;width: 93.75px;height: 30px;background-color: green;}@media screen and (max-width:767px) {.container {width: 100%;}.container ul li {width: 33.33%;}}</style>
</head><body><div class="container"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div>
</body></html>
二.bootstrap前端开发框架
通栏不需要container
1.原理
2.优点
3.版本问题
4.使用
（1）创建文件夹结构
（2）创建html骨架结构
（3）引入相关样式
（4）书写内容
想要改变样式可以添加类名，覆盖样式
5.布局容器（已经划分好）
三.bootstrap栅格系统
1.原理
2.使用（有行列）
（1）参数介绍及使用
（2）列嵌套
（3）列偏移（offset）
（4）列排序（push pull）
三.响应式工具（隐藏和显示）（hidden和visible)
