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
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 Bootstrap
- Hướng dẫn chi tiết
- Change font chữ
- Thay đổi các thuộc tính mặc định của Bootstrap
- Thuộc tính mặc định của Bootstrap
- Cách ghi đè lên thuộc tính của Bootstrap
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
Có 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 Bootstrap
Thuộ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 Bootstrap
Lư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
Tìm kiếm
+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. Bootstrap
Bước 1. Tạo cấu trúc HTML
Hướng dẫn cách tùy biến màu Bootstrap Tooltip
Tooltip tĩnh
Tooltip primary example
Tooltip success example
Tooltip info example
Tooltip warning example
Tooltip danger example
Custom tooltip example
Another custom tooltip example
Tooltip động
Tooltip primary Tooltip success Tooltip info Tooltip warning Tooltip danger
Custom tooltip Another custom 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- Thẻ.
- Chú giải công cụ Bootstrap
- Chú giải công cụ
- jquery
- CSS
- RWD
- Bootstrap learning
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
Tooltip tĩnh
Tooltip primary example
Tooltip success example
Tooltip info example
Tooltip warning example
Tooltip danger example
Custom tooltip example
Another custom tooltip example
Tooltip động
Tooltip primary Tooltip success Tooltip info Tooltip warning Tooltip danger
Custom tooltip Another custom 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