Когда мне следует использовать контейнер и строку в Twitter Bootstrap 3?

Question 1

Пожалуйста, объясните мне, когда использовать классы containerи row. Я не уверен, потому что в документации Bootstrap эта часть не совсем ясна.

Я использую Bootstrap 3.

Question 2

containerэто контейнер rowэлементов.

row элементы - это контейнеры столбцов (в документах это называется сеткой)

Кроме того, containerустанавливает поля содержимого, отвечающие за отзывчивое поведение вашего макета.

Таким образом, containerкласс часто используется для создания «упакованного» содержимого на основе рекомендаций по стилю проекта Bootstrap.

Если вы хотите выйти из коробки, создав сетку во всю ширину, вы можете использовать только rowэлементы со столбцами внутри (что обычно составляет 12 колец).

containerИ rowклассы для элементов внутри тела. Итак, базовый макет будет:

<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>

Для адаптивного макета в штучной упаковке.

Если вы опустите, containerвы получите макет во всю ширину.

Пример Jumbotron

Jumbotron - хороший пример такого containerповедения. Если вы поместите элемент Jumbotron в containerэлемент, он будет иметь закругленные границы и фиксированную ширину, основанную на ширине реагирования. Если Jumbotron находится вне контейнера, он занимает всю ширину без границ.

Question 3

Мне было интересно примерно то же самое и понять, что я прошел bootstrap.cssверсию 3. Ответ лежит в строке №. 1585–1605. Я отправлю эти строки здесь для лучшего понимания, как показано ниже.

.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;
  }
}

Код не требует пояснений. Однако, чтобы уточнить это, контейнер будет принимать, 750pxесли ширина экрана находится между 768pxи 992pxи так далее, как показывает код. Теперь при обычном разрешении экрана более 1200 контейнер будет занимать 1170px, но за вычетом заполнения 30 px( 15px+15px) остается эффективное пространство 1140px, которое центрируется на экране, поскольку для полей слева и справа установлено значение auto.

Теперь, в случае class="row", ниже код:

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

Таким образом, если строка находится внутри контейнера, она эффективно захватывает отступы в 15 пикселей с каждой стороны от контейнера и использует все пространство. Но если строка класса находится внутри тега body, она будет иметь тенденцию перемещаться из видимой области как в левую, так и в правую часть браузера из-за отрицательных полей.

Надеюсь, это прояснилось.

Question 4

Контейнер

Контейнер обеспечивает ограничения ширины для адаптивной ширины. Когда изменяющиеся размеры меняются, меняется контейнер. Все строки и столбцы основаны на процентах, поэтому их не нужно изменять. Обратите внимание, что с каждой стороны есть поле в 15 пикселей, отмененное по строкам.

Рядов

Ряды всегда должны быть в емкости.

Строка предоставляет столбцам место для жизни, в идеале имеет столбцы, которые в сумме могут достигать 12. Она также действует как оболочка, поскольку все столбцы перемещаются влево, дополнительные строки не перекрываются, когда плавающие значения становятся странными.

У строк также есть отрицательное поле 15 пикселей с каждой стороны. Элемент div, составляющий строку, обычно ограничивается внутри контейнера, касаясь краев розовой области, но не за ее пределами. Отрицательные поля в 15 пикселей выталкивают строку поверх заполнения контейнеров на 15 пикселей, по существу сводя на нет это. Кроме того, строки гарантируют, что все div внутри него отображаются в отдельной строке, отделенной от предыдущей и следующих строк.

Столбцы

Теперь столбцы имеют отступ 15 пикселей. Это заполнение означает, что столбцы фактически касаются края строки, которая сама касается края контейнера, поскольку строка имеет отрицательное поле, а контейнер имеет положительное заполнение. Но заполнение столбца подталкивает все внутри столбца туда, где оно должно быть, а также обеспечивает промежуток 30 пикселей между столбцами. Никогда не используйте столбец вне строки, это не сработает.

Для получения дополнительной информации предлагаю вам прочитать эту статью . Это действительно ясно и хорошо объясняет, как работает сеточная система Bootstrap.

Question 5

Класс «контейнер» оборачивает содержимое в центр порта просмотра. Весь контент с тегом in body может быть помещен в результаты, страница указанной ширины отображается в центре страницы.

Класс 'row' используется, когда вам нужно разместить контент в столбцах с в строке, вы можете иметь до 12 столбцов в каждой строке.

Question 6

В традиционных методах CSS вы, вероятно, использовали бы следующие классы:

wrapper, header, navigator, contents, footer

использование вышеуказанных классов может быть таким, как в этом примере:

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

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

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

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

        </div>
    </div>

</body>

В начальной загрузке вы можете использовать, если хотите или если вы привыкли к вышеуказанному шаблону, классы начальной загрузки, подобные этому примеру:

<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>

Для класса строки вы можете использовать класс строки, если хотите разработать табличный макет для страницы, но если вы хотите отображать данные в формате таблицы, вы должны использовать класс таблицы, но таблица не будет реагировать.

Чтобы создать табличный макет, который отличается от таблиц данных, используйте класс строки, как в этом примере:

<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>

Вы должны стараться избегать использования макета на основе таблиц и пытаться использовать адаптивные таблицы, как описано здесь

Answer 1

84

Пожалуйста, объясните мне, когда использовать классы containerи row. Я не уверен, потому что в документации Bootstrap эта часть не совсем ясна.

Я использую Bootstrap 3.

twitter-bootstrap-3 CodeShark
источник

1

Прочтите эту статью о строках и столбцах Bootstrap

Зим

Answer 2

1

Прочтите эту статью о строках и столбцах Bootstrap

Зим

Answer 3

containerэто контейнер rowэлементов.

row элементы - это контейнеры столбцов (в документах это называется сеткой)

Кроме того, containerустанавливает поля содержимого, отвечающие за отзывчивое поведение вашего макета.

Таким образом, containerкласс часто используется для создания «упакованного» содержимого на основе рекомендаций по стилю проекта Bootstrap.

Если вы хотите выйти из коробки, создав сетку во всю ширину, вы можете использовать только rowэлементы со столбцами внутри (что обычно составляет 12 колец).

containerИ rowклассы для элементов внутри тела. Итак, базовый макет будет:

<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>

Для адаптивного макета в штучной упаковке.

Если вы опустите, containerвы получите макет во всю ширину.

Пример Jumbotron

Jumbotron - хороший пример такого containerповедения. Если вы поместите элемент Jumbotron в containerэлемент, он будет иметь закругленные границы и фиксированную ширину, основанную на ширине реагирования. Если Jumbotron находится вне контейнера, он занимает всю ширину без границ.

Answer 4

1

Так является ли хорошей практикой предоставление телу HTML контейнера класса или это плохая практика? Если плохо, то почему?

CodeShark

Answer 5

1

@CodeShark - это плохо, потому что это структурная часть макета. Например, вам может понадобиться полноразмерная панель навигации и нижний колонтитул во всю ширину, но содержимое страницы в рамке.

Паоло Кашиелло

Answer 6

1

Если вы хотите выйти «из коробки», создав сетку во всю ширину, вы можете использовать только rowэлементы со столбцами внутри (что обычно составляет 12 колец). Думаю можно использовать container-fluidи row-fluidдля этого. (Здесь новичок в начальной

загрузке

Answer 7

@Zim, твоя ссылка мертва.

Black

Answer 8

Мне было интересно примерно то же самое и понять, что я прошел bootstrap.cssверсию 3. Ответ лежит в строке №. 1585–1605. Я отправлю эти строки здесь для лучшего понимания, как показано ниже.

.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;
  }
}

Код не требует пояснений. Однако, чтобы уточнить это, контейнер будет принимать, 750pxесли ширина экрана находится между 768pxи 992pxи так далее, как показывает код. Теперь при обычном разрешении экрана более 1200 контейнер будет занимать 1170px, но за вычетом заполнения 30 px( 15px+15px) остается эффективное пространство 1140px, которое центрируется на экране, поскольку для полей слева и справа установлено значение auto.

Теперь, в случае class="row", ниже код:

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

Таким образом, если строка находится внутри контейнера, она эффективно захватывает отступы в 15 пикселей с каждой стороны от контейнера и использует все пространство. Но если строка класса находится внутри тега body, она будет иметь тенденцию перемещаться из видимой области как в левую, так и в правую часть браузера из-за отрицательных полей.

Надеюсь, это прояснилось.

Answer 9

но поскольку вы не используете строку без столбцов внутри, это нормально, потому что столбцы снова имеют отступ в 15 пикселей. Так что в основном все идеально.

Falk

Answer 10

Контейнер

Контейнер обеспечивает ограничения ширины для адаптивной ширины. Когда изменяющиеся размеры меняются, меняется контейнер. Все строки и столбцы основаны на процентах, поэтому их не нужно изменять. Обратите внимание, что с каждой стороны есть поле в 15 пикселей, отмененное по строкам.

Рядов

Ряды всегда должны быть в емкости.

Строка предоставляет столбцам место для жизни, в идеале имеет столбцы, которые в сумме могут достигать 12. Она также действует как оболочка, поскольку все столбцы перемещаются влево, дополнительные строки не перекрываются, когда плавающие значения становятся странными.

У строк также есть отрицательное поле 15 пикселей с каждой стороны. Элемент div, составляющий строку, обычно ограничивается внутри контейнера, касаясь краев розовой области, но не за ее пределами. Отрицательные поля в 15 пикселей выталкивают строку поверх заполнения контейнеров на 15 пикселей, по существу сводя на нет это. Кроме того, строки гарантируют, что все div внутри него отображаются в отдельной строке, отделенной от предыдущей и следующих строк.

Столбцы

Теперь столбцы имеют отступ 15 пикселей. Это заполнение означает, что столбцы фактически касаются края строки, которая сама касается края контейнера, поскольку строка имеет отрицательное поле, а контейнер имеет положительное заполнение. Но заполнение столбца подталкивает все внутри столбца туда, где оно должно быть, а также обеспечивает промежуток 30 пикселей между столбцами. Никогда не используйте столбец вне строки, это не сработает.

Для получения дополнительной информации предлагаю вам прочитать эту статью . Это действительно ясно и хорошо объясняет, как работает сеточная система Bootstrap.

Answer 11

Класс «контейнер» оборачивает содержимое в центр порта просмотра. Весь контент с тегом in body может быть помещен в результаты, страница указанной ширины отображается в центре страницы.

Класс 'row' используется, когда вам нужно разместить контент в столбцах с в строке, вы можете иметь до 12 столбцов в каждой строке.

Answer 12

В традиционных методах CSS вы, вероятно, использовали бы следующие классы:

wrapper, header, navigator, contents, footer

использование вышеуказанных классов может быть таким, как в этом примере:

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

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

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

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

        </div>
    </div>

</body>

В начальной загрузке вы можете использовать, если хотите или если вы привыкли к вышеуказанному шаблону, классы начальной загрузки, подобные этому примеру:

<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>

Для класса строки вы можете использовать класс строки, если хотите разработать табличный макет для страницы, но если вы хотите отображать данные в формате таблицы, вы должны использовать класс таблицы, но таблица не будет реагировать.

Чтобы создать табличный макет, который отличается от таблиц данных, используйте класс строки, как в этом примере:

<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>

Вы должны стараться избегать использования макета на основе таблиц и пытаться использовать адаптивные таблицы, как описано здесь

Когда мне следует использовать контейнер и строку в Twitter Bootstrap 3?

Ответы:

Пример Jumbotron