System siatki

Przykład

System siatki Bootstrap wykorzystuje szereg kontenerów, wierszy i kolumn do układania i wyrównywania zawartości. Jest zbudowany z flexbox i jest w pełni responsywny. Poniżej znajduje się przykład i szczegółowe wyjaśnienie, w jaki sposób łączy się system sieci.

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Powyższy przykład tworzy trzy kolumny o równej szerokości na wszystkich urządzeniach i rzutniach przy użyciu naszych predefiniowanych klas siatek. Te kolumny są wyśrodkowane na stronie z elementem nadrzędnym .container.

Jak to działa

Rozbijając to, oto jak łączy się system siatki:

• Nasza siatka obsługuje sześć responsywnych punktów przerwania . Punkty przerwania są oparte na min-widthzapytaniach o media, co oznacza, że ​​wpływają na ten punkt przerwania i wszystkie znajdujące się powyżej niego (np. .col-sm-4dotyczy sm, md, lg, xli xxl). Oznacza to, że możesz kontrolować rozmiar i zachowanie kontenera i kolumny według każdego punktu przerwania.

• Kontenery wyśrodkują i poziomo wypełniają zawartość. Użyj .containerw przypadku responsywnej szerokości piksela, .container-fluidwe width: 100%wszystkich widocznych obszarach i urządzeniach lub responsywnego kontenera (np. .container-md) w przypadku kombinacji szerokości płynnej i w pikselach.

• Wiersze to opakowania dla kolumn. Każda kolumna ma poziomą padding(zwaną rynną) do kontrolowania przestrzeni między nimi. Jest paddingto następnie przeciwdziałane w wierszach z ujemnymi marginesami, aby zapewnić, że zawartość kolumn jest wizualnie wyrównana do lewej strony. Wiersze obsługują również klasy modyfikatorów, aby jednolicie stosować rozmiary kolumn i klasy gutter w celu zmiany odstępów zawartości.

• Kolumny są niesamowicie elastyczne. W każdym wierszu dostępnych jest 12 kolumn szablonów, co pozwala tworzyć różne kombinacje elementów, które obejmują dowolną liczbę kolumn. Klasy kolumn wskazują liczbę kolumn szablonu do rozpięcia (np. col-4rozpięte cztery). widths są ustawione w procentach, więc zawsze masz ten sam rozmiar względny.

• Rynny są również responsywne i konfigurowalne. Klasy Gutter są dostępne we wszystkich punktach przerwania, z tymi samymi rozmiarami, co nasz margines i odstępy dopełnienia . Zmień poziome rynny za pomocą .gx-*klas, pionowe rynny za pomocą .gy-*lub wszystkie rynny za pomocą .g-*klas. .g-0jest również dostępny do usuwania rynien.

• Zmienne Sass, mapy i mixiny zasilają sieć. Jeśli nie chcesz używać predefiniowanych klas siatki w Bootstrap, możesz użyć Sass źródła naszej siatki, aby stworzyć własną z bardziej semantycznymi znacznikami. Dołączamy również niektóre niestandardowe właściwości CSS, aby wykorzystać te zmienne Sass, aby uzyskać jeszcze większą elastyczność.

Bądź świadomy ograniczeń i błędów związanych z flexboxem , takich jak niemożność użycia niektórych elementów HTML jako elastycznych kontenerów .

Opcje siatki

System siatki Bootstrap może dostosować się do wszystkich sześciu domyślnych punktów przerwania i dowolnych punktów przerwania, które dostosowujesz. Sześć domyślnych poziomów siatki przedstawia się następująco:

• Bardzo mały (xs)
• Mały (sm)
• Średni (md)
• Duży (lg)
• Bardzo duży (xl)
• Bardzo duży (xxl)

Jak wspomniano powyżej, każdy z tych punktów przerwania ma swój własny kontener, unikalny prefiks klasy i modyfikatory. Oto jak zmienia się siatka w tych punktach przerwania:

Kolumny z automatycznym układem

Korzystaj z klas kolumn specyficznych dla punktów przerwania, aby łatwo zmieniać rozmiar kolumn bez jawnej klasy numerowanej, takiej jak .col-sm-6.

Równej szerokości

Na przykład oto dwa układy siatki, które mają zastosowanie do każdego urządzenia i rzutni, od xsdo xxl. Dodaj dowolną liczbę klas bez jednostek dla każdego potrzebnego punktu przerwania, a każda kolumna będzie miała tę samą szerokość.

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Ustawianie szerokości jednej kolumny

Automatyczne rozmieszczenie kolumn siatki Flexbox oznacza również, że możesz ustawić szerokość jednej kolumny i automatycznie zmienić rozmiar kolumn wokół niej. Możesz użyć predefiniowanych klas siatek (jak pokazano poniżej), mixinów siatek lub szerokości w linii. Zwróć uwagę, że inne kolumny zmienią rozmiar bez względu na szerokość kolumny środkowej.

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Zawartość o zmiennej szerokości

Użyj col-{breakpoint}-autoklas, aby określić rozmiar kolumn na podstawie naturalnej szerokości ich zawartości.

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Klasy responsywne

Siatka Bootstrap zawiera sześć poziomów predefiniowanych klas do budowania złożonych, responsywnych układów. Dostosuj rozmiar swoich kolumn na bardzo małych, małych, średnich, dużych lub bardzo dużych urządzeniach według własnego uznania.

Wszystkie punkty przerwania

W przypadku siatek, które są takie same od najmniejszego urządzenia do największego, użyj klas .coli . .col-*Określ numerowaną klasę, gdy potrzebujesz kolumny o szczególnie dużym rozmiarze; w przeciwnym razie możesz trzymać się .col.

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Ułożone w poziomie

Używając pojedynczego zestawu .col-sm-*klas, możesz utworzyć podstawowy system siatki, który zaczyna się ułożony w stos i staje się poziomy w małym punkcie przerwania ( sm).

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

Mieszać i łączyć

Nie chcesz, aby Twoje kolumny po prostu układały się w niektóre poziomy siatki? W razie potrzeby użyj kombinacji różnych klas dla każdego poziomu. Zobacz poniższy przykład, aby lepiej zrozumieć, jak to wszystko działa.

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

Kolumny wierszy

Użyj .row-cols-*klas responsywnych, aby szybko ustawić liczbę kolumn, które najlepiej renderują treść i układ. Podczas gdy normalne .col-*klasy odnoszą się do poszczególnych kolumn (np. .col-md-4), klasy kolumn wierszy są ustawiane na rodzicu .rowjako skrót. Dzięki .row-cols-autoniej możesz nadać kolumnom ich naturalną szerokość.

Użyj tych klas kolumn wierszy, aby szybko utworzyć podstawowe układy siatki lub kontrolować układy kart.

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Możesz również użyć dołączonego mixinu Sass, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Zagnieżdżanie

Aby zagnieździć zawartość z domyślną siatką, dodaj nową .rowi zestaw .col-sm-*kolumn w istniejącej .col-sm-*kolumnie. Wiersze zagnieżdżone powinny zawierać zestaw kolumn, które sumują się do 12 lub mniej (nie jest wymagane użycie wszystkich 12 dostępnych kolumn).

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

Sass

Korzystając ze źródłowych plików Sass Bootstrap, masz możliwość używania zmiennych Sass i domieszek do tworzenia niestandardowych, semantycznych i responsywnych układów stron. Nasze predefiniowane klasy grid wykorzystują te same zmienne i domieszki, aby zapewnić cały zestaw gotowych do użycia klas dla szybkich, responsywnych układów.

Zmienne

Zmienne i mapy określają liczbę kolumn, szerokość rynny i punkt zapytania o media, od którego mają się zaczynać kolumny swobodne. Używamy ich do generowania wcześniej zdefiniowanych klas siatek opisanych powyżej, a także do niestandardowych domieszek wymienionych poniżej.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Mieszanki

Domieszki są używane w połączeniu ze zmiennymi siatki do generowania semantycznego CSS dla poszczególnych kolumn siatki.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

Przykładowe użycie

Możesz modyfikować zmienne do własnych wartości niestandardowych lub po prostu użyć domieszek z ich wartościami domyślnymi. Oto przykład użycia ustawień domyślnych do utworzenia układu dwukolumnowego z przerwą między nimi.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Dostosowywanie siatki

Korzystając z naszych wbudowanych zmiennych i map siatki Sass, można całkowicie dostosować predefiniowane klasy siatki. Zmień liczbę poziomów, wymiary zapytań o media i szerokości kontenerów, a następnie dokonaj ponownej kompilacji.

Kolumny i rynny

Liczbę kolumn siatki można modyfikować za pomocą zmiennych Sass. $grid-columnssłuży do generowania szerokości (w procentach) poszczególnych słupów, podczas gdy $grid-gutter-widthustawia szerokość rynien słupów. $grid-row-columnssłuży do ustawienia maksymalnej liczby kolumn .row-cols-*, każda liczba przekraczająca ten limit jest ignorowana.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

Poziomy siatki

Wychodząc poza same kolumny, możesz również dostosować liczbę poziomów siatki. Jeśli chcesz mieć tylko cztery poziomy siatki, zaktualizuj $grid-breakpointsi $container-max-widthsdo czegoś takiego:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Wprowadzając jakiekolwiek zmiany w zmiennych Sass lub mapach, musisz je zapisać i ponownie skompilować. Spowoduje to wygenerowanie zupełnie nowego zestawu wstępnie zdefiniowanych klas siatki dla szerokości kolumn, przesunięć i kolejności. Responsywne narzędzia widoczności również zostaną zaktualizowane, aby korzystać z niestandardowych punktów przerwania. Pamiętaj, aby ustawić wartości siatki w px(nie rem, emlub %).