9
votes

Existe-t-il un fichier CSS de Bootstrap Bootstrap avec préfixe

J'ai une application Web qui utilise fondation .

Je ne suis pas bon à la fondation et je dois développer quelques pages où je veux utiliser bootstrap mais je ne fais pas Voulez-vous mélanger avec une autre société CSS.

Je cherchais donc si je peux envelopper tout bootsrap à l'intérieur d'une classe comme bootstrap . de sorte que si je veux utiliser BootsRap. Je peux utiliser comme xxx

Je ne connais pas les sass et tout ça.

est-il possible de télécharger des CSS de bootstrap de en ligne avec une présence pré-définie Préfixe


5 Réponses :


3
votes

On dirait que vous souhaitez que vous souhaitiez des espaces de bosses, ce qui est assez facile à faire avec SASS (quelle fondation utilise, je crois). Donc, dans votre fichier Sass (devrait avoir une extension .SSSS), vous pouvez importer des démarrages dans un nom de classe comme ceci: xxx pré>

, puis vous pouvez faire référence à bootstrap dans votre HTML comme ceci: p >

<body class="bootstrap">
    <div class="col-xs-12 col-sm-6"> 
        <table class="table"></table>
    </div>
</body>


0 commentaires

8
votes

Si vous n'utilisez pas de SASS ou moins, vous pouvez utiliser http: //www.css-prefix. com /

  1. Faites un courte préfixe (ma recommandation)
  2. Si vous utilisez un espace, il s'agira d'une classe mère.
  3. Coller dans la version compilée du fichier CSS
  4. Cliquez sur le bouton Exécuter

    Fraison de résultat: xxx

    entrez Description de l'image ici


4 commentaires

J'ai essayé de coller Bootsrap.css là-bas, puis exécutez le préfixe. On dirait que cela n'a préfixé que peu de tags pas tous. Pouvez-vous vous essayer de coller Bootstrap.css et voir tout est préféré à toutes les balises, images, requêtes de média, etc.


Travaille sur tout ce qui a une classe. Cela ne fonctionne pas sur des éléments sans classe telles que H1, H2, vidéo ou intérieure de requêtes de média avec une minute et une largeur maximale. C'est pourquoi je suggère de faire comme le commentaire que j'ai fabriqué, obtenez seulement ce dont vous avez besoin, puis la collez-la, n'incluez pas la normalisation ou d'autres choses que vous n'utilisez pas, gardez le ballon de votre fichier CSS.


J'ai fait une trouvaille et remplacez plus vite. rechercher . (un point) puis remplacer par .tbs. (espace de préfixe et point), puis cela fonctionne beaucoup mieux


CSS-PREFIX ne fonctionne plus, mais on peut utiliser Winless.org/online-less-Compiler, et coller le CSS à l'intérieur d'une classe ".prefix {}"



7
votes

En effet, vous pouvez utiliser des espaces de noms, voir: Comment faire de l'espace de noms Twitter Bootstrap SO styles Ne pas conflit , HTTP: //lesscss.org/features/#features-overview-Feature-NamesPacesSpaces-Accessors et

Dans le cas, vous n'avez besoin que de CSS de Bootstrap pour les tables uniquement, vous pouvez compiler le code moins / sass suivant, après Téléchargement du code source chez http://getbootstrap.com/geting-started/#download : p>

** MOINS / SASK ** P>

.bootstrap {
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/variables.less");
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/mixins.less");
    @import url("https://raw.githubusercontent.com/twbs/bootstrap/master/less/tables.less");
}


0 commentaires

2
votes

imo Les réponses à cette question sont problématiques. Si vous introduisez une classe générique pour déshabiller tout, comme celui-ci ...

<div class="bs-alert">

<div class="something bs-alert">

<div class="something bs-alert bs-alert-danger">


0 commentaires

2
votes

@ Wolfr's La réponse a décrit le problème assez bien - en 2019 http://www.css-prefix.com/ ne fonctionne plus, et toutes les autres solutions qui sont dans Google Top10 n'augmentent que la spécificité CSS. En enveloppant toutes les classes de bootstrap avec la classe mère.

cette approche n'est pas une épreuve de balle: par exemple. Si vous faites

.Custom_namespace .col-3 { largeur: 25%; }

Cela ne vous protégera pas de quelqu'un en utilisant! IMPORTANT DE LA CLASSE DE BOOTSTRAP pour une raison quelconque de certains le feraient. .col-3 { largeur: 99%! important; }

Au lieu de cela, il existe actuellement un travail que j'ai trouvé via NPM, où le développeur a effectivement mis en œuvre ce préfixe personnalisé et a même fait fonctionner avec le fichier JS de Bootstrap. Mais c'est seulement pour bootstrap 3: https://www.npmjs.com/package/bootstrap -Sass-noms espaces

Cela générera toutes les classes de bootstrap sous forme d'ex. .Custom_prefix_col-3 {}

Une autre option si vous avez besoin vraiment de bottesStrap 4 css:

Dans mon cas, j'avais besoin de bootstrap 4, j'ai donc ouvert le fichier CSS Bootstrap, recherchez et remplacez dans le texte sublime avec une expression régulière, en utilisant cette valeur pour la recherche: \ .) Et risquer de gâcher les valeurs de flotteur pour les propriétés CSS.

et pour remplacer, j'ai utilisé .the_prefix_i_need \ 1

Cela m'a permis de produire un fichier de Bootstrap 4 de Bootstrap 4 isolé que, à coup sûr, ne sera certainement pas gâché si une personne sur les sites Web où mon application est incluse décidera de redéfinir certaines classes de bootstrap avec! important.


1 commentaires

Merci beaucoup pour l'expression régulière. A-t-il un impact sur bootstrap.js? La classe personnalisée aura-t-elle un effet sur les JS Bootstrap?