Kiedy powinienem używać kontenera i wiersza w Twitter Bootstrap 3?

Question 1

Proszę wyjaśnij mi, kiedy korzystać z zajęć containeri row. Nie jestem pewien, ponieważ dokumentacja Bootstrap jest dość niejasna co do tej części.

Używam Bootstrap 3.

Question 2

containerjest zbiornikiem rowelementów.

row elementy są kontenerami kolumn (dokumenty nazywają to systemem grid)

Ponadto containerustawia marginesy treści dotyczące responsywnego zachowania układu.

Dlatego containerklasa jest często używana do tworzenia zawartości „pudełkowej” w oparciu o wytyczne dotyczące stylu projektu Bootstrap.

Jeśli chcesz „wyjść z pudełka”, tworząc siatkę o pełnej szerokości, możesz użyć tylko rowelementów z kolumnami w środku (obejmujących zwykle 12 kolorów).

containerI rowzajęcia są dla elementów wewnątrz ciała. Zatem podstawowy układ wyglądałby tak:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Elastyczny układ pudełkowy.

Jeśli pominiesz container, otrzymasz układ o pełnej szerokości.

Przykład Jumbotron

Jumbotron jest dobrym przykładem takiego containerzachowania. Jeśli umieścisz element Jumbotron w containerelemencie, będzie on miał zaokrąglone krawędzie i stałą szerokość w oparciu o szerokość responsywną. Jeśli Jumbotron znajduje się na zewnątrz kontenera, obejmuje całą szerokość bez granic.

Question 3

Zastanawiałem się nad tym samym i aby zrozumieć, że przeszedłem przez bootstrap.csswersję 3. Odpowiedź znajduje się w linii nr. 1585 do 1605. Opublikuję te wiersze tutaj dla lepszego zrozumienia, jak poniżej.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Cały kod jest oczywisty. Jednak aby to rozwinąć, kontener zająłby, 750pxgdyby szerokość ekranu wynosiła od 768pxdo 992pxi tak dalej, jak pokazuje kod. Teraz, dla typowej rozdzielczości ekranu większej niż 1200, kontener zająłby 1170px, ale odejmując wypełnienie 30 px( 15px+15px), efektywna pozostała przestrzeń to 1140px, która jest wyśrodkowana na ekranie, gdy marginesy lewej i prawej strony są ustawione na auto.

Teraz w przypadku class="row"mamy poniższy kod:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Tak więc, jeśli wiersz znajduje się wewnątrz kontenera, skutecznie wyrwałby wypełnienie 15 pikseli z każdej strony z kontenera i wykorzystałby całą przestrzeń. Ale jeśli wiersz klasy znajduje się wewnątrz tagu body, ma tendencję do przemieszczania się z widocznego obszaru na lewą i prawą stronę przeglądarki z powodu ujemnych marginesów.

Mam nadzieję, że zostało to wyjaśnione.

Question 4

Pojemnik

Kontener zapewnia ograniczenia szerokości dla responsywnych szerokości. Gdy zmieniają się rozmiary responsywne, zmienia się kontener. Wiersze i kolumny są oparte na wartości procentowej, więc nie trzeba ich zmieniać. Zwróć uwagę, że po każdej stronie znajduje się margines 15 pikseli, anulowany wierszami.

Wydziwianie

Wiersze powinny zawsze znajdować się w pojemniku.

Wiersz zapewnia kolumnom miejsce do życia, najlepiej mając kolumny, które sumują się do 12. Działa również jako opakowanie, ponieważ wszystkie kolumny pływają w lewo, dodatkowe wiersze nie nakładają się, gdy elementy zmiennoprzecinkowe stają się dziwne.

Wiersze mają również ujemny margines 15 pikseli z każdej strony. Element div, który tworzy wiersz, zwykle byłby ograniczony wewnątrz wyściółki kontenerów, dotykając krawędzi różowego obszaru, ale nie dalej. Ujemne marginesy 15px wypychają wiersz ponad górną część kontenerów 15 piks. Ponadto wiersze zapewniają, że wszystkie znajdujące się w nim elementy div pojawią się w osobnym wierszu, oddzielonym od poprzedniego i następnych wierszy.

Kolumny

Kolumny mają teraz wypełnienie 15 pikseli. To wypełnienie oznacza, że kolumny faktycznie dotykają krawędzi rzędu, który sam styka się z krawędzią pojemnika, ponieważ rząd ma ujemny margines, a pojemnik ma dodatnie wypełnienie. Ale wypełnienie kolumny wypycha wszystko wewnątrz kolumny tam, gdzie to powinno być, a także zapewnia 30-pikselowy odstęp między kolumnami. Nigdy nie używaj kolumny poza wierszem, to nie zadziała.

Aby uzyskać więcej informacji, przeczytaj ten artykuł . Jest to naprawdę jasne i dobrze wyjaśnia, jak działa system gridów Bootstrap.

Question 5

Klasa „kontener” zawija zawartość do środka portu widoku. Cała treść z tagiem in body może być umieszczona w wynikach wyświetlanej strony o określonej szerokości na środku strony.

Klasa „wiersz” jest używana, gdy musisz umieścić treść w kolumnach z wierszem, możesz mieć łącznie do 12 kolumn w każdym wierszu.

Question 6

W tradycyjnych praktykach CSS prawdopodobnie użyłbyś następujących klas:

wrapper, header, navigator, contents, footer

użycie powyższych klas może wyglądać następująco:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

W bootstrapie możesz użyć, jeśli chcesz lub jeśli jesteś przyzwyczajony do powyższego szablonu, klas ładowania początkowego, takich jak ten przykład:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

W przypadku klasy wiersza możesz użyć klasy wiersza, gdy chcesz zaprojektować układ tabelaryczny strony, ale jeśli chcesz wyświetlić dane w formacie tabeli, powinieneś użyć klasy tabeli, ale tabela nie będzie responsywna.

Aby utworzyć układ tabelaryczny różniący się od tabel danych, użyj klasy wierszy, jak w tym przykładzie:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

Należy unikać używania układu opartego na tabelach i próbować używać elastycznych tabel, jak opisano tutaj

Answer 1

84

Proszę wyjaśnij mi, kiedy korzystać z zajęć containeri row. Nie jestem pewien, ponieważ dokumentacja Bootstrap jest dość niejasna co do tej części.

Używam Bootstrap 3.

twitter-bootstrap-3 CodeShark
źródło

1

Przeczytaj ten artykuł o wierszach i kolumnach Bootstrapa

Zim

Answer 2

1

Przeczytaj ten artykuł o wierszach i kolumnach Bootstrapa

Zim

Answer 3

containerjest zbiornikiem rowelementów.

row elementy są kontenerami kolumn (dokumenty nazywają to systemem grid)

Ponadto containerustawia marginesy treści dotyczące responsywnego zachowania układu.

Dlatego containerklasa jest często używana do tworzenia zawartości „pudełkowej” w oparciu o wytyczne dotyczące stylu projektu Bootstrap.

Jeśli chcesz „wyjść z pudełka”, tworząc siatkę o pełnej szerokości, możesz użyć tylko rowelementów z kolumnami w środku (obejmujących zwykle 12 kolorów).

containerI rowzajęcia są dla elementów wewnątrz ciała. Zatem podstawowy układ wyglądałby tak:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

Elastyczny układ pudełkowy.

Jeśli pominiesz container, otrzymasz układ o pełnej szerokości.

Przykład Jumbotron

Jumbotron jest dobrym przykładem takiego containerzachowania. Jeśli umieścisz element Jumbotron w containerelemencie, będzie on miał zaokrąglone krawędzie i stałą szerokość w oparciu o szerokość responsywną. Jeśli Jumbotron znajduje się na zewnątrz kontenera, obejmuje całą szerokość bez granic.

Answer 4

1

Czy więc dobrym zwyczajem jest przekazanie treści HTML kontenera klasy, czy też jest to zła praktyka? Jeśli jest źle, dlaczego?

CodeShark

Answer 5

1

@CodeShark, to jest złe, ponieważ jest strukturalną częścią układu. Możesz potrzebować na przykład paska nawigacyjnego o pełnej szerokości i stopki o pełnej szerokości, ale zawartości strony w ramce.

Paolo Casciello

Answer 6

1

Jeśli chcesz „wyjść z pudełka”, tworząc siatkę o pełnej szerokości, możesz użyć tylko rowelementów z kolumnami w środku (obejmujących zwykle 12 kolorów). Myślę, że możesz użyć container-fluidi row-fluiddo tego. (Tutaj początkujący bootstrap, weź to ze szczyptą soli.)

ADTC

Answer 7

@Zim, Twój link nie działa.

Czarny

Answer 8

Zastanawiałem się nad tym samym i aby zrozumieć, że przeszedłem przez bootstrap.csswersję 3. Odpowiedź znajduje się w linii nr. 1585 do 1605. Opublikuję te wiersze tutaj dla lepszego zrozumienia, jak poniżej.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Cały kod jest oczywisty. Jednak aby to rozwinąć, kontener zająłby, 750pxgdyby szerokość ekranu wynosiła od 768pxdo 992pxi tak dalej, jak pokazuje kod. Teraz, dla typowej rozdzielczości ekranu większej niż 1200, kontener zająłby 1170px, ale odejmując wypełnienie 30 px( 15px+15px), efektywna pozostała przestrzeń to 1140px, która jest wyśrodkowana na ekranie, gdy marginesy lewej i prawej strony są ustawione na auto.

Teraz w przypadku class="row"mamy poniższy kod:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Tak więc, jeśli wiersz znajduje się wewnątrz kontenera, skutecznie wyrwałby wypełnienie 15 pikseli z każdej strony z kontenera i wykorzystałby całą przestrzeń. Ale jeśli wiersz klasy znajduje się wewnątrz tagu body, ma tendencję do przemieszczania się z widocznego obszaru na lewą i prawą stronę przeglądarki z powodu ujemnych marginesów.

Mam nadzieję, że zostało to wyjaśnione.

Answer 9

ale ponieważ nie używasz wiersza bez kolumn w środku, to jest w porządku, ponieważ kolumny mają ponownie wypełnienie 15px. Więc wszystko jest w większości idealne.

Falk

Answer 10

Pojemnik

Kontener zapewnia ograniczenia szerokości dla responsywnych szerokości. Gdy zmieniają się rozmiary responsywne, zmienia się kontener. Wiersze i kolumny są oparte na wartości procentowej, więc nie trzeba ich zmieniać. Zwróć uwagę, że po każdej stronie znajduje się margines 15 pikseli, anulowany wierszami.

Wydziwianie

Wiersze powinny zawsze znajdować się w pojemniku.

Wiersz zapewnia kolumnom miejsce do życia, najlepiej mając kolumny, które sumują się do 12. Działa również jako opakowanie, ponieważ wszystkie kolumny pływają w lewo, dodatkowe wiersze nie nakładają się, gdy elementy zmiennoprzecinkowe stają się dziwne.

Wiersze mają również ujemny margines 15 pikseli z każdej strony. Element div, który tworzy wiersz, zwykle byłby ograniczony wewnątrz wyściółki kontenerów, dotykając krawędzi różowego obszaru, ale nie dalej. Ujemne marginesy 15px wypychają wiersz ponad górną część kontenerów 15 piks. Ponadto wiersze zapewniają, że wszystkie znajdujące się w nim elementy div pojawią się w osobnym wierszu, oddzielonym od poprzedniego i następnych wierszy.

Kolumny

Kolumny mają teraz wypełnienie 15 pikseli. To wypełnienie oznacza, że kolumny faktycznie dotykają krawędzi rzędu, który sam styka się z krawędzią pojemnika, ponieważ rząd ma ujemny margines, a pojemnik ma dodatnie wypełnienie. Ale wypełnienie kolumny wypycha wszystko wewnątrz kolumny tam, gdzie to powinno być, a także zapewnia 30-pikselowy odstęp między kolumnami. Nigdy nie używaj kolumny poza wierszem, to nie zadziała.

Aby uzyskać więcej informacji, przeczytaj ten artykuł . Jest to naprawdę jasne i dobrze wyjaśnia, jak działa system gridów Bootstrap.

Answer 11

Klasa „kontener” zawija zawartość do środka portu widoku. Cała treść z tagiem in body może być umieszczona w wynikach wyświetlanej strony o określonej szerokości na środku strony.

Klasa „wiersz” jest używana, gdy musisz umieścić treść w kolumnach z wierszem, możesz mieć łącznie do 12 kolumn w każdym wierszu.

Answer 12

W tradycyjnych praktykach CSS prawdopodobnie użyłbyś następujących klas:

wrapper, header, navigator, contents, footer

użycie powyższych klas może wyglądać następująco:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

W bootstrapie możesz użyć, jeśli chcesz lub jeśli jesteś przyzwyczajony do powyższego szablonu, klas ładowania początkowego, takich jak ten przykład:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

W przypadku klasy wiersza możesz użyć klasy wiersza, gdy chcesz zaprojektować układ tabelaryczny strony, ale jeśli chcesz wyświetlić dane w formacie tabeli, powinieneś użyć klasy tabeli, ale tabela nie będzie responsywna.

Aby utworzyć układ tabelaryczny różniący się od tabel danych, użyj klasy wierszy, jak w tym przykładzie:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

Należy unikać używania układu opartego na tabelach i próbować używać elastycznych tabel, jak opisano tutaj

Kiedy powinienem używać kontenera i wiersza w Twitter Bootstrap 3?

Odpowiedzi:

Przykład Jumbotron