73 votes

Comment Twitter Bootstrap 3 a changé au cours de la version 2.3.2 ?

J’étudie moi-même la différence. Jusqu'à présent, je suis venu avec :

Quelles sont les différences plus ? des gens qui ont déjà fait l’étude.

203voto

Sangram Singh Points 3410

Bootstrap 3 est destiné à être mobile-first.

  1. Abandonné IE7 et FF3.6 prise en charge.
  2. Standard et responsive CSS combinés en un seul fichier.
  3. Renommé les Variables: Renommer les variables à utiliser des tirets au lieu de camelCase. Par exemple, il est maintenant @corps-bg au lieu de @bodyBackground
  4. Pas plus @bleu, @orange, au lieu de son @marque-primaire, @la marque: les clés du succès, et d'autres. Ces points sont ensuite attribués par le composant de base (par exemple, @l'état d'alerte de texte, @btn-fond-primaire, etc)
  5. Ajouter la rétine l'image mixin avec .img-rétine()
  6. De nouvelles variables ajoutées comme:- Modification @composant actif-bg et de personnaliser les états actifs de la valeur liquidative des pilules, des listes déroulantes, et plus encore.

Refonte des systèmes de grille pour le rendre fluide et mobile-first.

  1. Retiré séparé grille fluide du système, container, et la mise en page
  2. Nouveau système de grille utilise .ligne (pas les pourcentages de pixels), (rembourrage au cours de la marge), et box-sizing: border-box, maintenant.
  3. Les décalages sont toujours 100% pris en charge.
  4. Au lieu de .durée* et .décalage*, nous sommes maintenant en utilisant .col-* et .col-offset-*, respectivement.
  5. Utiliser .col-* des classes pour les petits appareils (smartphones). Et à utiliser .col-sm-* classes pour les petits appareils (tablettes)
  6. Ajouter .col-push-* et .col-pull-* modificateur de classes pour faciliter la colonne de la source de la commande.
  7. Supprimer dédié table de classes de grille.
  8. L'utilisation de "max-width" au lieu de "largeur" sur toutes .conteneur des instances est recommandé pour aider à prévenir certains problèmes avec des conteneurs de composants comme navbars.

Boutons:

  1. La valeur par défaut bouton gris nécessite deux classes-class="btn btn-default".
  2. De chute .btn-inverse

Formes:

  1. Supprimer input-prepend et l'entrée-ajouter singulier .entrée-groupe
  2. De chute .formulaire de recherche
  3. Horizontal formes sont maintenant mobiles, ce qui signifie au <768px, les éléments sont empilés. Ci-dessus, les éléments sont flottaient et se retrouvent côte-à-côte.
  4. Les cases à cocher et les radios désormais besoin d'un
  5. Au lieu de .la radio.en ligne, vous avez maintenant besoin d'une classe unique .radio en ligne, pour une utilisation directe sur un

Les icônes

  1. Convertir Glyphicons v1.7 @font-face et de la chute de l'ancien Png.
  2. Toutes les classes .glyphicon - au lieu de .icône-

Étiquettes:-

  1. Refactoriser étiquettes à l'échelle de leurs parents font-size
  2. Baissé le .étiquette inverse

Héros de l'Unité de Jumbotron

  1. Classe changé depuis .-héros de l'unité .jumbotron
  2. Plus léger de la police de poids pour les titres
  3. L'échelle de taille de police en responsive points de vue.

Trajets et Navbars

  1. Retirez .nav-option de liste. Remplacé par le nouveau .liste-le groupe de composants.
  2. Déposer le support .navbar-recherche
  3. Révision de styles par défaut de la barre de navigation et de ses sous-composantes:
  4. Menu déroulant carets (celles pour le menu, pas les indicateurs) ont été enlevés ainsi que les menus déroulants reposer à plat contre le bord de la barre de navigation.
  5. Barre de navigation verticale diviseurs ont été amenés à imposer un brin, ce qui signifie qu'ils ne s'étendent pas sur toute la hauteur de la barre de navigation.
  6. Plus aucune zone d'ombre ou des dégradés sur la navbars.
  7. Hauteur de la barre de navigation a augmenté de 44px à 62px pour les appareils mobiles, et 50px pour les ordinateurs de bureau.
  8. Supprimé .navbar-inner et déplacé pertinentes styles .barre de navigation
  9. Changé .barre de navigation > .nav .navbar-nav
  10. Changement .btn-barre de navigation .navbar-bascule
  11. Changé .de la marque .navbar-marque

Des listes déroulantes:-

  1. Supprimer les sous-menus prise en compte dans les menus déroulants.
  2. Supprimé .nav-d'en-tête et l'a remplacé avec .déroulant-d'en-tête

Les auxiliaires modaux:-

  1. Plus de besoin de .masquer
  2. Réintroduit .modal-ouvert sur le corps, de sorte que nous pouvons nuke le défilement)
  3. Ajoute que quelques niveaux supplémentaires de balisage (à savoir .modale de dialogue et de .modal-content), donc on peut faire défiler l'ensemble modal plutôt que de débordement d'une section au sein de l'modal.
  4. Liées, .modal est maintenant le wrapper, et .modale est la teneur en modal lui-même. Il en est ainsi, nous pouvons toujours utiliser la position: fixed;, mais faire le modal relativement placé de sorte que le défilement se déplace l'ensemble du modal, pas quelque chose avec elle.
  5. Ajout d'un .modal-title plus cohérent et utile de ciblage de l'en-tête de contenu (auparavant, c'était juste un et sélecteur de performance sage que aspiré).

Carrousel:-

  1. Refonte! Plus léger styles pour le précédent et suivant de contrôle, ainsi que le carrousel sous-titres.
  2. Mise à jour nécessaire de balisage pour carrousel des contrôles. L' .carrousel-classe de contrôle exige maintenant un autre élément à l'intérieur pour la précédente/suivante caractères. Ces caractères sont maintenant Glyhpicons icônes pour améliorer le style et le positionnement sur tous les navigateurs et appareils. Les indicateurs sont maintenant bas moyen-alignés.
  3. Les légendes sont renforcées comme facultative et, par défaut, sont cachés sur les vues mobiles, puis montré pour >768px les fenêtres.

La liste ci-dessus est pour le programmeur. Réponse précédente approvisionne très bien pour le meilleur des programmeurs que moi.

6voto

Rolando Isidoro Points 2388

Remarque: Dans certains cas, je trouve qu'il est important d'écrire la réponse ici, mais dans ce cas, je ne pense pas que l'info à partir de GitHub va disparaître, donc j'ai choisi de fournir cette réponse courte, avec toutes les infos juste 1 clic.

À partir du Bootstrap blog:

Ce qui a changé!?

Avec plus de ~1,600 s'engage, ~de 72 000 ajouts/suppressions, et ~300 fichiers changé, tout a changé. Nous avons ajouté des fonctionnalités, des fonctionnalités supprimées, et nettoyé beaucoup plus. La v3 pull request sur GitHub a tous les détails dont vous aurez besoin pour une liste complète des modifications et utile à la migration des conseils.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X