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

Xem: 539    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

0 điểm   ( 2 đánh giá ) File đã được kiểm thử


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

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ả:

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

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

Làm thế nào để tùy chỉnh các lớp thuộc tính mặc định của bootstrap? Đăng ngày 20-10-2015  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. 5/10 539

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn