Cài đặt các tệp Sass và JavaScript nguồn của Bootstrap qua npm, RubyGems, Composer hoặc Meteor. Cài đặt được quản lý theo gói không bao gồm tài liệu hoặc tập lệnh xây dựng đầy đủ của chúng tôi. Bạn cũng có thể sử dụng repo mẫu npm của chúng tôi để nhanh chóng tạo dự án Bootstrap qua npm
npm install bootstrap@5.3.0-alpha1
gem install bootstrap -v 5.3.0-alpha1
Đọc tài liệu cài đặt của chúng tôi để biết thêm thông tin và trình quản lý gói bổ sung
Bao gồm qua CDN
Khi bạn chỉ cần bao gồm CSS hoặc JS đã biên dịch của Bootstrap, bạn có thể sử dụng jsDelivr. Xem nó hoạt động với ứng dụng đơn giản của chúng tôi hoặc duyệt qua các ví dụ để bắt đầu dự án tiếp theo của bạn. Bạn cũng có thể chọn bao gồm Popper và JS của chúng tôi
Bootstrap là một khung CSS nguồn mở và miễn phí hướng đến phát triển web giao diện người dùng đầu tiên trên thiết bị di động, đáp ứng. Nó chứa các mẫu thiết kế dựa trên CSS và JavaScript 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
Bootstrap được tạo bởi Mark Otto và Jacob Thornton tại Twitter và hiện được hơn 12 triệu trang web sử dụng. Bootstrap là mã nguồn mở và có sẵn trên GitHub
Tại sao các nhà phát triển web thích sử dụng Bootstrap?
Bootstrap là khung HTML, CSS và 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 hoàn toàn miễn phí để tải xuống và sử dụng
Các nhà phát triển web yêu thích Bootstrap vì nó giúp họ tạo các trang web đáp ứng nhanh hơn và dễ dàng hơn. Bootstrap là một khung giao diện người dùng bao gồm các thành phần CSS và JavaScript dựng sẵn, dễ sử dụng và tùy chỉnh
Bootstrap là mã nguồn mở và miễn phí, điều này làm cho nó trở thành lựa chọn tuyệt vời cho các nhà phát triển muốn tạo các trang web đáp ứng với ngân sách
Bootstrap rất dễ sử dụng. Bạn chỉ cần đưa các tệp Bootstrap CSS và JS vào mã HTML của mình. Bootstrap cũng có sẵn dưới dạng tệp Sass và Ít hơn
Lưới đáp ứng của Bootstrap
Bootstrap cũng cung cấp cho bạn khả năng dễ dàng tạo các thiết kế đáp ứng. Thiết kế đáp ứng là một phương pháp phát triển web làm cho các trang web của bạn trông đẹp mắt trên tất cả các thiết bị [máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại]
Hệ thống lưới phản hồi của Bootstrap dựa trên lưới 12 cột, với rãnh 30px [15px mỗi bên của cột]
Hệ thống lưới Bootstrap phản hồi nhanh và các cột sẽ sắp xếp lại tùy thuộc vào kích thước màn hình
Trên một màn hình lớn, bố cục cột sẽ là. col-lg-*
Trên màn hình trung bình, bố cục cột sẽ là. col-md-*
Trên một màn hình nhỏ, bố cục cột sẽ là. col-sm-*
Trên một màn hình cực nhỏ, bố cục cột sẽ là. col-xs-*
*
đại diện cho số lượng cột trong số 12 mà cột sẽ kéo dài. Vì vậy, ví dụ: nếu bạn muốn một cột trải dài 8 cột trên màn hình lớn, bạn sẽ sử dụng. col-lg-8
Nếu bạn muốn cột kéo dài 4 cột trên màn hình trung bình, bạn sẽ sử dụng. ________số 8
Các thành phần của Bootstrap
Các thành phần của Bootstrap có thể được chia thành ba loại. bố cục, nội dung và các thành phần
Các thành phần bố cục chịu trách nhiệm về cấu trúc tổng thể của trang web. Chúng bao gồm hệ thống lưới, được sử dụng để tạo bố cục phản hồi và đối tượng phương tiện, được sử dụng để tạo hình ảnh và video phản hồi
Các thành phần nội dung chịu trách nhiệm về nội dung của trang web. Chúng bao gồm kiểu chữ, được sử dụng để tạo kiểu cho văn bản và các bảng, được sử dụng để hiển thị dữ liệu dạng bảng.
Các thành phần chịu trách nhiệm cho các yếu tố tương tác của trang web. Chúng bao gồm các nút được sử dụng để kích hoạt các hành động và các phương thức được sử dụng để hiển thị thông tin trong cửa sổ bật lên
Tài liệu của Bootstrap
Tài liệu của Bootstrap là một trong những tài liệu tốt nhất trong ngành. Nó rõ ràng, ngắn gọn và dễ làm theo. Tài liệu bao gồm tất cả các khía cạnh chính của khung, bao gồm hệ thống lưới, kiểu chữ và các thành phần
Thật dễ dàng để tìm thấy những gì bạn đang tìm kiếm, cho dù bạn là người mới bắt đầu hay người dùng nâng cao. Tài liệu được chia thành các phần bao gồm mọi thứ từ cơ bản đến các chủ đề nâng cao hơn. Ngoài ra còn có các ví dụ và đoạn mã xuyên suốt tài liệu để giúp bạn hiểu mọi thứ hoạt động như thế nào. Nhìn chung, các tài liệu là một nguồn tuyệt vời để học cách sử dụng Bootstrap
Tài liệu của Bootstrap là một tài nguyên tuyệt vời cho những người mới làm quen với framework
Khả năng tùy biến của Bootstrap
Khả năng tùy biến của Bootstrap là một trong những tính năng chính của nó. Bootstrap cung cấp một tập hợp các kiểu và thành phần mặc định, nhưng API lớp mở rộng của nó giúp dễ dàng tùy chỉnh hoặc mở rộng các kiểu và thành phần đó. Ví dụ: bạn có thể tạo các kiểu nút tùy chỉnh của riêng mình bằng API lớp nút Bootstrap
Khả năng tùy chỉnh của Bootstrap không chỉ giới hạn ở các kiểu và thành phần CSS của nó. Các plugin JavaScript của Bootstrap cũng có thể được tùy chỉnh để phù hợp với nhu cầu của bạn. Ví dụ: bạn có thể dễ dàng tùy chỉnh hành vi của plugin phương thức Bootstrap để tạo các hộp thoại phương thức của riêng mình
Tóm lại, khả năng tùy chỉnh của Bootstrap giúp dễ dàng tạo các giao diện tùy chỉnh và độc đáo cho các trang web và ứng dụng web của bạn
Khả năng tương thích với các trình duyệt của Bootstrap
Bootstrap tương thích với tất cả các trình duyệt chính [Chrome, Firefox, Internet Explorer, Safari và Opera]
cộng đồng Bootstrap
Cộng đồng trực tuyến của Bootstrap rất thân thiện và chào đón, và bạn luôn có thể tìm thấy ai đó để giúp bạn giải quyết các vấn đề của mình. Ngoài ra còn có rất nhiều tài nguyên, vì vậy bạn luôn có thể tìm thấy những gì mình cần
Thực sự có hàng ngàn nhà phát triển không ngừng giúp đỡ lẫn nhau và chia sẻ kiến thức của họ
Cộng đồng chịu trách nhiệm duy trì dự án, viết tài liệu, trả lời các câu hỏi trên diễn đàn và đóng góp mã. Cộng đồng cũng chịu trách nhiệm tổ chức và điều hành Hội nghị Bootstrap hàng năm
Các mẫu bên ngoài của Bootstrap
Các mẫu bên ngoài là các trang web được tạo sẵn mà bạn có thể tải xuống và sử dụng làm điểm bắt đầu cho trang web của riêng mình
Có nhiều lợi thế khi sử dụng mẫu bên ngoài. Đầu tiên, bạn có thể tiết kiệm rất nhiều thời gian bằng cách bắt đầu với một trang web dựng sẵn. Thứ hai, bạn có thể chắc chắn rằng trang web tương thích với tất cả các phiên bản Bootstrap mới nhất. Và thứ ba, bạn có thể tìm thấy một mẫu phù hợp với nhu cầu cụ thể của mình
Có một số điều cần lưu ý khi chọn mẫu bên ngoài. Trước tiên, đảm bảo rằng mẫu tương thích với phiên bản Bootstrap mới nhất. Thứ hai, hãy xem mã để đảm bảo mã được tổ chức tốt và dễ hiểu. Và thứ ba, đảm bảo rằng mẫu bao gồm tất cả các tính năng bạn cần
Bắt đầu với Bootstrap
Có nhiều cách để bắt đầu với Bootstrap. Bạn chỉ cần truy cập getbootstrap. com. Bạn cũng có thể tham gia một bootcamp mã hóa trực tuyến chuyên về phát triển web