IP Girl
  1. IP Girl
  3. Application de styles CSS uniquement à certains éléments
Intereting Posts
Nodesjs AWS SDK S3 Générer une URL pré-définie jQuery publiant json valide dans le corps de la requête Sérialiser les données de formulaire en JSON Confusion BOOLEAN ou TINYINT AngularJS – Modèle ne se mettant pas à jour lors de la sélection du bouton radio généré par ng-repeat Spécification du format de date invalide dans gemspec Est-il possible d’empêcher l’allocation de stack d’un object et de ne permettre son instanciation qu’avec «new»? Rspec, Rails: comment tester des méthodes privées de contrôleurs? Pourquoi Ruby ne prend-il pas en charge i ++ ou i— (opérateurs d’incrémentation / décrémentation)? Quelle est la différence entre origine et amont sur GitHub? expression régulière pour prénom et nom Android: pourquoi setVisibility (View.GONE); ou setVisibility (View.INVISIBLE); ne fonctionnent pas Comment utiliser la commande update-alternatives –config java qu’est-ce que -webkit-transform: translate3d (0,0,0); exactement faire? Appliquer sur le corps? Utilisation de certificates client / serveur pour authentification bidirectionnelle Prise SSL sur Android

Application de styles CSS uniquement à certains éléments

J’ai un site Web existant avec beaucoup de vieilles pages et de formulaires mis en page avec des tableaux que je tente de passer progressivement à CSS. Je souhaite utiliser les feuilles de style Twitter Bootstrap – en particulier les styles pour les formulaires – mais uniquement sur les sections de pages où je les ai explicitement demandées. Par exemple, je pourrais entourer toute la forme dans un div comme ça:

Je veux que toutes les autres formes restnt les mêmes, car je ne pourrai pas les changer toutes en même temps. Existe-t-il un moyen simple de le faire? Je pourrais passer en revue chaque style du CSS Bootstrap et append un sélecteur parent (par exemple, «p» deviendrait «div.bootstrap p»), mais cela prendrait beaucoup de temps et il serait facile de manquer des styles.

Edit: Si une telle chose n’est pas possible, existe-t-il un outil gratuit capable d’extraire tous les styles d’un fichier, d’append un préfixe et de le sauvegarder à nouveau?

Pour Bootstrap 3, c’est plus facile si vous utilisez less :

Téléchargez le code source Bootstrap et créez un fichier style.less comme celui-ci: 

 .bootstrap { @import "/path-to-bootstrap-less.less"; @import "/path-to-bootstrap-responsive-less.less"; }

Enfin, vous devez comstackr le fichier moins; il y a beaucoup d’alternatives

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-comstackrs-that-use-LESS .js

Ou utilisez npm pour installer less puis comstackz le fichier style.less en style.css : 

 npm install -g less lessc style.less style.css

Le dernier correctif consistait à utiliser SASS (recommandé par quelqu’un hors site), car cela vous permet d’imbriquer des éléments puis de produire automatiquement le CSS final. Le processus est pas à pas:

  1. Concaténez les deux fichiers Bootstrap ( bootstrap.css et bootstrap-responsive.css ) dans bootstrap-all.css .
  2. Créez un nouveau fichier SASS, bootstrap-all.scss , avec le contenu div.bootstrap { .
  3. Ajoutez bootstrap-all.css à bootstrap-all.scss .
  4. Fermez le sélecteur div.bootstrap en ajoutant } à bootstrap-all.scss .
  5. Exécutez SASS sur bootstrap-all.scss pour produire un fichier CSS final.
  6. Exécutez YUI Compressor sur le fichier final pour produire une version réduite.
  7. Ajoutez la version réduite à l’élément head et enveloppez tout ce que je veux que les styles appliquent dans

    .

Je suis arrivé avec une solution CSS si vous ne pouvez pas utiliser LESS / SASS pour des raisons professionnelles / autres.

  1. J’ai utilisé ce site, http://www.css-prefix.com/ , et copié / collé bootstrap.min.css là-bas. J’ai défini prefix = ‘. Bootstrap’ et spacer = ”. Il préfixe tout avec .bootstrap sauf pas parfaitement.
  2. Si vous faites un grep pour ‘.bootstrap @media’, vous constaterez que la première classe à droite du crochet d’ouverture n’a pas de .bootstrap en tant que parent. Ajouter .bootstrap à toutes ces occurrences, environ 68 pour moi.
  3. Remplacez ensuite tous les “.bootstrap @media” par “@media”.
  4. La dernière étape consiste à remplacer tous les “.bootstrap @” par “@” (qui doivent comporter environ 5 occurrences).

Exemple: 

 .bootstrap @media (min-width:768px){.lead{font-size:21px}}

doit être remplacé par 

 @media (min-width:768px){.bootstrap .lead{font-size:21px}}

Une sorte de méthode de force brute, essayez donc définitivement la méthode LESS / SASS ci-dessus. 

 
 No Bootstrap 
 
 Yes Bootstrap

Je n’étais satisfait de aucune de ces réponses. Avec Less to scope, les règles ont créé toutes sortes de défauts. Clearfix, par exemple, était complètement foutu. Et les règles comme button.close devenaient button.bootstrap close au lieu de ce que je voulais vraiment: .bootstrap button.close .

J’ai adopté une approche différente. J’utilise PostCSS pour traiter le fichier CSS prêt à l’ emploi fourni avec Bootstrap. J’utilise le plugin Scopify pour définir toutes les règles avec .bootstrap .

Cela arrive surtout là-bas. Bien sûr, il y a les règles html et body qui deviennent .bootstrap html et .bootstrap body qui deviennent non-sensuelles. Pas de soucis … Je peux juste écrire une transformation PostCSS pour les nettoyer: 

 var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) { return function(css, result) { css.walkRules(function(rule) { rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap'); rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap'); }); } });

Maintenant, je peux isoler tous les styles Bootstrap en ajoutant une class="bootstrap" au niveau supérieur.

C’est dur Vous ne pouvez pas appliquer différentes feuilles de style CSS pour différentes parties d’une même page Web .

Je soupçonne que la seule façon de le faire est de créer un fichier distinct pour votre contenu afin de prendre les styles bootstrap, et de le cadrer dans la page comme ceci:

puis, dans content-to-take-bootstrap-styles.html référence à la feuille de style bootstrap dans l’en-tête. Mais alors vous avez toutes les complications des iframes – par exemple: l’élément iframe ne grossira pas pour s’adapter à la longueur de votre contenu.

J’ai une solution facile.

  1. Copiez le contenu css bootstrap vers ce convertisseur css en ligne vers scss / sass ( http://css2sass.herokuapp.com/ ).

  2. Ajoutez vos informations de balise (par exemple, div.bootstrap{ ) au début du contenu scss et fermez la balise à la fin.

  3. Copiez l’intégralité du contenu scss dans ce convertisseur scss to css ( https://www.sassmeister.com/ ) et convertissez-le 🙂

Vous pouvez utiliser css prêt à l’emploi pour Bootstrap 4.1 (compilé avec LESS) –

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

Il a isolé css pour les thèmes –

Pour utiliser Bootstrap CSS, encapsulez simplement votre code HTML dans un div avec la classe bootstrapiso, comme ceci:

Et utilisez le style css du dossier css4.1 comme suit: 

   ...

// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

Terminé!