Bài 14: Làm web với Bootstrap – Cách chỉnh sửa các thuộc tính trong Bootstrap

Trong bài học này, mình sẽ hướng dẫn các bạn cách chỉnh sửa các thuộc tính css trong trang web sử dụng Bootstrap. Một trong những lưu ý đầu tiên là tuyệt đối không sửa file gốc của bootstrap mà chỉ chỉnh sửa bằng cách ghi đè class.

Video – Làm web với Bootstrap – Cách chỉnh sửa các thuộc tính trong Bootstrap

Hướng dẫn chi tiết

Thay đổi font chữ

Chúng ta sẽ dùng font Open Sans thay cho font mặc định.

Đầu tiên các bạn tìm kiếm từ khóa Google font. Sau đó chọn font Open Sans và tải về. Bạn nào chưa hiểu rõ về Google font, có thể xem bài cách sử dụng font trong html và css.

Thêm tạo font famaly bằng dòng code sau trong file css

@font-face{
   font-family: Open Sans;
   src:url("Open_Sans/OpenSans-Light.ttf");
}

Chúng ta sẽ dùng font Open Sans Light nhé.

Thay đổi các thuộc tính mặc định của Bootstrap

Các thuộc tính mặc định của Bootstrap

+ Bootstrap theo phong cách Material design nên sẽ có bo góc là 2px; vì vậy thuộc tính cần thay đổi là boder-radius

+ Bootstrap có các màu sắc mang ý nghĩa cho từng loại. Như các loại màu cho button, alert … Chúng ta có thể thay đổi màu nền và màu chữ cho các thành phần này.

Cách ghi đè lên thuộc tính của Bootstrap

Lưu ý quan trọng nhất là không được chỉnh sửa file nguồn của Bootstrap mà chỉ ghi đè bằng cách thêm class.

Một số thuộc tính không phải mặc định của Bootstrap như width, height, chúng ta có thể ghi đè bình thường. Một số thuộc tính mặc định như màu nền và màu chữ của button, alert, để thay đổi chúng ta cần thêm !important vào sao mỗi thuộc tính.

Ví dụ, để thay đổi màu nền vào chữ cho button search có class=”btn btn-outline-info”, chúng ta sẽ ghi đè như sau

+ Thêm class tự định nghĩa btn-search

<button class="btn btn-outline-primary my-2 my-sm-0 btn-search" type="submit">Tìm kiếm</button>

+Phần css:

.btn-search{
   border-color: #3a5c83 !important;
   color: #3a5c83 !important;
}
.btn-search:hover{
   background-color: #3a5c83 !important;
   color: white !important;
}

Các bạn chạy thử 3 trường hợp sau nhé

+ Để theo mặc định.

+ Thêm class btn search nhưng phần css không có !important

+ Có !important

Hướng dẫn chi tiết, các bạn xem video nhé.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ