Интересный вопрос. То, что @ twilight-pony-inc спрашивает, кажется тривиальным, но это не так. Щебетать Bootstrap строится с «отзывчивым» умом. Конструкция макета с TB примет на устройство, которое показывает его. Пример, который вы даете, кажется, создается с помощью работы с мобильным фреймом, например, jQuery Mobile. Мобильные фреймворки могут использоваться для создания мобильных приложений (только). В настоящее время мобильные рамки становятся более восприимчивыми, и в ближайшей версии Bootstrap Twitter используется первый подход для мобильных устройств. Щебетать Bootstrap 3 также будет иметь мобильную сетку. (см. также http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html и http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)
Рассмотрите, требуется ли вам сначала каркас для мобильных устройств вместо Bootstrap Twitter. Во-вторых, подумайте о том, чтобы использовать Bootstrap 3 Twitter, потому что это упростит вашу мобильную разработку.
Вы можете построить такой макет с помощью twitter boostrap. Сначала прочитайте о сетке: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Начните с строкой для вашей навигационной панели и разделить его на колоннах:
<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div>
</div>
Также рассмотреть сетку жидкости здесь: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
Это даст вам Navbar с двумя кнопками. Но на маленьком/мобильном экране (ниже 768 пикселей) ваш макет ломается. Ниже 768 px yor columns (divs с классом spanX) будет стекаться (и получить 100% ширину). Вы можете использовать медийные запросы, чтобы исправить это:
@media (max-width:767px)
{
.navbar div[class*="span"] { float: left;} /* float left */
.navbar div.span3 { width:25%; }
.navbar div.span6 { width:50%; }
body {padding:0;}
}
Это создаст строку с тремя колонками на маленьких экранах. См: http://www.bootply.com/66054 или изображение ниже:
CSS-сделать мобильный макет жидкости вызвать ширина colums устанавливается в процентах (100% в строке).
Загрузочный трекер Twitter 3 TB3 имеет жидкий макет по умолчанию.
TB3 имеет две сетки большую сетку для экранов шириной 768 пикселей и небольшую мобильную сетку. Вы можете использовать мобильную сетку, вам не нужны медиа-запросы, чтобы получить макет, как указано выше, с TB3. В TB3 ширина столбцов задается классами col-span-{X}. Аналогично для небольшой сетки col-small-span-{X} используются для установки ширины.
Так с щебетать Bootstrap 3 вы можете создать свой Navbar с:
<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div>
</div>
щебетать Bootstrap 3 определяет три сетки: Крошка сетку для телефонов (< 768px), Малую сетку для таблеток (> 768px) и сетью Medium-Large для Destkops (> 992px). Префиксы класса строк для этой сетки: «.col-», «.col-sm-» и «.col-lg-». Средняя сетка будет располагаться ниже ширины экрана 992 пикселя. Так же малая сетка ниже 768 пикселей, а крошечная сетка никогда не складывается. За исключением старых телефонов, которые всегда будут складывать элементы (мобильный первый дизайн).
По этой причине вы должны использовать «.col-» префиксы для мобильного приложения:
<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn btn-default">Home</button></div>
</div>
</div>
См: http://bootply.com/73382
