Quoi utiliser sans bootstrap ?

Quoi utiliser sans bootstrap ?

Vous pouvez utiliser Foundation au lieu de bootstrap. Habituellement, les ingénieurs de développement utiliseront Bootstrap, tandis que les développeurs front-end utiliseront Foundation en premier.

Il existe de nombreuses différences clés entre Bootstrap et Foundation, cependant, je pense que vous devez seulement vous rappeler une chose :

Les deux philosophies de conception de ZURB et Twitter sont très claires, de par leur association. peut le dire d'après le nom de votre propre framework : Bootstrap signifie guider et démarrer au démarrage, en d'autres termes, il essaie de gérer tout ce dont vous avez besoin dans votre projet et Foundation signifie créer, en d'autres termes, il ne vous donne que tout ce dont vous avez besoin. besoin dans votre projet. Une créativité puissante.

En gardant cette perspective, permettez-moi maintenant d'énumérer d'autres différences clés entre les deux :

1. >Foundation n'organise qu'un nombre limité d'éléments, tandis que Bootstrap vous donne tous les éléments que vous pouvez imaginer.

L'objectif de conception de ZURB pour Foundation est que même si vous utilisez des éléments d'interface utilisateur prédéfinis, cela ne devrait pas se ressembler trop sur le site Web de tout le monde.

D'autre part, Bootstrap essaie de vous fournir tous les éléments d'interface utilisateur définis.

2. REMs VS Pixels

Foundation utilise des REM, tandis que Bootstrap utilise des pixels.

L'utilisation de pixels signifie que vous devez définir avec précision la hauteur, la largeur, le remplissage et la marge d'un composant, ainsi que dans chaque appareil A et la taille de l'écran, car différents appareils sont souvent ont des effets d'affichage très différents.

Maintenant, Foundation 5 utilise des REM au lieu d'EM. De cette façon, le problème de la cascade EM est évité : http://css-tricks .com/font-sizing-with-rem/.

L'utilisation des REM signifie que vous pouvez utiliser directement font-size: 80%; pour réduire la taille du composant entier et de ses sous-composants de 20%.

Il convient de mentionner que grâce aux REM, vous pouvez vous débarrasser des détails des pixels, il est donc très intéressant d'utiliser les REM pour le traitement.

Foundation fournit également la méthode sass mixin pour convertir les pixels en REM. De cette façon, vous pouvez continuer à utiliser le. Façon de penser les pixels pour définir la page :

.element {
  width: rem-calc(10px); // will be converted to REMs
}

3. Grille flexible VS grille prédéfinie

Grille de Foundation Elle peut s'adapter automatiquement à la largeur du navigateur actuel. prédéfinit plusieurs tailles de grille pour s'adapter aux appareils et écrans courants.

Bootstrap le modifiera soudainement lorsque vous modifierez la largeur du navigateur.

Foundation s'adaptera de manière flexible à la largeur actuelle du navigateur. une nouvelle méthode technique qui peut s'adapter automatiquement tout en montrant le même effet que Transformer.

Fondation Il y a deux points principaux lorsque la grille change : petite, moyenne et grande. Toutes les opérations ne font que rétrécir et s'agrandir, et s'adapter au. largeur actuelle du navigateur. Il n'est pas nécessaire d'avoir une taille d'écran prédéfinie, et la raison principale est que vous êtes encouragé à définir différents styles en fonction de la taille de l'écran.

Avec Bootstrap, vous obtenez un style fixe ou multiple. grille, ce qui signifie que vous devez définir ou configurer le conteneur de grille séparément Pas une largeur prédéfinie

En utilisant Foundation et Sass, vous pouvez ajuster librement la taille de la plus grande grille (moyenne et petite sont automatiquement calculées), la nombre de colonnes pour les grands écrans et nombre de colonnes pour les petits écrans.

4. Les appareils mobiles d'abord VS prend également en charge les appareils mobiles

Foundation a été conçu avec quatre. -l'écran d'angle à l'esprit. Bootstrap est pré-divisé en : téléphones mobiles lors de la conception, tablettes, ordinateurs de bureau et ordinateurs de bureau à écran extra-large.

Créer un site Web axé sur les mobiles signifie qu'il sera certainement utilisable sur des écrans plus grands. Ainsi, Foundation vous encourage à faire ceci : Prioriser le mobile.

Si vous utilisez Sass Media Query Mixin de Foundation, vous constaterez qu'il n'y a pas de Media Query spécifique pour demander ce qu'est un appareil mobile, mais vous utilisez un Media Query Requête pour définir ce qui devrait être sur un écran plus grand Comment afficher

Si vous concevez d'abord quelque chose en pensant au bureau, vous rencontrerez probablement de gros problèmes pour prendre en charge des écrans plus petits, et si vous considérez d'abord le téléphone mobile, cela vous permettra de vous concentrer sur ce qui est le plus important pour les utilisateurs, d'augmenter votre sentiment d'utilisation de l'espace.

5. Communauté

Bootstrap a une communauté plus large. Foundation, vous devez être plus autonome.

Le plus grand point fort de Bootstrap est la communauté. Il s'agit d'une communauté très vaste et globale, et vous pouvez trouver presque tout ce que vous voulez.

Si vous choisissez Foundation, l'autonomie peut être quelque chose que vous devez maîtriser. Presque toutes les solutions sont pour Bootstrap, vous ne pouvez créer que la vôtre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!