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

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;

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

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

Dom : clonage

Le code utilise la balise <template> et le clonage.

Pour en savoir plus.

Recherche de bugs

Voici le comportement attendu.

1. 1
2. 2
3. 3
4. 4
5. 5

click : select

dlbclick : unselect

flêche haut,bas : ajout au dessus en dessous de la selection

touche suppr : delete selected

Corriger le code suivant

Ajouter plusieurs éléments, la sélection ne marche plus.

Corriger le code suivant

la suppression puis l'ajout d'élément, la numérotation est erronée.

Vidéo jquery

Angular

• Jquery
• html
• CSS
• JS

informations

une bibliothèque de rêve

informations

la base de web?

informations

Le style

informations

le Dynamisme est arrivé!

les tabs : angular2

Les étapes pour arriver à un code "propre"

ng-click="action"

ng-show="cond"

 

ng-controller

 

ng-init

 

class active 

Améliorations

Logique dans un nouveau contrôleur

ng-repeat ! 

John rezig !

---

Annonce du cours de jquery sur la khan academy

Découvrez le caractère dun code numérique

  (function(){    
  
  affiche = function(){
    document.querySelector("div").innerHTML="";
    var i;
    for (i=33;i<2000;i++){
      //conversion nb->charactere
      var val = String.fromCharCode(i);

//création bouton
      var newNode = 

//ajout des attributs pour le CSS bootstrap
      // type bouton
      newNode.set...

      // class "btn"
      newNode.classList.add("btn");

//ajout du contenu
      // mettre comme valeur "val  i ";
      newNode.... = ...

//ajout dans le DOM -> div
      document...
        
      if (document.getElementById("val").value==i){
        
//clonage du newNode pour memoriser les recherches
        extraNode = ...
        //ajout class "btn-info"
        extraNode....
        // ajout class "btn-success" à newNode
        newNode...
         
//ajout dans le DOM de extra node juste avant le container
         document.querySelector(".container").insertBefore(extraNode,document.querySelector(".container").firstChild);
      }    
    }
  };

// creation du listeneur sur le input id = val
document.getElementById("val").addEventListener("change",affiche,true);

})();

Evénements clavier

Passage de paramêtres Event

Prenons l'exemple de mozilla pour illustrer le passage de paramètre à un événement




Cette solution n'est pas applicables dans le cas de boucles !
 Les closures sont très utiles pour le passages de paramètre lors d'un événement

Angular partie 1

quizz

dupontquizz.blogspot.com

Événement propagation

Dans le exemples suivant cliquer sur un élément.

 Cas de la propagation montante

fichier

Cas de la propagation descendante

fichier

Valeur de e et de this

fichier

Evénements la propagation

Nous allons utiliser le débogeur pour mieux comprendre la propagation des événements dans le DOM.

Il va de soit que body contient les balises. Supposons que Body contienne un p. Si vous cliquer à l'endroit où se trouve le paragraphe, vous avez cliqué sur le body et sur le paragraphe ?
Mais dans quel ordre !

  "Qui de la poule ou de l’œuf était avant  ?" 

un p dans un body : sens de propagation des événement

La réponse est la suivante  : c'est vous qui choisissez.

Examinons le cas, où l'on considère que vous avez cliqué d'abord sur le Body puis sur le paragraphe ; autrement dit il y a propagation de l'événement par le bas (voir figure précédente)

Cas Body->paragraphe

Remarquez le troisième paramètre de EventListener à true.

addEventListener(event, callback , true);

Utiliser le débogueur pour observer les priorités en mettant deux points d'arrêts (lig. 30, 37) et relancer le débogueur.

Lancer l'exécution et cliquer sur le paragraphe

Avancer le débogueur : on voit que body a réagi.

Avancer le débogueur : on voit que le paragraphe à réagi.

Cas paragraphe->body

Remarquez le troisième paramètre à false.

addEventListener(event, callback , False);

Comme précédemment, mettre deux points d'arrêts et lancer l'exécution puis cliquer sur le paragraphe

Avancer le débogueur : c'est maintenant le paragraphe qui réagi en premier.

Avancer le débogueur : c'est au tour du body.

Comparaison : le troisième paragraphe permet de contrôle le sens de propagation.

Le style est d'abord appliqué au body (1 cas)

Le style est d'abord appliqué au paragraphe (2 cas)

Stop propagation

On peut empêcher la propagation de l'événement.

Simuler des fonctions de base

Soit le code HTML suivant

Cliquez sur le code précédant pour accéder au fichier test.

Tapez le code suivant dans la console.

Nous détectons la présence du retour chariot. Le test du type confirme notre hypothèse

Voici l'écriture d'une fonction permettant d'obtenir le premier élément (avec ou sans retour chariot).

function next( elem ) {

do {elem = elem.nextSibling;} while ( elem && elem.nodeType != 1 );return elem;

}

function first( elem ) {

elem = elem.firstChild;
return elem && elem.nodeType != 1 ?
next ( elem ) : elem;

}

first(document.body);

Para 1

second Para 2

dernier Para

inserBefore ?

parentOfBeforeNode.insertBefore( nodeToInsert, beforeNode ); 

The mnemonic that we use to remember the order of the arguments is the phrase

“You’re inserting the first element, before the second.”