Làm thế nào để tùy chỉnh các lớp thuộc tính mặc định của bootstrap?

Thứ năm - 08/10/2015 22:49
Bạn không nhất thiết phải can thiệp vào các tập tin css của bootstrap để hiệu chỉnh các thuộc tính theo ý muốn. Có thể thực hiện điều này bằng cách dùng tập tin css tùy chỉnh.
Nếu bạn thấy phần lớn các webiste hiện nay đều sử dụng Bootstrap, điều này không có gì đáng ngạc nhiên, bởi Bootstrap được xem là một Framework phổ biến nhất để thiết kế Font-end một cách nhanh chóng.

Nhưng tại sao một số trang web có giao diện không giống như giao diện do cách thành phần mặc định của bootstrap tạo ra? Rất đơn giản, các thuộc tính CSS được thêm mới vào hoặc đã được sửa đổi, không giống với mặc định (Bỏ qua việc sử dụng LESS hay SASS).
 
Trong hướng dẫn này, chúng tôi sẽ hướng dẫn cách làm thế nào để tùy chỉnh bootstrap một cách khoa học, dễ dàng duy trì, cho phép người dùng cập nhật, nâng cấp các phiên bản của Bootstrap trong tương lai mà không làm mất đi cách tùy chỉnh trước đó.

Thêm vào Stylesheet tùy chỉnh

Tạo một tập tin css trong thư mục Bootstrap CSS với tên là custom.css
 
custom css2

Bên trong thẻ head của website, glọi tập tin custom.css bên dưới mã gọi tập tin css mặc định của Bootstrap.
<head>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

Áp dụng tùy chỉnh

Để thêm mới hoặc thay đổi các thuộc tính của một đối tuợng trên trang web sử dụng Bootstrap, đơn giản bạn chỉ cần viết lại mã vào tập tin custom.css được tạo ra bên trên. Bạn không cần phải can thiệp trực tiếp vào các tập tin CSS của Bootstrap.

Ví dụ, bạn muốn bỏ thuộc tính bo tròn góc của các button, bạn có thể viết lại các thuộc tính (ghi đè) của class btn vào tập tin custom.css.
.btn {
    border-radius: 0px;
}
Kết quả:
square buttons1

Một ưu điểm rất lớn của phương án này là trong trường hợp nâng cấp phiên bản Bootstrap, bạn sẽ vấn giữ được mẫu giao diện sau khi tùy chỉnh của bạn. Một số phiên bản Boostrap có sự thay đổi lớn, đòi hỏi bạn cũng phải thay đổi các thuộc tính tùy chỉnh của bạn, song nó sẽ vẫn rất dễ giàng, khoa học hơn khi sử dụng phương án này.

Nguồn tin: bootstrapbay.com

Tổng số điểm của bài viết là: 13 trong 3 đánh giá

Xếp hạng: 4.3 - 3 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC