12网格系统
文字排版
<h1> - <h6>
Display 标题类
<small>
<mark>
<abbr>
<blockquote>引用
<dl><dd><dt>定义列表
<code>代码片段
<kbd>键盘键
颜色
text-muted 柔和的文本
primary重要的 背景bg-..<br>
success执行成功
info提示信息
warning警告
danger危险操作
secondary副标题
dark深灰色
light浅灰色
white白色
表格table
table-hover鼠标悬停变灰
table-striped条纹 table-bordered边框
table-dark 黑色背景 table-info表示内容已变更
表头颜色thead-dark
table-sm较小的表格
table-responsive 响应式表格<br>
图像形状
圆角图片rounded 椭圆形.rounded-circle
有边框缩略图.img-thumbnail
图片对齐方式.float-right
响应式图片 img-fluid
Jumbotron
.jumbotron-fluid
信息提示框 alert
alert-success...
alert-link匹配提示框颜色的链接
关闭提示框.alert-dismissible
fade,show 设置提示框在关闭时的淡出和淡入效果<br>
按钮btn
颜色:btn-primary...
边框:btn-outline-primary
大小:btn-lg/sm
块级:btn-block
状态:active/disabled
按钮组btn-group
大小:btn-group-lg|sm
垂直:.btn-group-vertical
内嵌按钮组及下拉菜单
拆分按钮下拉菜单
垂直按钮组及下拉菜单
徽章badge<br>
颜色:badge-primary
药丸:badge-pill
徽章插入到元素内:
进度条progress progress-bar style="width:70%"
高度:style="height:20px;"
标签:<br><div class="progress"><br> <div class="progress-bar" style="width:70%">70%</div><br></div><br>
颜色: bg-success(可混合色彩)
条纹: progress-bar-striped
动画进度条:progress-bar-animated
分页ul:pagination、li:page-item、a:page-link
高亮:active、禁言:disabled
大小:.pagination-lg、sm
列表组ul:.list-group、li:.list-group-item
链接列表组<div> , <a>.list-group-item-action(鼠标悬停变灰)
active、disabled<br>
卡片card -> .card-body
card-header、footer
card-title、card-text、card-link
<img> 添加 .card-img-top(图片在文字上方) 或 .card-img-bottom
图片要设置为背景,可以使用 .card-img-overlay(图片以外的部分使用该类)
下拉菜单dropdown/dropup(向上弹)
<font color="#fdb813">按钮或链接</font>需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性
<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单
然后在下拉菜单的选项中添加 .dropdown-item 类
dropdown-divider 水平的分割线
dropdown-header 添加标题
定位:dropdown-menu-right
按钮中设置下拉菜单
折叠collapse
<a> 或 <button> 元素上添加 data-toggle="collapse" 属性
data-target="#id" 属性是对应折叠的内容
show 类让内容默认显示
手风琴
导航nav
<ul> .nav类, <li> .nav-item 类,链接上 .nav-link 类
对齐方式:justify-content-center /end(右对齐)<br>
垂直:flex-column
选项卡:nav-tabs
胶囊:nav-pills
等宽:nav-justified
胶囊下拉菜单
选项卡下拉菜单
动态选项卡
胶囊状动态选项卡
导航栏navbar
响应式:navbar-expand-xl|lg|md|sm
ul/li/a:navbar-nav/item/link
垂直:删除响应式<br>
Logo:navbar-brand <br>
折叠导航栏
导航栏使用下拉菜单
导航栏的表单与按钮
小标签<span class="input-group-addon">@</span>
导航栏文本:navbar-text
固定在顶部:fixed-top
面包屑导航Breadcrumb
ol/nav:breadcrum、li/a:breadcrumb-item
表单form-group
表单元素:form-control
checkbox:label->form-check、input->form-check-input
内联表单:form-inline(左对齐)
表单控件
input:form-control
textarea:form-control
checkbox
radio:radio/radio-inline
select
输入框组input-group
前面加信息:input-group-prepend
后:input-group-append
大小:input-group-sm|lg
文本:input-group-text
输入框添加按钮组
设置下拉菜单
自定义表单
自定义复选框
div:custom-control 和 .custom-checkbox
input:custom-control-input
label:custom-control-label
自定义单选框
div:custom-control 和 .custom-radio
显示在同一行custom-control-inline
自定义选择菜单:custom-select-sm
自定义滑块控件:custom-range、type=range
自定义文件上传控件:
div:custom-file
input :type="file" class="custom-file-input"
label :class="custom-file-label"
轮播
div:class="carousel slide" data-ride="carousel"
指示符:ul class="carousel-indicators"><br> <li data-target="#demo" data-slide-to="0
轮播图片:carousel-inner->carousel-item active->img
左右切换按钮:<a class="carousel-control-prev/next" href="#demo" data-slide="prev"><br> <span class="carousel-control-prev-icon"></span><br> </a><br>
轮播图片上添加描述:item里添加div:carousel-caption
模态框Modal
大小:modal-sm放在modal-dialog
提示框
data-toggle="tooltip"
提示内容:title
jquery
位置:data-placement:top/...
弹出框
data-toggle="popover"
title
data-content
jquery
关闭:data-trigger="focus"、data-trigger="hover"
滚动监听(Scrollspy)
监听的元素(通常是 body)添加 data-spy="scroll"
data-target 属性,它的值为导航栏的 id 或 class (.navbar)
可滚动项元素上的 id (<div id="section1">) 必须匹配导航栏上的链接选项 (<a href="#section1">
可选项data-offset 属性用于计算滚动位置时,距离顶部的偏移像素。 默认为 10 px
position 属性设置为 "relative"
小工具
添加或移除边框border border-top-0
边框颜色 border-primary
边框圆角:rounded-left、circle、0
清除浮动:clearfix
响应式浮动:float-sm|lg|md|xs-right/0
居中对齐mx-auto
宽度:w-25/高度h-25
Flex(弹性)布局
容器d-flex 子元素:p-2
同一行:d-inline-flex
水平显示:flex-row flex-row-reverse右对齐
垂直:flex-column/翻转:flex-column-reverse
内容排列:justify-content-start (默认), end, center, between 或 around:
等宽:flex-fill
扩展:flex-grow-1 用于设置子元素使用剩下的空间
排序:order 从 .order-1 到 .order-12,数字越低权重越高
外边距:mr-auto、ml-auto
包裹:flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse 单行、多行、反多行<br>
内容对齐:align-content-* 来控制在垂直方向上如何去堆叠子元素
align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
子元素对齐;.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认
指定子元素对齐align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)
多媒体对象media
子容器:media-body
定位多媒体图片位置:align-self-*