Bootstrap les grilles

Mais que veut dire col-xs-12 col-sm-6 col-md-2 col-lg-8 ?

Examinons d'abord le comportement des class en redimensionnant votre fenêtre.

Les classes possibles

col-xs-12 col-sm-6 col-md-2 col-lg-8

col-xs-6 col-sm-6 col-md-10 col-lg-4

La classe appliquée

JS Bin on jsbin.com

Les vacances !

Si vous n'avez rien d'autre à faire !
Commencez, comme moi, un cours

Expressivité

Nous connaissons le manque d'expressivité du HTML (qui ne donne que la structure du document).

Il suffit de comparer ce code HTML
<p> <span>12 <span> rue de lagny </p>

avec cette syntaxe

<adresse>
   <numero>12 </numero>
   <rue> rue de lagny </rue>
</adresse>

Encore une fois, Angular cherche a se rapprocher de XML. Il est possible d'écrire des expressions.

Exemple

Expression

app.directive("coursTabNiveau", function() {

    return {

      restrict: 'E',

      templateUrl: "description.html"

    };

  });

html

  <cours-tab-niveau></cours-tab-niveau>

noté le passage de la notion html à JS (camelCase)

description.html

<table class="table table-striped">

  <thead><tr>

    <th>Edit</th>

    <th>Cours</th>

    <th>Niveau</th>

  </tr></thead>

  <tbody>

   <tr ng-repeat="c in c2016.cours | orderBy:'niveau' ">

   <td>

      <button class="btn" ng-click="" ng-disabled="true">

      <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit

      </button>

    </td>

    <td> {{c.nom}}</td>

    <td> {{c.niveau}}</td>

 </tr>

</tbody>

</table>

test

box-sizing: border-box;

On voit de plus en plus la règle box-sizing: border-box; appliquée aux balises.

Cliquer sur le test, pour appliquer la règle box-sizing: border-box;

Voir fichier->
Sur l'exemple suivant, les deux blocs de taille respective (60% et 40%) peuvent avoir une bordure à l’intérieur ou à l’extérieur.
Dans le cas d'une bordure à l'extérieur, la somme tille + bordure dépasse les 100% du conteneur. Les blocs sont réparti sur deux lignes. En cliquant sur les blocs, vous mettez soit une bordure extérieure (dépassement-> deux lignes) soit une bordure intérieure (pas de dépassement -> une ligne).

1

2

Règles CSS

Comment écrire le AND de deux classes

<div class="bleu jaune">vert</div>

.bleu.jaune{
  background-color : green;
}

JS Bin on jsbin.com

My bootstrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Comment obtenir ce comportement sans la classe ↠breadcrumb de bootstrap ?

L'idée est simple, tous les balises li sauf la premiere, auront un symbole devant eux.

Ecriture de la règle :

.breadcrumb > li + li:before {

    ...

    content: "/\00a0";

}

⇥ Démonstation

ng-model

JS Bin on jsbin.com