Wie bekomme ich nur das responsive Grid von Bootstrap 3?

109

Ich muss meiner Webanwendung mithilfe von Twitter Bootstrap reaktionsschnelle Designfunktionen hinzufügen. Ich möchte nur das Reaktionsverhalten, ich interessiere mich nicht für die Typografie, Komponenten oder andere Dinge, die in Bootstrap enthalten sind.

Ich habe eine angepasste Bootstrap-Version erhalten, bei der nur das Rastersystem ausgewählt wurde. Wenn ich jedoch das generierte CSS zu meiner Anwendung hinzufüge, sind alle meine Stile durcheinander (Header, Links und andere). Warum passiert das? Wie kann ich ein Bootstrap-CSS nur mit dem Grid-System erhalten? Ich möchte eine manuelle Änderung der Bootstrap-Dateien vermeiden.

— Manuel Zapata
quelle

159

Gehen Sie zu http://getbootstrap.com/customize/ und schalten Sie genau das um, was Sie vom BS3-Framework erwarten. Klicken Sie dann auf "Kompilieren und Herunterladen", um das von Ihnen ausgewählte CSS und JS zu erhalten.

Bootstrap Customizer

Öffnen Sie das CSS und entfernen Sie alle außer dem Raster. Sie enthalten auch einige normalisierende Sachen. Außerdem müssen Sie alle Stile auf Ihrer Website an die Größe der Box anpassen: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

— Christina
quelle

Danke Christina. Ich hatte erwartet, dass es einen Weg gibt, nur die Rasterstile zu erhalten.

— Manuel Zapata

8

Nein, sie laden auch das unterstützende Material herunter, normalisieren und das Gerüst.less (das den globalen Rahmen hat), bei dem Sie alle Dinge anpassen müssen, die Polster haben. Wie zuvor hatte Ihre Box eine 10-Pixel-Polsterung und eine Gesamtsumme von 200 Pixel, aber die Innenseite war 180 Pixel, sodass Sie die Breite auf 180 Pixel einstellen mussten. Jetzt setzen Sie die Breite auf 200 Pixel oder einfach nichts und stecken sie in eine Rasterspaltenklasse.

— Christina

box-sizingInformationen zurücksetzen: css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw

— Costa

noch das hat normalize.css

— rab

@ Rab - das ist in der Antwort erwähnt. Entfernen Sie es, wenn Sie möchten, aber es ist nützlich.

— Christina

17

Kasse zirafa / bootstrap-grid-only . Es enthält nur das Bootstrap-Raster und die reaktionsschnellen Dienstprogramme , die Sie benötigen (kein Zurücksetzen oder ähnliches), und vereinfacht die Komplexität der direkten Arbeit mit den WENIGER-Dateien .

— Burrbrown
quelle

8

Wählen Sie einfach Grid system"Responsive Utilities" aus und geben Sie Folgendes an : http://jsfiddle.net/7LVzs/

— Jmorvan
quelle

4

Ein Grunt-Build wurde nur mit dem Bootstrap 3.3.5-Grid erstellt:

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

~ 10KB minimiert.

Wenn Sie andere Teile von Bootstrap benötigen, fügen Sie diese einfach in /src/less/bootstrap.less ein.

— horgen
quelle

1

Ich würde empfehlen, stattdessen http://getpreboot.com/ von MDO zu verwenden. Ab Version 2 werden prebootdie WENIGER Mixins / Variablen, die zum Erstellen des Bootstrap 3.0-Grid-Systems verwendet wurden, zurückportiert und sind viel leichter als die Verwendung des CSS-Generators. Wenn Sie nur einschließen, preboot.lessentsteht KEIN Overhead, da die gesamte Datei aus Mixins / Variablen besteht und daher nur für die Vorkompilierung und nicht für die endgültige Ausgabe verwendet wird.

— srquinn
quelle

1

Es sieht so aus, als könnten Sie jetzt nur das Raster auf den neuen Download-Funktionen von Bootstrap 4 herunterladen.

— Richard Clifford
quelle

0

Es ist schon eine Weile her, dass diese Frage gestellt wurde, aber vielleicht können Sie jetzt ganz auf Bootstrap verzichten und CSS Grid verwenden! (Es ist einfacher, übersichtlicher, flexibler und schneller). Siehe diesen coolen Artikel: Verwenden Sie Bootstrap nicht mehr - erstellen Sie eine praktische CSS-Grid-Vorlage für Ihre komponentenbasierte Benutzeroberfläche

— Alex Firebrand
quelle

0

In Bootstrap 4 befinden sich bereits getrennte Dateien in ihrem GitHub. Sie finden sie hier

https://github.com/twbs/bootstrap/tree/main/dist/css

— Hari Das
quelle