Người Viết : ViKiMi Editor

Không thể bỏ qua Bootstrap Classes! Thiết kế nhanh gọn và hiệu quả cho công sức LTV !!!
Có lẽ những Classes được cung cấp bởi Bootstrap đã cho chúng ta thấy rằng việc sử dụng Bootstrap đã đem lại những lợi ích lớn như thế nào. Điều đó không cần bàn cãi thêm. Vì thực tế đã cho chúng ta thấy điều đó, việc làm chủ một Framework như Bootstrap giúp việc thiết kế một Website tốt hơn rất nhiều. Và để thiết kế một Website hoàn hảo thì cần nhiều thứ hơn nữa.
Những Classes cung cấp bởi Bootstrap mà bạn nên biết :
A ) Class .row
Thiết kế này cho chúng ta một hàng để chứa các Cột trong một bố cục Website. Chứa hàng & cột rất giống trong định nghĩa Table, việc sử dụng thiết kế này sẽ hữu ích luôn luôn cần thiết.
Mã HTML :
<div class="container-fluid"> <h1>SỬ DỤNG ROW & COLUMN TƯƠNG TỰ THIẾT KẾ TABLE</h1> <p>Một hàng chứa 2 cột :</p> <div id="div1" class="row"> <div class="col-sm-6"> Column 1 </div> <div class="col-sm-6"> Column 1 </div> </div> </div>
B ) Class .row-no-gutters
Thiết kế này sẽ giúp chúng ta loại bỏ khoảng trông trong một hàng và các cột tồn tại bên trong nó. Khoảng trống này có thể do thuộc tính Margin hoặc Padding do CSS tác động đem lại.
Mã HTML :
<div class="row row-no-gutters"> <div class="col-sm-4"> Column 1 </div> <div class="col-sm-8"> Column 2 </div> </div>
C ) Class .small
Thiết kế này cho phép tạo ra một tiêu đề nhỏ gọi là tiêu đề phụ & nó tồn tại nhỏ hơn bất kỳ tiêu đề nào.
Mã HTML :
<div class="container"> <h2>MẪU CÁC TIÊU ĐỀ & VĂN BẢN</h2> <p>Sử dụng Class .small để tạo một văn bản nhỏ hơn : </p> <p class="small">Đây là đoạn văn bản nhỏ hơn.</p> <p>Đây là đoạn văn bản thông thường.</p> </div>
D ) Class .sr-only
Thiết kế này cho phép tạo ra những nội dung chỉ hiển thị trên thiết bị Screen Readers. Ví dụ : Các thiết bị chỉ hỗ trợ đọc nội dung.
Mã HTML :
<div class="container"> <h2>THIẾT KẾ THÀNH PHẦN CHỈ HIỂN THỊ VỚI SCREEN READERS</h2> <p>Sử dụng Class .sr-only giúp ẩn phần tử trên mọi thiết bị trừ Screen Readers:</p> <a class="sr-only" href="#">Link liên kết này chỉ hiển thị với Screen Readers</a> </div>
E ) Class .sr-only-focusable
Thiết kế này cho phép chỉ hiển thị phần tử trên thiết bị Screen Readers khi có hiệu ứng Focus. Nó thường kết hợp với Class .sr-only.
F ) Class .success
Thiết kế Class này hỗ trợ thêm màu nền cho một hàng hoặc cột của Table. Màu nên này là Xanh lục & Biểu thị cho sự tích cực + thành công.
Mã HTML :
<table class="table"> <thead> <tr> <th>HỌ</th> <th>TÊN</th> <th>TÀI KHOẢN</th> </tr> </thead> <tbody> <tr class="success"> <td>LÊ</td> <td>VĂN THIỆN</td> <td>TCB-0101089737</td> </tr> </tbody> </table>
+ Class .warning
Thiết kế Class này hỗ trợ thêm màu nền vàng cho một hàng hoặc cột của Table. Có tác dụng cảnh báo.
G ) Class .text-capitalize
Thiết kế này cho phép tạo ra các văn bản viết hoa. Có nghĩa là tất các các chữ đều được chuyển thành dạng viết hoa ở kí tự đầu tiên.
Mã CSS :
.text-capitalize {
text-transform: capitalize;
}
Mã HTML :
<p class=”text-capitalize”>Chuyện hai người đi vào một cao ốc & ăn ốc. </p>
OUTPUT : Chuyện Hai Người Đi Vào Một Cao Ốc & Ăn Ốc.
+ Class .text-lowercase
Thiết kế này cho phép tạo một văn bản dạng chữ viết thường
Mã CSS :
.text-lowercase {
text-transform: lowercase;
}
Mã HTML :
<p class=”text-lowercase”>Khi Output Văn bản này sẽ được định dạng viết thường. </p>
+ Class .text-uppercase
Thiết kế này cho phép tạo một văn bản dạng chữ viết Hoa
Mã CSS :
.text-uppercase {
text-transform: uppercase;
}
Mã HTML :
<p class=”text-uppercase”> Khi Output Văn bản này sẽ được định dạng viết hoa. </p>
H ) Class .text-center
Thiết kế này cho phép thực hiện căn giữa một văn bản. Chú ý là chỉ thực hiện căn giữa văn bản; không thực hiện áp dụng căn giữa cho bất kỳ phần tử nào trong Website ( Giống như Div … ).
Mã CSS :
.text-center {
text-align: center;
}
Mã HTML :
<p class=”text-center”>Thực hiện căn giữa đối với văn bản này. </p>
+ Class .text-left
Thiết kế này cho phép thực hiện căn trái một văn bản. Chú ý là chỉ thực hiện căn trái văn bản; không thực hiện áp dụng căn trái cho bất kỳ phần tử nào trong Website ( Giống như Div … ).
Mã CSS :
.text-left {
text-align: left;
}
Mã HTML :
<p class=”text-left “>Thực hiện căn trái đối với văn bản này. </p>
+ Class .text-right
Thiết kế này cho phép thực hiện căn phải một văn bản. Chú ý là chỉ thực hiện căn phải văn bản; không thực hiện áp dụng căn phải cho bất kỳ phần tử nào trong Website ( Giống như Div … ).
Mã CSS :
.text-right {
text-align: right;
}
Mã HTML :
<p class=”text-left “>Thực hiện căn phải đối với văn bản này. </p>
+ Class .text-justify
Thiết kế này cho phép thực hiện tạo một văn bản được căn chỉnh hợp lý, thông thường sẽ căn đều sang hai bên trái và phải. Chú ý là chỉ thực hiện căn đều sang hai bên trái và phải đối với văn bản; Và không thực hiện áp dụng căn chỉnh cho bất kỳ phần tử nào trong Website ( Giống như Div … ).
Mã CSS :
.text-justify {
text-align: justify;
}
Mã HTML :
<p class=” text-justify”>Thực hiện căn phải đối với văn bản này. </p>
K ) Class .text-danger
Thiết kế này cho phép tạo ra một văn bản có màu đỏ, thực hiện cảnh báo sự chú ý nguy hiểm.
Mã CSS :
.text-danger {
color: #a94442;
}
Mã HTML :
<p class=”text-danger”>Đoặn văn bản này màu đỏ, thông tin cảnh báo nguy hiểm . </p>
+ Class .text-primary
Thiết kế này cho phép tạo ra một văn bản có màu XANH cơ bản. Cho phép tạo một sư chú ý về thông tin quan trọng.
Mã HTML :
<p class=”text-primary”> Đoạn văn bản / Text đưa ra thông tin quan trọng tới người sử dụng. </p>
+ Class .text-info
Thiết kế này cho phép tạo ra một văn bản có màu XANH LAM, thực hiện đưa ra một thông tin tới người dùng.
Mã CSS :
.text-info {
color: #31708f;
}
Mã HTML :
<p class=”text-info”>Đoạn văn bản / Text đưa thông tin đến người dùng. </p>
+ Class .text-success
Thiết kế này cho phép tạo ra một văn bản có màu XANH LỤC, thực hiện đưa ra một thông tin biểu thị cho sự thành công.
Mã HTML :
<p class=”text-success”>Đoạn Văn Bản / Text đưa thông tin sự thành công đến người dùng.</p>
+ Class .text-warning
Thiết kế này cho phép tạo ra một văn bản có màu VÀNG / HOẶC CAM, thực hiện đưa ra một thông tin cảnh báo tới người sử dụng.
Mã HTML :
<p class=”text-warning”>Đoạn văn bản / Text đưa thông tin cảnh báo có màu vàng hoặc cam tới người dùng.</p>
L ) Class .text-hide
Thiết kế này cho phép ẩn một đoạn văn bản. Khi đó văn bản này có tác dụng bổ sung ngữ nghĩa & nó có thể coi là một dạng ảnh nền.
Mã HTML :
<div class="container"> <h2>MỘT BỨC HÌNH</h2> <p>Bức hình CHÚ BÒ VẼ TRANH:</p> <img src="VERYFUNNY.jpg" class="img-thumbnail" alt="funny picture"> <div class="text-hide"> Đoạn Text được ẩn đi : Chú bò tên là CAPCUT ở New Zealand đang vẽ tranh : ] </div> </div>
+ Class .text-muted
Thiết kế này cho phép hiển thị văn bản có màu XÁM, giúp tạo một văn bản tạo sự chú ý bổ sung.
Mã CSS :
.text-muted {
color: #777;
}
Mã HTML :
<p class=”text-muted”>Đoạn văn bản này sử dụng Class .text-muted có màu xám.</p>
+ Class .text-nowrap
Thiết kế này giúp ngăn ngữa hiện tượng văn bản bị gói lại. Giúp cho văn bản được trải rộng trên phần tử nội dung trên Website.
Mã CSS :
.text-nowrap {
white-space: nowrap;
}
Mã HTML :
<p class=”text-nowrap”>Văn bản thực hiện nowrap / ngăn ngừa hiện tượng văn bản bị gói lại </p>