Semantic UI - U Grid besten Ansatz für Layout (Zeilen/Spalten vs Segmente)

Ich bin neu in Semantic UI und ich versuche, eine Webseite mit dem Layout unten zu entwerfen. Mit Blick auf die Dokumentation habe ich mich entschieden, ui page grid zu verwenden. Ich habe auch beschlossen, das oberste feste Menü außerhalb des Rasters zu definieren.Semantic UI - U Grid besten Ansatz für Layout (Zeilen/Spalten vs Segmente)

enter image description here

Mein erster Ansatz war so etwas wie dieses:

<body> 
    <div class="ui page grid"> 
     <div class="three column row"> 
      <div class="column"> Horizontal section, column 1</div> 
      <div class="column"> Horizontal section, column 2</div> 
      <div class="column"> Horizontal section, column 3</div> 
     </div> 
     <div class="two column row"> 
      <div class="column"> 
       <div class="row"> Left column, row 1</div> 
       <div class="row"> Left column, row 2</div> 
       <div class="row"> Left column, row 3</div> 
      </div> 
      <div class="column"> 
       <div class="row"> Right column, row 1</div> 
       <div class="row"> Right column, row 2</div> 
      </div> 
     </div> 
    </div> 
</body>

Meine Frage ist:

Ist es der richtige Ansatz ein Layout ähnlich dem des Bildes zu erreichen? Sollte ich segments verwenden, um den Inhalt anstelle von Zeilen oder Spalten zu teilen?

Vielen Dank im Voraus!

Quelle

2015-04-11 Let_IT_roll

Semantic UI wollte segments Teile von Text/Artikeln bedeuten. Sie left a small note:

Ein Segment wird verwendet, um eine Gruppierung von verwandten Inhalten zu erstellen. Horizontale Segmente werden am effektivsten mit Gittern verwendet, um Text Gruppen zu ermöglichen, die über Rasterzeilen hinweg ausgerichtet sind.

Im Wesentlichen bedeuten sie, dass grid die Grundlage Ihres Markups ist. Die grid wurde für das Layout der Seite entworfen.

Sie können segments innerhalb Ihres Rasters verwenden, um ähnliche Inhalte zu gruppieren. (Wenn Sie in der Dokumentation mehr anschaut, kann man diese Absicht sehen, wo sie stacked, piled, loading Klassen für segments haben.)

Zum Beispiel, würde Ich mag die drei Zellen in dem Boden gelassen haben als eine Art von Nachrichtenfeed. Dann würde ich Segmente verwenden es:

<body> 
    <div class="ui page grid"> 
     <div class="three column row"> 
      <div class="column"> Horizontal section, column 1</div> 
      <div class="column"> Horizontal section, column 2</div> 
      <div class="column"> Horizontal section, column 3</div> 
     </div> 
     <div class="two column row"> 
      <div class="column"> 
       <div class="ui segment"> 
        <div class="ui vertical segment"> 
         <p>Left column, row 1</p> 
        </div> 
        <div class="ui vertical segment"> 
         <p>Left column, row 2</p> 
        </div> 
        <div class="ui vertical segment"> 
         <p>Left column, row 3</p> 
        </div> 
       </div> 
      </div> 
      <div class="column"> 
       <div class="row"> Right column, row 1</div> 
       <div class="row"> Right column, row 2</div> 
      </div> 
     </div> 
    </div> 
</body>

Grid with segments

Quelle

2015-04-12 19:52:37 garyF

Verstanden! Das bedeutet, dass jeder Inhalt, der kein Text ist, nicht mit 'segment' gruppiert werden sollte. Ich habe es anfangs benutzt, weil ich die linken Zellen mit einem horizontalen Teiler teilen musste und "segment" es automatisch zwischen den verschiedenen Inhalten hinzufügt. Dann wäre der korrekteste Ansatz, um so etwas zu erreichen, die Verwendung von "Spalten" und "Zeilen" und "ui-Teilern" zwischen, richtig? –

ah! das ist heikel. : P TLDR: Ja. Ich habe mir gerade die Dokumentation der Klasse 'divider' angesehen, in der erwähnt wurde, dass vertikale und horizontale Teiler zum Segmentieren von Inhalten verwendet werden können. (Überlappung von Wörtern, meinst du nicht? ;-)) aber ich nehme an, dass sie meinen, nicht zusammenhängende Inhalte hier zu teilen. :-) hoffe, das hilft! ~ kleine Anmerkung: 'Segmente' können für (verwandte) Dinge außer Text auch verwendet werden. wie eine Liste von Miniaturbildern für ein Produkt auf einer Shop-Seite. – garyF

Semantic UI - U Grid besten Ansatz für Layout (Zeilen/Spalten vs Segmente)

Antwort

Verwandte Themen