13.响应式布局1.媒体查询常用语法 2.书写顺序 3.基本语法 4.外链css引入 5.UI框架 6.bootStra

1.媒体查询常用语法

2.书写顺序

3.基本语法

4.外链css引入

5.UI框架

6.bootStrap 介绍是twitter 公司维护的前端UI框架，他提供大量的CSS样式，容许开发者结合HTML 和JavaScript 快速编写功能完善的网页和常见的交互效果。 6.1官网下载 6.2 使用步骤，可以直接提取css/bootstrap.min.css和js/bootstrap.bundle.min.js两个文件

6.3 引入bottstrap.css

在你的网页之间，添加

6.4在你的网页之前，添加

<script src="/static/bootstrap5/js/bootstrap.bundle.min.js" ></script>。 
复制代码

6.5 注意：要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径。另外如果你使用了最简安装或改变了路径，要按照你的实际路径写。

6.6、你的代码就可以写在和<script之间了。 7.bootStrap5

不在支持internet explorer10和internet explorer11。节省了很多为兼容而写的代码，同时也可以更好的运用html5和css3的一些新特征。

不再依赖jQuery。jQuery优点很多，更能也很强大，但是对于一些小项目而言，jQuery大大的增加了源码包的大小。Bootstrap5不再依赖jQuery，可以大大的减小Bootstrap的源码包大小。当然，这里说的不再依赖是说jQuery不再是必须的，如果你需要jQuery，依然可以单独引入，另外单独引入的话你还可以直接使用最新版本的jQuery，而不是Bootstrap配套的版本。
优化了各个组件的外观，包括调色板、字体等，使设计的网站变得更加好看，一直以来Bootstrap给人诟病的一点就是做出的网站页面太死板，面目丑陋，需要自己另外写css优化，现在Bootstrap5做好的页面已经非常美观，可直接应用了，大家可以直接看看www.bootstrap.cn，纯Bootstrap5开发，没有使用任何其他css文件。
增加了很多组件，现在基本上设计网页的常用组件都能找到了，网页设计变得不要太轻松了，简单复制、粘贴、修改以下文字，拼凑起来即可。
体积大大减小。完整编译版仅1M多，经俺老刘试验，如果你很在意软件包大小，完全可以将bootstrap.min.css和bootstrap.bundle.min.js提取出来，总共不到100k，目前没发现任何问题。 8.栅格系统

栅格就是网格，英文Grid，之所以有的地方是网格，有的地方是栅格，只是翻译习惯不同。十二栅格系统的意思是将整个屏幕按宽度划分为十二等份，而一等分代表屏幕宽度的十二分之一，为什么划分为十二等份，而不是十等分或其他等份呢，这是因为12是1，2，3，4，6的最小公倍数，根据经验，按照这样的划分是最美观和实用的。当然，我也见过36栅格和十栅格系统，从使用上来看，确实不如12栅格方便。

在十二栅格系统，如果我想把屏幕分为左右两侧，左边占三分之一，右边占三分之二，则可以将左边宽度设置为4栅格，右边设置为8栅格。如果我需要左右各站一半，只需要设置每个为6栅格。如果我只需要设置一个页面占满屏幕，可以直接设置为12栅格。你看，是不是很方便？

Bootstrap 网格系统设计三个标签，分别是container，row，col：

container是容器，在上一节中，专门做了详细的介绍。
row是行的意思，代表着一个水平行
col是单元格，代表着具体每一个单元格，其写法有三种：col、col-栅格数（如col-3）、col-屏幕大小-栅格数（如col-md-3）。

下面是一段示例代码，将屏幕划分为三个等宽的单元，先不用深究具体代码的写法，只需要简单了解一下网格系统的结构即可，后面我们会详细说明。 9.## Bootstrap 网格系统规则

使用行（row）来创建列的水平组。
一个页面内可以有多个行。
行必须放置在容器（container）内，以便获得适当的对齐（alignment）和内边距（padding）。
内容应该放置在列（col）内，且唯有列可以是行的直接子元素。
列内还可以嵌套行，列内的行无需container，因为列本身就是个容器。
可以直接使用预定义的网格类，比如 col-屏幕大小-栅格数，用于快速创建栅格布局。
预定义类中，屏幕大小有5个值，主要用于响应式设计，见3.1。栅格数为数字1到12，代表占屏幕宽度