Bootstrap响应式布局需要知道些什么-CSDN博客

本文链接：https://blog.csdn.net/2401_87196759/article/details/142330858

| — | — |

| 超小屏幕（手机） | <768px |

| 小屏设备（平板） | >=768px~<992px |

| 中等屏幕（桌面显示器） | >=992px~<1200px |

| 宽屏设备（大桌面显示器） | >=1200px |

响应式布局容器

=================================================================

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面的子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分

超小屏幕（手机，小于768px）：设置宽度为100%
小屏设备（平板，大于等于768px）：设置宽度为750px
中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
宽屏设备（大桌面显示器，大于等于1200px）：宽度设置为1170px

Bootstrap简介

=====================================================================

Bootstrap来自推特，是目前最受欢迎的前端框架，Bootstrap是基于HTML、CSS和JS的，简洁灵活，是的web开发更加便捷

中文官网：http://www.bootcss.com/
官网：http://getbootstrap.com/

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

Bootstrap优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

Bootstrap版本

2.x.x：停止维护，兼容性好，代码不够简洁，功能不够完善
3.x.x：目前使用最多，稳定，但是放弃了IE6-IE7。对IE8支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB项目
4.x.x：最新版，目前还不是很流行

Bootstrap使用

=====================================================================

在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

Bootstrap使用四部曲：

创建文件夹结构
创建HTML骨架结构


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">



<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

引入相关样式文件
书写内容

Bootstrap布局容器

=======================================================================

Bootrap需要为页面内容和栅格系统包裹一个.container容器，他提供了两个做此用处的类

container类
- 响应式布局的容器固定宽度
- 大屏（>=1200px）宽度固定为1170px
- 中屏（>=992px）宽度固定为970px
- 小屏（>=768px）宽度固定为750px
- 超小屏（100%）
container-fluid类
- 流式布局容器百分百宽度
- 占据全部视口（viewport）的容器
- 适合于制作移动端页面开发


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Document</title>

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

  <!--[if lt IE 9]>

    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

  <![endif]-->

  <style>

    

  </style>

</head>

<body>

  <div class="container">123</div>

  <div class="container-fluid">123</div>

</body>

</html>

栅格系统简介

================================================================