Hướng dẫn kiểu bootstrap
|
Bootstrap là khuôn khổ giao diện người dùng (HTML, CSS và JavaScript) phổ biến và mạnh mẽ nhất để phát triển web đáp ứng nhanh hơn và dễ dàng hơn Show  Bootstrap là một khung giao diện người dùng mạnh mẽ để phát triển web nhanh hơn và dễ dàng hơn. Nó bao gồm các mẫu thiết kế dựa trên HTML và CSS để tạo các thành phần giao diện người dùng phổ biến như biểu mẫu, nút, điều hướng, danh sách thả xuống, cảnh báo, phương thức, tab, đàn accordion, băng chuyền, chú giải công cụ, v.v. Bootstrap cung cấp cho bạn khả năng tạo bố cục web linh hoạt và đáp ứng với ít nỗ lực hơn nhiều Bootstrap ban đầu được tạo bởi một nhà thiết kế và nhà phát triển tại Twitter vào giữa năm 2010. Trước khi là một framework mã nguồn mở, Bootstrap được gọi là Twitter Blueprint Bạn có thể tiết kiệm rất nhiều thời gian và công sức với Bootstrap. Vì vậy, hãy đánh dấu trang web này và tiếp tục Mẹo. Các hướng dẫn Bootstrap của chúng tôi sẽ giúp bạn tìm hiểu từng bước cơ bản cũng như các tính năng nâng cao của Bootstrap thông qua giải thích dễ hiểu về mọi chủ đề. Nếu bạn là người mới bắt đầu, hãy bắt đầu với những điều cơ bản và dần dần tiến lên bằng cách học một chút mỗi ngày Bạn có thể làm gì với BootstrapCòn rất nhiều thứ bạn có thể làm với Bootstrap
Danh sách chưa kết thúc ở đây, còn rất nhiều điều thú vị khác mà bạn có thể làm với Bootstrap. Bạn sẽ tìm hiểu về tất cả chúng một cách chi tiết trong các chương sắp tới Ưu điểm của việc sử dụng BootstrapNếu bạn đã có một số kinh nghiệm với bất kỳ khung giao diện người dùng nào, bạn có thể tự hỏi điều gì làm cho Bootstrap trở nên đặc biệt. Dưới đây là một số lợi thế tại sao một người nên chọn Bootstrap framework
Ghi chú. Bootstrap đáp ứng theo mặc định với cách tiếp cận đầu tiên trên thiết bị di động. Bootstrap 5 là phiên bản mới nhất và ổn định nhất của Bootstrap. Bootstrap 5 được hỗ trợ trong tất cả các trình duyệt hiện đại chính như Google Chrome, Firefox, Safari, Internet Explorer 10 trở lên, v.v. Hướng dẫn này bao gồm những gìChuỗi hướng dẫn Bootstrap này bao gồm tất cả các tính năng của khung Bootstrap, bắt đầu với những điều cơ bản, chẳng hạn như hệ thống lưới, cơ chế tạo kiểu chữ, phương pháp tạo kiểu biểu mẫu, cũng như các kỹ thuật tạo kiểu cho các thành phần giao diện người dùng phổ biến như bảng, danh sách, hình ảnh, v.v. Hơn nữa, bạn sẽ tìm hiểu cách sử dụng các thành phần Bootstrap sẵn sàng sử dụng như nhóm danh sách, nhóm đầu vào, nhóm nút, thẻ, thanh điều hướng, mẩu bánh mì, phân trang, nhãn và huy hiệu, thanh tiến trình, v.v. cũng như cách tùy chỉnh chúng để tạo ra các biến thể khác nhau của chúng Cuối cùng, bạn sẽ khám phá một số tính năng nâng cao của Bootstrap như tạo cửa sổ phương thức, tab động, chú giải công cụ, cảnh báo, menu đàn accordion, băng chuyền, scrollspy, v.v. cũng như cách tùy chỉnh chúng hoặc mở rộng chức năng hiện có của chúng bằng các tùy chọn và phương pháp có sẵn Mẹo. Mỗi chương trong hướng dẫn này chứa rất nhiều ví dụ thực tế mà bạn có thể thử và kiểm tra bằng trình chỉnh sửa trực tuyến. Những ví dụ này sẽ giúp bạn hiểu rõ hơn về khái niệm hoặc chủ đề. Nó cũng chứa các cách giải quyết thông minh cũng như các mẹo hữu ích và lưu ý quan trọng Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo một trang web bằng Bootstrap dễ dàng như thế nào. Nhưng trước khi bắt đầu, hãy đảm bảo có một trình soạn thảo mã và một số kiến thức làm việc về HTML và CSS Vâng, bây giờ hãy bắt đầu tạo trang web hỗ trợ Bootstrap đầu tiên của chúng tôi Tạo trang web đầu tiên của bạn với BootstrapBây giờ chúng ta sẽ tạo một mẫu Bootstrap cơ bản bằng cách bao gồm các tệp Bootstrap CSS và JS thông qua CDN. Bootstrap yêu cầu thư viện bên thứ ba Popper. js cho một số thành phần của nó như cửa sổ bật lên và chú giải công cụ. Bạn có thể bao gồm nó theo một cách riêng biệt hoặc chỉ cần bao gồm Bootstrap JS đi kèm với Popper Chúng tôi khuyên bạn nên thêm Bootstrap vào dự án của mình thông qua CDN (Mạng phân phối nội dung - Mạng phân phối nội dung) vì CDN mang lại lợi ích về hiệu suất bằng cách giảm thời gian tải, vì chúng được lưu trữ trên nhiều tệp lưu trữ . Chúng tôi cũng đang sử dụng các liên kết CDN trong các ví dụ của chúng tôi Vui lòng đi qua các bước sau đây. Ở phần cuối của hướng dẫn này, bạn sẽ tạo một trang web hỗ trợ Bootstrap đơn giản hiển thị thông báo "Xin chào thế giới" trong trình duyệt web của bạn Bước 1. Tạo cơ bản tệp HTMLMở trình soạn thảo mã yêu thích của bạn và tạo một tệp HTML mới. Bắt đầu với một cửa sổ trống và nhập mã sau và lưu nó dưới dạng "cơ bản". html" trên màn hình của bạn mẹo. Luôn bao gồm thẻ Bước 2. Sử dụng Bootstrap trong tệp HTMLĐể làm cho tệp HTML thuần túy này trở thành mẫu Bootstrap, chỉ cần bao gồm các tệp CSS và JS của Bootstrap bằng cách sử dụng các liên kết CDN của chúng. Ngoài ra, bạn nên bao gồm các tệp JavaScript ở cuối trang, ngay trước thẻ đóng để cải thiện hiệu suất của các trang web của bạn And we are available. Sau khi thêm các tệp CSS và JS của Bootstrap vào trang HTML của mình, chúng ta có thể bắt đầu phát triển bất kỳ trang web hoặc ứng dụng ứng dụng thích ứng nào với framework Bootstrap Các thuộc tính Lưu ý. Thay đổi lớn nhất trong Bootstrap 5 là nó không yêu cầu jQuery nữa. Tuy nhiên, bạn vẫn có thể sử dụng jQuery để nhanh chóng phát triển các phương thức và tùy chọn của thành phần Bootstrap. Nếu Bootstrap phát hiện jQuery trong cửa sổ đối tượng, nó sẽ bổ sung tất cả các thành phần của nó vào plugin hệ thống của jQuery. Bạn sẽ tìm hiểu về chúng trong phần nâng cao của loạt bài hướng dẫn này mẹo. Nếu khách truy cập trang web của bạn đã tải xuống tệp CSS và JS của Bootstrap từ cùng một CDN trong khi truy cập các trang web khác, thì tệp đó sẽ được tải xuống từ bộ nhớ cache của trình duyệt thay vì tải xuống, hướng dẫn Bước 3. Save and view HTML fileBây giờ hãy lưu tệp HTML của bạn với tên là "bootstrap-template. html" Để mở tệp này trong trình duyệt web, hãy chuyển đến thư mục chứa tệp HTML, sau đó nhấp chuột phải vào tệp và chọn trình duyệt web yêu thích của bạn. Ngoài ra, bạn có thể mở trình duyệt của mình và kéo tệp này vào đó Lưu ý. Điều quan trọng là phần mở rộng Tải xuống tệp BootstrapNgoài ra, bạn cũng có thể tải xuống các tệp CSS và JS của Bootstrap từ trang web chính thức của họ và đưa vào dự án của bạn. Có sẵn hai phiên bản để tải xuống, tệp Bootstrap mã nguồn và Bootstrap đã biên dịch. Bạn có thể tải xuống tệp Bootstrap 5 từ đây Bản tải xuống được biên dịch bao gồm các phiên bản đã biên dịch và rút gọn các tệp CSS và JavaScript để phát triển web nhanh hơn và dễ dàng hơn. Phiên bản đã biên dịch cũng bao gồm các tùy chọn JavaScript phụ thuộc như Popper đi kèm với Bootstrap JS ( Tải xuống và giải nén Bootstrap đã biên dịch. Bây giờ, nếu bạn nhìn vào bên trong các thư mục, bạn sẽ thấy nó chứa các tệp CSS và JS đã biên dịch ( Sử dụng phiên bản Rút gọn của các tệp CSS và JS sẽ cải thiện hiệu suất trang web của bạn và tiết kiệm băng thông quý giá do yêu cầu HTTP và kích thước tải xuống nhỏ hơn |
