Ingénieurs de développement, en utilisant des développeurs bootstrap, front-end, en utilisant la fondation . Parlons de pourquoi.
Il existe de nombreuses différences clés entre Bootstrap et Foundation, mais je pense que vous n'avez qu'à vous souvenir d'une seule chose:
Les deux concepts de conception de zurb et de Twitter sont très clairs, car ils peuvent être vus de leur nomment de leurs propres cadres: Bootstrap signifie bootstrap, bootstrap, en d'autres termes, il essaie de gérer tout ce dont vous avez besoin dans votre projet. La fondation signifie la création, la création, en d'autres termes, cela vous donne simplement une forte créativité dans votre projet.
En gardant cette vue, je vais maintenant énumérer plus des principales différences entre les deux:
1. Éléments d'interface utilisateur
Foundation organise uniquement quelques éléments limités, tandis que Bootstrap vous donne tous les éléments que vous pouvez imaginer.
L'objectif de conception de Zurb pour la fondation est que même si vous utilisez des éléments d'interface utilisateur prédéfinis, il ne devrait pas ressembler trop à votre site Web.
D'un autre côté, Bootstrap essaie de vous fournir tous les éléments d'interface utilisateur définis.
2. Rems vs pixels
La fondation 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, les marges intérieures, les marges externes d'un composant et dans chaque taille de dispositif et d'écran, car différents appareils ont tendance à avoir une grande différence dans les effets d'affichage.
Maintenant, la Fondation 5 utilise les Rems, pas Em. Cela évite le problème EM Cascade.
L'utilisation de REM signifie que vous pouvez utiliser la taille de la police: 80%; Pour réduire l'ensemble de 20% de la composante et ses sous-composants.
Il convient de mentionner qu'avec REMS, vous pouvez vous débarrasser des détails des pixels, il vaut donc la peine d'utiliser des REM pour les gérer.
La fondation fournit également une méthode de mixin de SASS pour convertir les pixels en REM, afin que vous puissiez continuer à utiliser la méthode de pensée des pixels pour définir les pages:
.Element {largeur: rem-calc (10px); // sera converti en REMS}3. Grille flexible vs grille prédéfinie
La grille de la Fondation peut s'adapter automatiquement à la largeur du navigateur actuel. Boostrap a prédéfini plusieurs tailles de grille pour s'adapter aux appareils et écrans traditionnels.
Bootstrap changera soudainement sa grille lorsque vous changerez la largeur du navigateur.
La fondation s'adaptera de manière flexible à la largeur actuelle du navigateur. Il s'agit d'une nouvelle méthode technique. Tout en s'adaptant automatiquement, il peut effectuer le même effet que Transformer.
La fondation a deux points clés lorsque la grille change: petite, moyenne et grande. Toutes les opérations sont uniquement réduites et agrandies et adaptées à la largeur du navigateur actuel. Les tailles d'écran prédéfinies ne sont pas nécessaires, et la raison la plus importante est que vous êtes encouragé à définir différents styles en fonction de la taille de l'écran.
À l'aide de bootstrap, vous obtenez un maillage fixe ou multiple, ce qui signifie que vous devez définir ou non une largeur prédéfinie pour le conteneur de maillage.
Avec Foundation et Sass, vous pouvez ajuster librement la taille de la plus grande grille (les moyens et les petits sont automatiquement calculés), le nombre de colonnes pour les grands écrans et le nombre de colonnes pour les petits écrans.
4. Les appareils mobiles sont préférés par rapport aux appareils mobiles
Foundation a été conçue avec tout écran à quatre coins à l'esprit. Bootstrap a été conçu avec des téléphones portables, des téléphones portables, des tablettes, des ordinateurs de bureau et des ordinateurs de bureau avec des écrans surdimensionnés .
La construction d'un site Web axé sur mobile qui prend en charge les appareils mobiles signifie qu'il est certainement disponible sur un écran plus grand. Ainsi, Foundation vous encourage à faire cela: mobile-premier.
Si vous utilisez le mélange de requête multimédia SASS de la Fondation, vous constaterez qu'il n'y a pas de requête multimédia spécifique pour interroger ce qu'est un appareil mobile, mais vous utilisez une requête multimédia pour définir comment elle doit être affichée sur un écran plus grand.
Si vous envisagez d'abord des ordinateurs de bureau lors de la conception de choses, vous pouvez rencontrer de gros problèmes lorsque vous soutenez les écrans plus petits. Si vous considérez d'abord votre téléphone, vous vous concentrerez sur ce qui est le plus important pour les utilisateurs et augmenterez votre sens de l'espace.
5. Communauté
Bootstrap a une communauté plus grande. Et avec le fond de teint, vous devez être plus autonome.
Le grand point culminant de Bootstrap est la communauté. C'est un très énorme, tout compris, 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 destinées à bootstrap, et vous ne pouvez que construire le vôtre.
en conclusion
Posez-vous quelques questions:
Voulez-vous que quelque chose soit plus utile ou le rend plus réaliste?
Voulez-vous organiser votre propre CSS et en faire votre composant sous-jacent?
Les réponses sont: bootstrap. Fondation .
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Est-ce une comparaison intéressante? J'espère qu'il sera utile pour tout le monde de comprendre les frameworks frontaux Bootstrap 3 et Foundation 5.