Trước khi tôi phát hiện ra lưới CSS, tôi đã sử dụng lưới bootstrap rất nhiều. Lưới Bootstrap là một giải pháp hợp lý cho nhiều vấn đề về khả năng phản hồi mà tôi đã gặp phải khi còn là một người mới. Sau đó, tôi phát hiện ra lưới CSS. Lợi thế của lưới CSS so với lưới bootstrap là chất lượng hai chiều của nó (khả năng sử dụng các hàng và cột) trái ngược với hàng một chiều của bootstrap
Trên mạng, có rất nhiều cuộc tranh luận xem cái nào tốt hơn, khi nào nên dùng và dùng như thế nào. Điều này làm tôi bối rối rất nhiều. Mặc dù tôi sử dụng lưới CSS nhiều hơn nhưng tôi thích cả hai. Mặc dù lưới CSS mạnh hơn đáng kể, nhưng tôi thấy lưới bootstrap linh hoạt hơn. Tôi có thực sự phải lựa chọn không?
Bootstrap has an in-built grid options system that works across multiple devices and this has helped me eliminate the use of media queries. With the use of bootstrap grid options, I can adequately position how I want them to appear on different screens without using media queries.
Đây là những gì tôi muốn nói
https. // codepen. io/Barrisam/pen/EJrgyR
Link bút https. // codepen. io/Barrisam/bút/KYJgMm
In the code above, I have created a nested grid in
cho màn hình lớn
màn hình nhỏ (chế độ xem trên thiết bị di động)
Lưới lồng nhau giữ nguyên trong suốt. tôi không muốn điều này. Và tôi không muốn chỉ định các điểm ngắt phương tiện trong CSS
Vì vậy, tôi quyết định lồng một lưới bootstrap trong lớp —. để xem liệu tôi có thể đạt được kết quả mong muốn không
https. // codepen. io/Barrisam/bút/oOmzgJ
Bố cục lưới Bootstrap cho phép tối đa 12 cột mỗi hàng. Trên một màn hình lớn, bốn cột được đặt cạnh nhau. Mỗi cột chiếm 3 đơn vị trong số 12 cột
màn hình lớn > 1000px
máy tính bảng
Trên màn hình trung bình, các cột hiện chiếm 6 đơn vị, tức là chia đều 12 cột thành hai cột
xem di động
Trong khi trên các màn hình nhỏ hơn như thiết bị di động, các cột chiếm toàn bộ chiều rộng và được xếp chồng lên nhau
Lưới CSS và lưới bootstrap có thể phối hợp hoàn hảo với nhau. Thay vì so sánh chúng với nhau, bạn phải tìm cách kết hợp hai lưới mạnh mẽ này
HTML/CSSSBootstrapPhát triển webThiết kế đáp ứngPhát triển di động
Bài báo cáo
Thưởng thức bài viết này?
1
Chia sẻ
Barinedum Sambaris
Nhà phát triển giao diện người dùng. Javascript. con trăn. Django
Tôi là nhà phát triển giao diện người dùng với HTML5, CSS3, Bootstrap, Jquery và Javascript. Tôi cũng sử dụng Python và Django. Tôi thích đọc và viết mã. tôi thích dạy
Làm theo
Khám phá và đọc thêm các bài viết từ Barinedum Sambaris
bắt đầu
Thưởng thức bài viết này?
Để lại một lượt thích và bình luận cho Barinedum
1
Gửi đi
kristof vandommele
2 năm trước
Vì vậy, bạn đã bao gồm hệ thống lưới hoàn chỉnh của bootstrap cho thứ gì đó có thể mất 5 dòng CSS bổ sung?
Hồi đáp
Ahmed Kaja
3 năm trước
Bạn có thể đã sử dụng một lưới lồng nhau cho. và đạt được những gì bạn muốn và loại bỏ hoàn toàn lưới bootstrap, phải không?
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 phổ biến nhất khi sử dụng Bootstrap
Chia sẻ
Chia sẻ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 phổ biến nhất khi sử dụng Bootstrap
Bởi Tomislav Bacinger
Chuyên gia đã được xác minh về Kỹ thuật
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