Bootstrap 4 ยูทิลิตี้

Bootstrap 4 ยูทิลิตี้

Bootstrap 4 มีคลาสยูทิลิตี้/ตัวช่วยมากมายในการจัดรูปแบบองค์ประกอบอย่างรวดเร็วโดยไม่ต้องใช้โค้ด CSS

พรมแดน

ใช้borderคลาสเพื่อเพิ่มหรือลบเส้นขอบออกจากองค์ประกอบ:

เส้นขอบสี

เพิ่มสีให้กับเส้นขอบด้วยคลาสสีขอบตามบริบท:

รัศมีชายแดน

เพิ่มมุมโค้งมนให้กับองค์ประกอบที่มีroundedคลาส:

ลอยตัวและเคลียร์ฟิกซ์

ลอยองค์ประกอบไปทางขวาด้วย.float-rightคลาสหรือทางซ้ายด้วย.float-leftและล้าง float ด้วย .clearfixคลาส:

ลอยตัวตอบสนอง

ลอยองค์ประกอบไปทางซ้ายหรือทางขวาขึ้นอยู่กับความกว้างของหน้าจอ ด้วยคลาส float ที่ตอบสนอง ( .float-*-left|right- โดยที่ * คือsm(>=576px), md(>=768px), lg(>=992px) หรือxl(>=1200px)):

จัดกึ่งกลาง

จัดองค์ประกอบให้อยู่ตรงกลางด้วย.mx-autoคลาส (เพิ่มระยะขอบซ้ายและระยะขอบขวา: อัตโนมัติ):

ความกว้าง

กำหนดความกว้างขององค์ประกอบด้วยคลาส w-* ( .w-25, .w-50, .w-75, .w-100, .mw-100):

ส่วนสูง

กำหนดความสูงขององค์ประกอบด้วยคลาส h-* ( .h-25, .h-50, .h-75, .h-100, .mh-100):

ระยะห่าง

Bootstrap 4 มีคลาสยูทิลิตี้ที่ตอบสนองและช่องว่างภายในที่หลากหลาย ใช้ได้กับเบรกพอยต์ทั้งหมด: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) หรือxl(>=1200px)):

คลาสใช้ในรูปแบบ: {property}{sides}-{size}for xsและ{property}{sides}-{breakpoint}-{size}for sm, md, lg, และxl.

โดยที่ทรัพย์สินเป็นหนึ่งใน:

• m- ชุดmargin
• p- ชุดpadding

โดยที่ด้านเป็นหนึ่งใน:

• t- ชุดmargin-topหรือpadding-top
• b- ชุดmargin-bottomหรือpadding-bottom
• l- ชุดmargin-leftหรือpadding-left
• r- ชุดmargin-rightหรือpadding-right
• x- ตั้งค่าทั้งpadding-leftและpadding-rightหรือmargin-leftและmargin-right
• y- ตั้งค่าทั้งpadding-topและpadding-bottomหรือmargin-topและmargin-bottom
• ว่าง - ตั้งค่า a marginหรือpaddingทั้ง 4 ด้านขององค์ประกอบ

โดยที่ขนาดเป็นหนึ่งใน:

• 0- ชุดmarginหรือpaddingถึง0
• 1- ตั้งค่าmarginหรือpaddingเป็น.25rem(4px หากขนาดตัวอักษรคือ 16px)
• 2- ตั้งค่าmarginหรือpaddingเป็น.5rem(8px หากขนาดตัวอักษรคือ 16px)
• 3- ตั้งค่าmarginหรือpaddingเป็น1rem(16px หากขนาดตัวอักษรคือ 16px)
• 4- ตั้งค่าmarginหรือpaddingเป็น1.5rem(24px หากขนาดตัวอักษรคือ 16px)
• 5- ตั้งค่าmarginหรือpaddingเป็น3rem(48px หากขนาดตัวอักษรคือ 16px)
• auto- ตั้งค่าmarginเป็นอัตโนมัติ

หมายเหตุ:ระยะขอบสามารถเป็นค่าลบได้โดยการเพิ่ม "n" ข้างหน้าsize :

• n1- ตั้งค่าmarginเป็น-.25rem(-4px หากขนาดตัวอักษรคือ 16px)
• n2- ตั้งค่าmarginเป็น-.5rem(-8px ถ้า font-size คือ 16px)
• n3- ตั้งค่าmarginเป็น-1rem(-16px ถ้าขนาดตัวอักษรคือ 16px)
• n4- ตั้งค่าmarginเป็น-1.5rem(-24px หากขนาดตัวอักษรคือ 16px)
• n5- ตั้งค่าmarginเป็น-3rem(-48px หากขนาดตัวอักษรคือ 16px)

ตัวอย่างระยะห่างเพิ่มเติม

เงา

ใช้shadow-คลาสเพื่อเพิ่มเงาให้กับองค์ประกอบ:

จัดแนวแนวตั้ง

ใช้align-คลาสเพื่อเปลี่ยนการจัดตำแหน่งขององค์ประกอบ (ใช้ได้เฉพาะในองค์ประกอบแบบอินไลน์ อินไลน์บล็อก อินไลน์ตาราง และเซลล์ตาราง):

การฝังที่ตอบสนอง

สร้างวิดีโอที่ตอบสนองหรือฝังสไลด์โชว์ตามความกว้างของพาเรนต์

เพิ่ม.embed-responsive-itemองค์ประกอบที่ฝัง (เช่น <iframe> หรือ <video>) ในองค์ประกอบหลักด้วย.embed-responsiveและอัตราส่วนภาพที่คุณเลือก:

ทัศนวิสัย

ใช้ คลาส .visibleหรือ.invisibleเพื่อควบคุมการมองเห็นองค์ประกอบ หมายเหตุ:คลาสเหล่านี้จะไม่เปลี่ยนค่าที่แสดง CSS พวกเขาเพียงเพิ่มvisibility:visibleหรือvisibility:hidden:

ตำแหน่ง

ใช้.fixed-topคลาสเพื่อทำให้องค์ประกอบคงที่/อยู่ที่ด้านบนสุดของหน้า:

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Other Display Classes

Other display classes are also available:

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.