Trình khởi động CDN 4

Bạn có thể bắt đầu sử dụng Bootstrap 4 trong trang web của mình bằng cách đưa nó vào từ CDN (Mạng phân phối nội dung) hoặc tải xuống từ getbootstrap. com

Sử dụng CDN

Bootstrap 4 có thể được sử dụng trong trang web bằng cách đưa nó vào từ Mạng phân phối nội dung

Sử dụng CDN CSS và JS của Bootstrap được biên dịch bên dưới trong dự án của bạn

Bao gồm các phiên bản CDN của jQuery và Popper. js (Bootstrap 4 sử dụng jQuery và Popper. js để sử dụng các thành phần JavaScript như phương thức, chú giải công cụ, cửa sổ bật lên, v.v.) trước JavaScript Bootstrap được rút gọn, nếu bạn đang sử dụng phiên bản JavaScript đã biên dịch

Sau đây là một số thành phần yêu cầu jQuery −

• Được sử dụng cho các cảnh báo có thể đóng

• Chuyển đổi trạng thái bằng cách sử dụng các nút và hộp kiểm/nút radio và thu gọn để chuyển đổi nội dung

• Băng chuyền cho các trang trình bày, điều khiển và chỉ báo

• Danh sách thả xuống (sử dụng Popper. js để có vị trí hoàn hảo)

• Mở và đóng Modals

• Để thu gọn Navbar

• Chú giải công cụ và cửa sổ bật lên (sử dụng Popper. js để có vị trí hoàn hảo)

Đang tải xuống Bootstrap 4

Bạn có thể tải xuống Bootstrap 4 từ https. //getbootstrap. com/docs/4. 1/bắt đầu/tải xuống/. Khi bạn nhấp vào liên kết này, bạn sẽ thấy một màn hình như hình bên dưới -

Ở đây bạn có thể thấy hai nút -

• Tải xuống - Nhấp vào đây, bạn có thể tải xuống các phiên bản CSS và JavaScript được biên dịch sẵn và rút gọn của Bootstrap. Không có tài liệu hoặc tệp mã nguồn gốc nào được bao gồm

• Nguồn tải xuống - Nhấp vào đây, bạn có thể tải các tệp tài liệu và mã nguồn JavaScript và Bootstrap SCSS mới nhất

Để hiểu rõ hơn và dễ sử dụng, chúng tôi sẽ sử dụng phiên bản Bootstrap được biên dịch sẵn trong suốt hướng dẫn. Khi các tệp được tuân thủ và thu nhỏ, bạn không cần phải bận tâm mỗi lần bao gồm các tệp riêng biệt cho chức năng riêng lẻ

Cấu trúc tệp

Bootstrap 4 được biên dịch sẵn

Khi phiên bản đã biên dịch Bootstrap 4 được tải xuống, hãy giải nén tệp ZIP và bạn sẽ thấy cấu trúc tệp/thư mục sau –

Như bạn có thể thấy, có CSS ​​và JS được biên dịch (bootstrap. *), cũng như CSS và JS được biên dịch và rút gọn (bootstrap. tối thiểu. *)

Mã nguồn Bootstrap 4

Nếu bạn đã tải xuống mã nguồn Bootstrap 4, thì cấu trúc tệp sẽ như sau -

• Các tệp bên dưới js/ và scss/ là mã nguồn cho Bootstrap CSS và JavaScript

• Thư mục dist/ bao gồm mọi thứ được liệt kê trong phần tải xuống được biên dịch trước ở trên

• Tài liệu/ví dụ/, bao gồm mã nguồn cho tài liệu Bootstrap và ví dụ về cách sử dụng Bootstrap

  Thiết kế web đáp ứng là tạo ra các trang web tự động điều chỉnh để trông đẹp mắt trên tất cả các thiết bị, từ điện thoại nhỏ đến máy tính để bàn lớn

  Ví dụ Bootstrap

  
  Trang Bootstrap đầu tiên của tôi

  Thay đổi kích thước trang phản hồi này để xem hiệu ứng

  
  

  
   

  
     

  
       

  Cột 1

  Lorem ipsum dolor

  
     
  
     

  
       

  Cột 2

  Lorem ipsum dolor

  
     
  
     

  
       

  Cột 3

  Lorem ipsum dolor

  
     
  
   
  
  
  Tự mình thử »

  ---

  Lịch sử Bootstrap

  Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub

  Vào tháng 6 năm 2014 Bootstrap là No. 1 dự án trên GitHub

  ---

  Tại sao nên sử dụng Bootstrap?

  Ưu điểm của Bootstrap

  • dễ sử dụng. Bất kỳ ai chỉ có kiến ​​thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap
  • tính năng đáp ứng. CSS đáp ứng của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn
  • Cách tiếp cận đầu tiên trên thiết bị di động. Trong Bootstrap 3, các kiểu ưu tiên thiết bị di động là một phần của khung cốt lõi
  • Tính tương thích của trình duyệt web. Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera)

  ---

  Phiên bản Bootstrap

  Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn;

  Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ

  Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery

  Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng

  Lấy Bootstrap ở đâu?

  Có hai cách để bắt đầu sử dụng Bootstrap trên trang web của riêng bạn

  Bạn có thể

  • Tải xuống Bootstrap từ getbootstrap. com
  • Bao gồm Bootstrap từ CDN

  ---

  Đang tải xuống Bootstrap

  Nếu bạn muốn tự download và host Bootstrap thì vào getbootstrap. com, và làm theo hướng dẫn ở đó

  ---

  ---

  Bootstrap CDN

  Nếu bạn không muốn tự tải xuống và lưu trữ Bootstrap, bạn có thể đưa nó vào từ CDN (Mạng phân phối nội dung)

  MaxCDN cung cấp hỗ trợ CDN cho CSS và JavaScript của Bootstrap. Bạn cũng phải bao gồm jQuery

  MaxCDN

  
  

  
  

  
  

  Một lợi thế của việc sử dụng Bootstrap CDN.
  Nhiều người dùng đã tải xuống Bootstrap từ MaxCDN khi truy cập một trang web khác. Do đó, nó sẽ được tải từ bộ đệm khi họ truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng một khi người dùng yêu cầu một tệp từ nó, nó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn.

  jQuery
  Bootstrap sử dụng plugin jQuery cho JavaScript (như phương thức, chú giải công cụ, v.v.). Tuy nhiên nếu bạn chỉ dùng phần CSS của Bootstrap thì không cần jQuery.

  ---

  Tạo trang web đầu tiên với Bootstrap

  1. Thêm loại tài liệu HTML5

  Bootstrap sử dụng các phần tử HTML và thuộc tính CSS yêu cầu loại tài liệu HTML5

  Luôn bao gồm loại tài liệu HTML5 ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác

  
  
   
     

  
   
  

  2. Bootstrap 3 ưu tiên thiết bị di động

  Bootstrap 3 được thiết kế để tương thích với các thiết bị di động. Kiểu đầu tiên trên thiết bị di động là một phần của khung cốt lõi

  Để đảm bảo hiển thị chính xác và thu phóng cảm ứng, hãy thêm thẻ sau vào bên trong phần tử

  Phần width=device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị)

  Phần initial-scale=1 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên

  3. Hộp đựng

  Bootstrap cũng yêu cầu phần tử chứa để bọc nội dung trang

  Có hai lớp container để lựa chọn

  1. Lớp .container cung cấp vùng chứa có chiều rộng cố định đáp ứng
  2. Lớp .container-fluid cung cấp một thùng chứa có chiều rộng đầy đủ, bao trùm toàn bộ chiều rộng của khung nhìn

  ---

  Hai trang Bootstrap cơ bản

  Ví dụ sau đây hiển thị mã cho trang Bootstrap cơ bản (với vùng chứa chiều rộng cố định đáp ứng)

  Bootstrap 4 CDN là gì?

  Bootstrap CDN là mạng phân phối nội dung miễn phí giúp chúng tôi tải nhanh các thư viện CSS, Javascript và jQuery của Bootstrap vào các dự án của mình để làm cho dự án phản hồi nhanh, thân thiện với thiết bị di động và hấp dẫn< . .

  Bootstrap CDN dùng để làm gì?

  BootstrapCDN là mạng phân phối nội dung công cộng. Nó cho phép người dùng tải CSS, JavaScript và hình ảnh từ xa từ máy chủ của nó . Được sử dụng bởi hơn 7. 9 triệu trang web trên toàn thế giới (bao gồm 30% trong số 10 nghìn trang web hàng đầu), BootstrapCDN phục vụ hơn 70 tỷ yêu cầu mỗi tháng.

  Có thể truy cập Bootstrap qua CDN không?

  CDN Bootstrap . you can include it from a CDN (Content Delivery Network).

  Làm cách nào để sử dụng CSS trong Bootstrap 4?

  Cách sử dụng Bootstrap CSS. Để sử dụng Bootstrap CSS, bạn cần phải tích hợp nó vào môi trường phát triển của bạn . Để làm điều đó, bạn chỉ cần tạo một thư mục trên máy tính của mình. Trong thư mục đó, hãy lưu các tệp CSS và JS đã biên dịch của bạn và một tệp HTML mới nơi bạn sẽ tải Bootstrap.