Entwerfen und Codieren, um Grid Columns oder Gutters zu starten?
Oftmals entwerfen Designer unsere Websites mit Tools wie Illustrator, Sketch usw., und dabei versuchen Designer, das Raster zu berücksichtigen, das der Entwickler verwendet, um dem Entwickler exakte Messwerte mitzuteilen.
Grids werden oft in der folgenden Reihenfolge implementiert:
- Marge (optional)
- Spalte
- Gutter
- Wiederholen Sie 2 und 3
- Marge (optional)
Nachdem Sie ein Raster in einem Werkzeug eingerichtet haben, werden Designer versuchen, Blöcke in das Rastersystem zu platzieren, beginnend mit der Spalte und NICHT mit der Rinne. Wie unten gezeigt:
In Bootstrap v3 nehmen jedoch einige Elemente die Breite der Dachrinnen auf und dies kann daher unpassend sein und zu Verwirrung darüber führen, wie man diese Websites richtig gestaltet. Im folgenden Beispiel sind dies Formulareingaben. Beachten Sie, wie die Eingabe beginnt und die 15px-Rinnenpolsterung einbezieht (eingefügt zwölf .col-xs-1 mit Spannen innen, um Grenzen anzuzeigen). Codepen-Link
%Vor% 
Aber in meinem Entwurf habe ich versucht, von der Spalte zu beginnen, wie unten gezeigt (Die Spalten sind durch das Leerzeichen in GRAU gekennzeichnet, die Spalten sind nur dünn aufgrund der Reaktionsfähigkeit, aber die Rinnen bleiben gleich - Größe unten für das iPhone 6 Plus).
Verstehe ich etwas falsch? Da ich das Produkt selbst entwickle und entwerfe, bin ich nicht sicher, wie ich in Bootstrap genaue Maße für diese Elemente erhalten kann, die die Gosse im Design enthalten, und sie dann entwickeln, um dem Design zu entsprechen. Wie entwerfe ich ein Bootstrap-Gitter, wenn einige Elemente, so scheint es, die Breite der Gosse einnehmen? Oder umgekehrt, wie ändere ich den Bootstrap-Code, so dass einige Elemente nicht die Breite der Gosse nehmen?
Nehmen Elemente TYPISCH die Breite der Rinne an? Wenn ja, warum sollten Designer von der Spalte entwerfen?
(PS Ich bin mir bewusst, dass es einen Stack-Exchange-Entwurf gibt, aber ich glaube, dass diese Frage eher von einem Missverständnis der Bootstrap- als von Designprinzipien herrühren kann)
3 Antworten
Ich sehe dein Rätsel.
Um das Gitternetz von TWBS wirklich zu verstehen, muss man vorheriges Lernen außer Acht lassen ... das Design-Framework der Margin-Column-Gutter gilt, obwohl korrekt, für Frameworks wie 960gs. Dieses Framework basiert auf Rastersystemen mit fester Breite, wobei "Spalten" eine feste px-basierte Breite festlegen. Sie haben dies als Ihr Drahtgitter angenommen.
TWBS ist ein reaktionsfähiges Framework - der Hauptunterschied besteht darin, dass man die Breiten nicht einstellen kann, weil es reaktionsfähig ist; Die Breite muss skaliert werden ("Bewegen", wenn der Bildschirm seine Größe ändert) und somit auf Prozentsätzen basieren.
Web-Layout ist eine Reihe von Spalten, wie folgt:
%Vor%und die Spalten haben "Padding" (links und rechts). Das Framework wird also padding-column-padding-repeated.
Siehe JSFiddle für ein Beispiel.
Obwohl ich nicht ganz sicher bin, ob ich Ihre Frage verstehe, lassen Sie mich Ihnen einen Einblick geben, der Ihnen vielleicht helfen könnte.
Obwohl ich Kunden getroffen habe, die ihre Designs 1: 1 replizieren wollen, ist es nicht wirklich wichtig, ob eine Spalte 90 oder 100 Pixel breit ist, solange sie den gleichen Prinzipien entlang der gesamten Website folgt und einheitlich aussieht. p>
Bootstrap hat keine Zwischenräume zwischen Spalten als Rand, sondern als Auffüllung mit den Spalten. Das heißt, jede Spalte hat eine bestimmte prozentuale Breite - standardmäßig durch 12 geteilt - und innerhalb dieser Spalte ist auf jeder Seite der Spalte ein Padding vorhanden - standardmäßig 15px.
Der Container dieser Spalten - die Zeilenklasse - hat einen negativen Rand, der dem Abstand innerhalb dieser Spalten entspricht. Auf diese Weise ist die Breite der ersten und letzten Spalte tatsächlich die Spaltenbreite minus eine Auffüllung von jeder Seite der Spalte, aber insgesamt enden sie die Breite des übergeordneten Wrappercontainers. Der negative Rand und die Spaltenauffüllung sollten abhängig von der bevorzugten GUTTER-Breite zwischen den Spalten definiert werden:
Rinnenbreite = 2x Polsterbreite Füllbreite = negative Zeilenbreite
Ich hoffe, es macht Sinn.
Dachte darüber nach, den obigen Antworten mehr hinzuzufügen,
12 Spalten Grids System ist der Standard von TWBS 3.xx, sowie der 15px Padding / Gutter.
Hinweis: 12 Spaltenraster-System ist ein getestetes Design für die beste Benutzererfahrung für Bildschirm reagiert
Also ist die Designvorlage, die Sie oben verwendet haben, eindeutig für den Standard-Bootstrap. Und Designer müssen nicht dabei bleiben. Es sei denn, sie sind in Ordnung. Und wenn Designer einen anderen Rinnenrhythmus als 15px haben wollen, z. 10px. oder verschiedene Spaltennummern, können sie trotzdem eine benutzerdefinierte Version generieren, indem sie den Bootstrap-Quellcode kompilieren. Oder der einfachste Weg ist, das Werkzeug auf der Website zu verwenden.
Tipp: Sie können die Rinnen bei Bedarf mit einfachen css-Zeilen entfernen. Siehe unten für die Lösung
So erklären Sie das TWBS-Grid-System
- Bootstrap startet mit 100% / 12 Spaltenzellen
- Und dann hat jede Zelle
15pxpadding left & amp; richtig
Erklären Sie weiter,
%Vor%- Beginnt mit
class="container"kommt mit15pxpadding links und rechts - Dann kommt
class="row"mit-15pxpadding links und rechts - Damit werden die Lücken
15pxAnfang und Ende zurückgesetzt
- Dann hat
class="col-md-*"ein Padding von15px. Wenn Sie also einen anderen Behälter hineinstecken und die Hintergrundfarbe ändern, können Sie Lücken auf beiden Seiten sehen.
Aus diesem Grund sehen Sie in Ihrem Beispiel die Dachrinnen.
Schnelle Lösung,
%Vor%Tags und Links html css twitter-bootstrap