bootstrap组件类 ( 个人总结 )

在bootstrap组件类

- - 栅格
.container 固定
.container 流式（宽100%）

.col-* <=576px （*可写可不写，不写自适应）
.col-sm-* >=576px
.col-md-* >=768px
.col-lg-* >=992px
.col-xl-* >=1200px
/-可混合搭配使用-/

.col-*（屏幕）-auto 根据内容自行改变

.row-clos-* 一行有多少列

.w-100 可让其折行（例子：共有12列，在第1列写，则在第一列折）

.justify-content-*（屏幕）-*（参数） (和弹性盒子效果一样)
.align-items-*（参数）
.align-self-*（参数）

.no-gutters (写在父类，去除margin,padding左右)

.offset-*（屏幕）-* 列的偏移

.order-* 列排序

.ml-*（auto，数字都可以）.mr-*（auto，数字都可以）元素的margin值

---

- - 警告框
.alert 警告框

.alert-*（状态）警告框的状态（危险danger，成功success等）

.alert-link 警告链接

.alert-heading 警告标题

.alert-dismissible 警告框是否可关闭，写在父类
.close 关闭（自动排版叉叉）
data-dismiss=“alert” 写在子类（可关闭）

通过js消除
$(元素).alert();

---

- - 徽章
.badge 徽章

.badge-*（也就是危险，安全，实际改变的是背景色） 徽章修饰

.badge-pill 药丸徽章

a元素也可使用

---

- - 面包屑导航
.breadcurmb 面包屑

.breadcurmb-item 面包屑子类

---

- - 按钮，按钮组
.btn 按钮

.btn-*(状态危险，背景颜色) 按钮状态

.btn-outline-* 轮廓状态

.btn-block 块按钮

.btn-group 按钮组

.btn-group-vertical

---

- - 卡片
.card 卡片

.card-body 卡片主体

.card-title 卡片标题

.card-subtitle 卡片子标题

.card-text 卡片文字

.card-link 卡片链接

.card-header 卡片头

.card-footer 卡片脚

.card-img-*(header,footer) 卡片图

.card-img-overlay 图片叠加（要配合.card-img）

.carf-columns 卡列，可以自动排放

.card-decks 卡套，中间有间隔

.card-group 卡组，中间无间隔

---

- - 轮播
.carousel 轮播容器
data-ride=“carousel” 开启轮播

.carousel-inner 轮播行

.carousel-item 轮播元素（相当于列，放在.carousel-inner中）

.carousel-control-*（next,prve） 左右控件容器
.carousel-control-*(next,prve)-icon 左右箭头
data-slide="(next/prve)" 下张，上张

.carousel-indicontrol 分页容器
carousel-control-to(*（第几张图）) 直接跳转图

carousel-caption 字幕容器（给轮播图带字）

data-target=“作用#id” (当元素没有href属性时用)

.slide 轮播效果（幻灯片）.carousel-fade 轮播淡入淡出(必须和slide一起使用)

data-interval=“2000（2秒）” 间隔时间 加在轮播容器和轮播元素都行

---

- - 折叠
.collapse 折叠容器（写在被隐藏元素内,元素就被隐藏）

data-toggle=“collapse” 触发隐藏属性 （写在触发元素）

data-target=".类名" 写类名可同时触发

---

- - 下拉菜单
.dropdown 下拉框容器
.dropup 上拉框容器
.dropright 右拉框容器
.dropleft 左拉框容器

.dropdown-toggle 下拉小控件

.dropdown-menu 隐藏下拉元素

.dropdown-item 下拉子元素

.dropdown-divider 下拉分割线
.dropdown-header 标头
.dropdown-item-text 下拉文本
.disabled 禁用

.dropdown-menu-*(屏幕 sm,md,lg…)-*(下拉款内容位置的left,right，默认左对齐)

data-toggle=“dropdown” 下拉款触发事件

data-offset=“x,y” 下拉内容相当下拉控件位置的位置（写在下拉控件中）
data-reference=“parent” 不明意思（写在下拉控件中）

---

- - 表单
.form-inline 让form元素变为行内元素

.form-group 表单控件父类分组容器

.form-check 表单控件父类垂直堆叠容器
（让控件与控件垂直排列）
.form-check-inline 表单控件父类水平堆叠容器

.form-check-input 让表单控件消除paddding-left

.form-control 让表单控件占满一整行
.form-control-*(屏幕大小sm,md…) 同上（补充控件大小）

.form-control-file 上传控件类

.custom-select 下拉控件类

custom-range 范围控件

自定义选框
.custom-control 选框容器（不写就看不到） ,.custom-*(checkbox,radio) 选框类型(写在容器内)
.custom-control-input 选框类
.custom-control-label label绑定元素
例子：

Remember my preference

.custom-file 上传容器
.custom-file-input 上传自定义控件
.custom-file-label 上传控件按钮
例子：

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

.form-control-plaintext 纯文本只读

.form-row 让行内元素（列）更紧凑

.col-form-label 让label元素垂直居中
.col form-label-*(sm,lg) 改变label元素的大小

.input-group 表单控件分组容器
.input-group-prepend 表单分组字容器
.input-group-text 表单分组字
例子：一个@后面跟个输入控件

.form-text 提示文字（就如错误输入的消息）垂直显示

验证
.needs-validation form表单验证触发类
novalidate 禁用浏览器默认反馈工具

.valid-feedback 真确反馈语句
.invalid-feedback 错误反馈语句

required 验证表单控件必填属性

.is-invalid或.is-valid 一开始就是否是真确或错误状态

//服务器端反馈
在select表单控件 需加入

//验证函数
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

---

- - 巨幕
.jumbotron 巨幕容器

lead 细体大字

---

- - 列表组
.list-group 列表容器
.list-group-horizontal 水平列表容器

.list-group-flush 列表容器去圆角与上边

.list-group-item 列表子元素
.list-group-item-*(颜色,危险色danger,没问题色success) 列表子元素背景色

.list-group-item-action 让列表子元素有悬停效果

.list-unstyled 消除默认列表样式

---

- - 媒体对象
.media 媒体容器（父）
默认是左右排列

.media-body 媒体主题容器（子）

---

- - 模态框
.modal 模态容器类（写在隐藏父元素内）
.modal-*（sm,lg,xl） 调整模态窗口大小

.modal-dialog 自适应模态窗口，如果不写关闭就无法使用,并且会独占整行
.modal-dialog-scrollable 内部滚动条（内容过长）
.modal-dialog-centered 垂直居中模态框

.modal-content 模态内容

.modal-*(header,body,footer) 模态内容部分

.data-dismiss=“modal” 关闭模态窗口（写在关闭元素上）

.data-backdrop=“static” 启用静态模态窗口，必须点击关闭按钮，才能关闭(写在隐藏父元素内)

data-toggle=“modal” 启用模态窗口弹出

–
通过不同按钮调用相同模态，（内容改变）

.data-*（可自定义）=“内容” （写在操作按钮内）

<script>
        $(function(){
            $('必须是被调用的模态元素').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget) // Button that triggered the modal
                var recipient = button.data('可自定义（20行）') // Extract info from data-* attributes
                // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
                // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
                var modal = $(this)
                modal.find('.modal-title').text('New message to ' + recipient)
                modal.find('.modal-body input').val(recipient)
            });
        })
    </script>

---

- - 导航
.nav 导航容器
(可用弹性盒子)

.flex-*(大小：sm,lg)-column 导航垂直
*也可不写，带上是响应写法

.nav-tabs 导航样式
.nav-pills 药丸导航样式

.nav-fill 填充水平控件剩余控件
.nav-justified 填充水平剩余控件(每个宽度一样)

.nav-item 导航子元素

.nav-link 导航链接

类似折叠
data-toggle=“tab” 写在触发元素内
.tab-content 弹出内容容器
.tab-pane 弹出子内容类

---

- - 导航条
.navbar 状态栏容器
.navbar-light 改变商标logo,品牌内容颜色

.navbar-brand 商标logo,品牌内容（一般放logo）

.navbar-nar 会让a标签变成暗色

.navbar-text 用于添加垂直居中的文本字符串。
.collapse.navbar-collapse 用于通过父断点分组和隐藏导航栏内容。

.navbar-expand-*(大小也可不写) 让内容保持一行

---

这是bootstrap的一些基本类，自然这只是其中一部分，并且这只是按我的意思书写，有所不懂请参考官方文档。
官方链接 - - 点击