Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Я уж не говорю про код, заглянул в первый попавшийся exosource.com
Недостатком использования фреймворков является тот факт, что странице придется целиком «нести» за собой лишние стили фреймворка, даже если она использует лишь их малую часть.
<div class="row">
<div class="col col-md-4">
...
</div>
<div class="col col-md-4 col-md-offset-1">
...
</div>
<div class="col col-md-4 col-md-offset-1">
...
</div>
</div>
float
желательно оборачивать элементом с так называемым clearfix — это хак, который «очищает поток», искусственно выставляет у контейнера с плавающими элементами высоту, равную высоте самого крупного из них. Без него контейнер будет иметь нулевую высоту (т.к. в нем нет статического содержимого), а это может привести к тому, что последующие за ним элементы как бы «протекут» внутрь него:float
, а для .row задается «micro clearfix» вида.row:before, .row:after{
display: table;
content: " "
}
max-width
, что ограничивает ширину всей сетки, и выравнивание по центру (margin: 0 auto) — по сути, то же самое, что делает .container у Bootstrap.Это обусловлено фреймворком?
{селектор для нужного "row"} > div{
.make-md-column( 4 )
}
{селектор для нужного "row"} > div:not(:first-child){
.make-md-column-offset( 1 )
}
<nav>
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
</ul>
</nav>
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</nav>
nav {
display:block;
width: 60em;
margin: 0 auto;
}
A nav element doesn't have to contain a list
In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.
(...)
(1) semantics: at the UL JAWS pauses and announces that I’ve entered a list, it tells me at least that the next items go together; NAV is better but a list of links is not necessarily a navigation, (2) JAWS understands li tags as separate items and stops after reading each item, (3) more semantics: hierarchy is clear if one list is nested inside another (subnav) – JAWS announces nesting. For nested navigation/links, I would lean towards nested lists. (4) Not sure how people use this exactly, but JAWS does have a shortcut key that detects any lists on the page. Lists are more discoverable.
<div class="row">
<div class="col-md-8 twitter"></div>
<div class="col-md-4 sitemap"></div>
<div class="col-md-6 social"></div>
<div class="col-md-6 footer-logo"></div>
</div>
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Как сверстать веб-страницу. Часть 2 — Bootstrap