Bootstrap có cần thiết nữa không?
Bạn có phải là Nhà phát triển, người đang mệt mỏi với công việc viết đi viết lại cú pháp CSS không? . Bài viết này sẽ giải thích Bootstrap là gì và đề cập đến lợi ích của việc sử dụng web framework, cũng như cách nhúng nó vào dự án của bạn hợp lý Show Bootstrap là gì?Sáng Hà Đình @Sanghd Theo dõi 14 1 3 Đã đăng vào ngày 26 tháng 10 năm 2020 3. 37 SA 5 phút đọc 1. 1k 0 1 Bootstrap là gì?
Bài đăng này đã không được cập nhật trong 2 năm Bạn có phải là Nhà phát triển, người đang mệt mỏi với công việc viết đi viết lại cú pháp CSS không? . Bài viết này sẽ giải thích Bootstrap là gì và đề cập đến lợi ích của việc sử dụng web framework, cũng như cách nhúng nó vào dự án của bạn hợp lý Bootstrap là gì?You could have Quen thuộc với chức năng của framework là gì. Nó tập hợp các cú pháp dành riêng cho nhiệm vụ nào đó trong một bộ sưu tập để giúp các nhà phát triển web xây dựng trang web nhanh hơn nhiều, vì họ không cần phải tìm hiểu về các lệnh và chức năng cơ bản. Khung giao diện người dùng là mã nguồn mở, ban đầu được xây dựng bởi Mark Otto và Jacob Thornton để thiết lập giao diện người dùng web nhanh hơn và dễ dàng hơn Nó chứa tất cả các mẫu thiết kế dựa trên HTML và CSS với nhiều chức năng và thành phần khác nhau, như lưới, băng chuyền, nút, phương thức, Mặc dù Bootstrap giúp tiết kiệm thời gian tiết kiệm thời gian của nhà phát triển từ việc phải quản lý các mẫu nhiều lần, nhưng mục tiêu chính của nó là tạo ra các trang web đáp ứng. Nó cho phép giao diện người dùng của trang web có thể hoạt động ở mức ưu tiên tối đa trên mọi kích thước màn hình, trên điện thoại màn hình nhỏ hoặc máy tính để bàn màn hình lớn Do đó, các nhà phát triển không cần xây dựng các trang web dành riêng cho từng thiết bị và bị giới hạn phạm vi đối tượng nữa 3 file main của BootstrapBootstrap. cssBootstrap. css là CSS khung sắp xếp và quản lý bố cục cục bộ của trang web. Trong khi HTML quản lý nội dung và cấu trúc của trang web, CSS xử lý bố cục cục bộ của trang web. Vì lý do đó, cả hai cấu trúc cần phải cùng tồn tại để thực hiện một hành động cụ thể Do các chức năng của nó, CSS cho phép bạn tạo giao diện hệ thống tốt nhất trên bao nhiêu trang web tùy chọn. Với CSS, tất cả những gì bạn cần làm là giới thiệu các trang web đến tệp CSS. Bất kỳ thay đổi nào cũng cần thiết để có thể thực hiện được trong tệp đó Bootstrap. jsTệp này là phần cốt lõi của Bootstrap. Nó bao gồm các tệp JavaScript chịu trách nhiệm cho công việc tương tác của trang web Để tiết kiệm thời gian khi viết cú pháp JavaScript nhiều lần, các nhà phát triển có xu hướng sử dụng jQuery. Nó có một thư viện JavaScript đa nền tảng, mã nguồn mở phổ biến cho phép bạn bổ sung các chức năng khác nhau vào một trang web Mặc dù Bootstrap với các thuộc tính CSS và phần tử HTML có thể hoạt động tốt, nhưng nó cần jQuery để tạo thiết kế đáp ứng. Nếu không, bạn chỉ có thể sử dụng các phần tĩnh của CSS GlyphiconsCác biểu tượng là một phần không thể thiếu của giao diện trang web. Chúng thường được liên kết với các hành động và dữ liệu được xác định rõ nhất trong giao diện người dùng. Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu đó Bootstrap bao gồm một bộ Halflings Glyphicons đã được mở từ khóa để sử dụng miễn phí. Phiên bản miễn phí có giao diện tiêu chuẩn nhưng phù hợp với các chức năng thiết yếu Kết luậnBootstrap là front-end framework miễn phí ngày càng phổ biến hơn trong số các nhà phát triển front-end. Các nhà phát triển có thể dễ dàng sử dụng và tiết kiệm rất nhiều thời gian khi không phải viết mã thủ công Framework này cũng rất linh hoạt và có thể đáp ứng hầu hết mọi nhu cầu phát triển web front-end. Các khả năng tốt nhất của nó bao gồm, nhưng không giới hạn tính năng web đáp ứng tối ưu trên tất cả các kích thước màn hình Bắt đầu với Bootstrap, khuôn khổ phổ biến nhất thế giới để xây dựng các trang web đáp ứng, ưu tiên thiết bị di động, với jsDelivr và một trang bắt đầu mẫu Bắt đầu nhanhTìm cách nhanh chóng thêm Bootstrap vào dự án của bạn? . Sử dụng trình quản lý gói hoặc cần tải xuống các tệp nguồn? CSSSao chép-dán biểu định kiểu
JSNhiều thành phần của chúng tôi yêu cầu sử dụng JavaScript để hoạt động. Cụ thể, họ yêu cầu jQuery, Popper. js và các plugin JavaScript của riêng chúng tôi. Đặt sau Tò mò không biết thành phần nào yêu cầu jQuery, JS và Popper của chúng tôi một cách rõ ràng. js? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu
Mẫu dành cho người mới bắt đầuĐảm bảo các trang của bạn được thiết lập với các tiêu chuẩn phát triển và thiết kế mới nhất. Điều đó có nghĩa là sử dụng loại tài liệu HTML5 và bao gồm thẻ meta chế độ xem cho các hành vi phản hồi phù hợp. Đặt tất cả lại với nhau và các trang của bạn sẽ trông như thế này
Đó là tất cả những gì bạn cần cho các yêu cầu trang tổng thể. Truy cập tài liệu Bố cục hoặc các ví dụ chính thức của chúng tôi để bắt đầu bố trí nội dung và thành phần trang web của bạn Toàn cầu quan trọngBootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng mà bạn cần lưu ý khi sử dụng nó, tất cả chúng hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào loại tài liệu HTML5Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng không hoàn chỉnh vui nhộn, nhưng việc bao gồm nó sẽ không gây ra bất kỳ trục trặc đáng kể nào
Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn
Bạn có thể xem một ví dụ về điều này trong thực tế kích thước hộpĐể định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu 0 thành 1. Điều này đảm bảo rằng 2 không ảnh hưởng đến chiều rộng được tính toán cuối cùng của phần tử, nhưng nó có thể gây ra sự cố với một số phần mềm của bên thứ ba như Google Maps và Công cụ tìm kiếm tùy chỉnh của GoogleTrong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau
Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua 3 và 4—tất cả sẽ kế thừa box-sizing đã chỉ định cho 6 đóTìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS khởi động lạiĐể cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các cài đặt lại có chủ ý hơn một chút cho các thành phần HTML phổ biến Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này |