Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL.
Bài : CSS Bootstrap I Sử dụng container Trong thiết kế giao diện HTML – CSS việc sử dụng container quan trọng Nó giúp tạo khung có chiều rộng cố định nằm trang web Như hình, ta thấy khung màu đỏ container Cú pháp: Class container Bootstrap có chiều rộng 1170px Với kích thước thường khơng thích hợp với website Việt Nam Để giải vấn đề bạn thêm class Sau CSS cho class với thuộc tính max-width Ví dụ: vietpro_container{max-width: 1000px;} Ngồi sử dụng class container-fluid cho container có chiều rộng tối đa, chiều rộng khung nhìn bạn (tồn hình) II Hệ thống lưới Bootstrap (Grid System) Khi xây dựng giao diện HTML – CSS, muốn tạo nhiều khối nằm ngang hàng với ta thường dùng đến thuộc tính float CSS Với Bootstrap, ta không cần làm Bootstrap có hệ thống lưới mạnh mẽ (Tiếng Anh gọi Grid System) Hệ thống lưới Bootstrap chia thành 12 cột Hệ thống lưới hoạt động hiệu đặt class container (chiều rộng cố định) container-fluid (chiều rộng full hình) Ex : Qua ví dụ, dễ dàng hiểu cách dùng Grid System Bootstrap Cú pháp: col-a-b Trong đó: - a: Ký hiệu thiết bị - b: Số cột (trong 12 cột) Thiết bị điện thoại (=768px) col-sm-b Thiết bị desktop (>=992px) col-md-b Thiết bị desktop lớn (>=1200px) col-lg-b III Kiểu chữ Class chỉnh Dễ dàng căn chỉnh lại các text với các thành phần khác bằng các class căn chỉnh text Ex: Class biến đổi Trong kiểu biến đổi văn có kiểu: lowercase, uppercase, capitalize IV Form Các thành phần form (form-control) tự động nhận số style chung Toàn form-control , , và với class form-control thiết lập mặc định width: 100%; Bao quanh nhãn form-control thẻ có class.form-group Ex: V Nút (button) - Để tạo button boostrap ta cần CLASS btn btn-x Trong : x bao gồm: primary, success, info, warning, danger, link - Bạn muốn nút to hay nút nhỏ ? Hãy sử dụng các class .btn-lg, .btn-sm, hoặc .btn-xs cho các kích thước khác nhau Êx : VI Hình ảnh Bootstrap Responsive Image Trong Bootstrap 3, hình ảnh Responsive cách thêm class imgresponsive vào thẻ Ex : Kiểu hình ảnh Có kiểu: hình ảnh vng, ảnh hình tròn, kiểu ảnh thumbnail ... pháp: col-a-b Trong đó: - a: Ký hiệu thiết bị - b: Số cột (trong 12 cột) Thiết bị điện thoại (=768px) col-sm-b Thiết bị desktop (>=992px) col-md-b... lưới Bootstrap (Grid System) Khi xây dựng giao diện HTML – CSS, muốn tạo nhiều khối nằm ngang hàng với ta thường dùng đến thuộc tính float CSS Với Bootstrap, ta khơng cần làm Bootstrap có hệ thống... Thiết bị desktop lớn (>= 120 0px) col-lg-b III Kiểu chữ Class chỉnh Dễ dàng căn chỉnh lại các text với các thành phần khác bằng các class căn chỉnh text Ex: Class biến đổi Trong kiểu biến đổi văn