Hệ thống lưới lỏng hoặc cố định, trong thiết kế đáp ứng, dựa trên Twitter Bootstrap


399

Tôi đang bối rối về các tùy chọn khác nhau trong lưới bootstrap twitter và cách chúng đi cùng nhau.

Để bắt đầu, bạn có thể có một bản sửa lỗi thông thường containerhoặc a container-fluid.

Sau đó, một trong hai có thể bao gồm một hàng bình thường rowhoặc một hàng chất lỏng , row-fluid. Đó là, bạn có thể có một thùng chứa cố định với một hàng chất lỏng, hoặc một chất lỏng chứa ... với một hàng cố định?

Sau đó, trên hết, bạn có thể bao gồm các truy vấn phương tiện 'phản hồi' hoặc không.

Tôi đang bối rối về cách những thứ này tương tác. Nhưng hãy bắt đầu với một ví dụ rõ ràng.

Trên trang ví dụ , có những gì được trình bày như một ví dụ về cả lưới cố địnhlưới chất lỏng

Tuy nhiên, trong trình duyệt của tôi, trên chính trang ví dụ đó - cả hai lưới đều hoạt động giống hệt nhau. Có lẽ bởi vì trang ví dụ sử dụng các truy vấn phương tiện đáp ứng tùy chọn? Trong cả hai ví dụ lưới, nếu tôi bắt đầu thu hẹp dần cửa sổ trình duyệt của mình, các phần tử lưới sẽ không bị thu hẹp dần - khi đạt đến độ rộng ranh giới (đáp ứng) nhất định, chúng sẽ chuyển sang kích thước nhỏ hơn và một lần nữa ở độ rộng ranh giới tiếp theo. Nhưng cả ví dụ 'cố định' thông thường VÀ ví dụ 'chất lỏng' hoạt động giống hệt nhau ở đây - vậy sự khác biệt là gì?


6
Có lẽ đây là một ví dụ tốt hơn về phong cách bố trí chất lỏng?
Cody Grey

Câu trả lời:


442

Khi bạn quyết định giữa chiều rộng cố định và chiều rộng chất lỏng, bạn cần suy nghĩ về trang ENTIRE của mình. Nói chung, bạn muốn chọn cái này hoặc cái kia, nhưng không phải cả hai. Các ví dụ bạn liệt kê trong câu hỏi của bạn, trên thực tế, trong cùng một trang có chiều rộng cố định. Nói cách khác, trang Giàn giáo đang sử dụng bố cục có chiều rộng cố định. Các lưới cố địnhmạng lưới dịch trên trang Giàn giáo không có nghĩa là ví dụ, mà là tài liệu hướng dẫn cho bố trí thực hiện cố định và các chất lỏng chiều rộng.

Ví dụ chiều rộng cố định thích hợp là ở đây . Ví dụ về chiều rộng chất lỏng thích hợp là ở đây .

Khi quan sát ví dụ về chiều rộng cố định, bạn không nên thấy kích thước thay đổi nội dung khi trình duyệt của bạn rộng hơn 960px. Đây là chiều rộng tối đa (cố định) của trang. Truy vấn phương tiện trong thiết kế có chiều rộng cố định sẽ chỉ định độ rộng tối thiểu cho các kiểu cụ thể. Bạn sẽ thấy điều này trong thực tế khi bạn thu nhỏ cửa sổ trình duyệt của mình và thấy bố cục chụp sang một kích thước khác.

Ngược lại, bố cục chiều rộng chất lỏng sẽ luôn kéo dài để phù hợp với cửa sổ trình duyệt của bạn, bất kể nó rộng bao nhiêu. Các truy vấn phương tiện cho biết khi kiểu thay đổi, nhưng chiều rộng của các thùng chứa luôn là một tỷ lệ phần trăm của cửa sổ trình duyệt của bạn (chứ không phải là một số pixel cố định).

Tất cả các truy vấn phương tiện 'đáp ứng' đã sẵn sàng để đi. Bạn chỉ cần quyết định xem bạn muốn sử dụng bố cục chiều rộng cố định hoặc chiều rộng chất lỏng cho trang của mình.

Trước đây, trong bootstrap 2, bạn phải sử dụng row-fluidbên trong một thùng chứa chất lỏng và rowbên trong một thùng chứa cố định. Với việc giới thiệu bootstrap 3, row-fluidđã bị xóa, không sử dụng nữa .

EDIT : Theo nhận xét, một số jsFiddles cho:

Những câu đố này hoàn toàn không có Bootstrap, dựa trên các truy vấn phương tiện CSS thuần túy, điều này khiến chúng trở thành điểm khởi đầu tốt, cho bất kỳ ai sẵn sàng tạo ra giải pháp tương tự mà không cần sử dụng Twitter Bootstrap.


1
hmm, được thôi, các tài liệu dường như với tôi đề nghị bạn có thể trộn và kết hợp chất lỏng và cố định, nhưng tôi đoán đó là cách sử dụng nâng cao mà tôi chưa sẵn sàng. :) Tôi vẫn không hiểu làm thế nào responsivethay đổi cả cố định và chất lỏng tương ứng - bạn có thể sử dụng đáp ứng (hoặc không) với cả cố định và chất lỏng, phải không? Bạn có thể giải thích làm thế nào đáp ứng hiệu ứng từng người?
jrochkind

8
Điều khó hiểu với tôi vẫn là ví dụ 'chiều rộng cố định phù hợp' KHÔNG thay đổi kích thước của các cột khi cửa sổ trình duyệt thay đổi (vì nó có phản hồi không?) Và ví dụ về chiều rộng chất lỏng thích hợp. Nhưng tôi đoán ví dụ về chiều rộng chất lỏng thực hiện liên tục và ví dụ phản hồi chiều rộng cố định có thực hiện trong các bước nhảy rời rạc, cũng như đạt đến kích thước tối đa không? Là nó? Làm thế nào về chất lỏng đáp ứng vs không đáp ứng?
jrochkind

16
Bạn đã có nó. Trong bố cục chiều rộng cố định, các cột thay đổi khi cửa sổ trình duyệt đạt đến chiều rộng được xác định trong truy vấn phương tiện. Vì vậy, khi bạn có cửa sổ rộng hơn 960px, cửa sổ sẽ giữ nguyên chiều rộng tối đa. Sau đó, khi bạn thu nhỏ trình duyệt của mình thành 959px, nó sẽ chuyển sang bố cục mới dựa trên truy vấn phương tiện có chiều rộng tối đa 768px. Vì vậy, vì bạn đang xem bố cục có chiều rộng cố định, các cột sẽ không thay đổi khi chiều rộng trình duyệt của bạn nằm trong khoảng từ 768 đến 960.
eterps

3
Và khi bạn đang xem bố cục chiều rộng chất lỏng, kích thước cột sẽ luôn thay đổi để phù hợp với chiều rộng của trình duyệt của bạn. Bản thân bố cục cũng sẽ thay đổi theo các truy vấn phương tiện, như với bố cục có chiều rộng cố định.
eterps

12
Điều quan trọng nhất cần nhớ là chiều rộng cố định = pixel và chiều rộng chất lỏng = phần trăm. Khả năng đáp ứng đến từ tất cả các quy tắc CSS ưa thích được xác định trong bootstrap-responsive.css và các quy tắc đó áp dụng cho cả hai bố cục.
eterps

21

Thảo luận thú vị. Tôi đã tự hỏi mình câu hỏi này quá. Sự khác biệt chính giữa chất lỏng và cố định chỉ đơn giản là bố cục cố định có chiều rộng cố định về toàn bộ bố cục của trang web (chế độ xem). Nếu bạn có chế độ xem chiều rộng 960px, mỗi cột có độ rộng cố định sẽ không bao giờ thay đổi.

Bố trí chất lỏng hành xử khác nhau. Hãy tưởng tượng bạn đã đặt chiều rộng của bố cục chính thành chiều rộng 100%. Bây giờ mỗi cột sẽ chỉ được tính theo kích thước tương đối của nó (tức là 25%) và các chuỗi vì trình duyệt sẽ được thay đổi kích thước. Vì vậy, dựa trên mục đích bố trí của bạn, bạn có thể chọn cách bố trí của bạn cư xử.

Đây là một bài viết tốt về chất lỏng so với flex .


7

Nguồn - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

Ưu

  • Bố cục chiều rộng cố định dễ sử dụng hơn nhiều và dễ dàng tùy chỉnh về mặt thiết kế.
  • Độ rộng là như nhau cho mọi trình duyệt, do đó ít gặp rắc rối hơn với hình ảnh, biểu mẫu, video và nội dung khác có chiều rộng cố định.
  • Không cần chiều rộng tối thiểu hoặc chiều rộng tối đa, dù sao mọi trình duyệt đều không hỗ trợ.
  • Ngay cả khi một trang web được thiết kế tương thích với độ phân giải màn hình nhỏ nhất, 800 × 600, nội dung vẫn sẽ đủ rộng ở độ phân giải lớn hơn để dễ đọc.

Nhược điểm

  • Bố cục có chiều rộng cố định có thể tạo ra khoảng trắng quá mức cho người dùng có độ phân giải màn hình lớn hơn, do đó làm đảo lộn tỷ lệ thần thánh của Hồi giáo, Quy tắc thứ ba của Hồi giáo, cân bằng tổng thể và các nguyên tắc thiết kế khác.
  • Độ phân giải màn hình nhỏ hơn có thể yêu cầu thanh cuộn ngang, tùy thuộc vào chiều rộng của bố cục cố định.
  • Kết cấu liền mạch, hoa văn và tiếp tục hình ảnh là cần thiết để phù hợp với những người có độ phân giải lớn hơn.
  • Bố cục chiều rộng cố định thường có điểm tổng thể thấp hơn khi nói đến khả năng sử dụng.

6

Bố trí chất lỏng trong Bootstrap 3.

Không giống như Boostrap 2, Bootstrap 3 không có hỗn hợp .container-liquid để tạo ra một thùng chứa chất lỏng. .Container là một bố trí lưới đáp ứng chiều rộng cố định. Trong một màn hình lớn, có quá nhiều khoảng trắng ở cả hai phía của nội dung trang Web của một người.

container-fluid được thêm lại trong Bootstrap 3.1

Bố trí lưới chất lỏng sử dụng tất cả chiều rộng màn hình và hoạt động tốt hơn trong màn hình lớn. Nó chỉ ra rằng thật dễ dàng để tạo ra một bố cục lưới chất lỏng bằng cách sử dụng các mixins Bootstrap 3. Các dòng sau đây làm cho một bố trí lưới đáp ứng chất lỏng:

.container cố định;

Mixin cố định .container đặt nội dung vào giữa màn hình và thêm phần đệm. Nó không chỉ định chiều rộng trang cố định.

Một cách tiếp cận khác là sử dụng phong cách CSS của Eric Flowers

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

2
Tôi không hiểu tại sao mọi người cứ nói rằng 'chất lỏng chứa' không được hỗ trợ trong Bootstrap 3, trong khi đó. Tôi vừa kiểm tra hai lần và trong Bootstrap 3.1.0, nó được xác định rõ ràng.
bart

10
Đó là bởi vì nó đã bị xóa trong 3 được thêm lại vào 3.1 .
Steve Klösters

-2

bạn có thể sử dụng cái này - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. có một cái nhìn .. tôi thấy cái này thực sự rất hữu ích Hiệu suất tốt, trọng lượng rất nhẹ, bản thân tất cả các trình duyệt quan trọng và chất lỏng, vì vậy bạn không thực sự cần bootstrap cho lưới.


1
Mặc dù liên kết này có thể trả lời câu hỏi, tốt hơn là bao gồm các phần thiết yếu của câu trả lời ở đây và cung cấp liên kết để tham khảo. Câu trả lời chỉ liên kết có thể trở nên không hợp lệ nếu trang được liên kết thay đổi. - Từ đánh giá
piet.t

Tôi đồng ý .. nhưng đây không phải là tài liệu tham khảo cho câu trả lời, đây là liên kết đến plugin, nơi các tệp có thể được tải xuống, tôi đoán tôi không thể đính kèm tệp với câu trả lời ở đây ..
người đam mê
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.