Ist es bereit zur Verwendung von Bootstrap-css-Datei mit dem Präfix

Habe ich web-Anwendung, die verwendet Foundation.

Ich bin nicht gut auf die foundation und ich habe zu entwickeln, die paar Seiten wo ich Sie benutzen möchten Bootstrap aber ich will nicht mischen mit anderen Unternehmen css.

ALSO ich war auf der Suche, ob ich wickeln kann alle bootsrap innerhalb einer Klasse wie bootstrap. so, dass wenn ich verwenden möchten, bootsrap . ich verwenden können, wie

<div class="bootstrap"> <table class="table">
</div>

Ich weiß nicht, sass und all das.

ist es möglich den download einer bootstrap-css von online-mit einigen vordefinierten Präfix

  • stackoverflow.com/questions/13966259/... - LESS und SASS beide tun dies sehr schnell
  • Re meine Antwort, sicher sein, um den Streifen aus Bootstrap ist normalize css. Gehen Sie auf die GetBootstrap.com customizer, bekommen Sie NUR was Sie benötigen, öffnen Sie das entpackte css, entfernen Sie die normalize-Zeug, wie es ist Teil der foundation (oder so ähnlich), dann fügen Sie, dass in der css-prefix.com
  • wenn Sie sagen, sass tun schnell. was bedeutet es. ich habe nicht verwendet, sass vor
  • Beide SASS oder LESS kompilieren kann es schnell sein, wenn Sie entweder von Ihnen. Es ist ein Lernprozess, und Sie haben alle das Zeug installiert, um es zu tun. stackoverflow.com/questions/13966259/...
InformationsquelleAutor user3214546 | 2014-11-29
  1. 6

    Wenn Sie nicht mit SASS oder LESS, die Sie verwenden können, http://www.css-prefix.com/

    1. Ein kurzes Präfix (meine Empfehlung)
    2. Wenn Sie ein Leerzeichen, dann wird es einer übergeordneten Klasse.
    3. Einfügen in die kompilierte version der CSS-Datei
    4. Klicken Sie auf die Schaltfläche "ausführen"

    Ergebnis-snippet:

    .tb.col-xs-1, .tb.col-sm-1, .tb.col-md-1, ...

    Ist es bereit zur Verwendung von Bootstrap-css-Datei mit dem Präfix

    • Ich habe versucht, einfügen von bootsrap.css und dann laufen Präfix. wie es aussieht, nur vorangestellt einige tags nicht alle. Können Sie selbst ausprobieren, bootstrap einfügen.css und alles ist prefxed alle a-tags, Bilder , media queries etc.
    • Funktioniert auf alles, hat eine Klasse. Es funktioniert nicht auf Elemente, die keine Klasse wie h1, h2, video -, ODER in media queries mit min-UND max-width. Deshalb schlage ich vor, zu tun, als den Kommentar, den ich gemacht, nicht NUR bekommen, was Sie brauchen, und fügen Sie es in, nicht über normalisieren oder andere Sachen, die Sie nicht verwenden, halten Sie die aufblasen nach unten der css-Datei
    • Ich habe ein suchen und ersetzen schneller. Suche nach . (Punkt) ersetzen mit .tbs . (Präfix Leerzeichen und Punkt), dann funktioniert es viel besser
    • css-Präfix nicht mehr funktioniert, sondern man kann winless.org/online-less-compiler , und fügen Sie die css-inside ".Präfix { } " - Klasse
    InformationsquelleAutor Christina
  2. 5

    In der Tat könnte man namespaces verwenden, finden Sie unter: Wie namespace, Twitter Bootstrap, so dass Stile nicht miteinander kollidieren, http://lesscss.org/features/#features-overview-feature-namespaces-and-accessors und

    In dem Fall müssen Sie Bootstrap CSS für Tabellen, können Sie kompilieren Sie die folgenden Less /SASS-code, nach dem herunterladen der source-code an http://getbootstrap.com/getting-started/#download:

    **less /SASS **

    .bootstrap {
@import "variables";
@import "mixins/table-row";
@import "tables";
}

    Wie Sie sehen, können Sie den gleichen code für Less und SASS, beachten Sie, dass die Reihenfolge der Importe nicht egal, beim kompilieren von SASS-version.

    update

    Akzeptierten Lösung nur Präfix-Klassen (oder ein Selektor mit einer Klasse). In dem Fall, dass Sie wollen, um die Verwendung von Bootstrap CSS-Stil Ihren HTML-Tabellen. Ihr Präfix nicht haben, bootstrap-styles für die table, th und caption Selektoren.

    Selbst wenn Sie noch nie verwendet, Less /CSS, bevor Sie das tun können, indem Sie mit Less (oder SASS) leicht die Nutzung eines online-Compilers. Eine Liste von online Weniger Compilern finden Sie unter: http://lesscss.org/usage/#online-less-compilers. Auch codepen hat eine online-LESS und SASS-compiler.

    Das einzige, was Sie wissen müssen, ist, welche Dateien zu importieren. Bootstrap ist Weniger Dateien sind gut organisiert. Sie sollten immer importieren variables.less und mixins.less. Die mixins.less importiert alle anderen Mixins in Verbindung. Mixins in Verbindung nicht ausgeben, so importieren Sie alle von Ihnen wird die Kompilierung verlangsamen, erscheinen aber nicht in die kompilierte CSS-code.

    In dem Fall, dass Sie ein Präfix-version der Tabelle von CSS können Sie den folgenden code ausführen, der in einem der online-Compiler:

    .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");
}

    Eine demo finden Sie unter: http://codepen.io/bassjobsen/pen/PwPNBP

    InformationsquelleAutor Bass Jobsen
  3. 3

    Es klingt wie Sie wollen Bootstrap-namespace, der ist ziemlich leicht zu machen mit SASS (die Foundation verwendet, glaube ich). Also in deinem SASS-Datei (sollte ein .scss Erweiterung), die Sie importieren können, Bootstrap innerhalb einer Klasse Namen wie diese:

    .bootstrap {
  @import 'bootstrap';
}

    Dann können Sie Bootstrap-Referenz im HTML so:

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

    Können Sie download SASS-version von Bootstrap hier: https://github.com/twbs/bootstrap-sass. Drop, dass die SCSS-Datei in das gleiche Verzeichnis wie die Haupt SCSS-Datei und dann können Sie Sie importieren.

    InformationsquelleAutor Josh KG
  4. 1

    Imo die Antworten auf diese Frage sind problematisch. Wenn Sie die Einführung einer generischen Klasse namespace alles, wie dieser...

    .bootstrap {
    @import 'bootstrap';
}

    Sind Sie effektiv die Erhöhung der CSS-Spezifität.

    Was Sie wirklich brauchen, ist ein Werkzeug, das wandert Bootstrap, die Klasse zu wechseln-Namen selbst.

    Beispielsweise

    E. g.

    <div class="alert">

<div class="something alert">

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

    Werden sollte

    <div class="bs-alert">

<div class="something bs-alert">

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

    Sollte es lassen "etwas" zu allein, weil diese Klasse tritt nicht in Bootstrap.

    Meines Wissens so ein tool nicht gibt (open source).

    InformationsquelleAutor Wolfr
  5. 1

    @Wolfr ' s Antwort beschrieben hat das problem ziemlich gut in 2019 http://www.css-prefix.com/ nicht mehr funktioniert, und alle anderen Lösungen, die in der google top10 nur erhöhen css-Spezifität durch die Verpackung alle bootstrap-Klassen mit der übergeordneten Klasse.

    Dieser Ansatz ist nicht bullet-proof:
    wenn Sie z.B. machen

    .custom_namespace .col-3 {
    width: 25%;
    }

    diese nicht schützen Sie von jemandem mit !wichtig bootstrap-Klasse für was auch immer Grund, warum einige es tun würde.
    .col-3 {
    width: 99% !important;
    }

    Statt, es ist tatsächlich eine Arbeit, die ich gefunden durch npm, wo Entwickler hat tatsächlich umgesetzt werden, die die benutzerdefinierten Präfix UND sogar die Arbeit mit bootstrap der JS-Datei. Aber es ist nur für Bootstrap-3: https://www.npmjs.com/package/bootstrap-sass-namespace

    Generiert alle bootstrap-Klassen in form von z.B. .custom_prefix_col-3 {}

    Eine weitere option, wenn Sie müssen wirklich haben Bootstrap 4 css:

    In meinem Fall brauchte ich die Bootstrap-4, also öffnete ich die bootstrap-css-Datei ran suchen und ersetzen in Sublime Text mit Regulären Ausdrücken, mit diesem Wert für die Suche:
    \.(?<TAG>[a-z]{1,3}) - dies beschreibt die Anfänge der Klassen mit Zeit-und erste drei Buchstaben, im Gegensatz zu gerade auf der Suche nach Punkt (.) und riskieren, zu versauen float-Werte für CSS-Eigenschaften.

    und für die ersetzen, die ich verwendet .the_prefix_I_need\1

    Dies erlaubte mir, mich zu produzieren, die wirklich isoliert bootstrap 4 css-Datei, die für Sie sicher nicht verhunzt werden, wenn jemand irgendwo auf den Seiten, wo meine app enthalten ist, wird entscheiden, neu zu definieren, einige bootstrap-Klassen mit !wichtig.

    InformationsquelleAutor Dmytro Koval
Schreibe einen Kommentar