这一篇记录通用工具类。
记录
Borders:
// 设置边框
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
// 去除边框
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
// 设置颜色
border-primary/secondary/success/danger/warning/info/light/dark/white
// 圆角
rounded/rounded-top/bottom/left/right/circle(圆形)/0(去除圆角)
Clearfix:
// 清除层级浮动
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>
Close icon:
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Colors:
// 文字颜色
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
// 背景颜色
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
Display:
// d-{value} or d-{size}-{value} 控制显示逻辑
.d-none // 隐藏
.d-inline // 行内显示
.d-inline-block
.d-block // 占一行
.d-table
.d-table-cell
.d-table-row
.d-flex
.d-inline-flex
embed:(嵌入)
<div class="embed-responsive embed-responsive-16by9"> // 可以控制比例
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
flex:
// d-{value} or d-{size}-{value}
.d-flex // 占据一行,内部是flex
.d-inline-flex // 只占据内容大小,内部是flex
.flex-row // 子元素从左到右
.flex-row-reverse // 子元素从右向左
.flex-column // 子元素从上到下
.flex-column-reverse // 子元素从下到上
// 水平对齐,针对每一个子元素
.justify-content-start // 子元素左对齐
.justify-content-end // 子元素右对齐
.justify-content-center // 子元素居中对齐
.justify-content-between // 子元素两端对齐
.justify-content-around // 子元素均匀分布
// 垂直对齐,针对每一个子元素
.align-items-start // 子元素top对齐
.align-items-end // 子元素bottom对齐
.align-items-center // 子元素垂直居中
.align-items-baseline // 子元素基准线对齐
.align-items-stretch // 子元素高度拉伸与父相同
// 用于多行flex,一整行上的所有子元素作为一个整体的控制
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
// 用在子元素身上,改变自己的垂直对齐方式
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
// 自动margin
ml-auto // 此元素左侧自动对齐
mr-auto // 此元素右侧自动对齐
// wrap
.flex-nowrap // flex容器为单行。该情况下flex子项可能会溢出容器
.flex-wrap // flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
.flex-wrap-reverse // 反转 wrap
// order
order-0/12 // 0最靠前,12最靠后
float:
.float-left
.float-right
.float-none
image replacement:
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
对SEO友好,一般使用图像。
Position:
// 非相应式
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>
Sizing:
// http://getbootstrap.com/docs/4.0/utilities/sizing/
// width 设置
w-25/2-50/w-75/w-100 宽度百分比设置
// height 设置
h-25/h-50/h75/h-100 高度百分比设置
mh-25/mh-50/mh-75/mh-100 最大高度百分比设定
Spacing:
// {property}{sides}-[{breakpoint}]-{size}
// m -> margin, p -> padding
// l -> left, r -> right, t -> top, b -> bottom, x -> left&right, y -> top&bottom, blank -> all 4 sides
// size * spacer
// 0 -> 0, 1 -> 0.25, 2-> 0.5, 3 -> 1.0, 4 -> 1.5, 5 -> 3, auto -> auto
mx-auto 居中, py-3
Text:
.text-left
.text-right
.text-center
.text-justify
.text-nowrap // 单行,溢出
.text-truncate // 宽度溢出...
.text-lowercase // 全小写
.text-uppercase // 全大写
.text-capitalize // 首字母大写
.font-weight-bold // 字体加粗
.font-weight-normal // 正常粗度
.font-weight-light // 稍微细
.font-italic // 斜体
Vertial Align:
// 内部字体对齐方式
.align-baseline
.align-top
.align-middle
.align-bottom
.align-text-top
.align-text-bottom
Visible:
// 控制visible属性实现,与display属性不一样,不显示但是保留给screen readers.
<div class="visible">...</div>
<div class="invisible">...</div>
V4重大改变
- 整体使用
Flex
布局 - 使用
rem
替代px,em
- 使用
reboot
进行normalize
- 丢弃
panels,thumbnails,wells
使用card
替代 - 丢弃内置
icon
,需要自己寻找第三方的。如glyphicons/octicons/font awesome
… - 丢弃
jquery
的affix
插件 - 丢弃
pager
,使用button
定制 - 高度可嵌套设计,不再严格限定父子关系
- 大量
css
重命名 Grid
系统,不再限定于12格了
Bootstrap4 笔记
示例代码
<div class="d-flex p-3 bg-secondary text-dark container-fluid">
<div class="item p-2 bg-info">Flex item 1</div>
<div class="item p-2 bg-warning">Flex item 2</div>
<div class="item p-2 bg-primary">Flex item 3</div>
</div>
-
bg-info、bg-warning、bg-primary
:设置各种背景色 -
text-white
:白色字体 -
text-black-50
: 半黑字体 -
container/container-fluid
:容器/全屏容器 -
d-flex
: -
flex-direction
:可以取四个值:-
row
: 主轴水平方向,从左至右排列 -
row-reverse
:主轴水平方向,从右至左排列
-
column
:主轴竖直方向,从上至下排列 -
column-reverse
:主轴竖直方向,从下至上排列
-
-
flex-wrap/flex-nowrap
: 当容器显示不下时换行/不换行-
flex-wrap
: -
flex-nowrap
:
-
-
flex-basis
:定义了item
元素的空间大小。 -
flex-grow
:若被赋值为一个正整数,flex
元素会以flex-basis
为基础,沿主轴方向增长尺寸,后面的数值为增长比例。 -
flex-shrink
:flex-grow
属性是处理flex元素在主轴上增加空间的问题,相反flex-shrink
属性是处理flex
元素收缩的问题。按照后面的数值比例进行收缩。 -
flex
简写:你可能很少看到flex-grow
,flex-shrink
,和flex-basis
属性单独使用,而是混合着写在 flex 简写形式中。Flex
简写形式允许你把三个数值按这个顺序书写 —flex-grow
,flex-shrink
,flex-basis
。
.box {
display: flex;
}
.one {
flex: 1 1 auto;
}
.two {
flex: 1 1 auto;
}
.three {
flex: 1 1 auto;
}
<div class="box">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
-
align-items
:属性可以使元素在交叉轴方向对齐,应用于父容器。-
streth
: 拉伸到最大容器对齐 -
flex-start
: -
flex-end
center
-
-
Justify-content
:使元素在主轴方向对齐,主轴方向是通过flex-direction
设置的方向,初始值为flex-start
,
你也可以把值设置为space-between
,把元素排列好之后的剩余空间拿出来,平均分配到元素之间,所以元素之间间隔相等。或者使用space-around
,使每个元素的左右空间相等。-
stretch
: -
flex-start
: -
flex-end
: -
center
: -
space-evenly
: -
space-around
: -
space-between
:
-