2013-08-06 40 views
11

Ai đó có thể giải thích về hệ thống Bootstrap 3.0 Grid. Tôi đã sử dụng lưới Bootstrap v2 có span1 đơn giản để span12 cho cột. Bây giờ Bootstrap 3.0 có các kiểu cột khác nhau như .col- .col-sm- .col-lg-Bootstrap 3.0 Lưới Giải thích

Tôi tìm thấy ví dụ này: http://examples.getbootstrap.com/grid/index.html, nhưng nó có nhiều cách khác nhau, như tôi không thể hiểu được "Hỗn hợp: điện thoại di động và máy tính để bàn "lưới nơi .col-12 .col-lg-8 được với nhau.

Tôi hy vọng sẽ di chuyển trang web Bootstrap v2 của tôi sang Bootstrap v3, nhưng tìm những thay đổi này quá nhiều.

Vui lòng giải thích.

EDIT: (. Điều này đưa ra sau khi tôi hỏi câu hỏi của tôi ở đây Hy vọng nó giúp độc giả trong tương lai) Cũng có bài viết tốt đẹp này giải thích Bootstrap 3 Lưới: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

+2

Starting Point: http://getbootstrap.com/css/#grid –

+1

Có, tôi đã đọc, nhưng có không có lời giải thích tốt về các lớp học col khác nhau và không có con đường tốt trên di chuyển từ phiên bản bootstrap 2 đến phiên bản 3. –

+1

Tôi không nghĩ rằng di cư từ 2 đến 3 là một mục tiêu với Bootstrap. Điểm của Bootstrap là có cơ sở cho thiết kế của riêng bạn. Bạn không thể chỉ cần loại bỏ Bootstrap 2 và cắm phiên bản 3. Nếu bạn muốn sử dụng Bootstrap 3, bạn cần phải xem xét việc thiết kế lại và tạo mọi thứ từ đầu. – RoToRa

Trả lời

7

Các ý chính cơ bản của nó là sự lặp lại khác nhau lớp .col cho phép bạn chỉ định hành vi lưới cho các thiết bị khác nhau (điện thoại, máy tính bảng, máy tính để bàn). Vì vậy, trong ví dụ bạn hỏi về số .col-lg-8 chỉ định rằng div sẽ chiếm 8 cột trên máy tính để bàn trong khi .col-12 chỉ định rằng div sẽ chiếm 12 cột (toàn bộ hàng) trên thiết bị di động. Mức độ cụ thể này cho phép bạn kiểm soát chính xác cách nội dung của bạn được đặt ra trên các kích thước màn hình khác nhau theo cách không đơn giản với Bootstrap 2.

Nói chung tôi đã tìm ra cách tốt nhất để hiểu ý nghĩa của trong thực tế là để hiển thị các trang mẫu trên các loại thiết bị khác nhau hoặc kích thước lại cửa sổ trình duyệt của bạn và chỉ cần so sánh kết quả.

Ngoài ra, như đã nêu trong nhận xét cho câu hỏi của bạn, ý tưởng di chuyển từ Bootstrap 2 đến 3 không nhất thiết phải là mục tiêu. Bạn có thể cố gắng thực hiện việc này bằng cách cập nhật các lớp học .span* hiện có của mình thành các lớp .col-* mới nhưng có những cân nhắc khác như dự án hiện tại của bạn có chiều rộng hoặc chất lỏng cố định có thể gây ra sự cố không. Có nhiều thay đổi khác giữa hai phiên bản bên ngoài bố cục lưới có thể gây ra sự cố cho bạn.