Thiết lập màu chữ như
1,
2 ...
3, một số điều khiển cách hiện thị như
4 ẩn text,
5 hủy hiệu ứng trang trí [như chữ in],
6 đưa về màu kế thừa mặc định
Sử dụng thiết lập tiêu đề lớn trong trang, có 4 kích thước như
7
Làm nổi bật một đoạn văn [ví dụ tóm tắt nội dung]
Đánh dấu một đoạn văn có chữ nhỏ hơn
Tạo một hiện thị trích dẫn
Đánh dấu ul, li bỏ kiểu trình bày danh sách
Đánh dấu ul hiện thị dạng inline
Đá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 [
8] nhưng khi màn hình từ md trở đi căn chữ bên phải [
0], 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à:Hộp này nằm ở giữa do mx-auto
Đây là dòng chữ Ví dụ
Căn lề theo chiều đứng các phần tử
0
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
Với
1 đã thiết lập cơ bản mặc định của browser.
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
Các lớp căn lề theo chiều đứng chỉ áp dụng cho các phần tủ
2,
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
3.
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
4 và các cell trong bảng
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
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à
5 hoặc
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
6
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
Các lớp thiết lập padding là
7 hoặc
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
8
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
Trong đó:
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
PT1
PT2
PT1
PT2
PT3
PT4
PT5
PT6
PT7
PT8
PT9
PT10
PT11
PT12
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
Ví dụ
7 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
PT1
PT2
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:
Thiết lập thuộc tính display
Thuộc tính CSS
8 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
PT1
PT2
9 ví dụ
PT1
PT2
0,
PT1
PT2
1,
PT1
PT2
2...
PT1
PT2
Thiết lập hiện thị phần tử dùng
3
PT1
PT2
Thiết lập ẩn phần tử dùng
4
PT1
PT2
Thiết lập thuộc tính float
Thuộc tính CSS
5 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
PT1
PT2
6 ví dụ
PT1
PT2
7,
PT1
PT2
8,
PT1
PT2
9...
PT1
PT2
Muốn hủy thuộc tính float của một phần tử dùng class
0
PT1
PT2
Thiết lập thuộc tính position
Đó là các class:
1,
PT1
PT2
2,
PT1
PT2
3
PT1
PT2
Thiết lập thuộc border
Cạnh được kẻ
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
PT1
PT2
Màu đường kẻ thiết lập bằng các class:
9
PT1
PT2
Góc thiết lập bo tròn sử dụng các class:
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
Đổ bóng hình hộp
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
Thiết lập chiều cao, chiều rộng
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
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
22 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àybaseline top middle bottom text-top text-bottom
Phần tử chứa - kích hoạt có tính năng flexbox
Sử dụng các lớp:
23 hoặcbaseline top middle bottom text-top text-bottom
24 nhưbaseline top middle bottom text-top text-bottom
25, nếu áp dụng kiểu inline-flex thì sử dụng lớpbaseline top middle bottom text-top text-bottom
26 hoặcbaseline top middle bottom text-top text-bottom
27baseline top middle bottom text-top text-bottom
Phần tử chứa - thiết lập flex-wrap
Như đã biết thuộc tính CSS
28 nhận các giá trịbaseline top middle bottom text-top text-bottom
29,baseline top middle bottom text-top text-bottom
30,baseline top middle bottom text-top text-bottom
31 gọi chúng làbaseline top middle bottom text-top text-bottom
32. Trong Bootstrap các giá trị này thiết lập bàng lớpbaseline top middle bottom text-top text-bottom
33 như:baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
Ví dụ
35 - phần tử con xuống dòng mới khi vượt kích thước phần tử chứabaseline top middle bottom text-top text-bottom
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ị:
42,baseline top middle bottom text-top text-bottom
43,baseline top middle bottom text-top text-bottom
44,baseline top middle bottom text-top text-bottom
45 gọi chúng làbaseline top middle bottom text-top text-bottom
46baseline top middle bottom text-top text-bottom
Để thiết lập các giá trị này cho phần tử dùng đến các thuộc tính:
47 hoặcbaseline top middle bottom text-top text-bottom
48 như:baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
baseline top middle bottom text-top text-bottom
Ví dụ
50 - đổi hướng chính thẳng đứngbaseline top middle bottom text-top text-bottom
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
59 để đẩ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ịbaseline top middle bottom text-top text-bottom
60,baseline top middle bottom text-top text-bottom
61,baseline top middle bottom text-top text-bottom
62,baseline top middle bottom text-top text-bottom
63,baseline top middle bottom text-top text-bottom
64 thì trong Bootstrap các giá trị này viết làbaseline top middle bottom text-top text-bottom
65,baseline top middle bottom text-top text-bottom
66,baseline top middle bottom text-top text-bottom
62,baseline top middle bottom text-top text-bottom
68,baseline top middle bottom text-top text-bottom
69 ký hiệu chúng làbaseline top middle bottom text-top text-bottom
70baseline top middle bottom text-top text-bottom
Các thuộc tính thiết lập là:
71 hoặcbaseline top middle bottom text-top text-bottom
72baseline top middle bottom text-top text-bottom
Ví dụ hướng chính là nằm ngang, thì
73 đẩy các phần tử con về cuối hàngbaseline top middle bottom text-top text-bottom
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
74 là nhằm đẩy các phần tử con theo hướngbaseline top middle bottom text-top text-bottom
75baseline top middle bottom text-top text-bottom
Sử dụng các class
76 hoặcbaseline top middle bottom text-top text-bottom
77 trong đó values là các giá trịbaseline top middle bottom text-top text-bottom
78,baseline top middle bottom text-top text-bottom
62,baseline top middle bottom text-top text-bottom
80,baseline top middle bottom text-top text-bottom
68,baseline top middle bottom text-top text-bottom
69baseline top middle bottom text-top text-bottom
Ví dụ hướng chính nằm ngang, thì
83 sẽ điều chỉnh phần tử con nằm giữa box theo phương đứngbaseline top middle bottom text-top text-bottom
PT1
PT2
83 đẩy phần tử xuống đáy box theo phương đứng, thử kết hợp vớibaseline top middle bottom text-top text-bottom
85 thì nó đẩy thêm nằm giữa theo phương ngangbaseline top middle bottom text-top text-bottom
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ó
35, 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ínhbaseline top middle bottom text-top text-bottom
87 hoặcbaseline top middle bottom text-top text-bottom
88baseline top middle bottom text-top text-bottom
Với {values} là
65,baseline top middle bottom text-top text-bottom
66,baseline top middle bottom text-top text-bottom
62,baseline top middle bottom text-top text-bottom
68,baseline top middle bottom text-top text-bottom
78baseline top middle bottom text-top text-bottom
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
94 hoặcbaseline top middle bottom text-top text-bottom
95baseline top middle bottom text-top text-bottom
Với
96 là:baseline top middle bottom text-top text-bottom
65,baseline top middle bottom text-top text-bottom
66,baseline top middle bottom text-top text-bottom
62,baseline top middle bottom text-top text-bottom
80,baseline top middle bottom text-top text-bottom
78baseline top middle bottom text-top text-bottom
0baseline top middle bottom text-top text-bottom
Phần tử con - Fill
Nếu các phần tử con trong
02 có lớpHộp này nằm ở giữa do mx-auto
03 thì nó ép các phần tử con đó theo hướng chính kích thước sẽ bằng nhauHộp này nằm ở giữa do mx-auto
1baseline top middle bottom text-top text-bottom
Phần tử con - Grow
Phần tử con kích hoạt với lớp
04 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ữaHộp này nằm ở giữa do mx-auto
2baseline top middle bottom text-top text-bottom
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ó
05 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óHộp này nằm ở giữa do mx-auto
06 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ứaHộp này nằm ở giữa do mx-auto
Nếu phần tử chứa có hướng chính thẳng đứng [
50] thì phần tử nào cóbaseline top middle bottom text-top text-bottom
08 thì nó sẽ đẩy các phần tử dưới nó về đáy của phần tử, nếu cóHộp này nằm ở giữa do mx-auto
09 sẽ đẩy phần tủ trên nó về phía trên phần tử chứa.Hộp này nằm ở giữa do mx-auto
3baseline top middle bottom text-top text-bottom
Phần tử con - đổi thứ tự hiện thị
FlexBox có thuộc tính
10 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ớpHộp này nằm ở giữa do mx-auto
11 đếnHộp này nằm ở giữa do mx-auto
12Hộp này nằm ở giữa do mx-auto