Twitter Bootstrap 3.x семантическая мобильная сетка

Question

После прочтения новой (незавершенной) Bootstrap 3 docs Мне интересно, как создать семантическую мобильную сетку.

Вкратце. Как преобразовать это:

<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> 

Для этого и сохранить небольшую мобильную сетку:

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

Менее

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

Answer 1

Если я правильно понял ваш вопрос хорошо я думаю, вы должны использовать:

<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>

Где col-span-6 ваш класс для большой сетки и col-small-span-6 для маленькой сетки. Если вы оставите col-small-span-6, ваш куб будет складываться. Маленькая сетка не использует классы col-span-*.

Смотрите также: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

Теперь Bootstrap Twitter определяет три сетки: Крошка сетку для телефонов (< 480px), Малую сетку для таблеток (< 768px) и средне-большую сетку для Destkops (> 768px) , Префиксы класса строк для этой сетки: «.col-», «.col-sm-» и «.col-lg-». Средняя сетка будет располагаться ниже ширины экрана 768 пикселей. Точно так же Маленькая сетка ниже 480 пикселей, а крошечная сетка никогда не складывается.

Так что ваш HTML должен быть:

<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> 

МЕНЬШЕ Последняя версия: https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip не содержит функцию .make-малые колонки больше. См. Также: https://github.com/twbs/bootstrap/pull/8302 .make-column() добавит медиа-запрос для минимальной ширины: @ grid-float-breakpoint, поэтому на небольшой сетке ваши столбцы будут стекать всегда с использованием этой функции.

Вы можете попробовать:

// 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);} 

UPDATE

Ответ выше будет основываться на кандидатов высвобождения в Twitter Bootstrap 3. Окончательный вариант щебетать Bootstrap 3 имеет 4 сетки дополнительный небольшой (xs), малые (см), средние (md) и большие (lg). Также код Less был изменен в соответствии с этими сетками. Так используйте .make- {х} -column Mixins, как описано @gravy в своем ответе: https://stackoverflow.com/a/18667955/1596547

Answer 2

ЧАСТЬ 1: Рант

Я ненавижу bootstrappers с помощью классов HTML Div как слой представления их HTML !! ! Я приветствую вас, желая правильно программировать ваш сайт.

Это напоминает мне о 90-х и начале 2000-х годов, когда мы все строили сайты со столами ... мы возвращаемся к людям?

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

против

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

Я жду того дня, когда Google накладывает санкции на не-семантической разметки.

ЧАСТЬ 2: Решение

Во всяком случае, потянув это назад на вопрос ...

Для начальной загрузки 3, насколько я знаю, вы не можете использовать .make-column(6) и т.д. ... в соответствии с Ответ Bass Jobsen, потому что вам нужно указать размер окна/экрана. lg/md/sm/xs

Вот как я бы это сделать ...

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