ระยะห่าง
Bootstrap มีคลาสยูทิลิตี้ที่ตอบสนองชวเลขหลากหลาย ช่องว่างภายใน และช่องว่างเพื่อแก้ไขลักษณะที่ปรากฏขององค์ประกอบ
ขอบและช่องว่างภายใน
กำหนดการตอบสนองที่เป็นมิตรmargin
หรือpadding
ค่าให้กับองค์ประกอบหรือชุดย่อยของด้านที่มีคลาสชวเลข รวมถึงการรองรับคุณสมบัติแต่ละรายการ คุณสมบัติทั้งหมด และคุณสมบัติแนวตั้งและแนวนอน คลาสถูกสร้างขึ้นจากแผนที่ Sass เริ่มต้นตั้งแต่.25rem
ถึง3rem
.
ใช้โมดูลเค้าโครง CSS Grid หรือไม่ พิจารณาใช้ยูทิลิตี้ช่องว่าง
สัญกรณ์
ยูทิลิตีการเว้นวรรคที่ใช้กับเบรกพอยต์ทั้งหมด from xs
to ถึงxxl
ไม่มีตัวย่อเบรกพอยต์อยู่ในนั้น นี่เป็นเพราะว่าคลาสเหล่านั้นถูกนำไปใช้ตั้งแต่min-width: 0
ขึ้นไป ดังนั้นจึงไม่ถูกผูกไว้โดยเคียวรีสื่อ อย่างไรก็ตาม จุดพักที่เหลือจะรวมตัวย่อของเบรกพอยต์ด้วย
ตั้งชื่อคลาสโดยใช้รูปแบบ{property}{sides}-{size}
for xs
และ{property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
, , xl
และxxl
โดยที่ทรัพย์สินเป็นหนึ่งใน:
m
- สำหรับคลาสที่กำหนดmargin
p
- สำหรับคลาสที่กำหนดpadding
โดยที่ด้านเป็นหนึ่งใน:
t
- สำหรับคลาสที่ตั้งmargin-top
หรือpadding-top
b
- สำหรับคลาสที่ตั้งmargin-bottom
หรือpadding-bottom
s
- (เริ่ม) สำหรับคลาสที่ตั้งค่าmargin-left
หรือpadding-left
ใน LTRmargin-right
หรือpadding-right
ใน RTLe
- (จบ) สำหรับคลาสที่ตั้งค่าmargin-right
หรือpadding-right
ใน LTRmargin-left
หรือpadding-left
ใน RTLx
- สำหรับคลาสที่กำหนดทั้ง*-left
และ*-right
y
- สำหรับคลาสที่กำหนดทั้ง*-top
และ*-bottom
- ว่าง - สำหรับคลาสที่ตั้งค่า a
margin
หรือpadding
ทั้ง 4 ด้านขององค์ประกอบ
โดยที่ขนาดเป็นหนึ่งใน:
0
- สำหรับชั้นเรียนที่กำจัดmargin
หรือpadding
โดยการตั้งค่าเป็น0
1
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * .25
2
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * .5
3
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer
4
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * 1.5
5
- (โดยค่าเริ่มต้น) สำหรับคลาสที่ตั้งค่าmargin
หรือpadding
เป็น$spacer * 3
auto
- สำหรับคลาสที่ตั้งค่าเป็นmargin
auto
(คุณสามารถเพิ่มขนาดเพิ่มเติมได้โดยการเพิ่มรายการลงใน$spacers
ตัวแปรแผนที่ Sass)
ตัวอย่าง
นี่คือตัวอย่างบางส่วนของคลาสเหล่านี้:
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
การจัดกึ่งกลางแนวนอน
นอกจากนี้ Bootstrap ยังรวม.mx-auto
คลาสสำหรับเนื้อหาระดับบล็อกที่มีความกว้างคงที่ในแนวนอนที่อยู่ตรงกลาง นั่นคือ เนื้อหาที่มีdisplay: block
และwidth
ชุด โดยการตั้งค่าระยะขอบแนวนอนเป็นauto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ระยะขอบติดลบ
ใน CSS margin
คุณสมบัติสามารถใช้ค่าลบ ( padding
ไม่สามารถ) ระยะขอบเชิงลบเหล่านี้ถูกปิดใช้งานโดยค่าเริ่มต้นแต่สามารถเปิดใช้งานใน Sass ได้โดยการตั้ง$enable-negative-margins: true
ค่า
ไวยากรณ์เกือบจะเหมือนกับค่าดีฟอลต์ ยูทิลิตี้มาร์จิ้นที่เป็นบวก แต่มีการเพิ่มn
ก่อนขนาดที่ร้องขอ นี่คือคลาสตัวอย่างที่ตรงกันข้ามกับ.mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
ช่องว่าง
เมื่อใช้display: grid
คุณสามารถใช้gap
ยูทิลิตี้บนคอนเทนเนอร์กริดหลักได้ วิธีนี้จะช่วยประหยัดได้โดยไม่ต้องเพิ่มยูทิลิตี้มาร์จิ้นให้กับรายการกริดแต่ละรายการ (ลูกของdisplay: grid
คอนเทนเนอร์) ยูทิลิตี้ Gap จะตอบสนองตามค่าเริ่มต้น และสร้างขึ้นผ่าน API ยูทิลิตี้ของเรา โดยอิงตาม$spacers
แผนที่ Sass
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
การสนับสนุนรวมถึงตัวเลือกการตอบสนองสำหรับเบรกพอยต์กริดของ Bootstrap ทั้งหมด รวมถึงหกขนาดจาก$spacers
แผนที่ ( 0
– 5
) ไม่มี.gap-auto
คลาสยูทิลิตี้เพราะมันมีประสิทธิภาพเหมือนกับ.gap-0
.
ซาส
แผนที่
ยูทิลิตี้การเว้นวรรคจะถูกประกาศผ่านแผนที่ Sass แล้วสร้างด้วย API ยูทิลิตี้ของเรา
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
ยูทิลิตี้ API
ยูทิลิตี้การเว้นวรรคได้รับการประกาศในยูทิลิตี้ API ของเราในscss/_utilities.scss
. เรียนรู้วิธีใช้ยูทิลิตี้ API
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),