Có gì sai với Bootstrap?

Từ khi còn trẻ, người Mỹ được dạy phải mạnh mẽ, ước mơ lớn và làm việc chăm chỉ. Với công thức kỳ diệu này, thành công sẽ đến với chúng ta. Mặt trái là nếu chúng ta không làm việc chăm chỉ, chúng ta sẽ gục ngã - và điều đó có nghĩa là mọi thất bại đều do lựa chọn cá nhân

Nếu có…. thì chắc chắn bạn đang sử dụng bootstrap (hoặc có thể bạn đã sử dụng) trong ứng dụng của mình và bài viết này rất đáng đọc (hãy tiếp tục…)

nếu chúng tôi hỏi. làm thế nào để bắt đầu làm việc trên phần giao diện người dùng của ứng dụng, câu trả lời của bạn là gì??

Học HTML và CSS trước. (câu trả lời phổ biến nhất mà mọi nhà phát triển web hoặc giao diện người dùng đề xuất cho các nhà phát triển mới…)

Bạn học nó, bạn hiểu tất cả các khái niệm, bạn hào hứng tạo trang web đầu tiên của mình, bạn bắt đầu làm việc trên một số trang web, bạn đã thêm hình ảnh, nút, sách giáo khoa, biểu mẫu và nhiều thứ khác trên trang của mình. Bạn đặt chiều cao, chiều rộng, lề, phần đệm, căn chỉnh và nhiều thứ khác trên trang của mình. Tóm lại…bạn đã nỗ lực, dành rất nhiều thời gian và cuối cùng, bạn chạy trang web đầu tiên của mình trên trình duyệt

Bạn thấy gì??

Có hấp dẫn không?…. Nó có đáp ứng không?

Bạn không gặp phải các vấn đề về hình ảnh, bố cục, nút, căn chỉnh hoặc các vấn đề với bất kỳ yếu tố nào khác trong trang web của mình sao?

Chắc chắn…bạn đang phải đối mặt với rất nhiều vấn đề và trang web của bạn trông không đẹp mắt trên tất cả các kích thước màn hình

Rất nhiều nhà phát triển mới gặp phải vấn đề này và họ trở nên thất vọng, nhưng nếu bạn là một nhà phát triển đam mê thì bạn sẽ sớm khám phá ra giải pháp và bạn sẽ chuyển sang Bootstrap. (Bạn có biết phiên bản bootstrap mới nhất không?…. tìm kiếm nó trên Google. Nó được phát hành vào ngày 7 tháng 12 năm 2020)

Bootstrap, một trong những khung giao diện người dùng phổ biến nhất giải quyết các loại sự cố này

Là một nhà phát triển web, bạn có thể đã sử dụng rất nhiều yếu tố bootstrap trên trang web của mình. 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, thu gọn, chú giải công cụ, lưới và rất nhiều yếu tố bạn có thể đã sử dụng trong trang web của mình. Bootstrap không chỉ giúp công việc của bạn dễ dàng hơn mà còn giúp bạn làm được nhiều việc hơn trong thời gian ngắn hơn.  

Đối với hầu hết các nhà phát triển, bootstrap rất dễ sử dụng và không khó để tận dụng khung này khi xây dựng ứng dụng. Tài liệu Bootstrap khá ấn tượng. Bạn có thể tìm hiểu khung này một cách dễ dàng từ đó với sự trợ giúp của các đoạn mã khổng lồ cho HTML, CSS và JavaScript

Trong tài liệu, bạn có thể tìm thấy rất nhiều giải pháp cho các vấn đề khác nhau liên quan đến giao diện người dùng. Các tính năng của Bootstrap cho phép bạn xây dựng ứng dụng của mình nhanh hơn. Do tính năng đơn giản và dễ thích ứng, các nhà phát triển lao vào khung này và mắc những lỗi rất nông cạn và mơ hồ khi sử dụng khung này.  

Chúng ta hãy xem xét một số lỗi phổ biến mà các nhà phát triển nên tránh khi sử dụng khung này

1. Bỏ qua nền tảng cơ bản của Framework này

Đây là một trong những sai lầm lớn nhất mà các nhà phát triển mắc phải khi sử dụng khung này. Họ không đọc tài liệu cẩn thận và tự mình thừa nhận một số khái niệm. Điều này dẫn đến việc tạo ra lỗi trong ứng dụng của họ. Các nhà phát triển thấy rằng ứng dụng không mang lại kết quả như mong đợi và họ bắt đầu đổ lỗi cho khung

Hãy nhớ rằng bootstrap không khổng lồ cũng không khổng lồ. Nó đi kèm với rất nhiều mẫu sẵn sàng để xây dựng HTML và CSS. Các mẫu này cung cấp các phần giao diện người dùng cơ bản để xây dựng ứng dụng dễ dàng. Phân trang, nhãn, huy hiệu, cảnh báo, đàn accordion, thanh tiến trình và rất nhiều thành phần tích hợp sẵn có. Tùy theo yêu cầu mà bạn có thể chọn và sử dụng sao cho phù hợp với cấu hình mặc định của chúng

Bootstrap giúp bạn xây dựng giao diện người dùng hấp dẫn cho ứng dụng của bạn. Nó có thể xử lý nhiều trình duyệt, thiết bị và độ phân giải ở định dạng đẹp. Bạn có thể tập trung vào phần phát triển và cải tiến thay vì lo lắng về cấu trúc ứng dụng của mình.  

Bootstrap hiện đủ khả năng mở rộng (ban đầu thì không và nó có những hạn chế). Bạn có thể tùy chỉnh nó theo nhu cầu của bạn. Chúng tôi khuyên bạn nên hiểu cơ bản của khung này trước và đọc kỹ tài liệu trước khi triển khai bất cứ điều gì với khung này

2. Tận dụng mọi thứ mà Bootstrap cung cấp

Bootstrap cung cấp nhiều tính năng. Nó cung cấp rất nhiều thành phần giao diện người dùng, mẫu thiết kế được tạo bằng HTML và CSS. Rất nhiều plugin JavaScript cũng có sẵn để sử dụng trong bootstrap. Là một nhà phát triển, bạn sẽ ngạc nhiên khi thấy tất cả các tính năng và bạn cũng có thể muốn sử dụng tất cả các tính năng nhưng bạn bè hãy dừng lại và chọn lọc tại đây.  

Đừng làm mọi thứ trở nên phức tạp bằng cách sử dụng mọi tính năng mà bootstrap cung cấp. Không sử dụng từng thành phần mà bootstrap cung cấp. Điều này đặc biệt hợp lệ cho các plugin. Chỉ chọn những thứ bạn thực sự cần trong ứng dụng của mình. Chọn nhiều thành phần chỉ vì nó đẹp và ngầu sẽ chỉ làm cho trang web của bạn bị phóng đại

Bạn có thể làm theo một cách tiếp cận đơn giản trong đó loại trừ hoàn toàn bootstrap ngay từ đầu. tập tin js. Tạo giao diện người dùng chỉ bằng HTML và CSS. Sau đó, thêm từng phân đoạn cho một công việc hoặc nhiệm vụ cụ thể

3. Không cần học CSS và không cần đầu óc thiết kế

Đây là một quan niệm sai lầm khác mà các nhà phát triển có về khuôn khổ này. Bootstrap cung cấp các lớp và thành phần sẵn sàng sử dụng giúp các nhà phát triển sử dụng nó trong giao diện người dùng của họ. Đây là lý do hầu hết các nhà phát triển nghĩ rằng họ không cần học CSS.  

Bạn xử lý CSS phức tạp trong bootstrap giúp tiết kiệm rất nhiều thời gian. Bạn không làm CSS, bạn sử dụng các thành phần tích hợp sẵn mà không phải lo lắng về những gì đang thực sự xảy ra bên trong thành phần hoặc các lớp. Ngoài ra, bạn không cần biết về các truy vấn phương tiện nhưng hãy nhớ rằng bạn cần hiểu cách thiết kế đáp ứng hoạt động trong một ứng dụng.  

Để thực hiện tốt nhất, bạn cũng cần tâm trí của các nhà thiết kế…tại sao?

Rất nhiều người phàn nàn rằng tất cả các trang web được xây dựng trên Bootstrap trông giống nhau và khá dễ dàng để có một trang web không khác nhiều so với bất kỳ trang web Bootstrap nào khác.  

Đối với các biến thể trong trang web của bạn, bạn cần nhờ sự trợ giúp của một nhà thiết kế có thể hỗ trợ bạn hoặc bạn có thể tự xây dựng nó dựa trên sự hiểu biết của mình về HTML và CSS cùng với khung này

4. Thay đổi tệp CSS Bootstrap

Bạn đang làm việc trên một ứng dụng và bạn muốn thay đổi phong cách của một thành phần trên trang web của mình. Bạn kiểm tra nó trong công cụ dành cho nhà phát triển Chrome và bạn thấy rằng kiểu dáng được kế thừa từ tệp CSS bootstrap. Bạn mở tệp CSS bootstrap và bạn đã thực hiện một số thay đổi trong một lớp của tệp đó. Bạn đã thực hiện các thay đổi nhưng bạn có nhận thấy rằng các thay đổi đó được phản ánh trong tất cả các trang ở bất cứ nơi nào sử dụng kiểu dáng cụ thể đó không.  

Làm sai lầm này sẽ tạo ra rất nhiều lộn xộn trong mã của bạn. Ghi đè tệp CSS Bootstrap của bạn có thể phá vỡ toàn bộ thiết kế ứng dụng của bạn. Thay vì làm mọi thứ đẹp hơn, bạn sẽ khiến mọi thứ trở nên phức tạp. Sau đó, bạn sẽ phải sửa mọi thứ theo cách thủ công hoặc bạn sẽ phải xây dựng ứng dụng từ đầu. Trong cả hai trường hợp, bạn sẽ chỉ lãng phí thời gian quý báu của mình

Nếu bạn muốn ghi đè kiểu bootstrap mặc định thì hãy thực hiện trong tệp CSS của riêng bạn. Không thực hiện bất kỳ thay đổi nào trong tệp CSS bootstrap gốc. Ở điểm trước, chúng tôi đã đề cập rằng việc biết CSS là bắt buộc và trong trường hợp này, điều này có thể áp dụng được. Bạn nên có kiến ​​thức về CSS để ghi đè kiểu bootstrap mặc định trong tài liệu CSS của riêng bạn

Tạo các lớp hoặc bộ chọn CSS của riêng bạn, sử dụng nó trong các thẻ HTML của bạn và miễn là bạn đề cập đến các lớp CSS của mình sau các kiểu bootstrap, định nghĩa kiểu của riêng bạn sẽ ghi đè lên kiểu mặc định của bootstrap

5. Quá phức tạp với JavaScript

Khi một nhà phát triển mới bắt đầu phát triển web, họ sử dụng HTML, CSS và Bootstrap để tạo các trang web cho ứng dụng. Trong hành trình viết mã ban đầu, các nhà phát triển chưa có kinh nghiệm. Họ có thể dễ dàng rơi vào bẫy lạm dụng JavaScript. Việc lạm dụng JavaScript sẽ tạo ra sự hỗn loạn trong ứng dụng của bạn và bạn sẽ làm cho ứng dụng của mình trở nên phức tạp hơn

Các mô-đun Bootstrap có thể được sử dụng thông qua API đánh dấu. Bạn không cần viết một dòng mã nào trong JavaScript. Đây nên là sự cân nhắc đầu tiên của bạn khi sử dụng các mô-đun trong ứng dụng của bạn.  

Hãy lấy ví dụ về hộp thoại phương thức trong ứng dụng của bạn. Để kích hoạt hộp thoại phương thức, hãy đặt data-toggle=”modal” trên một thành phần của bộ điều khiển, chẳng hạn như nút hoặc neo, sau đó chuyển các tham số bổ sung bằng thuộc tính data-.  

Mở phương thức của tôi

• ID #myModal được sử dụng để nhắm mục tiêu mã HTML
• data-backdrop=”static” chỉ định rằng chế độ sẽ không đóng khi người dùng nhấp vào bên ngoài chế độ
• data-keyboard=”false” vô hiệu hóa sự kiện phím thoát đóng một phương thức

6. Sự cố không tương thích với IE8 và các trình duyệt cũ hơn

Bootstrap hoạt động bình thường trong các trình duyệt và máy tính để bàn mới nhất. Các chương trình cũ hơn và tính hữu dụng của trình duyệt có thể hoạt động tốt và bảnh bao, nhưng chúng không tạo ra phong cách hợp pháp. Trong các trình duyệt này, bạn sẽ tìm thấy kiểu dáng khác nhau cho các thành phần và thành phần. Internet Explorer 8 và 9 không hỗ trợ một số thuộc tính của HTML5 và CSS3

Trong thẻ meta của phần đầu HTML, bạn sẽ phải mô tả chính xác rằng IE không chạy ở chế độ tương thích. Điều này sẽ trông giống như dưới đây

<head>
 ...
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
</head>

suy nghĩ cuối cùng

Chúng tôi đã đề cập đến 6 lỗi cơ bản nhưng có một số lỗi khác mà các nhà phát triển mắc phải khi sử dụng Bootstrap. Họ bỏ qua việc sử dụng các phương pháp hay nhất do thời hạn hoặc một số lý do khác, họ cũng bỏ qua việc sử dụng một số công cụ có sẵn giúp phát triển dễ dàng hơn (một trong số đó là Bootlint), và họ cũng lạm dụng dấu nhắc phương thức.  

Những sai lầm này không giới hạn ở đây. Là một nhà phát triển, hãy đảm bảo rằng bạn tránh được những lỗi phổ biến này và xóa bỏ quan niệm sai lầm mà bạn có về framework này. Bootstrap không phù hợp với mọi dự án. Chọn khung này tùy thuộc vào các vấn đề hoặc yêu cầu. Chúng tôi thực sự khuyên bạn nên đọc kỹ tài liệu trước khi bắt đầu sử dụng bất kỳ khung nào. Bạn sẽ làm tốt hơn công việc của mình nếu các khái niệm của bạn rõ ràng và nếu bạn dành thời gian đọc tài liệu.  

Tại sao Bootstrap không được khuyến nghị?

Bootstrap có còn phù hợp vào năm 2022 không?

Bạn có nên sử dụng Bootstrap không?

Có gian lận khi sử dụng Bootstrap không?