diff --git a/blog/front-end-combat/bootstrap.md b/blog/front-end-combat/bootstrap.md
new file mode 100644
index 0000000000000000000000000000000000000000..cce2f37c02558960b7e4359fc0bd86d40c0defdf
--- /dev/null
+++ b/blog/front-end-combat/bootstrap.md
@@ -0,0 +1,49 @@
+# 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
+
+
+```
+
+2、使用样式类名
+
+```html
+
+
+```
+
+代码示例
+
+[](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
+
+
+全局样式
+组件
+插件
diff --git a/blog/front-end-combat/demo/bootstrap-1.html b/blog/front-end-combat/demo/bootstrap-1.html
new file mode 100644
index 0000000000000000000000000000000000000000..bad7ada374320adfe50891cd45fea67bd699eeb4
--- /dev/null
+++ b/blog/front-end-combat/demo/bootstrap-1.html
@@ -0,0 +1,8 @@
+
+
+
+ 1
+
\ No newline at end of file
diff --git a/blog/front-end-combat/index.md b/blog/front-end-combat/index.md
index 17360e54e2e4106584c0b9fe9455ca88270c7eeb..fdb2c910689115188c871c1528c3c892993d8609 100644
--- a/blog/front-end-combat/index.md
+++ b/blog/front-end-combat/index.md
@@ -1,7 +1,6 @@
# 笔记：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)
diff --git a/blog/front-end-combat/responsive.md b/blog/front-end-combat/responsive.md
new file mode 100644
index 0000000000000000000000000000000000000000..a1e042be12acfe5a43f5ec0a7efad97a61ee6284
--- /dev/null
+++ b/blog/front-end-combat/responsive.md
@@ -0,0 +1,87 @@
+# 响应式
+
+## 媒体查询
+
+根据设备宽度的变化，设置差异化样式
+
+```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
+
+
+
+
+
+```
diff --git a/doc/html.md b/doc/html.md
index 5bef908f74eaa86980aa79a85f5f1cd68daf1487..6c70c2a1e1eb2b30b6226c8fc7ba3a409975588f 100644
--- 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): 高效易用的自动标注工具, 生成前端代码, 设计研发协作利器
## 博客站点