bootstrap

1、bootstrap介绍

2、bootstrap安装

1、直接引入（cdn）

CSS: "https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"

JS:https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js
   https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js

3、bootstrap使用

4-5、栅格系统

.container
用于固定宽度并支持响应式布局的容器。
.container-fluid类
用于100%宽度，占据全部视口(viewport)的容器。
注意，由于padding等属性的原因，这两种容器类不能互相嵌套。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列(12份)

栅格属性:row（行） col-md-数字（单元数目）

6、表格

在Bootstrap里，给标签**

**添加.table类可以为其赋予基本的样式

.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

7、表单

垂直或基本表单：
向父 元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的块
中。这是获取最佳间距所必需的。
向所有的文本元素 、 和 添加 class =“ form-control” 。
内联表单：
它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-inline。
默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
使用 class .sr-only，您可以隐藏内联表单的标签。
水平表单：
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：向父 元素添加 class .form-horizontal。 把标签和控件放在一个带有 class .form-group 的块
中。 向标签添加 class .control-label。

8、按钮

.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式（未被操作）
.btn-success 表示成功的动作
.btn-info 该样式可用于要弹出信息的按钮
.btn-warning 表示需要谨慎操作的按钮
.btn-danger 表示一个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg 制作一个大按钮
.btn-sm 制作一个小按钮
.btn-xs 制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)
.active 按钮被点击
.disabled 禁用按钮

9、组件-图标

处于性能考虑,所有图标都需要一个基类和对应每个图标的类,把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补,务必在图标和文本之间添加一个空格
不要和其他组件混合使用 图标类不能和其他组件直接联合使用,他们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的span标签,并将图标类应用到这个span标签上
只对内容为空的元素起作用 图标类只能应用在不包含任何文本内容或子元素的元素上
改变图标字体文件的位置
bootstrap假定所有的图标字体文件全部位于…/fonts/目录内,相对于预编译版css文件的目录,如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式有更新css文件

10、下拉菜单

.dropdown 指定下拉菜单，下拉菜单都包裹在 .dropdown 里
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.dropup 指定向上弹出的下拉菜单
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线

11、输入框组

12、按钮组

.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar 该 class 有助于把几组结合到一个中，一般获得更复杂的组件。
.btn-group-lg, .btn-group-sm, .btn-group-xs 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

13、JS插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

想要单独引用该插件的功能，那么您需要引用 modal.js

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。

不支持同时打开多个模态框：千万不要在一个模态框上重另一个模态框，要想同时支持多个模态框，震要自己写额外的代码来实现
模态框的HTML代码放置的位置：务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为body标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。
对于移动设备的附加说明：这里提供了在移动设备上便用模态框有一些附加说明。