Объясните разницу в scaffolding bootstrap

viz9 · December 20, 2012

Здравствуйте. Начал заниматься версткой своей поделки на django. С html, css знаком.

Вот начал читать документацию bootstrap. Прочитал http://twitter.github.com/bootstrap/scaffolding.html про scafollding, попробовал.

не понимаю в чем разница структур:

———————


<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

——————--


<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

——————--


<body>
  <div class="container">
    ...
  </div>
</body>

Объясните ,пожалуйста, разницу? в каких случаях удобнее применять?

madhed · December 21, 2012

Структура

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

обозначает что в блоке 940px-ширины созданы 2 фиксированные по ширине колонки


.span4 {
  width: 300px;
}
.span8 {
  width: 620px;
}

Структура

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

обозначает что в блоке с шириной 100% созданы 2 колонки в процентном соотношении


.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}

.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}

Структура


<div class="container">
    ...
  </div>

обозначает центрированный блок, который по умолчанию имеет ширину 940px

Рекомендую почитать ресурс: http://bootstrap.veliovgroup.com/index.php - он на русском и достаточно понятно все изложено. Так же очень рекомендую все это использовать на практике и смотреть как и что работает в сочетании.

viz9 · December 21, 2012

Спасибо, как раз вчера нашел этот перевод документации.

Да, я практикуюсь. Для этого и взял bootstrap, чтобы с нуля самому не делать.

Sign In

Объясните разницу в scaffolding bootstrap

Question

viz9

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

madhed

Link to comment

Share on other sites

viz9

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information