Hướng dẫn xuống dòng trong 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

.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ụ

        

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

Đ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

        

        baseline
        top
        middle
        bottom
        text-top
        text-bottom
    
    

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

        

        Hộp này nằm ở giữa do mx-auto
    
    

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

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

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

        

       
PT1
        
PT2
        
PT3
        
PT4
        
PT5
        
PT6
        
PT7
        
PT8
        
PT9
        
PT10
        
PT11
        
PT12
    
    

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

        

        
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

        

        
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

        

        
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

        

        
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

        

        
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

        

        
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

        

        
PT1
        
PT2
        
PT3
        
PT4
    

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.

        

        
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

        

        
PT1
        
PT2
        
PT3