Bootstrap 5 lớn cỡ nào
Bootstrap là một bộ công cụ mạnh mẽ. Nó đi kèm với các mẫu thiết kế HTML và CSS cơ bản bao gồm nhiều thành phần giao diện người dùng phổ biến. Hầu hết các cạm bẫy quan trọng đều được đề cập trong tài liệu Bootstrap, nhưng vẫn có một số lỗi khá tinh vi hoặc có nguyên nhân mơ hồ. Bài viết này phác thảo một số lỗi, sự cố và quan niệm sai lầm phổ biến nhất khi sử dụng Bootstrap Show
Qua Tomislav Bacinger Tomislav (Thạc sĩ) đã dành hơn 15 năm để phát triển toàn bộ ngăn xếp và phân tích dữ liệu, nhưng trực quan hóa không gian địa lý là sở thích của anh ấy ĐĂNG LẠI ĐĂNG LẠI Thoạt nhìn, Bootstrap có vẻ khá đơn giản. Và quả thực, không khó để bắt đầu sử dụng Bootstrap. Có một tài liệu Bootstrap được viết rất tốt với nhiều ví dụ mã HTML, CSS và JavaScript. Hầu hết các cạm bẫy quan trọng đều được đề cập ở đó, nhưng vẫn có một số sai lầm khá tinh vi hoặc có nguyên nhân mơ hồ. Vì Bootstrap trông rất đơn giản và dễ sử dụng nên nhiều nhà phát triển đã lao vào framework và thế là xảy ra sai sót. Chúng ta sẽ xem xét 10 lỗi, sự cố và quan niệm sai lầm phổ biến nhất về Bootstrap khi các nhà phát triển bắt đầu sử dụng nó Lỗi Bootstrap phổ biến # 1. Những quan niệm sai lầm cơ bản về frameworkCó một số quan niệm sai lầm cơ bản về khung Bootstrap mà mọi người mắc phải. Điều này có thể là do nó không được quảng cáo rõ ràng trên trang Bootstrap hoặc do mọi người không dành đủ thời gian để đọc tài liệu. Thực tế là đôi khi các nhà phát triển kết thúc ở một góc làm sai, và sau đó đổ lỗi cho khuôn khổ. Vì vậy, hãy làm rõ một số sự kiện cơ bản Bootstrap là toàn diện, nhưng nó không lớn cũng không lớn. Bootstrap đi kèm với các mẫu thiết kế HTML và CSS cơ bản bao gồm nhiều thành phần giao diện người dùng phổ biến. Chúng bao gồm Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, v.v. Bạn có thể chọn và chọn một vài trong số chúng và với cấu hình mặc định của nó, nhanh chóng tạo giao diện người dùng xử lý nhiều trình duyệt, thiết bị và độ phân giải với định dạng đẹp Bootstrap sẽ không làm mọi thứ cho bạn, nhưng nó cung cấp một tập hợp các giá trị mặc định hợp lý để lựa chọn và nó sẽ giúp các nhà phát triển tập trung hơn vào công việc phát triển thay vì lo lắng về thiết kế, đồng thời giúp họ có được một trang web đẹp mắt và chạy nhanh chóng. Nó cho phép tạo nguyên mẫu nhanh, nhưng nó không giới hạn các nhà phát triển trong quá trình thực hiện Nó có thể mở rộng đủ để bất kỳ ai cũng có thể điều chỉnh nó để phù hợp với nhu cầu của mình. Ban đầu, Bootstrap có một số hạn chế và sau đó, việc mở rộng các kiểu mặc định rất phức tạp. Nhưng khi khung trưởng thành, khả năng mở rộng cũng được cải thiện Lỗi Bootstrap thường gặp #2. Nghĩ rằng bạn không cần biết CSS để sử dụng Bootstrap và bạn không cần một nhà thiết kếNếu bạn đang nghĩ rằng nếu bạn đang sử dụng Bootstrap thì sẽ không cần biết CSS thì bạn đã nhầm to. Bất kỳ nhà phát triển front-end nào cũng cần học CSS và HTML5. Bootstrap đang loại bỏ rất nhiều phần CSS phức tạp khỏi vai của nhà phát triển (như tiền tố cụ thể của nhà cung cấp) và nó đang cung cấp kiểu dáng mặc định cơ bản, nhưng bạn vẫn cần hiểu CSS. Bạn không cần biết cách hoạt động của truy vấn phương tiện, nhưng bạn cần hiểu cách hoạt động của thiết kế đáp ứng. Bootstrap không có nghĩa là dạy bạn CSS, nhưng nó có thể giúp ích nếu bạn muốn. Kiểm tra mã nguồn trong LESS hoặc SASS là một điểm khởi đầu tuyệt vời Về một chủ đề tương tự, bạn không cần phải là một nhà thiết kế và bạn có thể lập luận rằng bạn không cần một nhà thiết kế với Bootstrap. Tuy nhiên, nếu có thể, hãy sử dụng sự trợ giúp từ một nhà thiết kế. Một khiếu nại phổ biến đối với Bootstrap là tất cả các trang web Bootstrap trông giống nhau và rất dễ dẫn đến một trang web trông giống như bất kỳ trang web Bootstrap nào khác. Nhưng điều này không cần phải đúng. Hàng triệu trang web trên web đang được xây dựng bằng Bootstrap. Bạn có thể tìm thấy những buổi giới thiệu tuyệt vời về cách đạt được các thiết kế khác nhau trên Bootstrap Expo, nơi thu thập các trang web được xây dựng bằng Bootstrap. Hãy xem, lấy cảm hứng và bắt đầu xây dựng biến thể thiết kế của riêng bạn Lỗi Bootstrap phổ biến #3. Thay đổi tệp CSS BootstrapĐể làm cho nó rõ ràng và đơn giản. Không sửa đổi tệp 2Nếu bạn thay đổi tệp 2, mọi thứ sẽ trở nên phức tạp rất nhanh. Toàn bộ thiết kế sẽ bị phá vỡ khi bạn muốn nâng cấp các tệp Bootstrap. Bạn có thể ghi đè lên màu sắc, kiểu dáng, lề, phần đệm mặc định của biểu định kiểu của riêng bạn, mọi thứ. Không cần phải chạm vào biểu định kiểu 2 nào cảKhông biết LESS hay SASS? . Như chúng tôi đã đề cập trong lỗi trước, biết CSS là bắt buộc. Tạo bộ chọn CSS mới của bạn, sử dụng nó trong HTML và miễn là bạn khai báo các lớp CSS của mình sau các kiểu Bootstrap, các định nghĩa của bạn sẽ ghi đè lên các giá trị mặc định của Bootstrap Vẫn muốn biết nhiều hơn và tìm hiểu sâu hơn? . Sử dụng mã nguồn Bootstrap LESS. Bạn sẽ hiểu rõ hơn điều gì đang xảy ra và điều gì sẽ xảy ra nếu bạn sử dụng nguồn LESS chứ không phải CSS tĩnh Lỗi Bootstrap phổ biến # 4. Sử dụng mọi thứ mà Bootstrap cung cấpNhư đã đề cập trước đó, Bootstrap rất toàn diện. Nó cung cấp rất nhiều thành phần giao diện người dùng, các mẫu thiết kế HTML và CSS và các plugin JavaScript. Nhưng làm ơn, hãy chọn lọc. Bạn không cần phải sử dụng mọi tính năng của Bootstrap Điều này đặc biệt đúng với các plugin. Chọn và chỉ chọn các plugin có ý nghĩa và không sử dụng mọi thứ vì nó trông đẹp và bắt mắt. Trang web của bạn có thể dễ dàng bị lạm dụng. Trước tiên, hãy xem xét rằng bạn hoàn toàn không bao gồm tệp 6 và tạo một trang web chỉ sử dụng HTML và CSS đơn giản. Và sau đó, chỉ thêm các thành phần khi cần thiết cho các vai trò cụ thể, từng cái mộtLỗi Bootstrap phổ biến # 5. Lạm dụng dấu nhắc phương thứcCác phương thức Bootstrap cung cấp lời nhắc hộp thoại linh hoạt với chức năng được yêu cầu tối thiểu và đi kèm với các giá trị mặc định thông minh. Mặc dù phương thức dễ sử dụng và cung cấp nhiều tùy chỉnh, nhưng có một số điều chúng ta cần lưu ý để tránh những cách sử dụng sai phổ biến Hiển thị nhiều lời nhắc phương thức tại thời điểm đóBootstrap không hỗ trợ các phương thức chồng chéo. Chỉ một phương thức tại thời điểm có thể được nhìn thấy. Có thể hiển thị nhiều phương thức cùng một lúc, nhưng nó yêu cầu phải viết mã tùy chỉnh để xử lý việc này đúng cách Phương thức Bootstrap xuất hiện dưới nềnNếu vùng chứa phương thức hoặc phần tử cha của nó có vị trí cố định hoặc tương đối, thì phương thức sẽ không hiển thị chính xác. Luôn đảm bảo rằng vùng chứa phương thức và các thành phần chính của nó không được áp dụng bất kỳ định vị đặc biệt nào. Cách thực hành tốt nhất là đặt HTML của một phương thức ngay trước thẻ đóng 7 hoặc thậm chí tốt hơn là đặt ở vị trí cấp cao nhất trong tài liệu ngay sau thẻ mở 0. Đây là cách tốt nhất để tránh các thành phần khác ảnh hưởng đến giao diện và chức năng của phương thứcModal trên thiết bị di độngCó một số cảnh báo mà các nhà phát triển cần lưu ý khi xử lý các phương thức trên thiết bị di động có bàn phím ảo. Điều này đặc biệt đúng đối với các thiết bị iOS, nơi tồn tại lỗi kết xuất không cập nhật vị trí của các phần tử cố định khi bàn phím ảo được kích hoạt. Điều này không được Bootstrap xử lý, do đó, tùy thuộc vào nhà phát triển để xử lý các tình huống này trong mã theo cách tốt nhất cho ứng dụng được đề cập Lỗi Bootstrap thường gặp #6. Sự cố thành phần nút nhập tệpBootstrap không có thành phần được chỉ định cho nút tải tệp lên. Có thể đạt được một giải pháp đơn giản và thanh lịch chỉ sử dụng HTML và CSS với mã mẫu sau
Có nhiều ví dụ về cách đạt được hiệu ứng tương tự. Ví dụ mã này được mượn từ Cory LaViska và trên trang web của anh ấy, bạn có thể đọc giải thích chi tiết hơn về vấn đề này. Ngoài ra còn có một ví dụ mở rộng với nhiều chức năng hơn đang sử dụng mã JavaScript bổ sung Lỗi Bootstrap phổ biến # 7. Phức tạp quá mức với JavaScript và bỏ qua thuộc tính “data-”Các nhà thiết kế, hoặc chỉ các nhà phát triển JavaScript mới làm quen, có thể dễ dàng đi sâu vào phát triển web và tạo các trang web chỉ bằng HTML, CSS và Bootstrap. Nếu họ không giỏi mã hóa, họ có thể rơi vào bẫy lạm dụng JavaScript hoặc phức tạp hóa quá mức. Điều quan trọng là phải nói rằng tất cả các plugin Bootstrap có thể được sử dụng hoàn toàn thông qua API đánh dấu mà không cần viết một dòng JavaScript nào. Đây là API hạng nhất của Bootstrap và bạn nên cân nhắc đầu tiên khi sử dụng plugin Ví dụ: chúng ta có thể kích hoạt hộp thoại phương thức mà không cần viết bất kỳ JavaScript nào chỉ bằng cách đặt 1 trên thành phần bộ điều khiển như nút hoặc neo và chuyển các tham số bổ sung bằng thuộc tính 2. Trong mã bên dưới, chúng tôi đang nhắm mục tiêu mã HTML có ID 3. Chúng tôi đã chỉ định rằng phương thức sẽ không đóng khi người dùng nhấp vào bên ngoài phương thức bằng cách sử dụng tùy chọn 4 và chúng tôi đã tắt sự kiện khóa thoát đóng phương thức bằng tùy chọn 5. Tất cả trong một dòng mã HTML________số 8Lỗi Bootstrap phổ biến # 8. Bỏ qua các công cụ giúp dễ dàng phát triển BootstrapLỗi xảy ra và mọi nhà phát triển thỉnh thoảng mắc lỗi. Điều này là không thể tránh khỏi, nhưng cách bạn đối phó với sai lầm mới là điều quan trọng. Nhóm Bootstrap nhận thấy bằng cách xem trình theo dõi vấn đề rằng mọi người đang mắc một số lỗi thường xuyên hơn. Đó là lý do tại sao họ cố gắng tự động hóa quá trình phát triển. Kết quả là Bootlint, một công cụ linting HTML cho các dự án Bootstrap. Bootlint có thể được sử dụng trong trình duyệt hoặc từ dòng lệnh thông qua Node. js và nó sẽ tự động kiểm tra các trang web Bootstrap để tìm nhiều lỗi sử dụng Bootstrap phổ biến. Thêm Bootlint vào chuỗi công cụ phát triển web của bạn có thể loại bỏ rất nhiều lỗi phổ biến thường làm chậm quá trình phát triển của dự án Trong trường hợp bạn muốn đóng góp cho dự án Bootstrap, bạn nên kiểm tra Rorschach. Rorschach là một bot kiểm tra độ tỉnh táo của yêu cầu kéo Bootstrap, chạy một số kiểm tra đối với mỗi yêu cầu kéo mới. Nếu kiểm tra độ chính xác không thành công, nó sẽ để lại nhận xét thông tin về yêu cầu kéo giải thích lỗi và cách khắc phục, sau đó đóng yêu cầu kéo Lỗi Bootstrap phổ biến # 9. Sự cố không tương thích giữa IE8 và các trình duyệt cũ hơnBootstrap được xây dựng để hoạt động tốt nhất trong các trình duyệt dành cho máy tính để bàn và thiết bị di động mới nhất. Các trình duyệt cũ hơn có thể hiển thị các thành phần và thành phần theo kiểu khác, nhưng mọi thứ phải có đầy đủ chức năng. Hỗ trợ bao gồm Internet Explorer 8 và 9, với một lưu ý quan trọng là một số thuộc tính CSS3 và phần tử HTML5 không được các trình duyệt này hỗ trợ đầy đủ Để được hỗ trợ đầy đủ cho Internet Explorer 8 và các trình duyệt cũ khác, bạn cần sử dụng một polyfill cho CSS3 Media Queries Reply. js, HTML 5 shim cho phép sử dụng các phần tử HTML5 và thẻ IE 6 thích hợp trong phần đầu HTML để đảm bảo rằng IE không chạy trong chế độ tương thích. Phần đầu HTML của bạn cuối cùng sẽ trông giống như thế này 0Trong trường hợp của 7, hãy cẩn thận với những lưu ý sau trong môi trường phát triển và sản xuấtLỗi Bootstrap thường gặp #10. Bỏ qua các phương pháp hay nhấtMột trong những câu hỏi phổ biến trên Stack Overflow là làm thế nào để menu Bootstraps thả xuống mở khi di chuột, thay vì nhấp chuột. Mặc dù giải pháp cho câu hỏi này không phức tạp và có thể được thực hiện bằng cách chỉ sử dụng CSS, nhưng nó không được khuyến nghị. Tính năng này đã bị loại khỏi khuôn khổ một cách có mục đích và đây là quyết định thiết kế của nhóm phát triển. Một lần nữa, điều đó có thể được thực hiện, nhưng người ta cần hiểu các tác động và hiểu rằng các phương pháp hay nhất tồn tại, đặc biệt đối với các khung đầu tiên dành cho thiết bị di động. Lý do đằng sau vấn đề cụ thể này là việc làm cho mọi thứ hoạt động khi di chuột không giúp ích cho người dùng có thiết bị cảm ứng. Trên các thiết bị như vậy không có di chuột, chỉ có các sự kiện chạm. Do đó, điều này sẽ không hoạt động bình thường trên mọi thiết bị hỗ trợ cảm ứng Những sai lầm của Bootstrap Kết luậnTôi hy vọng hướng dẫn Bootstrap ngắn này sẽ giúp bạn tránh được một số lỗi phổ biến, xóa bỏ những quan niệm sai lầm thông thường và giúp bạn hiểu rõ nhất về framework. Xin lưu ý rằng Bootstrap không dành cho tất cả mọi người và cũng không phù hợp với mọi dự án. Khi chọn một khung, bạn cần dành chút thời gian để đọc tài liệu và bạn cần dành thời gian chơi với khung đó để hiểu rõ hơn và hình dung về cách thức hoạt động của nó. Điều này cũng hợp lệ cho Bootstrap Đọc tài liệu, chơi và thử nghiệm với các mẫu, hiểu đúng những điều cơ bản và tận hưởng việc tạo ra các thiết kế mới và đẹp mắt Thẻ UXWebDesignMistakesFrontEndUICSSSResponsiveHTMLjQueryNgười làm việc tự do? Tìm công việc tiếp theo của bạn. Công việc tự do từ xa Xem thông tin đầy đủ Tomislav Bacinger Kỹ sư phần mềm Thông tin về các Tác giả Tomislav khám phá các khu vực chưa được khám phá, mang lại cảm giác về dữ liệu và tạo ra các bản đồ và trực quan hóa dữ liệu phong phú. Ông có nhiều kinh nghiệm trong phân tích dữ liệu và sắp xếp dữ liệu, kiến thức chuyên sâu về GIS với nền tảng không gian địa lý rộng và chuyên môn vững vàng trong thiết kế và phát triển các ứng dụng web và di động. Bản đồ và hình ảnh là niềm đam mê của anh ấy Thuê Tomislav Bình luậnEvan Wieland bài viết thực sự tốt. Khi lần đầu tiên sử dụng bootstrap, #3 là sai lầm lớn nhất của tôi. Tôi đã học được một cách khó khăn, nhưng không bao giờ làm điều đó một lần nữa. . ) Và ngay cả khi bạn lười ghi đè bootstrap bằng css tùy chỉnh, bạn luôn có thể tải xuống bản dựng bootstrap tùy chỉnh tốt. Yêu nghệ thuật trong bài viết này là tốt Evan Wieland bài viết thực sự tốt. Khi lần đầu tiên sử dụng bootstrap, #3 là sai lầm lớn nhất của tôi. Tôi đã học được một cách khó khăn, nhưng không bao giờ làm điều đó một lần nữa. . ) Và ngay cả khi bạn lười ghi đè bootstrap bằng css tùy chỉnh, bạn luôn có thể tải xuống bản dựng bootstrap tùy chỉnh tốt. Yêu nghệ thuật trong bài viết này là tốt István Ujj-Mészáros #7 states that "all Bootstrap plugins can be used purely through the markup API, without writing a single line of JavaScript", but that is not true for
István Ujj-Mészáros #7 states that "all Bootstrap plugins can be used purely through the markup API, without writing a single line of JavaScript", but that is not true for
Tijana Dojcinovic Bài viết hay, nhưng nhắm đến những người mới bắt đầu trong các vấn đề về giao diện người dùng web. Ngoài ra, một phần tốt của nó về cơ bản chỉ nói RTFM. Tuy nhiên, một bài viết hay, nhiều người sẽ thấy nó rất hữu ích Tijana Dojcinovic Bài viết hay, nhưng nhắm đến những người mới bắt đầu trong các vấn đề về giao diện người dùng web. Ngoài ra, một phần tốt của nó về cơ bản chỉ nói RTFM. Tuy nhiên, một bài viết hay, nhiều người sẽ thấy nó rất hữu ích Shairyar Baig Bài viết mới mẻ hay về bootstrap Shairyar Baig Bài viết mới mẻ hay về bootstrap Luboš Volkov Chúng tôi rất vui vì bạn thích bài viết và nghệ thuật. #toptaldesignteam Luboš Volkov Chúng tôi rất vui vì bạn thích bài viết và nghệ thuật. #toptaldesignteam Mô-ha-mét bài viết rất hay, cảm ơn bạn Mô-ha-mét bài viết rất hay, cảm ơn bạn Navazkhan BÀI VIẾT TỐT - http. //www. w3công nghệ. thông tin/ Navazkhan BÀI VIẾT TỐT - http. //www. w3công nghệ. thông tin/ Monika Pilare Những điều chúng ta nên ghi nhớ trong khi thực hiện các thay đổi trong các lớp bootstrap sẽ phá vỡ khả năng phản hồi của trang web? Monika Pilare Những điều chúng ta nên ghi nhớ trong khi thực hiện các thay đổi trong các lớp bootstrap sẽ phá vỡ khả năng phản hồi của trang web? José Esteva Lời khuyên tuyệt vời, cảm ơn bạn José Esteva Lời khuyên tuyệt vời, cảm ơn bạn vKrue Cảm ơn Tomislav Bacinger. Tôi rất thích lời khuyên và lời giải thích của bạn. Tôi là một nhà thiết kế/nhà phát triển web mới bắt đầu học Bootstrap. và tôi phải làm việc trên #3. Tôi đã đăng ký vào danh sách cập nhật của bạn và mong được đọc thêm vKrue Cảm ơn Tomislav Bacinger. Tôi rất thích lời khuyên và lời giải thích của bạn. Tôi là một nhà thiết kế/nhà phát triển web mới bắt đầu học Bootstrap. và tôi phải làm việc trên #3. Tôi đã đăng ký vào danh sách cập nhật của bạn và mong được đọc thêm thích Tôi có bảng trong Mô hình Bootstrap, tôi cũng có hộp văn bản để thêm Mục vào bảng, khi tôi thêm và xóa dữ liệu thì nó không cập nhật trong chế độ bootstrap, làm cách nào tôi có thể vượt qua điều này. cảm ơn trước thích Tôi có bảng trong Mô hình Bootstrap, tôi cũng có hộp văn bản để thêm Mục vào bảng, khi tôi thêm và xóa dữ liệu thì nó không cập nhật trong chế độ bootstrap, làm cách nào tôi có thể vượt qua điều này. cảm ơn trước Người hâm mộ Walking Dead ồn ào Bạn có blog và gặp một số vấn đề nhỏ hoặc nghiêm trọng về HTML hoặc CSS hoặc jQuery? . //goo. gl/sIqZLb Người hâm mộ Walking Dead ồn ào Bạn có blog và gặp một số vấn đề nhỏ hoặc nghiêm trọng về HTML hoặc CSS hoặc jQuery? . //goo. gl/sIqZLb bãi cát when I use add and don't fill any field and close the bootstrap popup and try to delete a row . This error showing in the picture arrives. code: Modal HeaderModal Header |