Bootstrap là gì?


512

Có rất nhiều câu hỏi ở đây liên quan đến Bootstrap. Tôi thấy rất nhiều người sử dụng nó. Vì vậy, tôi đã cố gắng nghiên cứu nó và tôi đã tìm thấy trang web Bootstrap chính thức , nhưng chỉ có một phần tải xuống và một vài từ sau đó. Không có gì giải thích nó là gì ... Tôi chỉ hiểu rằng đó là một người trợ giúp trực tiếp. Tôi đã cố gắng tìm một cái gì đó bằng cách Googling, nhưng không tìm thấy gì cụ thể. Tất cả mọi thứ tôi tìm thấy đều liên quan đến định nghĩa khoa học máy tính.

Vì vậy, câu hỏi của tôi là:

  • Bootstrap là gì?
  • Nó được sử dụng để làm gì và nó giúp phát triển front-end như thế nào?
  • Tôi cũng muốn một số chi tiết giải thích nó.

Câu hỏi này được trả lời tốt . Vui lòng suy nghĩ kỹ về việc đăng câu trả lời mới, đặc biệt nếu bạn có ý định sao chép-dán câu trả lời của mình từ nơi khác.
meagar

Với tất cả sự tôn trọng, @meagar, câu hỏi dường như đang yêu cầu một câu trả lời rất cụ thể và chính xác, và câu trả lời được chấp nhận một cách tao nhã sẽ tránh được nó. Điều đó có nghĩa là, về mặt kỹ thuật, nó không được trả lời tốt. Sau khi đọc từng câu trả lời (bao gồm cả câu trả lời đã bị xóa), tôi hy vọng, tôi hy vọng, giải thích Bootstrap là gì, nói chung và dễ hiểu, chủ yếu nhằm giảm sự nhầm lẫn của người mới bắt đầu (đó là cách tôi hiểu câu hỏi này).
tao

Câu trả lời:


271

Đó là khung mã nguồn mở HTML, CSS và JavaScript (ban đầu được tạo bởi Twitter) mà bạn có thể sử dụng làm cơ sở để tạo các trang web hoặc ứng dụng web.

Cập nhật

Trang web bootstrap chính thức được cập nhật và bao gồm một định nghĩa rõ ràng.

"Bootstrap là khung HTML, CSS và JS phổ biến nhất để phát triển các dự án đầu tiên trên thiết bị di động đáp ứng trên web."

"Được thiết kế và xây dựng với tất cả tình yêu trên thế giới bởi @mdo@fat ."


2
@hutchonoid: bootply có miễn phí luôn không? sự khác biệt giữa Joomla và bootply là gì? cái nào tốt hơn ?
logan

9
@logan Joomla và Bootply không thể so sánh được. Joomla là một hệ thống quản lý nội dung được xây dựng trên PHP và SQL trong khi Bootply là một trang web được sử dụng để thử nghiệm với khung Bootstrap (hoàn toàn khác nhau). Hãy nghĩ về Bootply như một JSFiddle dành riêng cho Bootstrap. Và vâng, Bootply luôn miễn phí.
APAD1

15
Tôi nghĩ rằng điều phù hợp nhất để trả lời câu hỏi này sẽ là theo liên kết có nhãn "Ví dụ" được cung cấp trong câu trả lời ở trên. Sao chép / dán định nghĩa của Bootstrap từ trang web của họ rõ ràng là vô ích khi người dùng đã đăng câu hỏi được đề cập rõ ràng đã xem trang web bootstrap. Tôi không nghĩ rằng việc nhìn thấy cùng một văn bản từ trang web của họ sẽ có ý nghĩa hơn đơn giản vì giờ đây nó được viết bằng chữ Bold.
Mihaela

13
@hutchonoid Có thể là một định nghĩa rõ ràng cho bạn vì bạn đã sử dụng Bootstrap trong một thời gian dài, nhưng hãy tin tôi, định nghĩa đó trên trang web của họ là lý do tại sao tôi tìm kiếm câu trả lời này - Tôi không thể hiểu ý nghĩa của nó. Vì vậy, tôi hoàn toàn đồng ý với Mihaela về điều này. Nếu tôi tìm kiếm câu trả lời cho câu hỏi này, tôi không muốn nó là cùng một trích dẫn từ trang web, chỉ ở phông chữ lớn hơn. Lời giải thích của bạn không có ý nghĩa bởi vì những người dùng đã hỏi điều này trong quá khứ không cần câu trả lời nữa trong thời điểm hiện tại và bất cứ ai ở hiện tại chắc chắn sẽ thấy mô tả đầu tiên từ trang web.
Anderson

2
Có lẽ một số đề cập đến các dự án nó phù hợp nhất cho? (Tức là các trang web tạm thời, ứng dụng web nhỏ, trang web vi mô, v.v?)
Chuck Le Mông

94

Bootstrap là một khung Javascript mã nguồn mở được phát triển bởi nhóm tại Twitter. Nó là sự kết hợp của mã HTML, CSS và Javascript được thiết kế để giúp xây dựng các thành phần giao diện người dùng. Bootstrap cũng được lập trình để hỗ trợ cả HTML5 và CSS3.

Ngoài ra, nó được gọi là Front-end-framework.

Bootstrap là một bộ công cụ miễn phí để tạo một trang web và ứng dụng web.

Nó chứa các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biểu mẫu, nút, điều hướng và các thành phần giao diện khác, cũng như các phần mở rộng JavaScript tùy chọn.

Một số lý do để lập trình viên ưa thích Bootstrap Framework

  1. Dễ dàng bắt đầu

  2. Hệ thống lưới lớn

  3. Kiểu dáng cơ sở cho hầu hết các thành phần HTML (Kiểu chữ, Mã, Bảng, Biểu mẫu, Nút, Hình ảnh, Biểu tượng)

  4. Danh sách đầy đủ các thành phần

  5. Các plugin Javascript kèm theo

Lấy từ About Bootstrap Framework


16
Nó tạo cho tôi nhiều thứ như một bộ sưu tập các thành phần hoặc vật dụng hơn là một "khung". Bạn có thể làm rõ chính xác những gì cấu thành một "khung" và khi một thư viện thành phần dừng là một thư viện thành phần và bắt đầu là một "khung?" Có cái gì đó để làm với "hệ thống lưới?"
Kirby L. Wallace

25

Bootstrap, như tôi biết, là một CSS được xác định rõ. Mặc dù sử dụng Bootstrap bạn cũng có thể sử dụng JavaScript, jQuery, v.v. Nhưng điểm khác biệt chính là, khi sử dụng Bootstrap, bạn chỉ có thể gọi tên lớp và sau đó bạn nhận được kết quả đầu ra trên biểu mẫu HTML. ví dụ tô màu các nút định hình văn bản, sử dụng bố cục. Đối với tất cả điều này, bạn không phải viết một tệp CSS thay vì bạn chỉ phải sử dụng tên lớp chính xác để định hình biểu mẫu HTML của mình.


10
Trên thực tế, bootstrap không chỉ là một 'tập tin css'.
Công thức

1
Tôi đồng ý với @Recipe không chỉ về tệp CSS
Sujay sreedhar

1
Cá nhân tôi đồng ý với Blitz. Không phải ở chỗ anh ta có một danh sách đầy đủ các tính năng của Bootstrap, mà là trong (các) cửa hàng phức tạp của tôi, tôi chủ yếu sử dụng mã hóa thuần túy và sử dụng Bootstrap cho các tính năng css cơ bản nhất của nó. Đó là loại cốt lõi của sức mạnh của nó.
Suamere

1
Đây là một câu trả lời rất kém mà, thật tệ, giải thích những gì CSS (và chỉ CSS) làm. Bị hạ bệ. Về cơ bản, nó đơn giản giải thích rằng bạn có thể sử dụng CSS và sau đó tham chiếu các lớp để sửa đổi giao diện người dùng của mình. Không có gì để làm với bootstrap chính nó trên các tài nguyên đóng gói khác.
RichieHH

22

Nói một cách đơn giản hơn, bạn có thể hiểu Bootstrap như một khung web mặt trước được tạo bởi Twitter để tạo nhanh hơn các ứng dụng web đáp ứng thiết bị. Bootstrap cũng có thể được hiểu chủ yếu là một tập hợp các lớp CSS được định nghĩa trong đó có thể được sử dụng trực tiếp. Nó sử dụng CSS, javascript, jQuery, v.v. trong nền để tạo kiểu, hiệu ứng và hành động cho các phần tử Bootstrap.

Bạn có thể biết rằng chúng tôi sử dụng CSS để tạo kiểu cho các thành phần trang web và tạo các lớp và gán các lớp cho các thành phần trang web để áp dụng kiểu cho chúng. Bootstrap ở đây làm cho việc thiết kế đơn giản hơn vì chúng ta chỉ phải bao gồm các tệp Bootstrap và đề cập đến tên lớp được xác định trước của Bootstrap cho các thành phần trang web của chúng ta và chúng sẽ được tạo kiểu tự động thông qua Bootstrap. Thông qua đó, chúng tôi thoát khỏi việc viết các lớp CSS của riêng mình để tạo kiểu cho các thành phần trang web. Quan trọng nhất là Bootstrap được thiết kế theo cách làm cho thiết bị trang web của bạn phản ứng nhanh và đó là mục đích chính của nó. Các lựa chọn thay thế khác cho Bootstrap có thể là - các khung Foundation , Materialize , v.v.

Bootstrap giúp bạn không phải viết nhiều mã CSS và nó cũng tiết kiệm thời gian của bạn mà bạn dành cho việc thiết kế các trang web.


18

Bootstrap là một khung JavaScript, CSS mã nguồn mở ban đầu được phát triển cho ứng dụng twitter bởi nhóm các nhà thiết kế và phát triển của twitter. Sau đó, họ phát hành nó cho nguồn mở. Là một người dùng lâu năm của twitter bootstrap tôi thấy rằng đó là một trong những trang web tốt nhất để thiết kế các trang web đáp ứng sẵn sàng cho thiết bị di động. Nhiều plugin CSS và Javascript có sẵn để thiết kế trang web của bạn ngay lập tức. Đó là loại khung thiết kế mẫu nhanh chóng. Một số người phàn nàn rằng các tệp CSS bootstrap rất nặng và mất thời gian để tải nhưng những tuyên bố này được thực hiện bởi những người lười biếng. Bạn không cần phải giữ bootstrap.css hoàn chỉnh trong trang web của mình. Bạn luôn có tùy chọn xóa kiểu cho các thành phần mà bạn không cần cho trang web của mình. Ví dụ, nếu bạn chỉ sử dụng các thành phần cơ bản như biểu mẫu và nút thì bạn có thể xóa các thành phần khác như accordion, v.v. khỏi tệp CSS chính. Để bắt đầu học hỏi về bootstrap, bạn có thể tải xuống các mẫu và thành phần cơ bản từtrang web getbootstrap và để phép thuật xảy ra.


4

Disclaimer: Tôi đã sử dụng bootstrap trong quá khứ, nhưng tôi chưa bao giờ thực sự đánh giá cao những gì nó thực sự là trước đây, mô tả này đến từ tôi đến với định nghĩa của riêng tôi, ngày hôm nay. Và tôi biết rằng bootstrap v4 đã hết, nhưng tôi thấy tài liệu bootstrap v3 rõ ràng hơn nhiều, vì vậy tôi đã sử dụng nó. Thư viện sẽ không thay đổi về cơ bản những gì nó cung cấp.

Tóm tắt

Bootstrap là một tập hợp các tệp CSS và javascript cung cấp một số kiểu mặc định đẹp mắt cho các phần tử html tiêu chuẩn và một vài đối tượng nội dung web phổ biến không phải là các phần tử html tiêu chuẩn.

Để tạo sự tương tự, nó giống như áp dụng một chủ đề trong powerpoint, nhưng đối với trang web của bạn: nó làm cho mọi thứ trông khá đẹp mà không cần quá nhiều nỗ lực ban đầu.

Nó bao gồm những gì?

Tài liệu v3 chính thức chia nó thành ba phần:

Những thứ này tương ứng với ba điều chính mà Bootstrap cung cấp:

  • Các tệp CSS đơn giản tạo kiểu cho các phần tử html tiêu chuẩn. Vì vậy, Bootstrap làm cho các yếu tố tiêu chuẩn của bạn trông khá đẹp mắt. ví dụ: html:<input class="btn btn-default" type="button" value="Input">Click me</button>
  • Các tệp CSS sử dụng kiểu dáng trên các phần tử html tiêu chuẩn để biến chúng thành một phần tử không phải là phần tử html tiêu chuẩn mà phần tử Bootstrap tiêu chuẩn (ví dụ: https://getbootstrap.com/docs/3.3/components/#proTHER ). Theo cách này, Bootstrap mở rộng danh sách các thành phần web "chuẩn" theo cách trực quan nhất quán. ví dụ: html:<span class="glyphicon glyphicon-align-left"></span>
  • Các lớp CSS được thiết kế với jQuery. Trong nội bộ, Bootstrap sử dụng các bộ chọn jQuery để sửa đổi các kiểu đang hoạt động và tương tác với DOM và do đó cung cấp cho người dùng khả năng tương tự. Tôi tin rằng điều này đòi hỏi nhiều lời giải thích hơn, vì vậy ...

Sử dụng Javascript / jQuery

Bootstrap mở rộng jQuery khá nhiều. Nếu chúng ta nhìn vào mã nguồn, chúng ta có thể thấy rằng nó sử dụng jQuery để làm những việc như: thiết lập trình nghe cho sự kiện keydown để tương tác với các danh sách thả xuống . Nó thực hiện tất cả các thiết lập jQuery này khi bạn nhập nó vào <script>thẻ của mình , vì vậy bạn cần đảm bảo jQuery được tải trước khi Bootstrap được.

Ngoài ra, nó liên kết javascript với DOM chặt chẽ hơn jQuery đơn giản, cung cấp giao diện lớp javascript . ví dụ: bật một nút theo chương trình . Hãy nhớ rằng CSS chỉ định nghĩa một vật thể trông như thế nào, vì vậy công việc chính của các hoạt động này sẽ có xu hướng là sửa đổi các lớp CSS nào áp dụng cho phần tử tại thời điểm đó. Loại thay đổi này, dựa trên đầu vào của người dùng, không thể được thực hiện bằng CSS đơn giản.

Có những tương tác tiêu chuẩn khác với người dùng mà chúng tôi từ chối sử dụng internet mà không được CSS bao phủ. Giống như, nhấp vào một liên kết cuộn bạn xuống một trang thay vì thay đổi các trang. Một trong những điều mà Bootstrap mang lại cho bạn là một cách dễ dàng để thực hiện hành vi này trên trang web của riêng bạn.

Tiêu chuẩn

Tôi đã đề cập đến từ "tiêu chuẩn" rất nhiều ở đây, và vì lý do tốt. Tôi nghĩ rằng điều tốt nhất mà Bootstrap cung cấp là một bộ các tiêu chuẩn đẹp mắt. Bạn có thể tự do sửa đổi chủ đề mặc định nhiều như bạn muốn, nhưng đó là một đường cơ sở tốt hơn so với html, css và js thô. Và đây là lý do tại sao nó được gọi là "khung".

Các trình duyệt web khác nhau có các kiểu mặc định khác nhau và có thể hoạt động khác nhau và cần các tiền tố CSS khác nhau và những thứ tương tự. Một lợi ích lớn của Bootstrap là nó đáng tin cậy hơn nhiều so với việc tự viết tất cả những thứ trên trình duyệt chéo (bạn vẫn sẽ gặp vấn đề, tôi chắc chắn, nhưng nó dễ dàng hơn).

Tôi nghĩ rằng Bootstrap được ưa thích hơn khi gulp và babel không phổ biến. Nhìn vào Bootstrap dường như đến từ một thời gian trước khi mọi người biên dịch javascript của họ. Nó vẫn có liên quan, nhưng bạn có thể nhận được một số lợi ích từ các nguồn khác ngay bây giờ.

Các phiên bản CSS gần đây hơn đã cho phép bạn xác định các hiệu ứng chuyển tiếp giữa các danh sách tĩnh này khi chúng thay đổi. Phiên bản gốc của Bootstrap thực sự có trước việc áp dụng rộng rãi khả năng này trong các trình duyệt, vì vậy chúng vẫn có các lớp hoạt hình riêng. Có một vài phần của Bootstrap giống như thế này: rằng những thứ khác đã xuất hiện xung quanh nó và khiến nó trông hơi dư thừa.


3

Bootstrap là một khung công tác HTML, CSS, JS với nhiều thành phần cho phép bạn tạo các trang web hoặc ứng dụng web đẹp và hiện đại rất nhanh.

Các trang web sau chứa các ví dụ, thành phần và các thành phần có thể sử dụng lại mà bạn có thể tích hợp vào dự án của mình bằng khung bootstrap

khởi động.com

startbootstrap.com

bootdey.com


1

Bootstrap là khung công tác nguồn mở phổ biến và được sử dụng rộng rãi nhất trên thế giới để phát triển với HTML, CSS và JS. Nó là một khung kết thúc trước của HTML. Bootstrap giúp xây dựng các trang web hoặc ứng dụng web đáp ứng và hệ thống lưới 12 cột giúp điều chỉnh linh hoạt trang web thành độ phân giải màn hình phù hợp. Phiên bản hiện tại của bootstrap là 4.3.1 và nhóm bootstrap cũng đã chính thức công bố phiên bản Bootstrap 5 và thay đổi như loại bỏ jquery khỏi bootstrap. Một số lý do quan trọng tại sao khung bootstrap được ưa thích nhất là

  • Nó rất dễ dàng để sử dụng
  • Bootstrap có một hỗ trợ cộng đồng lớn
  • Tùy chỉnh có thể được thực hiện dễ dàng
  • Nó làm tăng tốc độ phát triển
  • Phản hồi

    Để biết thêm chi tiết, bạn có thể kiểm tra trang web chính thức: https://getbootstrap.com/

Nguồn: https://vmokshagroup.com/blog/bootstrap- nhược điểm /


1

Theo các tiêu chuẩn và thuật ngữ web ngày nay, tôi muốn nói Bootstrap thực sự không phải là một khung , mặc dù đó là những gì trang web của họ tuyên bố. Hầu hết các nhà phát triển xem xét các khung Angular, Vue và React, trong khi Bootstrap thường được gọi là " thư viện ".

Nhưng, chính xác và chính xác, Bootstrap là một bộ sưu tập các tiện ích thiết kế CSS, JavaScript và HTML đầu tiên trên thiết bị di động nhằm cung cấp các phương tiện để phát triển các yếu tố web thường được sử dụng nhanh hơn đáng kể (và thông minh hơn) so với việc phải mã hóa chúng từ đầu .

Một vài nguyên tắc cốt lõi góp phần vào thành công của Bootstrap:

  • nó có thể tái sử dụng
  • nó linh hoạt (nghĩa là: cho phép các hệ thống lưới tùy chỉnh, thay đổi các điểm dừng đáp ứng, kích thước máng xối cột hoặc màu trạng thái một cách dễ dàng; như một quy tắc chung, hầu hết các cài đặt được điều khiển bởi các biến toàn cục)
  • nó trực quan
  • đó là mô-đun (cả JavaScript và (S) CSS sử dụng phương pháp mô-đun; người ta có thể dễ dàng tìm thấy các hướng dẫn về cách tạo các bản dựng Bootstrap tùy chỉnh, chỉ bao gồm các phần họ cần)
  • có khả năng tương thích trình duyệt trên trung bình
  • khả năng truy cập web ra khỏi hộp (sẵn sàng đọc màn hình)
  • nó được ghi chép lại khá tốt

Nó chứa các mẫu thiết kế và chức năng cho: bố cục, kiểu chữ, biểu mẫu, điều hướng, menu (bao gồm cả thả xuống), nút, bảng, huy hiệu, phương thức, cảnh báo, tab, đóng mở, accordion, băng chuyền, danh sách, bảng, phân trang, tiện ích phương tiện (bao gồm nhúng, thay thế hình ảnh và hình ảnh), tiện ích đáp ứng, tiện ích dựa trên màu sắc (chính, phụ, nguy hiểm, cảnh báo, thông tin, sáng, tối, tắt tiếng, trắng), các tiện ích khác (vị trí, lề, đệm, kích thước, khoảng cách, căn chỉnh, khả năng hiển thị), scrollspy, affix, tooltips, popovers.


Theo mặc định, nó dựa vào jQuery, nhưng bạn sẽ tìm thấy các biến thể miễn phí của jQuery được cung cấp bởi mỗi khung công tác JavaScript tiến bộ phổ biến hiện đại:

Làm việc với Bootstrap phụ thuộc rất nhiều vào việc áp dụng các lớp nhất định (hoặc, tùy thuộc vào khung JS: chỉ thị, phương thức hoặc thuộc tính / đạo cụ) và sử dụng các cấu trúc đánh dấu cụ thể.

Tài liệu thường chứa các ví dụ chung có thể dễ dàng sao chép và dán làm mẫu khởi động.


Một lợi thế khác của việc phát triển với Bootstrap là cộng đồng sôi động của nó, được dịch sang rất nhiều chủ đề, mẫu và plugin có sẵn cho nó, hầu hết là nguồn mở (ví dụ: lịch, chọn ngày / giờ, plugin để quản lý nội dung dạng bảng, như cũng như các thư viện / bộ sưu tập thành phần được xây dựng trên Bootstrap, chẳng hạn như MDB, mẫu danh mục đầu tư, mẫu quản trị viên, v.v ...)

Cuối cùng, nhưng không kém phần quan trọng, Bootstrap đã được duy trì tốt trong nhiều năm qua, điều này khiến nó trở thành một lựa chọn vững chắc cho các ứng dụng / trang web sẵn sàng sản xuất.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.