【第三部分 | 移动端开发】5：响应式布局

ゞ浴缸里的玫瑰 2023-09-23 15:47 68阅读 0赞

**目录**

| 响应式布局简介

| Bootstrap 前端开发框架

简介

基础使用

布局容器

--------------------

### | 响应式布局简介 ###

目标

![8ecb409dadaa4f4b92f4b685e610e06c.png][]

原理

![9957ac7524984ec39f3696e64bf27450.png][]

![191537c0925f407a902979469c54c860.png][]

--------------------

案例

![fe7879faad324bb98a045e7708d915c5.png][]

--------------------

### | Bootstrap 前端开发框架 ###

#### 简介 ####

中文官网：[Bootstrap中文网][Bootstrap]

官网：[Bootstrap · The most popular HTML, CSS, and JS library in the world.][Bootstrap _ The most popular HTML_ CSS_ and JS library in the world.]

推荐使用：[http://bootstrap.css88.com/][http_bootstrap.css88.com]

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和 插件。使用者要按照框架所规定的某种规范进行开发

--------------------

#### 基础使用 ####

![002dcb0fd6454a77a788c7099aa42286.png][]

![3f4d820d56694b3c851f035d74cd494a.png][]

--------------------

#### 布局容器 ####

*  container类提供的是一个已经划分好不同宽度下的挡位。

![013ffde400d44e548f6133335346aaa4.png][]

[8ecb409dadaa4f4b92f4b685e610e06c.png]: https://img-blog.csdnimg.cn/8ecb409dadaa4f4b92f4b685e610e06c.png
[9957ac7524984ec39f3696e64bf27450.png]: https://img-blog.csdnimg.cn/9957ac7524984ec39f3696e64bf27450.png
[191537c0925f407a902979469c54c860.png]: https://img-blog.csdnimg.cn/191537c0925f407a902979469c54c860.png
[fe7879faad324bb98a045e7708d915c5.png]: https://img-blog.csdnimg.cn/fe7879faad324bb98a045e7708d915c5.png
[Bootstrap]: http://www.bootcss.com/
[Bootstrap _ The most popular HTML_ CSS_ and JS library in the world.]: http://getbootstrap.com/
[http_bootstrap.css88.com]: http://bootstrap.css88.com/
[002dcb0fd6454a77a788c7099aa42286.png]: https://img-blog.csdnimg.cn/002dcb0fd6454a77a788c7099aa42286.png
[3f4d820d56694b3c851f035d74cd494a.png]: https://img-blog.csdnimg.cn/3f4d820d56694b3c851f035d74cd494a.png
[013ffde400d44e548f6133335346aaa4.png]: https://img-blog.csdnimg.cn/013ffde400d44e548f6133335346aaa4.png