Bootstrap4 学习笔记2

这一篇记录通用工具类。

记录

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">&times;</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重大改变

1. 整体使用Flex布局
2. 使用rem替代px,em
3. 使用reboot进行normalize
4. 丢弃panels,thumbnails,wells使用card替代
5. 丢弃内置icon,需要自己寻找第三方的。如 glyphicons/octicons/font awesome…
6. 丢弃jquery的affix插件
7. 丢弃pager，使用button定制
8. 高度可嵌套设计，不再严格限定父子关系
9. 大量css重命名
10. 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：