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ý

Bootstrap là gì?

Bootstrap có cần thiết nữa không?

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ì?

  • Report
  • Add to series of me

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 Bootstrap

Bootstrap. css

Bootstrap. 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. js

Tệ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

Glyphicons

Cá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ận

Bootstrap 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 nhanh

Tì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?

CSS

Sao chép-dán biểu định kiểu vào trước tất cả các biểu định kiểu khác của bạn để tải CSS của chúng tôi

JS

Nhiề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

bootstrap.bundle.jsbootstrap.bundle.min.js của chúng tôi bao gồm Popper, nhưng không bao gồm jQuery. Để biết thêm thông tin về những gì có trong Bootstrap, vui lòng xem phần của chúng tôi

Hiển thị các thành phần yêu cầu JavaScript
  • Cảnh báo sa thải
  • Các nút để chuyển trạng thái và chức năng hộp kiểm/radio
  • Băng chuyền cho tất cả các hành vi, điều khiển và chỉ báo của trang trình bày
  • Thu gọn để chuyển đổi mức độ hiển thị của nội dung
  • Danh sách thả xuống để hiển thị và định vị (cũng yêu cầu Popper. js)
  • Các phương thức để hiển thị, định vị và hành vi cuộn
  • Thanh điều hướng để mở rộng plugin Thu gọn của chúng tôi nhằm triển khai hành vi phản hồi
  • Chú giải công cụ và cửa sổ bật lên để hiển thị và định vị (cũng yêu cầu Popper. js)
  • Scrollspy cho hành vi cuộn và cập nhật điều hướng

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



  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  

Đó 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ọng

Bootstrap 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 HTML5

Bootstrap 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 box-sizing từ



  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  
0 thành


  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  
1. Điều này đảm bảo rằng


  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  
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 Google

Trong 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

.selector-for-some-widget {
  box-sizing: content-box;
}

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



  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  
3 và


  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  
4—tất cả sẽ kế thừa box-sizing đã chỉ định cho


  
    
    
    

    
    

    Hello, world!
  
  
    Hello, world!

    
    
    
    
    
  
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