Структура семантических тегов в шаблоне на Bootstrap

[Sigizmund]

Здравствуйте. Решил сверстать шаблон с помощью Bootstrap как на скриншоте:

 

Стандартная 12-колоночная сетка с полями, вместо дивов решил использовать семантические теги header, footer, article, aside, nav и др. Есть несколько идей:

<header>	<div class="container-fluid">		<div class="row">			<div class="container">				<div class="row">					<div class="col-xs-12">											</div>				</div>			</div>		</div>	</div></header>

Можно ли контейнеры помещать внутрь других тегов? В документации Bootstrap нет ничего об этом.

Или лучше так сделать?:

<header class="container-fluid">	<div class="row">		<div class="container">			<div class="row">				<div class="col-xs-12">				</div>			</div>		</div>	</div></header>

У кого опыта побольше посоветуйте как сделать.

[by chris]

В любом случае bootstrap это суп из дивом и верстают на нем для скорости, но не для семантики) Container-fluid лучше использовать для дивов, и вообще абстракцию классов сетки использовать по дефолту) Ну а помещать внутрь header никто не запрещает.

[VeniVidiVici]

Тоже начал изучать bootstrap, возник вопрос по поводу размеров.

С сеткой и ячейками всё понятно.

Но как указывать размеры колонкам? К примеру есть 2 колонки размерами 355px и 577px.

Без бутстрапа это выглядело бы примерно так:

http://codepen.io/anon/pen/JXPbpZ

 

А с бутстрапом....ну укажу я количество ячеек и что....

<div class="container">  <div class="row">    <div class="col-lg-3"></div>    <div class="col-lg-9"></div>  </div></div>

Или добавлять ещё один класс каждой колонке.......в общем, запутался.. 

Edited February 25, 2016 by VeniVidiVici

[by chris]

<div class="container cols-custom">

<div class="row">

<div class="col-lg-3"></div>

<div class="col-lg-9"></div>

</div>

</div>

.cols-custom {

max-width: 932px;

}

.cols-custom[div*="col-lg-3"] {

/*width: 355px;

355÷932×100

*/

width: 38.090128755%;

}

.cols-custom[div*="col-lg-9"] {

/*width: 577px;

577÷932×100

*/

width: 61.909871245%;

}

[Sigizmund]

Тоже начал изучать bootstrap, возник вопрос по поводу размеров.

С сеткой и ячейками всё понятно.

Но как указывать размеры колонкам? К примеру есть 2 колонки размерами 355px и 577px.

Без бутстрапа это выглядело бы примерно так:

http://codepen.io/anon/pen/JXPbpZ

 

А с бутстрапом....ну укажу я количество ячеек и что....

<div class="container">  <div class="row">    <div class="col-lg-3"></div>    <div class="col-lg-9"></div>  </div></div>

Или добавлять ещё один класс каждой колонке.......в общем, запутался.. 

 

А на Bootstrap верстать пиксель в пиксель и не получится, если только макет строго по его 12-колоночной сетке не выровнен, тем более, что ширина столбцов там в процентах указана.

 

<div class="container cols-custom">  <div class="row">    <div class="col-lg-3"></div>    <div class="col-lg-9"></div>  </div></div>

.cols-custom {  max-width: 932px;}.cols-custom[div*="col-lg-3"] {  /*width: 355px;    355÷932×100  */  width: 38.090128755%;}.cols-custom[div*="col-lg-9"] {  /*width: 577px;    577÷932×100  */  width: 61.909871245%;}

 

Это какой-то леденящий душу пиздец, как сказал бы Лебедев.

Edited February 25, 2016 by Sigizmund

[VeniVidiVici]

by chris, спасибо большое.

 

А на Bootstrap верстать пиксель в пиксель и не получится

Я размеры в пикселях назвал для примера, да и потом, для относительных размеров вам ведь всё равно нужно знать размер в пикселях.

 

Честно говоря не понимаю я смысл этих фреймворков если в конечном итоге в их стилях придётся всё исправлять и править...мне лично проще без фреймворка.....

Edited February 26, 2016 by VeniVidiVici

[wwt]

зачем вообще помещать контейнер в контейнер? Что мешает ряды помещать в колонки?

container //or container-fluid  > row    > col      > row        > col

По поводу ширины колонок верно подметили выше что пиксель в пиксель не получится, и если стандартная сетка не подходит вставляйте свои элементы,

 

Использовать семантические элементы вместо дивов можно и нужно, с header бутстрап будет работать точно так же как с div

[andrey7287]

Честно говоря не понимаю я смысл этих фреймворков если в конечном итоге в их стилях придётся всё исправлять и править...мне лично проще без фреймворка.....

  Смысл есть в том случае если макет изначально заточен под колонки.  

 

  Размеры колонкам указывать не нужно. В предварительной настройках бутстрапа при необходимости ты задаёшь : кол-во колонок, расстояние между колонками, ширину контейнера. И всё. Размеры колонок тебе и знать не нужно, всё само натянется как надо. Профит!  

Edited February 26, 2016 by andrey7287

[wwt]

Честно говоря не понимаю я смысл этих фреймворков если в конечном итоге в их стилях придётся всё исправлять и править...мне лично проще без фреймворка.....

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

[VeniVidiVici]

Размеры колонок тебе и знать не нужно, всё само натянется как надо

Я просто привык топорно в фотошопе линейкой замерять размеры элементов....каждый элемент же имеет конкретный размер....который я потом превращаю в относительный...поэтому, пока мне не совсем привычно использовать сетку бутстрапа.

Edited February 27, 2016 by VeniVidiVici