Căn chỉnh ảnh trong Bootstrap
|
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ụ
Đ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à: Đây là dòng chữ Ví dụ Căn lề theo chiều đứng các phần tử0 Với 1 đã 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ủ 2, 3. 4 và các cell trong bảng
baseline top middle bottom text-top text-bottom Thiết lập margin và paddingCác lớp thiết lập margin là 5 hoặc 6 Các lớp thiết lập padding là 7 hoặc 8 Trong đó:
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
Hộp này nằm ở giữa do mx-auto Thiết lập màu nềnCó các lớp: Thiết lập thuộc tính displayThuộ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 9 ví dụ 0, 1, 2... Thiết lập hiện thị phần tử dùng 3 Thiết lập ẩn phần tử dùng 4 Thiết lập thuộc tính floatThuộ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 6 ví dụ 7, 8, 9... Muốn hủy thuộc tính float của một phần tử dùng class 0 Thiết lập thuộc tính positionĐó là các class: 1, 2, 3 Thiết lập thuộc borderCạnh được kẻ
Màu đường kẻ thiết lập bằng các class: 9 Góc thiết lập bo tròn sử dụng các class:
Đổ bóng hình hộp
Thiết lập chiều cao, chiều rộng
Nhúng VideoCách để nhúng Video đảm bảo tính năng responsive FlexBox với BootstrapBootstrap 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ày Phần tử chứa - kích hoạt có tính năng flexbox Sử dụng các lớp: 23 hoặc 24 như 25, nếu áp dụng kiểu inline-flex thì sử dụng lớp 26 hoặc 27 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ị 29, 30, 31 gọi chúng là 32. Trong Bootstrap các giá trị này thiết lập bàng lớp 33 như:
Ví dụ 35 - phần tử con xuống dòng mới khi vượt kích thước phần tử chứa
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, 43, 44, 45 gọi chúng là 46 Để 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ặc 48 như:
Ví dụ 50 - đổi hướng chính thẳng đứng
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ị 60, 61, 62, 63, 64 thì trong Bootstrap các giá trị này viết là 65, 66, 62, 68, 69 ký hiệu chúng là 70 Các thuộc tính thiết lập là: 71 hoặc 72 Ví dụ hướng chính là nằm ngang, thì 73 đẩy các phần tử con về cuối hàng
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ướng 75 Sử dụng các class 76 hoặc 77 trong đó values là các giá trị 78, 62, 80, 68, 69 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 đứng
83 đẩy phần tử xuống đáy box theo phương đứng, thử kết hợp với 85 thì nó đẩy thêm nằm giữa theo phương ngang
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ính 87 hoặc 88 Với {values} là 65, 66, 62, 68, 78 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ặc 95 Với 96 là: 65, 66, 62, 80, 78 0 Phần tử con - Fill Nếu các phần tử con trong 02 có lớp 03 thì nó ép các phần tử con đó theo hướng chính kích thước sẽ bằng nhau 1 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ữa 2 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ó 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ứa Nếu phần tử chứa có hướng chính thẳng đứng ( 50) thì phần tử nào có 08 thì nó sẽ đẩy các phần tử dưới nó về đáy của phần tử, nếu có 09 sẽ đẩy phần tủ trên nó về phía trên phần tử chứa. 3 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ớp 11 đến 12 |
