bootstrap4简写的class以m-开头和p-开头的类

ゞ浴缸里的玫瑰 2022-02-09 12:57 494阅读 0赞

影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。

bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。

一、影响距离大小的值有

0,1,2,3,4,5,auto

(1)、margin值有

class名

等价的style

m-0

等价于\{margin:0 !important\}

m-1

等价于\{margin:0.25rem !important\}

m-2

等价于\{margin:0.5rem !important\}

m-3

等价于\{margin:1rem !important\}

m-4

等价于\{margin:1.5rem !important\}

m-5

等价于\{margin:3rem !important\}

m-auto

等价于\{margin:auto !important\}

(2)、padding值有

class名

等价的style

p-0

等价于\{padding:0 !important\}

p-1

等价于\{padding:0.25rem !important\}

p-2

等价于\{padding:0.5rem !important\}

p-3

等价于\{padding:1rem !important\}

p-4

等价于\{padding:1.5rem !important\}

p-5

等价于\{padding:3rem !important\}

p-auto

等价于\{padding:auto !important\}

二、调整某一侧的边距

有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom

（1）、margin例子，距离大小可以0-5与auto,这里只用期中一个值来说明含义

class名

等价的style

mt-2

\{margin-top: 0.5rem !important\}

mb-2

\{margin-bottom: 0.5rem !important\}

ml-2

\{margin-left: 0.5rem !important\}

mr-2

\{margin-right: 0.5rem !important\}

mx-2

\{margin-right: 0.5rem !important;margin-left: 0.5rem !important\}

my-2

\{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important\}

(2)padding例子

class名

等价的style

pt-2

\{padding-top: 0.5rem !important\}

pb-2

\{padding-bottom: 0.5rem !important\}

pl-2

\{padding-left: 0.5rem !important\}

pr-2

\{padding-right: 0.5rem !important\}

px-2

\{padding-right: 0.5rem !important;margin-left: 0.5rem !important\}

py-2

\{padding-top: 0.5rem !important;margin-bottom: 0.5rem !important\}

## [https://v4.bootcss.com/docs/4.0/utilities/spacing/][https_v4.bootcss.com_docs_4.0_utilities_spacing] ##

Notation

Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.

Where *property* is one of:

*  `m` \- for classes that set `margin`
 *  `p` \- for classes that set `padding`

Where *sides* is one of:

*  `t` \- for classes that set `margin-top` or `padding-top`
 *  `b` \- for classes that set `margin-bottom` or `padding-bottom`
 *  `l` \- for classes that set `margin-left` or `padding-left`
 *  `r` \- for classes that set `margin-right` or `padding-right`
 *  `x` \- for classes that set both `*-left` and `*-right`
 *  `y` \- for classes that set both `*-top` and `*-bottom`
 *  blank - for classes that set a `margin` or `padding` on all 4 sides of the element

Where *size* is one of:

*  `0` \- for classes that eliminate the `margin` or `padding` by setting it to `0`
 *  `1` \- (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
 *  `2` \- (by default) for classes that set the `margin` or `padding` to `$spacer * .5`
 *  `3` \- (by default) for classes that set the `margin` or `padding` to `$spacer`
 *  `4` \- (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
 *  `5` \- (by default) for classes that set the `margin` or `padding` to `$spacer * 3`
 *  `auto` \- for classes that set the `margin` to auto

(You can add more sizes by adding entries to the `$spacers` Sass map variable.)

[https_v4.bootcss.com_docs_4.0_utilities_spacing]: https://v4.bootcss.com/docs/4.0/utilities/spacing/