Bootstrap màu tùy chỉnh
|
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ần lưu ý đầu tiên là tuyệt đối không chỉnh sửa tệp gốc của bootstrap mà chỉ chỉnh sửa bằng cách ghi đè lớp Show Nội dung chính
Video – Làm web với Bootstrap – Cách chỉnh sửa các thuộc tính trong BootstrapHướng dẫn chi tiếtCó làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. Change font chữChúng ta sẽ sử dụng font Open Sans thay cho font mặc định Đầu tiên các bạn search từ khóa Google font. Sau đó chọn font Open Sans và tải về. Bạn nào chưa hiểu về Google font có thể xem bài cách sử dụng font trong html và css Add create font famaly by lines after in file css @font-face{
font-family: Open Sans;
src:url("Open_Sans/OpenSans-Light.ttf");
}
Chúng ta sẽ sử dụng font Open Sans Light nhé Bài viết cùng chủ đề Bài 11. Scrollspy – Hiệu ứng điều hướng khi… bài 10. Navbar – Tạo menu đa cấp với hiệu… "Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn Thay đổi các thuộc tính mặc định của BootstrapThuộc tính mặc định của Bootstrap+ Bootstrap theo phong cách Material design sẽ có bo góc là 2px; + Bootstrap có các sắc thái mang ý nghĩa cho từng loại. Như các loại màu cho nút, cảnh báo… 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 BootstrapLưu ý quan trọng nhất là không thể chỉnh sửa nguồn tệp đã chỉnh sửa của Bootstrap mà chỉ ghi đè bằng cách thêm lớp Một số thuộc tính không được mặc định của Bootstrap như chiều rộng, chiều cao, 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 nút, cảnh báo, để thay đổi chúng ta cần thêm. important to sao cho mỗi thuộc tính Ví dụ, để thay đổi màu nền thành chữ cho nút tìm kiếm có class=”btn btn-outline-info”, chúng ta sẽ ghi đè như sau + Thêm lớp tự định nghĩa btn-search +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é + To default + Thêm lớp tìm kiếm btn nhưng phần css không có. quan trọng + Có. quan trọng Hướng dẫn chi tiết, các bạn xem video nhé mẫu mã. Tải xuống Nếu có thắc mắc, hãy đặt câu hỏi bằng cách bình luận bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web Tất cả các bài viết. BootstrapBước 1. Tạo cấu trúc HTML Hướng dẫn cách tùy biến màu Bootstrap Tooltip Bước 2. Tạo cấu trúc CSS
.tooltip-custom .tooltip-inner {
background-color: #f2653c;
}
.tooltip-custom.top .tooltip-arrow {
border-top-color: #f2653c;
}
.tooltip-custom.right .tooltip-arrow {
border-right-color: #f2653c;
}
.tooltip-custom.left .tooltip-arrow {
border-left-color: #f2653c;
}
.tooltip-custom.bottom .tooltip-arrow {
border-bottom-color: #f2653c;
}
.tooltip-custom-alt .tooltip-inner {
background-color: #5b2da3;
}
.tooltip-custom-alt.top .tooltip-arrow {
border-top-color: #5b2da3;
}
.tooltip-custom-alt.right .tooltip-arrow {
border-right-color: #5b2da3;
}
.tooltip-custom-alt.left .tooltip-arrow {
border-left-color: #5b2da3;
}
.tooltip-custom-alt.bottom .tooltip-arrow {
border-bottom-color: #5b2da3;
}
.bs-example {
position: relative;
margin: 15px;
padding: 15px 15px 25px;
border: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.bs-example .btn {
margin: 5px;
}
.bs-example__title {
margin-bottom: 20px;
}
.bs-example--static .tooltip {
position: relative;
display: inline-block;
margin: 10px 20px;
opacity: 1;
}Bước 3. Call library Bootstrap Bước 5. Gọi thư viện JQUERY và tùy chọn màu Tooltip ________số 8
Bootstrap Xem (5525) Học thiết kế web Bước 1. Tạo cấu trúc HTML Hướng dẫn cách tùy biến màu Bootstrap Tooltip Bước 2. Tạo cấu trúc CSS
.tooltip-custom .tooltip-inner {
background-color: #f2653c;
}
.tooltip-custom.top .tooltip-arrow {
border-top-color: #f2653c;
}
.tooltip-custom.right .tooltip-arrow {
border-right-color: #f2653c;
}
.tooltip-custom.left .tooltip-arrow {
border-left-color: #f2653c;
}
.tooltip-custom.bottom .tooltip-arrow {
border-bottom-color: #f2653c;
}
.tooltip-custom-alt .tooltip-inner {
background-color: #5b2da3;
}
.tooltip-custom-alt.top .tooltip-arrow {
border-top-color: #5b2da3;
}
.tooltip-custom-alt.right .tooltip-arrow {
border-right-color: #5b2da3;
}
.tooltip-custom-alt.left .tooltip-arrow {
border-left-color: #5b2da3;
}
.tooltip-custom-alt.bottom .tooltip-arrow {
border-bottom-color: #5b2da3;
}
.bs-example {
position: relative;
margin: 15px;
padding: 15px 15px 25px;
border: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.bs-example .btn {
margin: 5px;
}
.bs-example__title {
margin-bottom: 20px;
}
.bs-example--static .tooltip {
position: relative;
display: inline-block;
margin: 10px 20px;
opacity: 1;
}Bước 3. Call library Bootstrap Bước 5. Gọi thư viện JQUERY và tùy chọn màu Tooltip ________số 8 |
