Ich habe vor kurzem angefangen, Twitter Bootstrap zu verwenden, und ich kann nicht scheinen zu verstehen, welche Spannen und warum gibt es verschiedene nummerierte Spannen, wie span4, span12? Und was sind Offsets und wann werden sie verwendet? (Manchmal verwendet mit Spannen) Ich habe versucht, es online zu suchen, aber nur bestimmte Fragen zu Bootstraps gefunden.Bootstrap Spans
Die Bootstrap "span" -Klassen werden im bootstrap grid system verwendet.
Die Dokumentation zeigt mit Zahlen beschriftete Spalten, jede Zahl steht für die für diesen Container verwendete Klasse span. Offset wird direkt im nächsten Abschnitt angezeigt, sie definieren, wie viele Leerspalten sich links von der Spanne befinden sollen.
Sie können span4 offset2 lesen als "erweitern Sie diesen Block über 4 Spalten, lassen Sie zwei Spalten leer auf der linken Seite".
Standardmäßig sind 12 Spalten vorhanden. Wenn Sie ein span12 haben, wird es so breit sein wie das container (das möglicherweise flüssig ist).
Zuerst sind sie nicht <span> Tags. (Ich erwähne das, weil ich angefangen habe, einige Male <span> zu tippen!) Sie sind Spaltenbreiten innerhalb einer Reihe.
Von http://twitter.github.com/bootstrap/scaffolding.html#gridSystem:
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
Die docs auch Offsets diskutieren.
22As weit ich weiß, wenn Sie eine ansprechende Seitenlayout stylen möchten, können Sie auch col-lg-2 oder einige Klassen wie das verwenden, wenn ein div Markup zu schreiben, wie
<div class="col-lg-2 col-sm-3 col-xs-6"> some content </div>
die würde definieren, wie viele Spalten ein Inhalt auf dem Bildschirm für große, kleine und extra kleine Bildschirme belegt. Punkt ist, Sie haben 12 Spalten maximal pro Zeile, so dass alle Ihre Inhalte in einer Zeile das respektieren müssen. Sie können
<row>
<div class="col-lg-5">content1 </div>
<div class="col-lg-6">content2 </div>
<div class="col-lg-3">content3 </div>
</row>
nicht haben, weil es 14 große Spalten hier gibt. Nur xs-Klassen addieren sich zu 24, obwohl
Also macht Spanne den gleichen Trick?
Das ist für Bootstrap 3. Span1 bis Span12 ---- das ist Bootstrap 2. –
Und wenn ich den Körper erstelle, lege ich ihn einfach in den Klassencontainer? Da es so viele verschiedene Möglichkeiten gibt, habe ich mich gefragt, nach dem Erstellen einer Navigationsleiste, was ist der richtige Weg, um den Körper zu erstellen und fügen Sie Zeug darin. Und gibt es eine Möglichkeit, einen Text in zB
Tags zu zentrieren? – GrigorUm das Grid-System zu verwenden, wählen Sie [Layout] (http://twitter.github.com/bootstrap/scaffolding.html#layouts), fügen Sie mindestens eine Zeile hinzu (siehe DavePs-Beispiel) und erstellen Sie einen Bereich für jedes Element Sie möchten im Raster positionieren. Sie müssen das Grid-System jedoch nicht verwenden, es wäre auch in Ordnung, wenn Sie einige Breiten manuell einstellen, insbesondere wenn Sie nicht viele Spalten benötigen. Ich denke, zusätzliche Stile wie Center-Text sollte in einer anderen CSS-Datei nach dem Bootstrap geladen werden. Setze das 'h1' in ein' div' mit 'span12', gib ihm eine ID oder zusätzliche Klasse und style übliche css mit' text-align: center; ' – Kapep
kapep hat recht über zusätzliche Styles - ich denke der Download beinhaltet ein application.css-Datei, aber falls nicht, lege deine Styles darin ab, so dass ein Upgrade auf Bootstrap deine Änderungen intakt hält. – DaveP