Cách sử dụng plugin 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ị phù hợp 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)

Plugin Bootstrap có thể được định nghĩa là một thành phần bổ sung bổ sung một tính năng cụ thể cho một thành phần web hiện có và hỗ trợ tùy chỉnh của nó. Bootstrap v4 đi kèm với một số plugin jQuery giúp các thành phần khác nhau trên trang web trở nên hấp dẫn và tương tác hơn (e. g. plugin thả xuống, plugin nút, v.v. ). Chúng ta có thể làm việc với plugin Bootstrap này một cách rất đơn giản chỉ bằng cách viết vài dòng mã trong tệp HTML và nó không yêu cầu kiến ​​thức chi tiết về lập trình JavaScript. Chúng tôi có thể đưa các plugin Bootstrap vào tệp HTML của mình theo cách sau

• Bao gồm cá nhân — chúng tôi có tùy chọn bao gồm tệp JavaScript riêng lẻ theo yêu cầu vào tệp HTML của chúng tôi hoặc tệp JavaScript hoàn chỉnh cũng có định nghĩa về các plugin khác. Chúng ta có thể sử dụng cá nhân *. tập tin js (e. g. cái nút. js, v.v. ) trong tệp HTML của chúng tôi, nơi chúng tôi chỉ yêu cầu nâng cao và tùy chỉnh chỉ thành phần nút trên trang web của chúng tôi. Cách tiếp cận như vậy để nhập tệp JavaScript plugin với một thành phần duy nhất được gọi là Bao gồm cá nhân
• Bao gồm tất cả (biên dịch cùng một lúc) — Thay vì chỉ nhập tệp JavaScript riêng lẻ (e. g. cái nút. js, v.v. ), chúng tôi có thể nhập tệp plugin hoàn chỉnh (e. g. khởi động. tối thiểu. js, v.v. ) có định nghĩa về tất cả các thành phần bao gồm cả thành phần nút. Phương pháp nhập tệp JavaScript plugin với tất cả các thành phần này được gọi là phương pháp bao gồm tất cả.
  Sau đây là các tệp JavaScript có trong Bootstrap-4. 0. 0 dưới dạng plugin. Chúng có thể được nhập riêng lẻ hoặc theo phương pháp bao gồm tất cả sau khi nhập bootstrap. tối thiểu. js vào tệp HTML.

Bootstrap-4. 0. 0 plugin
Những plugin này có thể nằm trong gói bootstrap-4. 0. 0-alpha. 2/dist/src/umd. (Cách tiếp cận cá nhân). Có tổng cộng 11 plugin như hình bên dưới.

Những thứ này có thể nằm trong gói bootstrap-4. 0. 0-alpha. 2\dist\js. (Cách tiếp cận bao gồm tất cả).

Bootstrap-3. 3. 6 plugin
Các plugin này có thể nằm trong gói bootstrap-3. 3. 6-dist\js (Cách tiếp cận toàn diện).

Tóm tắt plugin cho Bootstrap v4
Chúng tôi có thể so sánh số lượng plugin có trong Bootstrap v3. 3. 6 so với Bootstrap v4. 0. 0 và kết luận rằng các plugin sau và một phần tính năng của plugin đã bị loại bỏ trong phiên bản mới nhất. Các plugin bị loại bỏ và các tính năng của chúng như sau.

• Gắn jQuery (gắn. js) đã bị loại bỏ trong Bootstrap v4
• Một số tính năng của nút. js Plugin jQuery đã bị loại bỏ trong Bootstrap v4 bao gồm tính năng nút đầy đủ trạng thái, $(). nút (chuỗi) và $(). phương thức nút ('đặt lại')

Các plugin có trong gói Bootstrap v4
Các plugin sau có trong gói Bootstrap v4 với các tính năng được cải thiện.

• Báo động. js
• Cái nút. js
• băng chuyền. js
• Sụp đổ. js
• thả xuống. js
• phương thức. js
• cửa sổ bật lên. js
• cuộn giấy. js
• Chuyển hướng. js
• Chú giải công cụ. js
• sử dụng. js

Ghi chú. –  Vì tất cả plugin Bootstrap đều phụ thuộc vào jQuery. Do đó, jQuery phải luôn được đưa vào tệp HTML ở vị trí trước các tệp plugin

Ví dụ về cách tiếp cận plugin Bao gồm tất cả trong Bootstrap v4 (sử dụng cảnh báo. js)
Như đã thảo luận trước đó, theo phương pháp này, chúng tôi đang nhập tệp JavaScript bao gồm tất cả (dist/js/bootstrap. tối thiểu. js) như được hiển thị trong tệp HTML sau.

	
This is an example on All-inclusive plugin approach in Bootstrap v4 (using alert.js)
	

		 ×  
		This is a Warning!
		You are unauthorized to enter this page.
	
	
	
	

Sau đây là đầu ra cho mã Bootstrap HTML

Ví dụ về cách tiếp cận plugin riêng lẻ trong Bootstrap v4 (sử dụng cảnh báo. js)
Như đã thảo luận trước đó, theo phương pháp này, chúng tôi đang nhập một tệp JavaScript riêng lẻ (dist/js/umd/alert. js) như được hiển thị trong tệp HTML sau.

    
This is an example on individual plugin approach in Bootstrap v4 (using alert.js)
	

		 ×  
		This is a Warning!
		You are unauthorized to enter this page.
	
	
	
	

 

Sau đây là đầu ra cho mã HTML Bootstrap ở trên

Chúng ta có thể quan sát thấy rằng trong cả hai cách tiếp cận, chúng ta đã mua được cùng một đầu ra. Chúng tôi có thể sử dụng bất kỳ phương pháp nào trong số này để nhập plugin nhưng chúng tôi phải lưu ý rằng trong trường hợp chúng tôi đang nhập plugin chọn lọc và có sự phụ thuộc vào tập lệnh js hoặc css khác có thể không có trong cùng một tệp thì chúng tôi cần . Tuy nhiên, nếu chúng tôi sử dụng phương pháp bao gồm tất cả, chúng tôi không cần phải lo lắng về các phụ thuộc như vậy vì tất cả tập lệnh được yêu cầu sẽ có trong một tệp js và css duy nhất

Thông tin thêm về trình cắm Bootstrap
Các tính năng sau được hỗ trợ bởi trình cắm Bootstrap.

• API dữ liệu— API dữ liệu, nếu được bao gồm và bật, thì chúng tôi có thể truy cập tất cả các plugin Bootstrap thông qua API dữ liệu. Trong trường hợp như vậy, chúng tôi cần viết một dòng mã JavaScript để sử dụng bất kỳ tính năng nào của plugin. Nếu API dữ liệu không được mong muốn thì chúng tôi có thể tắt API dữ liệu bằng cách sử dụng lệnh sau

$(document).off('.data-api')

Ngoài ra, chúng tôi có thể tắt có chọn lọc quyền truy cập plugin thông qua API dữ liệu với sự trợ giúp của lệnh sau

$(document).off('.button.data-api')

• API JavaScript— chúng tôi cũng có thể truy cập tất cả các plugin thông qua API JavaScript có các phương thức có thể xâu chuỗi trả về bộ sưu tập hoặc đối tượng mà chúng tôi có thể kích hoạt sự kiện mong muốn như được hiển thị bên dưới

$(".btn.warning").button("toggle").addClass("decorator")

Theo cách tiếp cận này, chúng tôi có thể thêm vào chương trình của mình các tính năng tùy chỉnh mong muốn trên đầu các plugin Bootstrap

Làm cách nào để đưa Bootstrap vào plugin?

Bootstrap có plugin không?

Bạn sẽ tìm plugin cho Bootstrap ở đâu?

Trình cắm JavaScript Bootstrap là gì?