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


  1. Tạo một tệp index.html mới trong thư mục gốc của dự án của bạn. Bao gồm cả thẻ để có hành vi phản hồi phù hợp trong thiết bị di động

    
    
      
        
        
        Bootstrap demo
      
      
        Hello, world!
      
    
    

  2. Bao gồm CSS và JS của Bootstrap. Đặt thẻ trong CSS của chúng tôi và thẻ

    Bạn cũng có thể bao gồm Popper và JS của chúng tôi một cách riêng biệt. Nếu bạn không định sử dụng danh sách thả xuống, cửa sổ bật lên hoặc chú giải công cụ, hãy tiết kiệm một số kilobyte bằng cách không bao gồm Popper

    
    
    

  3. Chào thế giới. Mở trang trong trình duyệt bạn chọn để xem trang Bootstrapped của bạn. Giờ đây, bạn có thể bắt đầu xây dựng với Bootstrap bằng cách tạo bố cục của riêng mình, thêm hàng chục thành phần và sử dụng các ví dụ chính thức của chúng tôi

Để tham khảo, đây là các liên kết CDN chính của chúng tôi

DescriptionURLCSShttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.cssJS



0

Bạ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 theo

thành phần JS

Tò 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
  • Cảnh báo sa thải
  • Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
  • Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
  • Thu gọn để chuyển đổi mức độ hiển thị của nội dung
  • Danh sách thả xuống để hiển thị và định vị (cũng yêu cầu Popper)
  • Các phương thức để hiển thị, định vị và hành vi cuộn
  • Thanh điều hướng để mở rộng các plugin Thu gọn và Offcanvas của chúng tôi để triển khai các hành vi phản hồi
  • Điều hướng với plugin Tab để chuyển đổi bảng nội dung
  • Offcanvases để hiển thị, định vị và hành vi cuộn
  • Scrollspy cho hành vi cuộn và cập nhật điều hướng
  • Chúc mừng để hiển thị và loại bỏ
  • Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị (cũng yêu cầu Popper)

Toàn cầu quan trọng

Bootstrap 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 HTML5

Bootstrap 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 Google

Trong 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

.selector-for-some-widget {
  box-sizing: content-box;
}

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 là một framework bao gồm các hàm html, css, javascript được mã hóa sẵn Hỗ trợ lập trình viên phát triển trang web đáp ứng dễ dàng hơn

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 4

Chúng ta có 2 cách cài đặt bootstrap 4, đó là

  • Nhúng Bootstrap 4 từ CDN (mạng phân phối nội dung)
  • Tải từ trang chủ của Bootstrap là getbootstrap. com

Nhúng Bootstrap 4 từ CDN

Khi 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

  • bootstrap.min.css. CSS đã nén của BS4
  • jquery.min.js. thư viện jQuery, bắt buộc phải gọi trước thư viện js của BS4
  • popper.min.js. popper đã nén thư viện
  • bootstrap.min.js. bản nén JS của BS4, để sau các thư viện JS bên ngoài

<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

  • Trong thư mục CSS, các bạn chỉ cần quan tâm đến 2 file. thứ nhất là tệp bootstrap. css và thứ 2 là tệp bootstrap. tối thiểu. css. Nội dung 2 file thì giống nhau nhưng 1 bản là bản đầy đủ và 1 bản là bản nén để khi sử dụng gọi vào sẽ giúp website load nhanh hơn
  • Tương tự, trong thư mục JS các bạn cũng chỉ quan tâm tới 2 file, đó là. tệp đủ bootstrap. js và tệp nén là tệp bootstrap. tối thiểu. js. Ngoài ra, trong thư mục này, các bạn cần thêm thư viện popper và thư viện jquery bằng cách lên trang chủ của thư viện tải về và để tệp thư viện trong thư mục JS nhé

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

Add document format as HTML5

Bootstrap 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

Khởi động cdn 4

Bootstrap 4 priority device di động

Bootstrap 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

Khởi động cdn 4

Phần này tương tự như BS3, phần width=device-width đặt độ rộng trang theo độ rộng màn hình. Khi trang web giao diện chạy trên các thiết bị có màn hình khác nhau thì trang web sẽ có độ rộng khác nhau. Phần initial-scale=1 thiết lập mức thu phóng ban đầu, thông thường là 1 (tức 100%)

Kết luận

Như 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