Twitter của Bootstrap 3.x lưới điện thoại di động ngữ nghĩa

Question

Sau khi đọc mới (chưa hoàn thành) Bootstrap 3 docs Tôi tự hỏi làm thế nào để tạo lưới điện thoại di động ngữ nghĩa.

Tóm lại. Làm thế nào để chuyển đổi này:

<div class="row"> 
    <div class="col col-lg-6 col-sm-6">6</div> 
    <div class="col col-lg-6 col-sm-6">6</div> 
</div> 

Để này và giữ gìn lưới điện thoại di động nhỏ:

<div class="wrapper"> 
    <div class="left">6</div> 
    <div class="right">6</div> 
</div> 

Ít

.wrapper { .make-row(); } 
.left { .make-column(6); // this creates only large grid } 
.right { .make-column(6); } 

Answer 1

Nếu tôi hiểu câu hỏi của bạn tốt tôi nghĩ rằng bạn nên sử dụng:

<div class="row"> <div class="col-span-6 col-small-span-6″>6</div> <div class="col-span-6 col-small-span-6″>6</div> </div>

đâu col-span-6 là lớp học của bạn cho lưới điện lớn và col-small-span-6 cho lưới điện nhỏ. Nếu bạn rời khỏi col-small-span-6 div của bạn sẽ xếp chồng. Lưới nhỏ không sử dụng các lớp học col-span-*.

Xem thêm: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

Từ nay của Twitter Bootstrap định nghĩa ba lưới: lưới Tiny cho điện thoại (< 480), lưới nhỏ cho viên nén (< 768px) và lưới điện trung lớn cho Destkops (> 768px) . Tiền tố lớp hàng cho các lưới này là “.col-”, “.col-sm-” và “.col-lg-”. Lưới trung bình lớn sẽ xếp dưới chiều rộng màn hình 768 pixel. Vì vậy, các lưới nhỏ dưới 480 pixel và lưới nhỏ không bao giờ ngăn xếp.

Vì vậy html của bạn nên là:

<div class="row"> 
    <div class="col-6 col-lg-6 col-sm-6">6</div> 
    <div class="col-6 col-lg-6 col-sm-6">6</div> 
</div> 

LESS Phiên bản mới nhất: https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip không chứa một hàm .make-nhỏ-cột nữa. Xem thêm: https://github.com/twbs/bootstrap/pull/8302 .make-column() sẽ thêm truy vấn phương tiện cho chiều rộng tối thiểu: @ grid-float-breakpoint do đó trên lưới nhỏ, các cột của bạn sẽ luôn sử dụng chức năng này.

Bạn có thể thử:

// Generate the small columns 
.make-small-column(@columns) { 
    position: relative; 
    float: left; 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: (@grid-gutter-width/2); 
    padding-right: (@grid-gutter-width/2); 
    @max : (@grid-float-breakpoint - 1); 
    // Calculate width based on number of columns available 
    @media (max-width: @max) { 
    width: percentage((@columns/@grid-columns)); 
    } 
} 

.wrapper { .make-row(); } 
.left { .make-column(6); .make-small-column(6);} 
.right { .make-column(6); .make-small-column(6);} 

CẬP NHẬT

Câu trả lời ở trên sẽ được dựa trên các ứng cử viên phát hành của Twitter Bootstrap 3. Phiên bản cuối cùng của Bootstrap 3 của Twitter có 4 lưới thêm nhỏ (xs), nhỏ (sm), trung bình (md) và lớn (lg). Ngoài ra mã Less đã được thay đổi theo các lưới. Vì vậy, sử dụng .make- {x} -column mixins như mô tả của @gravy trong câu trả lời của mình: https://stackoverflow.com/a/18667955/1596547

Answer 2

PHẦN 1: Rant

Tôi ghét bootstrappers sử dụng các lớp html div như là một lớp trình bày sang HTML của họ !! ! Tôi hoan nghênh bạn tìm cách lập trình trang web của bạn một cách chính xác.

Nó làm tôi nhớ đến những năm 90 và đầu những năm 2000 khi chúng tôi xây dựng trang web với các bảng ... chúng ta có đi ngược lại không?

<div class="col-6 col-lg-6 col-sm-6">6</div> 
<div class="col-6 col-lg-6 col-sm-6">6</div> 

vs

<table><tr><td>6</td><td>6</td></tr></table> 

Tôi đang chờ đợi ngày mà Google áp đặt hình phạt trên đánh dấu phi ngữ nghĩa.

PHẦN 2: Giải pháp

Nhưng dù sao, kéo trở lại này cho câu hỏi ...

Đối bootstrap 3, theo như tôi biết, bạn không thể sử dụng .make-column(6) vv ... theo Câu trả lời của Bass Jobsen vì bạn cần xác định kích thước của cửa sổ/màn hình. lg/md/sm/xs

Dưới đây là làm thế nào tôi sẽ làm điều đó ...

main.less

@import 'bootstrap.less'; 

.wrapper { 
    .container; 
    .make-row(); 
    .clearfix(); 
} 

.content-main { // Change these for each window size 
    .make-lg-column(6); 
    .make-md-column(6); 
    .make-sm-column(6); 
    .make-xs-column(6); 
} 
.content-sidebar { // change these for each window size 
    .make-lg-column(6); 
    .make-md-column(6); 
    .make-sm-column(6); 
    .make-xs-column(6); 
} 

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="UTF-8"> 
    <style rel="stylesheet/less" src="less/main.less" /> 
    <script src="js/less-1.4.1.min.js" type="text/javascript"></script> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 

    <script src="assets/js/html5shiv.js"></script> 
    <script src="assets/js/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="content-main"> 
      <div class="page-title"> 
       <!-- Page Title Stuff --> 
      </div> 
      <div class="page-content"> 
       <!-- Page Content Stuff --> 
      </div> 
     </div> 
     <div class="content-sidebar"><!-- Page Footer Stuff --></div> 
    </div> 
</body> 

• less.js
• download Bootstrap