From e2745eab95c1a4aba8f1ba649c505fc4aeed4529 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Wed, 23 Feb 2022 23:23:22 +0800
Subject: [PATCH] fix
---
blog/front-end-combat/bootstrap.md | 71 +++++++++++++++----
blog/front-end-combat/demo/bootstrap-css.html | 13 ++++
.../front-end-combat/demo/bootstrap-grid.html | 21 ++++++
3 files changed, 92 insertions(+), 13 deletions(-)
create mode 100644 blog/front-end-combat/demo/bootstrap-css.html
create mode 100644 blog/front-end-combat/demo/bootstrap-grid.html
diff --git a/blog/front-end-combat/bootstrap.md b/blog/front-end-combat/bootstrap.md
index cce2f37..83b6333 100644
--- a/blog/front-end-combat/bootstrap.md
+++ b/blog/front-end-combat/bootstrap.md
@@ -4,6 +4,11 @@
- Bootstrap 官网：[https://getbootstrap.com/](https://getbootstrap.com/)
- Bootstrap 中文文档：[https://www.bootcss.com/](https://www.bootcss.com/)
+- 全局样式
+- 字体图标
+- 组件
+- 插件
+
## BootStrap 使用步骤
1、引入 css 代码
@@ -30,20 +35,60 @@
栅格化：网页宽度等分为 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 |
+
+栅格示例:
+
+[](demo/bootstrap-grid.html ':include :type=code')
+
+[](demo/bootstrap-grid.html ':include height=120')
+
+## BootStrap 常用类
-| | 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕
-|- | - | - | -| -|
-设备 | 手机 | 平板 | 桌面显示器 | 大桌面显示器
-响应断点 | <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
+- `.container` 指定宽度并居中，自带间距 15px
+- `.container-fluid` 宽度为 100%
+- `.row` 布局行 自带间距-15px
+- `.col` 布局列
+
+```html
+
+
+
+
+
+```
-https://www.bilibili.com/video/BV1xq4y1q7jZ?p=166&spm_id_from=pageDriver
+## BootStrap 查找手册
+
+全局 CSS 样式 https://v3.bootcss.com/css/
+
+示例
+
+[](demo/bootstrap-css.html ':include :type=code')
+
+[](demo/bootstrap-css.html ':include height=120')
+
+使用插件需要引入以下文件
+
+```
+bootstrap.min.css
+
+// 需要注意先后顺序
+jquery.js
+bootstrap.min.js
+```
+响应式网站：
-全局样式
-组件
-插件
+- 适合：元素内容较少的网站，例如：企业站
+- 不适合：元素较多的网站，不适合做响应式，最好分开做
diff --git a/blog/front-end-combat/demo/bootstrap-css.html b/blog/front-end-combat/demo/bootstrap-css.html
new file mode 100644
index 0000000..68f7097
--- /dev/null
+++ b/blog/front-end-combat/demo/bootstrap-css.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/blog/front-end-combat/demo/bootstrap-grid.html b/blog/front-end-combat/demo/bootstrap-grid.html
new file mode 100644
index 0000000..82ad006
--- /dev/null
+++ b/blog/front-end-combat/demo/bootstrap-grid.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
--
GitLab