Позиционирование элементов

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

При использовании Bootstrap очень удобно позиционировать интерфейс в виде таблицы или сетки, используя строки и столбцы. Так, если мы посмотрим в браузере на стандартное представление Index.cshtml, которое идет по умолчанию, то мы увидим подобное позиционирование: элементы под заголовком расположены как бы в три столбца и составляют одну строку:

Если мы откроем код представления, то мы можем увидеть использование классов bootstrap:

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>.............</p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>.............</p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>.............</p>
    </div>
</div>

Класс row задает расположение отдельных блоков в виде одной строки. Строка в Bootstrap может иметь до 12 столбцов. Строк может быть сколько угодно, но в данном случае у нас одна строка.

Для создания отдельного столбца строки используется класс col-md-4. col, как ясно из названия, обозначает столбец.

Дальше идет md - идентификатор устройства. Как мы увидели в прошлой теме, bootstrap делит все устройства условно на четыре группы в зависимости от ширины экрана. md, в частности, соотносится со средними устройствами (то есть которые имеют ширину от 992 пикселя и выше). А число 4 указывает, сколько условных единиц в строке будет занимать данный блок. Таким образом, получается, что класс col-md-4 означает, что данный блок будет занимать 4 условных единицы из 12 в строке, то есть треть ширины экрана устройства с экраном шириной от 992 пикселей.

И поскольку у нас есть четыре группы, то для каждой группы имеются свои классы. Например, для очень маленьких устройств с экраном меньше 768 пикселей (то есть мобильных телефонов), подобный класс мог бы быть таким col-xs-4.

Все типы классов:

• col-xs-*: для устройств с шириной экрана меньше 768 пикселей

• col-sm-*: для устройств с шириной экрана от 768 пикселей и выше

• col-md-*: для устройств с шириной экрана от 992 пикселя и выше

• col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше

Хотя даже на мобильных устройствах блок с классом col-md-4 будет выглядеть вполне неплохо, но мы можем установить сразу два класса, чтобы еще больше детализировать отображение на различных устройствах, например:

<div class="col-xs-12 col-md-4">

И хотя в представлении Index.cshtml по умолчанию все три блока имеют относительную ширину в 4 единицы, составляя в целом 12 единиц, мы можем задать любую другую ширину, позиционируя их по собственному усмотрению. Например:

Отступы

Специальные классы col-md(sm|lg)-offset-* позволяют задать смещение относительно левого блока или начала строки в условных единицах. Например, у нас есть такая строка:

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-offset-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать следующим образом:

<div class="row">
    <div class="col-md-4">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-push-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

И у нас был бы тот же эффект. Но мы можем также полностью переупорядочить порядок следования блоков:

<div class="row">
    <div class="col-md-4 col-md-push-8">
        <h2>Левый блок</h2>
        <p>................</p>
    </div>
    <div class="col-md-4 col-md-pull-4">
        <h2>Правый блок</h2>
        <p>................</p>
    </div>
</div>

Теперь правый блок сместится влево на четыре единицы, а левый блок - вправо на 8 единиц:

Таким образом, используя класс row и классы столбцов, мы можем задать общее расположение элементов, а адаптивность bootstrap гарантирует, что на любых устройствах подобная сетка элементов будет выглядеть вполне нормально. Теперь рассмотрим некоторые компоненты, которые предлагает нам Bootstrap.