Khởi động cdn 4
Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này Show
Để tham khảo, đây là các liên kết CDN chính của chúng tôi DescriptionURLCSS 0Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung Bước tiếp theothành phần JSTò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu Hiển thị các thành phần yêu cầu JavaScript
Toàn cầu quan trọngBootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào loại tài liệu HTML5Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ
Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn
Bạn có thể xem một ví dụ về điều này trong thực tế kích thước hộpĐể định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu 1 từ 2 thành 3. Điều này đảm bảo 4 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của GoogleTrong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau
Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua 5 và 6—tất cả sẽ kế thừa 1 đã chỉ định cho 8 đóTìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS khởi động lạiĐể cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các cài đặt lại có chủ ý hơn một chút cho các thành phần HTML phổ biến Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này Xin chào các bạn, hôm nay chúng ta tiếp tục đến với bài 2 trong series học Bootstrap 4 nhé, bài trước thì chúng ta đã giới thiệu rất nhiều về Bootstrap 4 rồi, từ bài hôm nay chúng ta sẽ học lục mục Bootstrap là gì?
Bootstrap hỗ trợ quá trình mã giao diện của các lập trình viên thuận lợi hơn, nhờ những mã có sẵn và lập trình viên chỉ sử dụng mà không làm mất thời gian mã từ đầu, đây có thể được coi là ưu điểm nổi bật nhất mà khung Tuy nhiên, các công ty lập trình web chuyên nghiệp thường không sử dụng bootstrap cho các dự án của mình. Nếu bạn thiết kế website riêng tại Mona Media, giao diện hầu như chỉ sử dụng Javascript để xử lý việc không sử dụng đến Bootstrap framework, bởi dù có nhiều ưu điểm nhưng Bootstrap có thể khiến dung lượng website tăng lên đáng kể, ảnh hưởng Cách cài đặt Bootstrap 4Chúng ta có 2 cách cài đặt bootstrap 4, đó là
Nhúng Bootstrap 4 từ CDNKhi khai thác trang web trên mạng, đa số các thành viên lập trình đều sử dụng nhúng Bootstrap thông qua CDN vì cách này giúp tiết kiệm băng thông cho trang web MaxCDN cung cấp các CDN cho CSS và Javascript của Bootstrap cũng như thư viện jQuery Ví dụ sau mình sẽ nhúng các tập tin cần thiết để thiết kế trang web sử dụng Bootstrap 4. Để sử dụng Bootstrap 4, các bạn cần nhúng thư viện file sau
<liên kết rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”> <script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script> <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script> Trong ví dụ trên bạn thấy xuất hiện hai thư viện JavaScript là jQuery và Popper. Vì sao chúng ta nên sử dụng thư viên này? Tải Bootstrap 4 từ trang chủNếu các bạn muốn tải Bootstrap 4 và sử dụng riêng trên máy chủ thì hãy truy cập trang chủ của Bootstrap là getbootstrap. com Các bạn lên trang chủ của bootstrap 4 tại đây và tải về cho mình bộ nguồn ở link đầu tiên (Css và Js biên dịch) Sau khi download về, các bạn sẽ được cấu trúc gồm 2 thư mục là CSS và JS
Dưới đây mình sẽ hướng dẫn cấu trúc thư mục chuẩn để các bạn tham khảo và sử dụng vào việc xây dựng giao diện website theo yêu cầu với Bootstrap 4 nhé. Build giao diện cơ bảnAdd document format as HTML5Bootstrap 4 sử dụng các thuộc tính CSS và các phần tử HTML yêu cầu HTML phải là phiên bản HTML5 Vì vậy, để sử dụng Bootstrap 4, các bạn cần bổ sung định dạng tài liệu (doctype) là HTML5 như sau Bootstrap 4 priority device di độngBootstrap 4 được thiết kế để trả lời câu hỏi trên các màn hình thiết bị di động. Do đó, các cách ưu tiên di động là phần lõi chính trong framework. Để chắc chắn rằng việc hiển thị thu phóng thích hợp, các bạn cần thêm thẻ meta sau bên trong phần tử đầu để thiết kế web đáp ứng trên các thiết bị tiêu chuẩn nhất Phần này tương tự như BS3, phần Kết luậnNhư vậy qua bài hôm nay, mình đã giúp các bạn nắm được cách cài đặt Bootstrap 4 vào xây dựng website giao diện. Mời các bạn tiếp tục theo dõi các bài tiếp theo. Chúc các bạn học tập tốt |