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.

html css twitter-bootstrap responsive-design Manuel Zapata
quelle

Antworten:

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
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

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