Các Tiện ích CSS Cơ Bản Của Bootstrap

• Tiện ích với Text
• Căn lề theo chiều đứng
• Thiết lập Margin, Padding
• Màu nền
• Thiết lập thuộc tính display
• Thiết lập thuộc tính float
• Thiết lập thuộc tính position
• Thiết lập border - bo viền khung
• Đổ bóng hình hộp
• Thiết lập chiều cao, chiều rộng
• Embeds - Nhúng Video YouTube
• FlexBox

breakpoint Trong Bootstrap thiết kế các lớp CSS tương ứng với các màn hình tương ứng với các kích thước dưới: gồm màn hình nhỏ (576px), trung bình (768px), lớn (992px), rất lớn (1200px) - gọi chúng là các breakpoint (sử dụng media query để tạo CSS) với các ký hiệu trong lớp CSS tương ứng là: sm, md, lg, xl. Các ký hiệu {breakpoint} ở phần trình bày dưới bạn có thể thay thế bằng sm, md, log, xl hoặc để trống Ví dụ: text-md-right thì là căn lề về phải khi màn hình dưới 678px, text-sm-center căn giữa khi màn hình dưới 576px

theme-colors Các màu mặc định phối hợp để xây dựng nên Theme của Bootstrap gồm có các màu đặt theo tên gồm: primary, secondary, success, info, warning, danger, light, dark . Hãy nhớ tên này vì nó sử dụng trong nhiều class ví dụ như text-danger, bg-success, btn-success ...

Các tiện tích trình bày Text

.text-{breakpoint}-{left|right|center} Đó là các lớp để căn lề trái, phải, giữa của dòng chữ (.text-right, .text-md-center ...) .text-monospace class thiết lập chữ hiện thị ở font monospace .text-justify dãn đều dòng chữ .text-nowrap Thiết lập dòng chữ không có chế độ wrap (không ngắt dòng) .text-truncate Cắt chữ khi vượt quá chiều dài dòng .text-lowercase Chuyển thành chữ thường .text-uppercase Chuyển thành chữ in hoa .text-capitalize In hoa ký tự đầu .font-weight-(light|normal|bold) Thiết lập chữ mỏng (font-weight-light), bình thường (font-weight-normal), đậm .font-italic Chữ nghiêng .text-(white|primary| secondary|success|info|warning|danger| light|dark| muted| hide| decoration-none| text-break| text-reset| black-50 |white-50) Thiết lập màu chữ như text-white, text-dark ... text-white-50, một số điều khiển cách hiện thị như text-hide ẩn text, decoration-none hủy hiệu ứng trang trí (như chữ in), text-reset đưa về màu kế thừa mặc định .display-(1|2|3|4) Sử dụng thiết lập tiêu đề lớn trong trang, có 4 kích thước như display-3 .lead Làm nổi bật một đoạn văn (ví dụ tóm tắt nội dung) .mark Đánh dấu một đoạn văn .small Đánh dấu một đoạn văn có chữ nhỏ hơn .blockquote Tạo một hiện thị trích dẫn .blockquote-footer Tạo một hiện thị trích dẫn có ký hiệu -- .list-unstyled Đánh dấu ul, li bỏ kiểu trình bày danh sách .list-inline Đánh dấu ul hiện thị dạng inline .list-inline-item Đánh dấu li hiện thị dạng inline float left

Ví dụ

<p class="text-center text-md-right text-primary font-weight-bold font-italic text-uppercase"> Đây là dòng chữ Ví dụ </p>

Đoạn code trên thiết lập gồm: căn chữ ở giữa (text-center) nhưng khi màn hình từ md trở đi căn chữ bên phải (text-md-right), màu chữ primay, font chữ đậm, font chữ nghiêng, chuyển hết thành chữ in hoa, và kết quả là:

Đây là dòng chữ Ví dụ

Căn lề theo chiều đứng các phần tử

.align-{baseline|top|middle|bottom|text-bottom|text-top}

Với align-baseline đã thiết lập cơ bản mặc định của browser.

Các lớp căn lề theo chiều đứng chỉ áp dụng cho các phần tủ inline, inline-block. inline-table và các cell trong bảng

<p class="bg-secondary text-light text-center" style="line-height: 40px"> <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> </p>

baseline top middle bottom text-top text-bottom

Thiết lập margin và padding

Các lớp thiết lập margin là m{sides}-{size} hoặc m{sides}-{breakpoint}-{size}

Các lớp thiết lập padding là p{sides}-{size} hoặc p{sides}-{breakpoint}-{size}

Trong đó:

• sides thay bằng t|l|r|b|x|y tương ứng với top, left, right, bottom, left-right, top-bottom. Nếu sides để trống nghĩa là thiết lập cho cả bốn phía (ví dụ m-0, p-2
• sizes thay bằng các số 0 1 2 3 4 5 hoặc auto để thiết lập kích thước (0, 0.25, 0.5, 1, 1.5, 3) rem
• breakpoint tương ứng với điểm chia màn hình sm, md, lg, xl hoặc để trống

Ví dụ px-md-4 thực hiện tạo padding cỡ 4 (1.5rem) cho cạnh trái, phải tương ứng màn hình md

<div class="mx-auto p-1 bg-danger text-white text-center" style="width: 200px;"> Hộp này nằm ở giữa do mx-auto </div> Hộp này nằm ở giữa do mx-auto

Thiết lập màu nền

Có các lớp:

bg-primary bg-secondary bg-success bg-info bg-warning bg-danger bg-light bg-danger bg-dark

Thiết lập thuộc tính display

Thuộc tính CSS display nhận các giá trị none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex có thể thiết lập trong Bootstrap với các class có cấu trúc

.d-{breakpoint}-{value} ví dụ .d-none, .d-sm-inline, .d-lg-flex...

Thiết lập hiện thị phần tử dùng .visible

Thiết lập ẩn phần tử dùng .invisible

Thiết lập thuộc tính float

Thuộc tính CSS float nhận các giá trị left, right, none có thể thiết lập trong Bootstrap với các class có cấu trúc

.float-{breakpoint}-{value} ví dụ .float-none, .float-sm-right, .float-lg-left...

Muốn hủy thuộc tính float của một phần tử dùng class clearfix

Thiết lập thuộc tính position

Đó là các class: .position-(static|relative|absolute|fixed|sticky), .fixed-top, .fixed-bottom

Thiết lập thuộc border

Cạnh được kẻ

• .border thiết lập kẻ viền cả bốn cạnh
• .border-top thiết lập kẻ viền cạnh trên
• .border-bottom thiết lập kẻ viền cạnh dưới
• .border-left thiết lập kẻ viền cạnh trái
• .border-right thiết lập kẻ viền cạnh phải

Màu đường kẻ thiết lập bằng các class: .border-(primary|secondary|success| danger|warning|info|light|dark|white)

Góc thiết lập bo tròn sử dụng các class:

• .rounded bo tròn cả 4 góc
• .rounded-(left|top|right|bottom) bo tròn 2 cạnh phía trái, trên, phải, dưới
• .rounded-circle bán kính bo tròn thiết lập để biến hình vuông thành hình tròn
• .rounded-0 hủy bo tròn các góc

Đổ bóng hình hộp

• .shadow đổ bóng cỡ trung bình
• .shadow-sm đổ bóng cỡ nhỏ
• .shadow-lg đổ bóng cỡ lớn
• shadow-none bỏ đổ bóng

Thiết lập chiều cao, chiều rộng

• w-25 w-50 w-75 w-100 w-auto để thiết lập chiều rộng theo phần trăm của chiều rộng phần tử cha, auto là tự động co
• mw-100 thiết lập thuộc tính max-width: 100%
• h-25 h-50 h-75 h-100 h-auto để thiết lập chiều cao theo phần trăm của chiều cao phần tử cha, auto là tự động co
• mh-100 thiết lập thuộc tính max-height: 100%

Nhúng Video

Cách để nhúng Video đảm bảo tính năng responsive

<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/xxxxx?rel=0" allowfullscreen></iframe> </div>

FlexBox với Bootstrap

Bootstrap triển khai theo cách phong phú hơn về flexbox, tuy nhiên cơ bản đều thiết lập các tính năng tiện ích của flexbox như nội dung trong CSS thông thường, nên cần thiết đọc hiểu CSS flexbox trước

.flex trong Bootstrap là phần nhân quan trọng nhất nên hãy cố gắp hiểu thật tốt phần này

Phần tử chứa - kích hoạt có tính năng flexbox

Sử dụng các lớp: .d-flex hoặc .d-{breakpoint}-flex như .d-sm-flex, nếu áp dụng kiểu inline-flex thì sử dụng lớp .d-inline-flex hoặc .d-{breakpoint}-inline-flex

<div class="d-flex"> <!--Code HTML--> </div>

Phần tử chứa - thiết lập flex-wrap

Như đã biết thuộc tính CSS flex-wrap nhận các giá trị nowrap, wrap, wrap-reverse gọi chúng là {wrap}. Trong Bootstrap các giá trị này thiết lập bàng lớp .flex-{breakpoints}-{wrap} như:

• .flex-nowrap, .flex-wrap, .flex-reverse
• .flex-sm-nowrap, .flex-lg-wrap, .flex-md-reverse ...

Ví dụ .flex-wrap - phần tử con xuống dòng mới khi vượt kích thước phần tử chứa

<div class="d-flex flex-wrap"> <div class="bg-primary p-2 m-2">PT1</div> <div class="bg-primary p-2 m-2">PT2</div> <div class="bg-primary p-2 m-2">PT3</div> <div class="bg-primary p-2 m-2">PT4</div> <div class="bg-primary p-2 m-2">PT5</div> <div class="bg-primary p-2 m-2">PT6</div> <div class="bg-primary p-2 m-2">PT7</div> <div class="bg-primary p-2 m-2">PT8</div> <div class="bg-primary p-2 m-2">PT9</div> <div class="bg-primary p-2 m-2">PT10</div> <div class="bg-primary p-2 m-2">PT11</div> <div class="bg-primary p-2 m-2">PT12</div> </div> PT1 PT2 PT3 PT4 PT5 PT6 PT7 PT8 PT9 PT10 PT11 PT12

Phần tử chứa - thiết lập hướng chính flex-direction

Như đã biết hướng chính của flexbox nhận các giá trị: row, row-reverse, column, column-reverse gọi chúng là {direction}

Để thiết lập các giá trị này cho phần tử dùng đến các thuộc tính: .flex-{direction} hoặc .flex-{breakpoint}-{direction} như:

• .flex-row, .flex-column, .flex-column-reverse, .flex-row-reverse
• .flex-xs-row, .flex-sm-column, .flex-lg-column-reverse, .flex-md-row-reverse ...

Ví dụ .flex-column - đổi hướng chính thẳng đứng

<div class="d-flex flex-wrap flex-column"> <div class="bg-primary p-2 m-2">PT1</div> <div class="bg-primary p-2 m-2">PT2</div> </div> PT1 PT2

Phần tử chứa - đẩy phần tử con theo hướng chính justify-content

Trong phần CSS flexbox, đã biết thuộc tính justify-content để đẩy các phần tử con về một phía nào đó theo hướng chính, nhận các giá trị flex-start, flex-end, center, space-around, space-between thì trong Bootstrap các giá trị này viết là start, end, center, around, between ký hiệu chúng là {values}

Các thuộc tính thiết lập là: justify-content-{values} hoặc justify-content-{breakpoint}-{values}

Ví dụ hướng chính là nằm ngang, thì .justify-content-end đẩy các phần tử con về cuối hàng

<div class="d-flex justify-content-end"> <div class="bg-primary p-4 m-2">PT1</div> <div class="bg-primary p-4 m-2">PT2</div> </div> PT1 PT2

Phần tử chứa - đẩy phần tử con theo hướng vuông góc align-items

Trong CSS flexbox, khi sư dụng thuộc tính align-items là nhằm đẩy các phần tử con theo hướng VUÔNG GÓC HƯỚNG CHÍNH

Sử dụng các class .align-items-{values} hoặc .align-items-{breakpoints}-{values} trong đó values là các giá trị stretch, center, baseline, around, between

Ví dụ hướng chính nằm ngang, thì align-items-center sẽ điều chỉnh phần tử con nằm giữa box theo phương đứng

<div class="bg-warning d-flex align-items-center" style="height: 100px"> <div class="bg-primary p-2 m-2">PT1</div> <div class="bg-primary p-2 m-2">PT2</div> </div> PT1 PT2

align-items-center đẩy phần tử xuống đáy box theo phương đứng, thử kết hợp với justify-content-center thì nó đẩy thêm nằm giữa theo phương ngang

<div class="bg-warning d-flex align-items-end justify-content-center" style="height: 100px"> <div class="bg-primary p-2 m-2">PT1</div> <div class="bg-primary p-2 m-2">PT2</div> </div> PT1 PT2

Phần tử chứa - căn chỉnh chi có nhiều hàng (cột) align-content

Khi phần tử chứa có .flex-wrap, nếu các phần tử con bị chia ra thành nhiều hàng (hoặc cột) thì lúc này có thể sử dụng đến các thuộc tính .align-content-{values} hoặc .align-content-{breakpoint}-{values}

Với {values} là start, end, center, around, stretch

Tác động của các lớp này tương tự như ví dụ trong phần FlexBox

Phần tử con - trôi theo hướng vuông góc align-self

Đây là cách thiết lập cấp độ phần tử con, thiết lập hiệu lực riêng cho phần tử con cụ thể, nó thiết lập nó trôi về phía nào theo hướng vuông góc với chính.

Sử dụng class .align-self-{values} hoặc .align-self-{breakpoints}-{values}

Với values là: start, end, center, baseline, stretch

<div class="bg-warning d-flex align-items-sm-start" style="height: 100px"> <div class="bg-primary p-2 m-2 align-self-center">PT1</div> <div class="bg-primary p-2 m-2 align-self-end">PT2</div> <div class="bg-primary p-2 m-2 align-self-stretch">PT3</div> <div class="bg-primary p-2 m-2">PT4</div> </div> PT1 PT2 PT3 PT4

Phần tử con - Fill

Nếu các phần tử con trong .flex có lớp .flex-fill thì nó ép các phần tử con đó theo hướng chính kích thước sẽ bằng nhau

<div class="d-flex "> <div class="bg-primary p-2 m-2 flex-fill ">PT1</div> <div class="bg-primary p-2 m-2 flex-fill ">PT2</div> <div class="bg-primary p-2 m-2 flex-fill ">PT3</div> <div class="bg-primary p-2 m-2 flex-fill ">PT4</div> </div> PT1 PT2 PT3 PT4

Phần tử con - Grow

Phần tử con kích hoạt với lớp .flex-grow-1 thì kích thước theo hướng chính của nó sẽ mở rộng tối đa kích thước có thể có trong phần tử chữa

<div class="d-flex"> <div class="bg-primary p-2 m-2 flex-grow-1">PT1</div> <div class="bg-primary p-2 m-2">PT2</div> <div class="bg-primary p-2 m-2">PT3</div> <div class="bg-primary p-2 m-2">PT4</div> </div> PT1 PT2 PT3

Phần tử con - đẩy phần tử bằng margin

Nếu phần tử chứa có hướng chính nằm ngang, thì phần tử con nào có .mr-auto thì sẽ đẩy các phần tử bên phải nó trôi về phải của phần tử chứa, nếu có .ml-auto thì nó đẩy các phần tử con bên trái nó trôi về bên trái phần tử chứa

Nếu phần tử chứa có hướng chính thẳng đứng (.flex-column) thì phần tử nào có .mb-auto thì nó sẽ đẩy các phần tử dưới nó về đáy của phần tử, nếu có .mt-auto sẽ đẩy phần tủ trên nó về phía trên phần tử chứa.

<div class="d-flex"> <div class="bg-primary p-2 m-2">PT1</div> <div class="bg-primary p-2 m-2 mr-auto">PT2</div> <div class="bg-primary p-2 m-2">PT3</div> <div class="bg-primary p-2 m-2">PT4</div> </div> PT1 PT2 PT3 PT4

Phần tử con - đổi thứ tự hiện thị

FlexBox có thuộc tính order gán bằng một con số là thứ tự hiện thị phần tử. Đặc tính này cho phép đổi thứ tự hiện thị mà không cần thay code HTML. Mặc định thứ tự hiện thị theo vị trí code HTML cái nào viết code trước thì hiện thị trước, tuy nhiên Bootstrap cho phép điều chỉnh bằng các lớp order-0 đến order-12

<div class="d-flex"> <div class="bg-primary p-2 m-2 order-2">PT1</div> <div class="bg-primary p-2 m-2 order-3">PT2</div> <div class="bg-primary p-2 m-2 order-1">PT3</div> </div> PT1 PT2 PT3 Mục lục bài viết Tiện ích với TextCăn lề theo chiều đứngThiết lập Margin, PaddingMàu nềnThiết lập thuộc tính displayThiết lập thuộc tính floatThiết lập thuộc tính positionThiết lập border - bo viền khungĐổ bóng hình hộpThiết lập chiều cao, chiều rộngEmbeds - Nhúng Video YouTubeFlexBox ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới