Каков правильный способ использования сеток?

Я только начал изучать бутстрап. И это первый раз, когда я когда-либо использовал сетки для макета. Что-то, что я не понимаю о сетках, это то, где я должен поместить свой контент.Каков правильный способ использования сеток?

Должен ли я сделать так:

<div class="row"> 
    <div class="col-md-12"> 
     <p> My content </p> 
    </div> 
</div>

Или я должен использовать родительский элемент для моего содержания, как этот

<div class="row"> 
    <div class="col-md-12"> 
     <div> or <footer> or <aside> or <content> etc 
      <p> My content </p> 
     </div> or </footer> or </aside> or </content> etc 
    </div> 
</div>

Если ответ является второй. Есть ли когда-нибудь причина, когда можно разместить содержимое прямо в столбце? Или я неправильно понял все, и это должно быть сделано совершенно другим способом?

Что такое «лучшая практика»?

источник

2015-08-30 Alex

подвесная система Bootstrap разработана, чтобы предоставить вам инструменты для создания макета страницы. Вы можете вставить то, что вам нужно: простой текст или элементы html. – Vasyl

Лучший способ, как это:

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="your-widget-name"> 
     Widget code here… 
     <div> 
    </div> 
</div>

Таким образом, ваши виджеты могут быть использованы в нескольких макетов. Использование отдельных разделов для сетки может увеличить количество разметки, но сделать код более удобным для обслуживания.

источник

2015-08-30 17:20:14

Итак, мне не нужно использовать какой-либо другой элемент в качестве «контейнера»? Что относительно «экранных читателей», как влияет на них сетчатая система, если, например,

Вам, вероятно, понадобится класс «container». Вам не нужно использовать классы «col -...» на DIV, но на самом деле, я думаю, это проще. Возможно, вам нужно попробовать это для себя и посмотреть. :) –

Содержимое следует положить внутри колонны, как указано в загрузчике documentation

Оба правильны в вашем примере, так как сетка только для макета, вы можете поместить любой блок или встроенные элементы в нем.

источник

2015-08-30 17:15:19 slashsharp

Самое важное правило следовать - .container является родителем, его ребенка являются .row, .col идет внутри строки и ваше содержание идет в .col.

Например. Вы хотите поместить изображение в центр с параграфами сбоку.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <p>Lorem ipsum</p> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <img src="http://placehold.it/150x150" alt="image"/> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <p>Lorem ipsum summun</p> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-08-30 17:37:21 Ivan86

Каков правильный способ использования сеток?

ответ

Смежные вопросы