From c030d40264000512d49c1d82e906c4b2971fb35a Mon Sep 17 00:00:00 2001 From: estomm Date: Mon, 18 Apr 2022 16:07:24 +0800 Subject: [PATCH] bootstrap --- Bootstrap/1 getting-started.md | 197 ++++ Bootstrap/2 bootstrap_css_01.md | 280 ++++++ Bootstrap/3 bootstrap_css_02.md | 782 +++++++++++++++ Bootstrap/4 bootstrap_css_03.md | 187 ++++ Bootstrap/5 bootstrap_components.md | 967 +++++++++++++++++++ Bootstrap/6 javascript.md | 622 ++++++++++++ Bootstrap/7 less.md | 435 +++++++++ Bootstrap/8 writing-responsive-web-design.md | 633 ++++++++++++ Bootstrap/viewgrid.jpg | Bin 0 -> 59176 bytes 9 files changed, 4103 insertions(+) create mode 100644 Bootstrap/1 getting-started.md create mode 100644 Bootstrap/2 bootstrap_css_01.md create mode 100644 Bootstrap/3 bootstrap_css_02.md create mode 100644 Bootstrap/4 bootstrap_css_03.md create mode 100644 Bootstrap/5 bootstrap_components.md create mode 100644 Bootstrap/6 javascript.md create mode 100644 Bootstrap/7 less.md create mode 100644 Bootstrap/8 writing-responsive-web-design.md create mode 100644 Bootstrap/viewgrid.jpg diff --git a/Bootstrap/1 getting-started.md b/Bootstrap/1 getting-started.md new file mode 100644 index 00000000..ba4e1d62 --- /dev/null +++ b/Bootstrap/1 getting-started.md @@ -0,0 +1,197 @@ +## 什么是BOOTSTRAP + +### 1）BOOTSTRAP概述 + +Bootstrap 是 Twitter 公司开发的一个基于 HTML、CSS、JavaScript 的技术框架，符合 HTML、CSS 规范，且代码简介、视觉优美。 + +Bootstrap 集合 HTML、CSS 和 JavaScript，使用了最新的浏览器技术，为实现快速开发提供了一套前端工具包。使用 Bootstrap 不仅可以构建出非常优雅的 HTML 页面，而且占用资源非常少，使用 gzip 压缩后大小仅用 10KB。并且 Bootstrap 在跨浏览器兼容方面表示也很好。 + +### 2）选择BOOTSTRAP的理由 + +* Bootstrap 的 HTML 是基于 HTML5 的最新技术。 +* Bootstrap 可以快速实现响应式页面。 +* Bootstrap 集成了非常友好的 CSS 样式表，对于非设计人员也可以制作出很漂亮的网页。 + +### 3）BOOTSTRAP提供的功能 + +根据 Bootstrap 官网提供的文档，可以知道 Bootstrap 分为以下几个模块： + +* 全局 CSS 样式：提供了格栅系统、表格、表单、按钮等集成样式。 +* 组件：提供了下拉菜单、输入框、导航、列表组等组件。 +* 插件：提供了模态框、滚动监听、警告框、弹出框等插件。 + +### 4）BOOTSTRAP的版本变化 + +* 2011年8月，Twitter 推出了 Bootstrap 1 版本，该工具由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作完成。 +* 2012年1月，Twitter 推出了 Bootstrap 2 版本。相比 Bootstrap 1 版本，Bootstrap 2 添加了响应式设计、采用 12 栏栅格布局，并且清晰地划分出 CSS 布局、组件和插件等功能。 +* 2013年8月，Twitter 推出了 Bootstrap 3 版本。在这个版本中，采用移动优先和更好的盒子模型等。并且官方不再支持 IE 7及以下版本的浏览器。 +* 目前，Bootstrap 4 只是开发者预览版。 + +## 下载BOOTSTRAP + +### 1）Bootstrap 官网及下载地址 + +* Bootstrap 官网：[http://getbootstrap.com](http://getbootstrap.com) +* Bootstrap 下载地址：[http://getbootstrap.com/getting-started/#download](http://getbootstrap.com/getting-started/#download) + +### 2）Bootstrap 使用的两种方式 + +* 将 Bootstrap 提供的压缩包下载，导入到工程目录中使用。 +* 使用 CDN 加速服务，例如以下内容： + +```html + + + + + + + + + + + +``` + +### 3）Bootstrap 目录结构及说明 + +下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构： + +``` +bootstrap/ +├── css/ 样式库 +│ ├── bootstrap.css 样式文件 +│ ├── bootstrap.css.map +│ ├── bootstrap.min.css 压缩后的样式文件 +│ ├── bootstrap-theme.css 主题文件 +│ ├── bootstrap-theme.css.map +│ └── bootstrap-theme.min.css 压缩后的主题文件 +├── js/ 核心 js 文件 +│ ├── bootstrap.js 核心 js 文件 +│ └── bootstrap.min.js 压缩后的核心 js 文件 +└── fonts/ 字体库 + ├── glyphicons-halflings-regular.eot + ├── glyphicons-halflings-regular.svg + ├── glyphicons-halflings-regular.ttf + ├── glyphicons-halflings-regular.woff + └── glyphicons-halflings-regular.woff2 +``` + +## 对浏览器的支持情况 + +### 1）目前支持的浏览器 + +| | Chrome | Firefox | Internet Explorer | Opera | Safari | +| --- | --- | --- | --- | --- | --- | +| Android | 支持 | 支持 | N/A | 不支持 | N/A | +| IOS | 支持 | N/A | N/A | 不支持 | 支持 | +| Mac OS X | 支持 | 支持 | N/A | 支持 | 支持 | +| Windows | 支持 | 支持 | 支持 | 支持 | 不支持 | + +### 2）IE 8及之前版本的兼容 + +* 对 HTML 5 提供的新元素，需要通过 html5shiv.js 库进行兼容。 +* 对 CSS 3 提供的媒体查询，需要通过 respond.js 库进行支持。 + +需要在使用 Bootstrap 框架的页面 head 元素中，插入以下内容： + +```html + + + +``` + +### 3）IE 兼容模式 + +Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 `` 元素加入到页面中： + +```html + +``` + +### 4）国产浏览器高速模式 + +国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。 + +将下面的 `` 元素加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面： + +```html + +``` + +## box-sizing + +Bootstrap 默认使用的盒子模型是 border-box，可能会和一些第三方组件冲突。 + +为了避免 Bootstrap 设置的全局盒模型所带来的影响，可以重置单个页面元素或覆盖整个区域的盒模型。 + +* 覆盖单个页面元素 + +```css +/* 通过 CSS 代码覆盖单个页面元素的盒模型 */ +.element { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +``` + +* 重置整个区域 + +```css +/* 通过 CSS 代码重置整个区域 */ +.reset-box-sizing, +.reset-box-sizing *, +.reset-box-sizing *:before, +.reset-box-sizing *:after { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +``` + +## 基本模板 + +Bootstrap 提供了一个最基本的 HTML 模板，基于这个模板开始实现 Bootstrap 响应式页面。 + +```html + + + + + + + + + + + Bootstrap最基本的HTML模板 + + + + + + + + +

你好，世界！

+ + + + + + + +``` \ No newline at end of file diff --git a/Bootstrap/2 bootstrap_css_01.md b/Bootstrap/2 bootstrap_css_01.md new file mode 100644 index 00000000..5f1a8cfa --- /dev/null +++ b/Bootstrap/2 bootstrap_css_01.md @@ -0,0 +1,280 @@ +## 1 概述 + +### 1）HTML 5 文档类型 + +Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。 + +```html + + + ... + +``` + +### 2）移动设备优先 + +Bootstrap 是移动设备优先的。为了确保适当的绘制和触屏缩放，需要在 `` 之中添加 viewport 元元素。 + +```html + +``` + +在移动设备浏览器上，通过为 viewport设置 meta 属性为 user-scalable=no 可以禁用其缩放功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。 + +```html + +``` + +### 3）排版与链接 + +Bootstrap 排版、链接样式设置了基本的全局样式。 + +* 为 body 元素设置 background-color: #fff; +* 使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数 +* 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 + +## 2 布局容器 + +Bootstrap 提供了以下两种布局容器： + +* .container 类用于固定宽度并支持响应式布局的容器。 + + | 媒体查询 | 宽度值 | + | --- | --- | + | >1200px | 1170px | + | >992px | 970px | + | >768px | 750px | + | 小分辨率 | 100% | + +* .container-fluid 类用于 100% 宽度，占据 viewport 的容器。 + +> **值得注意的是：**这两种 容器类不能互相嵌套。 + +## 3 栅格系统 + +### 1）什么是栅格系统 + +栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。 + +Bootstrap 提供的栅格系统，主要特点如下： + +* 行的宽度，可以是固定宽度，也可以是相对宽度（100%）。 +* 一行中最多可以包含 12 个列。如果一行中包含的列大于 12，多余的列则被作为一个整体另起一行排列。 +* Bootstrap 根据 4 种分辨率提供不同的栅格系统预定义样式。 + +### 2）栅格系统工作原理 + +Bootstrap 的栅格系统的工作原理如下： + +* 栅格系统必须指定一个容器元素，该元素的 class 必须为 .container（固定宽度）或 .container-fluid（100%宽度）。 +* 作为“行”的元素必须作为容器元素的直接子元素，并且 class 设置为 .row。 +* 作为“列”的元素必须是“行”元素的直接子元素（**“行”元素的子元素不能直接包含内容，内容应该被包含在“列”元素中。**），并且一行最多允许创建 12 列。 +* “列”元素的预定义样式，具体内容请参考 *“3）栅格系统的参数”* 内容。 + +### 3）栅格系统的参数 + +Bootstrap 根据 4 种不同的分辨率提供了不同的预定义样式（栅格类）。栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 + +| | **超小屏幕** 手机（<768px）| **小屏幕** 平板（>=768px）| **中等屏幕** 桌面显示器（>=992px）| **大屏幕** 大桌面显示器（>=1200px）| +| --- | --- | --- | --- | --- | +| 栅格系统行为 | 总是水平排列 | 以折叠开始，大于断点成水平方式 | 以折叠开始，大于断点成水平方式 | 以折叠开始，大于断点成水平方式 | +| 容器宽度 | None（自动）| 750px | 970px | 1170px | +| class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- | +| 列数 | 12 | 12 | 12 | 12 | +| 列宽 | 自动 | 60px | 78px | 95px | +| 槽宽 | 30px（每列左右均为 15px）| 30px（每列左右均为 15px）| 30px（每列左右均为 15px）| 30px（每列左右均为 15px）| +| 可嵌套 | 是 | 是 | 是 | 是 | +| 偏移 | 是 | 是 | 是 | 是 | +| 排序 | 是 | 是 | 是 | 是 | + +### 4）栅格系统示例 + +* CSS 代码 + +```css +body { + margin-top : 100px; +} +[class*=col-] { + border : 1px solid black; + padding-top: 15px; + padding-bottom: 15px; +} +``` + +* HTML 代码 + +```html +
+

三等分列

+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+

三不等分列

+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+

手机、平板电脑和PC桌面不同布局

+
+
col-md-3 col-sm-6 col-xs-12
+
col-md-3 col-sm-6 col-xs-12
+
col-md-3 col-sm-6 col-xs-12
+
col-md-3 col-sm-6 col-xs-12
+
+
+``` + +### 5）调整列的顺序 + +#### a. 列偏移 + +使用 .col-md-offset-* 类可以将列向右侧偏移。（`*` 表示向右偏移的列数） + +```html +
+

列偏移

+
+
.col-md-4
+
.col-md-4 .col-md-offset-4
+
+
+
.col-md-3 .col-md-offset-3
+
.col-md-3 .col-md-offset-3
+
+
+
.col-md-6 .col-md-offset-3
+
+
+``` + +#### b. 嵌套列 + +在 Bootstrap 的栅格系统允许进行嵌套。所谓**栅格系统嵌套**，就是指在 Bootstrap 栅格系统中的每列中允许包含一个栅格系统。 + +> 被嵌套的“行”中所包含的列的个数依旧不能超过 12 列。 + +```html +
+

嵌套列

+
+
+ Level 1: .col-sm-9 +
+
Level 2: .col-xs-8 .col-sm-6
+
Level 2: .col-xs-4 .col-sm-6
+
+
+
+
+``` + +#### c. 列排序 + +通过将栅格系统中的列向右移动（push）或向左移动（pull）来改变列的顺序。 + +* `.col-md-push-*`表示向右移动 +* `.col-md-pull-*`表示向左移动 + +```html +
+

列排序

+
+
.col-md-9 .col-md-push-3
+
.col-md-3 .col-md-pull-9
+
+
+``` + +### 6）响应式工具 + +通过单独或联合使用以下列出的 class，可以针对不同屏幕尺寸隐藏或显示页面内容。 + +| | **超小屏幕** 手机（<768px）| **小屏幕** 平板（>=768px）| **中等屏幕** 桌面（>=992px）| **大屏幕** 大桌面（>=1200px）| +| --- | :---: | :---: | :---: | :---: | +| .hidden-xs | 隐藏 | 可见 | 可见 | 可见 | +| .hidden-sm | 可见 | 隐藏 | 可见 | 可见 | +| .hidden-md | 可见 | 可见 | 隐藏 | 可见 | +| .hidden-lg | 可见 | 可见 | 可见 | 隐藏 | + +```html +
+

响应式工具

+
+ +
.col-md-6
+ +
+
+``` + +### 7）响应式栅格系统示例 + +```html + + + + + + + Bootstrap栅格系统案例 + + + + + + + +
+
+

Hello, world!

+

This is a template for a simple marketing or informational website. It includes a large callout called a + jumbotron and three supporting pieces of content. Use it as a starting point to create something more + unique.

+
+
+ +
+ +
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis + euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis + euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula + porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut + fermentum massa justo sit amet risus.

+

View details »

+
+
+ +
+ +
+

© 2015 Company, Inc.

+
+
+ + + + + +``` diff --git a/Bootstrap/3 bootstrap_css_02.md b/Bootstrap/3 bootstrap_css_02.md new file mode 100644 index 00000000..5cccdba1 --- /dev/null +++ b/Bootstrap/3 bootstrap_css_02.md @@ -0,0 +1,782 @@ + +## 1 文本 + +### 1）文本对齐 + +通过以下文本对齐类，可以简单方便的将文字重新对齐。 + +| 类名 | 描述 | +| --- | --- | +| text-left | 左对齐 | +| text-center | 居中对齐 | +| text-right | 右对齐 | +| text-justify | 两端对齐，段落中超出屏幕部分文字自动换行 | +| text-nowrap | 段落中超出屏幕部分不换行 | + +```html +
+
+

Left aligned text.

+

Center aligned text.

+

Right aligned text.

+

Justified text.

+

No wrap text.

+
+
+``` + +### 2）改变大小写 + +通过以下这几个类可以改变文本的大小写。 + +| 类名 | 描述 | +| --- | --- | +| text-lowercase| 小写 | +| text-uppercase| 大写 | +| text-capitalize| 首字母大写 | + +```html +
+
+

Lowercased text.

+

Uppercased text.

+

Capitalized text.

+
+
+``` + +### 3）文本颜色 + +Bootstrap 允许为文本设置不同颜色表示不同含义，具体如下： + +| 类名 | 描述 | +| --- | --- | +| text-muted | 提示，使用浅灰色 | +| text-primary | 首选项，使用蓝色 | +| text-success | 成功，使用浅绿色 | +| text-info | 信息，使用浅蓝色 | +| text-warning | 警告，使用黄色 | +| text-danger | 危险，使用褐色 | + +```html +
+
+

提示信息

+

首选项

+

成功

+

信息

+

警告

+

危险

+
+
+``` +### 4）标题 + +``` +

h1. Bootstrap heading

+

h2. Bootstrap heading

+

h3. Bootstrap heading

+

h4. Bootstrap heading

+
h5. Bootstrap heading
+
h6. Bootstrap heading
+``` + +### 5）内联文本元素 + +* mark +* del +* strong +* small +* u/s/em + +## 2 列表 + +### 1）无序列表 + +```html +
+
+
    +
  • 苹果
    • +
  • 香蕉
    • +
  • 西瓜 +
      +
    • 大兴西瓜
      • +
    • 东北西瓜
      • +
    +
    • +
  • 芒果
    • +
  • 樱桃
    • +
+
+
+``` + +### 2）有序列表 + +```html +
+
+
    +
  1. 苹果
    2. +
  2. 香蕉
    3. +
  3. 西瓜 +
      +
    1. 大兴西瓜
      2. +
    2. 东北西瓜
      3. +
    +
    4. +
  4. 芒果
    5. +
  5. 樱桃
    6. +
+
+
+``` + +### 3）无样式列表 + +移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。 + +```html +
+
+
    +
  • 苹果
    • +
  • 香蕉
    • +
  • 西瓜 +
      +
    • 大兴西瓜
      • +
    • 东北西瓜
      • +
    +
    • +
  • 芒果
    • +
  • 樱桃
    • +
+
+
+``` + +### 4）内联列表 + +通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。 + +```html +
+
+
    +
  • 苹果
    • +
  • 香蕉
    • +
  • 西瓜 +
      +
    • 大兴西瓜
      • +
    • 东北西瓜
      • +
    +
    • +
  • 芒果
    • +
  • 樱桃
    • +
+
+
+``` + +### 5）描述 + +#### a. 垂直排列的描述 + +带有描述的短语列表。 + +```html +
+
+
+
Description lists
+
A description list is perfect for defining terms.
+
Euismod
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+ Donec id elit non mi porta gravida at eget metus.
+
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+
+
+
+``` + +#### b. 水平排列的描述 + +.dl-horizontal 可以让
内的短语及其描述排在一行。 + +```html +
+
+
+
Description lists
+
A description list is perfect for defining terms.
+
Euismod
+
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+ Donec id elit non mi porta gravida at eget metus.
+
Malesuada porta
+
Etiam porta sem malesuada magna mollis euismod.
+
+
+
+``` + +## 3 按钮 + +### 1）作为按钮的元素 + +Bootstrap 利用 ``、` + + + + +``` + +> **值得注意的是：** + +> 1. 导航和导航条组件只支持 ` + + + + + + + + +``` + +### 3）不同尺寸的按钮 + +* Bootstrap 为按钮提供了大、默认、小和很小几个尺寸。 + +```html +
+
+ + + + +
+
+``` + +* 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 + +```html +
+
+ +
+
+``` + +### 4）按钮激活状态 + +为按钮元素添加 .active 类，设置其为激活状态。当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。 + +```html +
+
+ + Link +
+
+``` + +### 5）按钮禁用状态 + +通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。 + +* 为 ` +``` + +> **跨浏览器兼容性** +> +> Internet Explorer 9 及更低版本的浏览器将会把按钮中的文本绘制为灰色，并带有恶心的阴影，目前还没有解决办法。 + +* 为基于 `` 元素创建的按钮添加 .disabled 类。 + +```html +Link +``` + +## 4 图片 + +### 1）响应式图片 + +通过为图片添加 .img-responsive 类可以让图片支持响应式布局。 + +> 如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。 + +```html +
+
+ Responsive image +
+
+ Responsive image +
+
+``` + +### 2）图片形状 + +通过为 元素添加以下相应的类，可以让图片呈现不同的形状。 + +| 类名 | 描述 | +| --- | --- | +| img-rounded | 圆角矩形 | +| img-circle | 圆形 | +| img-thumbnail | 矩形 | + +> IE 8 不支持 CSS3 中的圆角属性。 + +```html +
+
+ ... + ... + ... +
+
+``` + + +## 5 表格 + +### 1）基本表格 + +为任意 `` 标签添加 .table 类可以为其赋予基本的样式。 + +```html +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID名称价格
1书籍12.50
2电视1000
3笔记本2000
3笔记本2000
+ + +``` + +### 2）条纹状表格 + +通过 .table-striped 类可以给 `` 之内的每一行增加斑马条纹样式。 + + +```html +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID名称价格
1书籍12.50
2电视1000
3笔记本2000
3笔记本2000
+
+
+``` + +> 条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 IE 8 支持。 + +### 3）带边框表格 + +添加 .table-bordered 类为表格和其中的每个单元格增加边框。 + +```html +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID名称价格
1书籍12.50
2电视1000
3笔记本2000
3笔记本2000
+
+
+``` + +### 4）鼠标悬停 + +通过添加 .table-hover 类可以让 `` 中的每一行对鼠标悬停状态作出响应。 + +```html +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID名称价格
1书籍12.50
2电视1000
3笔记本2000
3笔记本2000
+
+
+``` + +### 5）紧缩表格 + +通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的 padding 均会减半。 + +```html +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID名称价格
1书籍12.50
2电视1000
3笔记本2000
3笔记本2000
+
+
+``` + +### 6）状态类 + +通过这些状态类可以为行或单元格设置颜色。 + +| 类名 | 描述 | +| --- | --- | +| active | 鼠标悬停在行或单元格上时所设置的颜色 | +| success | 标识成功或积极的动作 | +| info | 标识普通的提示信息或动作 | +| warning | 标识警告或需要用户注意 | +| danger | 标识危险或潜在的带来负面影响的动作 | + +```html +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID名称价格
1书籍12.50
2电视1000
3笔记本2000
3笔记本2000
+
+
+``` + +> **值得注意的是：** +> +> 这些状态类不仅可以作用于``元素，还可以作用于``元素。 + +### 7）响应式表格 + +将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格。其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 + +## 6 辅助样式 + +### 1）背景颜色 + +和文本颜色一样，Bootstrap 允许添加不同的背景颜色表示不同含义，具体如下： + +| 类名 | 描述 | +| --- | --- | +| bg-primary | 首选项，使用蓝色 | +| bg-success | 成功，使用浅绿色 | +| bg-info | 信息，使用浅蓝色 | +| bg-warning | 警告，使用黄色 | +| bg-danger | 危险，使用褐色 | + +```html +
+
+

提示信息

+

首选项

+

成功

+

信息

+

警告

+

危险

+
+
+``` + +### 2）浮动 + +#### a. 浮动 + +通过添加 .pull-left 或 .pull-right 类，可以将任意元素向左或向右浮动。 + +* CSS 代码 + +```css +.block1 { + width : 300px; + height : 200px; + border : 1px solid black; + background : dodgerblue; +} +.block2 { + width : 500px; + height : 300px; + border : 1px solid black; + background : yellowgreen; +} +``` + +* HTML 代码 + +```html +
+
+
+
+
+
+
+``` + +#### b. 清除浮动 + +通过为父元素添加 .clearfix 类可以很容易地清除浮动。 + +* CSS 代码 + +```css +.block1 { + width : 300px; + height : 200px; + border : 1px solid black; + background : dodgerblue; +} +.block2 { + width : 500px; + height : 300px; + border : 1px solid black; + background : yellowgreen; +} +``` + +* HTML 代码 + +```html +
+
+
+
+
+
+
+``` + +### 3）居中 + +为任意元素设置 .center-block 类让其中的内容居中。 + +```html +
+``` + +### 4）显示或隐藏 + +.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)，这些类只对块级元素起作用。 + +另外，.invisible 类可以被用来仅仅影响元素的可见性，也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响布局。 + +```html +
+ + +
+``` + +## 7 代码风格 + +三种代码风格 + +1. 使用``文本内联代码 +2. 使用`
`多行代码注释.pre-scrollable添加代码滚动条
+3. 使用``用户输入代码，快捷键效果
+4. 使用``标记变量
+
+内敛代码
+ctrl
+
+a
+    b
+    c   d
+    e
+e
+

+
diff --git a/Bootstrap/4 bootstrap_css_03.md b/Bootstrap/4 bootstrap_css_03.md
new file mode 100644
index 00000000..ccafa70a
--- /dev/null
+++ b/Bootstrap/4 bootstrap_css_03.md	
@@ -0,0 +1,187 @@
+## 1 表单
+
+### 1）基本表单
+
+Bootstrap 为单独的表单元素预定义了全局样式，表单内元素的具体使用如下：
+
+* 设置了 .form-control 类的 ``、`