Будь ласка, поясніть мені, коли використовувати класи containerта row. Я не впевнений, оскільки документація Bootstrap є досить незрозумілою щодо цієї частини.
Я використовую Bootstrap 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ви отримаєте макет на всю ширину.
Джамботрон - хороший приклад containerповедінки. Якщо ви помістите елемент Jumbotron в containerелемент, він має округлі межі та фіксовану ширину на основі реагуючої ширини. Якщо Jumbotron знаходиться поза контейнером, він охоплює всю ширину без меж.
rowелементи зі стовпцями всередині (що охоплюють звичайну загальну кількість 12 кольорів). Я думаю, ви можете використовувати container-fluidі row-fluidдля цього. (Початківець Bootstrap тут, візьміть його з дрібкою солі.)
Мені було цікаво про те саме і зрозуміти, що я пройшов 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, який центрируется на екрані, оскільки для поля лівого та правого значення встановлено значення авто.
Тепер, у випадку class="row", є нижче код:
.row {
margin-right: -15px;
margin-left: -15px;
}
Отже, якщо рядок знаходиться всередині контейнера, він фактично вирве з контейнера прокладку розміром 15 пікселів з кожного боку і використає весь простір. Але якщо рядок класу знаходиться всередині тегу body, він, як правило, переміщується з видимої області як в ліву, так і в праву частину браузера через негативні поля.
Сподіваюся, це було чітко сказано.
Контейнер
Контейнер надає обмеження ширини на відповідні ширини. Коли адаптивні розміри змінюються, змінюється контейнер. Рядки та стовпці базуються на відсотках, тому їх не потрібно змінювати. Зверніть увагу, що на кожному боці є поле 15 пікселів, скасоване рядками.
Рядки
Рядки повинні бути завжди в контейнері.
Рядок забезпечує стовпці місцем для проживання, в ідеалі він має стовпчики, що додають до 12. Він також діє як обгортка, оскільки всі стовпці плавають ліворуч, додаткові рядки не мають перекриттів, коли поплавки стають дивними.
Рядки також мають негативне поле 15px на кожній стороні. Зазвичай div, що складається з рядка, буде обмежений всередині контейнерів, що забивають, торкаючись країв рожевої області, але не далі. Від’ємні поля 15 пікселів виштовхують рядок над поверхнею прокладки контейнерів 15 пікселів, по суті заперечуючи його. Крім того, рядки гарантують, що всі div-елементи всередині нього відображаються у власному рядку, відокремленому від попереднього та наступних рядків.
Стовпці
Тепер стовпці мають відступ 15 пікселів. Це заповнення означає, що стовпці фактично торкаються краю рядка, який сам торкається краю контейнера, оскільки рядок має від’ємне поле, а контейнер має додатне заповнення. Але заповнення стовпчика штовхає все, що знаходиться всередині стовпчика, туди, де воно повинно бути, а також забезпечує жолоб 30px між стовпцями. Ніколи не використовуйте стовпець поза рядком, це не буде працювати.
Для отримання додаткової інформації я пропоную вам прочитати цю статтю . Це насправді зрозуміло, і добре поясніть, як працює сіткова система Bootstrap.
Клас "контейнер" обертає вміст до порту центру перегляду. Весь вміст із тегом body може бути розміщений у результатах, сторінка відображається заданої ширини в центрі сторінки.
Клас "рядок" використовується, коли вам потрібно розмістити вміст у стовпцях з рядком, у вас може бути до 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>
У bootstrap ви можете використовувати, якщо хочете, або якщо ви звикли до наведеного вище шаблону, класи bootstrap, як цей приклад:
<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>
Ви повинні намагатися уникати використання макета на основі таблиць і намагатися використовувати адаптивні таблиці, як описано тут