fix

87c405ef · 彭世瑜 · 9e20436e · 87c405ef · 87c405ef · 87c405ef
5 changed file
--- a/blog/front-end-combat/bootstrap.md
+++ b/blog/front-end-combat/bootstrap.md
+# BootStrap
+- github：[https://github.com/twbs/bootstrap](https://github.com/twbs/bootstrap)
+- Bootstrap 官网：[https://getbootstrap.com/](https://getbootstrap.com/)
+- Bootstrap 中文文档：[https://www.bootcss.com/](https://www.bootcss.com/)
+## BootStrap 使用步骤
+1、引入 css 代码
+```html
+<!-- Bootstrap 核心 CSS 文件 -->
+<link rel="stylesheet" href="./bootstrap@3.4.1/css/bootstrap.min.css" />
+```
+2、使用样式类名
+```html
+<!-- 响应式布局版心类 -->
+<div class="container"></div>
+```
+代码示例
+[](demo/bootstrap-1.html ':include :type=code')
+## BootStrap 栅格系统
+实现响应式网页布局
+栅格化：网页宽度等分为 12 等份
+| | 超小屏幕 |    小屏幕   | 中等屏幕   | 大屏幕 
+|- | - | - | -| -|
+设备 | 手机 | 平板 | 桌面显示器 | 大桌面显示器
+响应断点 | <768px | ≥768px | ≥992px  | ≥1200px
+别名| xs | sm | md | lg
+容器宽度(container) | 100% | 750px | 970px | 1170px
+类前缀 | col-xs-* |  col-sm-* | col-md-* | col-lg-*
+列（column）数 | 12 |12 |12 |12 |
+槽（gutter）宽 | 30px | 30px | 30px| 30px
+https://www.bilibili.com/video/BV1xq4y1q7jZ?p=166&spm_id_from=pageDriver
+全局样式
+组件
+插件
--- a/blog/front-end-combat/demo/bootstrap-1.html
+++ b/blog/front-end-combat/demo/bootstrap-1.html
+<body>
+      <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+      <link rel="stylesheet"
+            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
+            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
+            crossorigin="anonymous">
+      <div class="container">1</div>
+</body>
\ No newline at end of file
--- a/blog/front-end-combat/index.md
+++ b/blog/front-end-combat/index.md
 # 笔记：web 前端开发进阶 HTML5+CSS3+移动端
-视频：[黑马程序员web前端进阶教程，前端html5+css3+移动端项目实战](https://www.bilibili.com/video/BV1xq4y1q7jZ)
+视频：[黑马程序员 web 前端进阶教程，前端 html5+css3+移动端项目实战](https://www.bilibili.com/video/BV1xq4y1q7jZ)
 ## 学习笔记
@@ -21,4 +20,6 @@
 8. [实战演练](blog/front-end-combat/practice.md)
- 响应式 BootStrap 框架
+9. [响应式](blog/front-end-combat/responsive.md): 媒体查询
+10. [BootStrap 框架](blog/front-end-combat/bootstrap.md)
--- a/blog/front-end-combat/responsive.md
+++ b/blog/front-end-combat/responsive.md
+# 响应式
+## 媒体查询
+根据设备宽度的变化，设置差异化样式
+```css
+@media (媒体查询) {
+  /* 样式 */
+}
+/* eg: */
+/* 视口宽度小于等于768px*/
+@media (max-width: 768px) {
+  /* 样式 */
+}
+/* 视口宽度大于等于1200px*/
+@media (min-width: 1200px) {
+  /* 样式 */
+}
+```
+> 多个媒体查询，需要注意顺序，遵循 css 层叠性
+## 完整写法
+```css
+@media 关键词 媒体类型 and (媒体特性) {
+    css代码
+}
+```
+1、关键词
+- and
+- only
+- not
+2、媒体类型
+| 类型名称   | 值     | 描述                      |
+| ---------- | ------ | ------------------------- |
+| 屏幕       | screen | 带屏幕的设备              |
+| 打印预览   | print  | 打印预览模式              |
+| 阅读器     | speech | 屏幕阅读模式              |
+| 不区分类型 | all    | 默认值，包括以上 3 种情形 |
+3、媒体特性
+| 特性名称           | 属性                    | 值                             |
+| ------------------ | ----------------------- | ------------------------------ |
+| 视口宽和高         | width、height           | 数值                           |
+| 视口最大宽或最大高 | `max-width`、max-height | 数值                           |
+| 视口最小宽或最小高 | `min-width`、min-height | 数值                           |
+| 屏幕方向           | orientation             | portrait：竖屏/ landscape 横屏 |
+常用写法
+```css
+@media (min-width: 1200px) {
+  /* PC样式 */
+}
+@media (min-width: 992px) {
+  /* 样式 */
+}
+@media (min-width: 768px) {
+  /* >=768px 样式 */
+}
+```
+外链式 css 引入
+```html
+<link
+  rel="stylesheet"
+  media="逻辑符 媒体类型 and (媒体特性)"
+  href="index.css"
+/>
+<!-- eg: 注意小括号不能丢 -->
+<link rel="stylesheet" media="(min-width: 992px)" href="index-992.css" />
+<link rel="stylesheet" media="(min-width: 1200px)" href="index-1200.css" />
+```
--- a/doc/html.md
+++ b/doc/html.md
@@ -10,6 +10,7 @@
 - [前端开发必备！Emmet 使用手册](https://www.w3cplus.com/tools/emmet-cheat-sheet.html)
+[PxCook](https://www.fancynode.com.cn/pxcook): 高效易用的自动标注工具, 生成前端代码, 设计研发协作利器
 ## 博客站点