Est-il possible d'intégrer MaterializeCss dans Bootstrap

Je me suis demandé (non testé) s'il est possible d'intégrer à la fois bootstrap et materializecss dans le même projet

Puisque les deux frameworks sont dans le même but et se chevauchent probablement dans certaines définitions de classe, etc. est-il toujours possible de combiner les deux frameworks afin d'élargir mes options de style?

31
demandé sur softvar 2015-02-19 21:14:06

6 réponses

Materialize n'est pas basé sur Bootstrap ni simplement sur une "couche visuelle", l'utilisation des deux frameworks peut conduire à beaucoup d'incompatibilités ou au moins se chevaucher beaucoup car la plupart de leurs fonctionnalités sont redondantes (grilles, menus, icônes, etc.).

Personnellement, j'utilise ce projet "Bootstrap" la conception de matériel, qui est un thème Bootstrap et fonctionne très bien. Si vous n'avez pas besoin / voulez Bootstrap, vous pouvez également utiliser Material Design Lite qui a été récemment publié par Google. C'est un cadre CSS Léger basé sur les directives de conception des matériaux. Lumière par rapport à Matériau angulaire ou polymère utilisant également des directives de conception de matériau mais faisant partie ou nécessitant d'autres frameworks javascript (C'est-à-dire angulaire).

39
répondu Guillaume 2017-09-25 00:23:54

J'ai ajouté Materialize à mon site web bootstrap et cela a bien fonctionné, comme l'a dit JC Borlagdan bien qu'il y ait un certain chevauchement. J'utilise simplement un inspecteur de site web et (généralement un clic droit > inspecter l'élément), puis désactivez simplement la propriété bootstrap ou materialize pour voir celle que j'aime le plus et supprimez le style de celle que je n'aime pas. Assurez-vous simplement d'obtenir les versions non minifiées de materialize et bootstrap.

10
répondu Brian Purgert 2017-09-24 23:47:47

Il est possible, j'ai déjà testé les deux framework dans un seul formulaire web, bien que certaines propriétés des contrôles se chevauchent, en particulier à la balise <div> qui appelle la classe container pour la balise.
Pour la grille, il suit toujours le bootsrap, pour une raison quelconque, (que je ne sais pas). Parce que j'ai essayé de réorganiser l'ordre des balises <script>, la grille bootsrap est toujours celle utilisée par la page Web / webform.

1
répondu JC Borlagdan 2015-04-28 08:44:11

, Vous devez définir l'ordre de CSS fichiers comme

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>

Maintenant, vous pouvez remplacer les classes ou les identifiants CSS bootstrap et créer vos propres styles CSS.

1
répondu khurram 2015-04-29 05:48:55

Vous pouvez supprimer la grille de materialize.CSS et compilez simplement un paquet Bootstrap personnalisé avec BT GRID et sans les boutons,les étiquettes, etc.

N'utilisez aucun Plugin BT jQuery, puis compilez et chargez bootstrap.min.css d'abord dans votre modèle, puis le modded se matérialiser.css et materilize.min.js.

Vous pouvez également intégrer uniquement des boutons, des cartes ou des couleurs en les sélectionnant dans materialize.CSS et insérer dans votre modèle.css / style.CSS à écraser Bootstrap styles ou à ajoutez des classes CSS alternatives à votre grille.

0
répondu Dennis Heiden 2016-03-21 10:34:38

Je ne suis pas sûr que ce soit possible. Material Design est quelque chose de nouveau de Google, et inclut responsive dans le cadre de celui-ci, tandis que la bibliothèque Bootstrap provient de Twitter et semble être principalement orientée responsive.
Découvrez cette conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
Je soupçonne qu'ils ne vont pas être intégrés les uns aux autres, et vont entrer en conflit mal, mais peut-être que quelqu'un d'autre a plus information.

0
répondu SAK 2016-03-25 11:23:01