bootstrap4框架使用总结

前言

bootstrap 是一个开源的前端框架，主要应用于页面的布局。

官网介绍：

the world’s most popular framework for building responsive, mobile-first sites

同时，它也是移动优先的布局框架。

移动优先，指使用bootstrap开发的页面，不仅能用于web显示，还能用于移动端显示。

CSS布局常用篇

屏幕自适应

使用bootstrap中规范好的CSS样式，能使页面根据屏幕大小自适应，但必须要在head部分加入：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

内外边距

可以设置的属性：

m - 设置外边距 margin
p - 设置内边距 padding

可以设置的方向：

t - 设置上距 *-top
b - 设置下距 *-bottom
l - 设置左距 *-left
r - 设置右距 *-right
x - 设置x方向的*距，即左右边距 both *-left and *-right
y - 设置y方向 both *-top and *-bottom
(none) - 空则表示设置四个方向

可以设置的大小：

0 - 设置边距为0：for classes that eliminate the margin or padding by setting it to 0
1 - (by default) 设置 the margin or padding to spacer * .5
3 - (by default) 设置 the margin or padding to spacer * 1.5
5 - (by default) 设置 the margin or padding to $spacer * 3
auto - 设置自动的外边距* the margin to auto

示例：

mr-3 对应 margin-right: 3 3为不定值，随屏幕大小变化。
py-2 对应 padding-top:2;padding-bottom:2;
......

块级元素与行内元素的转换

d-inline-block 将块级元素转换为行内块级元素

栅栏布局

基础

见官网：栅栏布局

配合外边距

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>

效果如下：

grid1.png

偏移

offset-*

<div class="row">
    <div class="col-4">.col-md-4</div>
    <div class="col-4 offset-4">.col-md-4 .offset-md-4</div>
</div>

规范子元素的flex

d-flex

水平布局

justify-content-*

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

作用于div子元素。

效果依次为：

flex1.png

垂直布局

align-items-*

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

同样作用于div子元素。

效果依次为：

flex2.png

充满

flex-fill

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">Flex item</div>
</div>

作用于当前元素，效果是充满父元素。

增长

flex-grow-*

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.

将当前元素尽可能地增长，效果如下：

flex3.png

缩短

flex-shrink-*

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary.

将当前元素有必要地缩短，效果如下：

flex4.png

作用当前元素

当前元素水平布局

利用外边距可以实现：

<div class="ml-auto" style="width: 200px;">
  Centered element
</div>
<div class="mr-auto" style="width: 200px;">
  Centered element
</div>
<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

ml-auto 表示 margin-left:auto，效果使得当前元素水平居右。

mx-auto 表示左右外边距都为 auto，效果是水平居中。

当前元素垂直布局

align-*

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

作用于当前元素，效果如下：

verticalAlign.png

CSS元素规范篇

规范字体

字体样式

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

效果如下：

字体样式.png

包裹字体

text-wrap

<div class="text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

字体会自动换行，适用于规定宽度的div中的字体。

不包裹字体则是 text-nowarp。

字体过长省略

text-truncate

<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

适用于块级元素中的字体。

字体水平位置

text-*

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

效果如下：

字体水平布局.png

规范列表

list-unstyled 列表无黑点

list-inline 行内列表
list-inline-item 行内列表中的一项

使用如下：

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

规范表格

见官网 表格

CSS组件篇

块引用

blockquote 设置为块引用
blockquote-footer 块引用的引脚

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

效果如下：

blockquote.png