grille de sémantique mobile Bootstrap 3.x de Twitter

Question

Après avoir lu le nouveau (inachevé) Bootstrap 3 docs Je me demande comment créer une grille mobile sémantique.

En bref. Comment convertir ceci:

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

Pour cela et préserver la petite grille mobile:

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

Moins

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

Answer 1

Si je comprends bien votre question bien je pense que vous devriez utiliser:

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

Où col-span-6 est votre classe pour la grande grille et col-small-span-6 pour la petite grille. Si vous laissez col-small-span-6 votre div va empiler. La petite grille n'utilise pas les classes col-span-*.

Voir aussi: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

A partir de maintenant Bootstrap Twitter définit trois grilles: grille minuscule pour les téléphones (< 480px), Petite grille pour les tablettes (< 768px) et la grille à moyen grand pour Destkops (> 768px) . Les préfixes de classe de ligne pour ces grilles sont ".col-", ".col-sm-" et ".col-lg-". La grille Moyenne-grande empilera en dessous de 768 pixels de largeur d'écran. Tout comme la petite grille en dessous de 480 pixels et la minuscule grille ne s'empile jamais.

donc votre code html doit être:

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

MOINS La dernière version: https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip ne contient pas une fonction petite colonne de .make plus. Voir aussi: https://github.com/twbs/bootstrap/pull/8302 .make-column() ajoutera une requête media pour min-width: @ grid-float-breakpoint donc sur la petite grille vos colonnes s'empileront toujours en utilisant cette fonction.

Vous pouvez essayer:

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

MISE À JOUR

La réponse ci-dessus sera basée sur les candidats de libération de Bootstrap Twitter 3. La version finale de Bootstrap 3 Twitter a 4 grille un petit supplément (xs), petit (sm), moyen (md) et grand (lg). Le code Less a également été modifié en fonction de ces grilles. Utilisez donc la .make- {x} -column mixins tel que décrit par @gravy dans sa réponse: https://stackoverflow.com/a/18667955/1596547

Answer 2

PARTIE 1: Rant

Je déteste bootstrappers à l'aide des classes div html comme une couche de présentation à leur HTML !! ! Je vous félicite de chercher à programmer votre site correctement.

Cela me rappelle les années 90 et le début des années 2000 où nous construisions tous des sites Web avec des tables ... allons-nous à reculons?

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

Je suis en attente pour le jour que Google impose des sanctions sur le balisage non sémantique.

PARTIE 2: Solution

Quoi qu'il en soit, en tirant ce retour à la question ...

Pour bootstrap 3, pour autant que je sache, vous ne pouvez pas utiliser .make-column(6) etc ... comme par Réponse de Bass Jobsen parce que vous devez spécifier la taille de la fenêtre/écran. lg/md/sm/xs

Voici comment je le ferais ...

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