Bootstrap là gì và bạn sử dụng nó như thế nào?

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Nó đượ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

Sau đây là ưu điểm chính của Bootstrap

• Nó rất dễ sử dụng. Bất kỳ ai có kiến ​​thức cơ bản về HTML và CSS đều có thể sử dụng Bootstrap
• Nó tạo điều kiện cho người dùng phát triển một trang web đáp ứng
• Nó tương thích trên hầu hết các trình duyệt như Chrome, Firefox, Internet Explorer, Safari và Opera, v.v.

Trang web đáp ứng là gì

Một trang web được gọi là trang web đáp ứng có thể tự động điều chỉnh để hiển thị tốt trên tất cả các thiết bị, từ điện thoại thông minh đến máy tính để bàn, v.v.

Gói Bootstrap chứa gì

Đoạn đầu đài. Bootstrap cung cấp cấu trúc cơ bản với Hệ thống lưới, kiểu liên kết và nền

CSS. Bootstrap đi kèm với tính năng cài đặt CSS toàn cầu, kiểu phần tử HTML cơ bản và hệ thống lưới nâng cao

Các thành phần. Bootstrap chứa rất nhiều thành phần có thể tái sử dụng được xây dựng để cung cấp biểu tượng, danh sách thả xuống, điều hướng, cảnh báo, cửa sổ bật lên, v.v.

Plugin JavaScript. Bootstrap cũng chứa rất nhiều plugin jQuery tùy chỉnh. Bạn có thể dễ dàng bao gồm tất cả hoặc từng cái một

tùy chỉnh. Các thành phần của Bootstrap có thể tùy chỉnh và bạn có thể tùy chỉnh các thành phần của Bootstrap, các biến LESS và các plugin jQuery để có được phong cách của riêng bạn

Bootstrap 4 là gì?

Bootstrap là phiên bản mới nhất và mới nhất của Bootstrap. Đây là khung HTML, CSS, JavaScript phổ biến nhất để phát triển các trang web đáp ứng, ưu tiên thiết bị di động

Bootstrap 3 so với. Bootstrap 4

Bootstrap 4 có một số thành phần mới, biểu định kiểu nhanh hơn, nhiều nút hơn, hiệu ứng hơn và phản hồi nhanh hơn

Bootstrap 4 hỗ trợ một số 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

Ghi chú. Internet Explorer 9 trở xuống không được Bootstrap 4 hỗ trợ. Mặc dù Internet Explorer 8-9 đã hỗ trợ Bootstrap 3. Vì vậy, nếu bạn có Internet Explorer 8-9, bạn nên sử dụng Bootstrap 3. Bootstrap 3 là phiên bản ổn định nhất của Bootstrap và nó vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu

Bootstrap có tốt nhất không?

Bootstrap hiệu quả hơn để tạo một trang web đáp ứng và ưu tiên thiết bị di động nhưng nó không phải là tốt nhất trong ngành. Có một sự thay thế của Bootstrap tên là W3. CSS nhỏ hơn, nhanh hơn và dễ sử dụng hơn

Bootstrap là framework giúp bạn thiết kế website nhanh và dễ dàng hơn. Nó bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh, v.v. Nó cũng cung cấp cho bạn hỗ trợ cho các plugin JavaScript.  

Để tìm hiểu về hoạt động bên trong của Bootstrap, tôi đã liên hệ với Stas Demchuk, Kỹ sư phần mềm cao cấp tại. 8sph. com

Đây là những gì bạn cần biết

1. Trước hết, Bootstrap là khung phổ biến nhất để tạo bố cục. Dưới đây là một số lý do bổ sung để sử dụng Bootstrap

• 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
• Kiểu đầu tiên trên thiết bị di động là một phần của khuôn khổ
• Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Safari và Opera)

2. Bootstrap có một cộng đồng lớn và hỗ trợ thân thiện. Đối với tài nguyên truy cập

• Kiểm tra Blog Bootstrap
• Bạn có thể trò chuyện với Bootstrappers bằng IRC trong irc. nút miễn phí. máy chủ mạng, trong kênh ##bootstrap
• Hãy xem mọi người đang làm gì với Bootstrap tại Bootstrap Expo

3. Bootstrap rất dễ thiết lập và tạo bố cục hoạt động trong vòng chưa đầy một giờ

Họ có sẵn một mẫu cơ bản tại http. //getbootstrap. com/getting-started/#template và cũng là một tập hợp các ví dụ cho các nhu cầu khác nhau (http. //getbootstrap. com/bắt đầu/#ví dụ). Bạn chỉ có thể tải xuống kho lưu trữ bootstrap, chuyển đến thư mục docs/examples, sao chép/dán ví dụ bạn cần và làm việc với nó

4. Bạn không cần phải biết rõ về HTML và CSS để sử dụng bootstrap, đó là một điểm cộng nếu bạn là nhà phát triển phụ trợ và cần thực hiện một số thay đổi về giao diện người dùng

5. Nó hoàn toàn có thể tùy chỉnh, tôi có thể chọn thành phần nào tôi muốn sử dụng và sử dụng tệp biến để thực hiện nhiều tùy chỉnh hành vi và màu sắc hơn nữa

Tất cả những gì bạn cần làm là truy cập http. //getbootstrap. com/customize/ , chọn plugin bạn cần và nhấp vào tải xuống. Bootstrap cũng cung cấp một cách để ghi đè các biến nội bộ của nó cho người dùng nâng cao, nhưng chúng cung cấp các giá trị mặc định khá tốt, vì vậy bạn không nên lo lắng về điều này trừ khi bạn cần

6. Khi bạn cập nhật phiên bản Bootstrap, bạn sẽ không thấy nhiều lỗi vì nhóm cốt lõi của họ quan tâm đến khả năng tương thích ngược

7. Tài liệu của họ rất tuyệt. Dưới đây là một số tài nguyên để kiểm tra

• Hướng dẫn Bootstrap 3
• Học viện mật mã. Bootstrap
• Hướng dẫn thiết kế web. Bootstrap

8. Bootstrap cung cấp rất nhiều lớp trợ giúp giúp việc phát triển trang web đáp ứng dễ dàng và nhanh chóng

Bạn có thể biến bất kỳ bố cục chiều rộng cố định nào thành bố cục linh hoạt bằng cách thay đổi cha mẹ của bạn. lớp vùng chứa thành. chất lỏng chứa

Bootstrap cũng có. các lớp có thể nhìn thấy-*-* để giúp bạn kiểm soát cách hiển thị các phần của mình trên máy tính bảng và thiết bị di động. Ví dụ

Trong trường hợp này, div sẽ được hiển thị dưới dạng phần có hiển thị. chỉ chặn trên điện thoại và máy tính bảng. Nó sẽ được ẩn trên máy tính để bàn

9. Các thành phần Bootstrap thích nghi tốt với hệ sinh thái của các Khung JS MVC phổ biến như Angular. Bootstrap cung cấp một số cách để đưa nó vào dự án của bạn

sử dụng bower

bower cài đặt bootstrap

sử dụng npm

npm cài đặt bootstrap

Và chỉ cần thêm thẻ script có url vào nguồn bootstrap trên CDN

Chúng tôi cũng có ui-bootstrap cho Angular. js và Reac-bootstrap cho React. Bạn cũng có thể cài đặt chúng qua Bower và npm. Và sau đó, ví dụ, để tạo phần tử thu gọn, bạn chỉ cần tạo đánh dấu tương tự

Thay vì thực hiện nhiều cấu hình jquery như bình thường

10. Bootstrap giải quyết rất nhiều sự cố giữa các trình duyệt và bạn không cần phải lo lắng về điều đó trong hầu hết thời gian

Ghi chú. Bootstrap được thiết kế để hoạt động với các trình duyệt di động và máy tính để bàn mới nhất. Điều này có nghĩa là màn hình có thể khác trong các trình duyệt cũ hơn và có thể hiển thị khác, mặc dù theo tài liệu, màn hình phải có đầy đủ chức năng

Dưới đây là một vài ảnh chụp màn hình về khả năng tương thích của trình duyệt

Đây là liên kết đến danh sách các lỗi trình duyệt mà Bootstrap phải xử lý

Đây là liên kết đến danh sách trình duyệt hỗ trợ các tính năng CSS3 và HTML5

Ghi chú bổ sung

Đôi khi, bạn có thể muốn in các bố cục của mình nhưng bạn nên biết rằng việc in ấn có thể phức tạp. Dưới đây là một số điều cần chú ý

“Kể từ Chrome v32 và bất kể cài đặt lề, Chrome sử dụng chiều rộng khung nhìn hẹp hơn đáng kể so với kích thước giấy vật lý khi giải quyết các truy vấn phương tiện trong khi in trang web. Điều này có thể dẫn đến lưới cực nhỏ của Bootstrap được kích hoạt bất ngờ khi in. Xem #12078 để biết một số chi tiết. ”

Để biết thêm thông tin, hãy xem phần này về in ấn.  

Trình duyệt chứng khoán Android. “Android 4. 1 (và một số bản phát hành mới hơn rõ ràng) đi kèm với ứng dụng Trình duyệt làm trình duyệt web mặc định được lựa chọn (trái ngược với Chrome). Thật không may, ứng dụng Trình duyệt có rất nhiều lỗi và không nhất quán với CSS nói chung. ”

Kích thước hộp. Một số chương trình của bên thứ 3 như Google Maps và Google Custom Search Engine, tạo xung đột với Bootstrap. điều này là do { box-sizing. hộp viền; . Để đọc sâu hơn, hãy xem trang Bắt đầu tại GetBootStrap. com

Khi nào tôi nên sử dụng Bootstrap?

Bootstrap là HTML hay CSS?

Bootstrap có dễ học cho người mới bắt đầu không?

Sự khác biệt giữa HTML và Bootstrap là gì?