Bootstrap-UI框架

响应式前端布局，移动设备优先的Web项目开发

Bootstrap结构

基本结构

带有网格系统、链接样式、背景

特性

全局CSS设置
定义基本的HTML元素样式
可扩展class
先进的网格系统

组件

包含十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框、轮播图等

javaScript插件

包含十几个自定义的jQuery插件

布局系统（一行十二列）

.container容器布局（固定布局 width：auto）
.container-fluid容器布局（流动布局 width：100%）
- 以上两种布局是布局栅格系统最基本的要素
自适应对应的响应方式即media（媒体查询）

栅格系统

以移动端优先的网格系统
基于12列的布局，5种响应尺寸（不同屏幕）
完全使用flexbox流式布局构建，完全支持响应式标准
具体采用div容器的行、列和对齐内容来构建响应式布局

<div class="container"><!-- 采用.container-fluid会100%占用屏幕 -->
        <div class="row">
            <div class="col-sm-1">1</div> <!-- sm表明屏幕类型 .col-sm-*还可以强制设定每列所占用的栅格列-->
            <div class="col-sm">2</div>
            <div class="col-sm">3</div>
        </div>
</div>

【注】每行12列，不足空出来，多的换行

栅格等级

响应式布局

	超小屏幕（<576px）	小屏幕 (≥576px)	中等屏幕（≥768px）	大屏幕（≥992px）	超大屏幕（≥1200px）
最大容器宽度	None（auto）	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数	12	12	12	12	12

若同时使用两个或以上级别，且比例相同，遵循移动端优先原则
栅格系统支持指定一种或多种级别变化混合布局

<div class="container"><!-- 采用.container-fluid会100%占用屏幕 -->
        <div class="row">
            <div class="col-2 col-sm-1">1</div> <!-- sm表明屏幕类型 .col-sm-*还可以强制设定每列所占用的栅格列-->
            <div class="col-3 col-sm-1">2</div>
            <div class="col-7 col-sm-10">3</div><!-- 当屏幕宽度小于576px采用2 3 7列而大于等于576px则采用1 1 10列排布-->
        </div>
</div>

可以通过class=“w-100”，强制切割列数

<div class="container">
        <div class="row">
            <div class="col-sm">1</div>
            <div class="w-100"></div><!-- 切割 2行 第一行1 第二行2 3 -->
            <div class="col-sm">2</div>
            <div class="col-sm">3</div>
        </div>
</div>

【注】若有指定col-sm-*则不会自动扩充，但仍被切割

在不同屏幕上自适应的隐藏于显式方法

要隐藏元素，只需要对任何响应屏幕变化使用.d-none这个class即可：

.d-{sm,md,lg,xl}-none

.d-none 所有屏幕不可见，.d-block所有屏幕可见

仅在给定的屏幕尺寸间隔上显式元素

可以将一个.d-*none类与一个.d-*-*类组合
.d-none .d-md-block .d-xl-none  中等以前隐藏 超大之后再隐藏
d-none d-md-block 中等之前隐藏，之后显示
.d-md-none 中等之后都不显示

对齐与排序

栅格对齐

行对齐，作用于行中，height低于容器高度才有意义

	样式
居顶（默认）	.align-items-start
居中	.align-items-center
居底	.align-items-end

列对齐，作用于列

	样式
居顶	.align-self-start
居中	.align-self-center
居底	.align-self-end

不足100%填充（没有12列），实现水平对齐，作用于行中

	样式
居左	.justify-content-start
居中	.justify-content-center
居右	.justify-content-end
间隔相等（分散）	.justify-content-around
两端对齐（分散）	.justify-content-between

栅格排序

.order-N，N的最大值为12，.order-1则为第一列
.order-first强行设置为第一列，.order-last为最后一列
.offset-N或.offset-*-N设置列的偏移量，N表示栅格列数，即空几个
.ml-N或.mr-N微调列距离，小空隙
.ml-auto和.mr-auto左右对齐 .m-auto两端对齐

内容排版

标题类

<h1>~</h6>可以创建不同尺寸的标题文字
	如果是使用其他元素原本，<p>或<div>,调用.h1~6同样可以实现大标题

通过**.text-muted**样式，构建大标题的附属小标题
另一种更大型，更醒目的标题方式：.display-1~-4

文本类

.lead，强调内容
比较常用的HTML5文本内联元素
.title样式和缩略语给文本做提示
<blockquote来源备注，.blockquote-footer 页脚

列表类

使用.list-unstyled样式，可以将列表初始化，清除样式
使用.list-inline和.list-inline-item结合实现多列并排列表

java Python PHP js

使用dl、dt和dd实现水平描述，使用.text-trunacte可以省略溢出·

代码于图文

【注】 <kbd

表格样式

颜色和边框

工具类-公共样式

<button class="close"><span>&times;</span></button>  关闭按钮

【注】hide隐藏内容不可见位置不占用但其实还是存在，invisible隐藏内容占用位置，内容还是存在

Flex弹性布局

【注】around是子元素两边距离一样，between两边对齐 align-items是垂直方向，align-self是针对单个子项目

行，对每一列布局；列，对每一行布局