Размеры сетки бутстрап: Система сеток. Разметка · Bootstrap. Версия v4.1.3

Bootstrap - Элементы сетки и как их использовать для создания макета
  • Статьи
  • Видеоуроки
  • Таймлайн
  • Вопросы
  • Поиск
    • Войти
    • Регистрация
  • HTML & CSS
  • JavaScript
  • Bootstrap

Система сеток Bootstrap 4 | WebReference

Система сеток позволяют создавать продвинутые макеты с использованием рядов и колонок. Сетка Bootstrap может содержать до 12 колонок, и вы можете указать, как эти колонки будут масштабироваться для разных размеров области просмотра.

Вот пример сетки Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Стили (чтобы мы видели сетку) --> <style> .bs-example div[class^="col"] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; } </style> <div> <!-- Сетка Bootstrap --> <div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> <div>.col-sm-1</div> </div> <div> <div>.col-sm-2</div> <div>.col-sm-3</div> <div>.col-sm-7</div> </div> <div> <div>.col-sm-4</div> <div>.col-sm-4</div> <div>.col-sm-4</div> </div> <div> <div>.col-sm-5</div> <div>.col-sm-7</div> </div> <div> <div>.col-sm-6</div> <div>.col-sm-6</div> </div> <div> <div>.col-sm-12</div> </div> </div>

Числа в конце каждого имени класса означают количество занимаемых колонок. Так, .col-sm-1 занимает одну колонку, а .col-sm-8 — восемь. sm (от слова small — маленький) означает, что колонка применяется к небольшим устройствам и всему выше. Вы также можете использовать md (от medium — средний), lg (large — большой) и xl (extra large — очень большой) для средних, больших и очень больших размеров.

Для сверхмалых устройств средняя часть в имени опускается. Например, .col-8 занимает восемь колонок на очень маленьких устройствах и выше (другими словами, на всех устройствах).

Размещение по горизонтали

В следующем примере используется та же самая разметка, но в этот раз мы используем md для «средних». Это означает, что если область просмотра меньше «среднего» (то есть меньше 768 пикселей), то ячейки в сетке будут располагаться друг под другом, а каждая ячейка будет занимать всю ширину.

Если вы просматриваете пример на широком экране, то пример может не отличаться от предыдущего. Однако, если вы уменьшите размер своего браузера, ячейки в конечном итоге разместятся друг под другом (предыдущий пример останется без изменений).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Стили (чтобы мы видели сетку) --> <style> .bs-example div[class^="col"] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; } </style> <div> <!-- Сетка Bootstrap --> <div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> <div>.col-md-1</div> </div> <div> <div>.col-md-2</div> <div>.col-md-3</div> <div>.col-md-7</div> </div> <div> <div>.col-md-4</div> <div>.col-md-4</div> <div>.col-md-4</div> </div> <div> <div>.col-md-5</div> <div>.col-md-7</div> </div> <div> <div>.col-md-6</div> <div>.col-md-6</div> </div> <div> <div>.col-md-12</div> </div> </div>

Размеры сетки

В следующей таблице показано, как различные параметры сетки работают с разными размерами области просмотра.

Сверхмалая <576pxМалая ≥576pxСредняя ≥768pxБольшая ≥992pxСверхбольшая ≥1200px
Максимальная ширина контейнераНет (auto)540px720px960px1140px
Префикс класса.col-.col-sm-.col-md-.col-lg-.col-xl-
Число колонок12
Межколоночный интервал30px (по 15px с каждой стороны колонки)
ВложенностьДа
Порядок колонокДа

Обратите внимание, что Bootstrap 4 теперь использует пятиуровневую систему сетки (в отличие от четырёхуровневой в Bootstrap 3).

Что надо знать про сетки

Контейнеры

Сетки должны размещаться в контейнере (с помощью класса .container или .container-fluid) для правильных отступов и выравнивания.

Ряды и колонки

Ряды содержат один или несколько колонок, в колонах хранится содержимое. Только колонки могут быть непосредственными потомками рядов.

padding

Колонки содержат padding, однако для первой и последней колонок padding компенсируется отрицательным margin для ряда. Вот почему вышеприведённые примеры содержат изъян — содержимое внутри сетки выравнивается с содержимым вне сетки.

Более 12 колонок на строку?

Если в ряду размещается более 12 колонок, то они переносятся на новую строку, при этом колонки переносятся группой. Например, если ряд содержит col-md-10 и col-md-3, то весь col-md-3 будет перенесён на новую строку.

Менее 12 столбцов на строку?

Вам не нужно задействовать все 12 столбцов, можете использовать любое количество колонок, вплоть до 12. К примеру, у вас может быть ряд, в которой общее число колонок равно трём.

Классы сетки

Классы сетки применяются к устройствам с шириной экрана, больше или равной размерам точек останова, и переопределяют классы сетки, предназначенных для небольших устройств. Поэтому использование любого класса .col-sm- * повлияет не только на маленькие области просмотра, но и на средние, большие и очень большие (кроме случаев, когда также присутствует col-md-*, col-lg-*, col-xl-*).

Несколько классов

Вы можете включить несколько классов размера для данного элемента. Например, вы можете использовать, тем самым указать 10 колонок для маленьких экранов и 6 колонок для средних и больших экранов.

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты
Типичная ошибка сетки (Bootstrap Grid), или почему дизайнер и верстальщик не понимают друг друга
Сталкивались ли вы с ситуацией, когда текст и блоки, которые прекрасно вмещаются в макете фотошопа, почему-то упрямо не хотят слушаться в верстке – не вмещаются в заданную макетом ширину? При этом и дизайнер, и верстальщик используют одинаковую сетку, например, сетку Bootstrap 3.

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

Сетка бутстрапа, как распространенный пример сетки, устанавливает 12 колоночную схему, которая на экранах от 1200px и более шириной имеет размеры между колонками 30px и боковые отступы контента по 15px слева и справа. Учитывая, что ширина колонок дизайнером задается в пикселях, а верстальщиком – в процентах, описанная ниже ошибка не сразу заметна.

Как работает с сеткой дизайнер? Обычно эта сетка генерируется каким-либо сервисом, скачивается и устанавливается в фотошоп. Как работает с сеткой верстальщик? Сетка берется из фреймворка Bootstrap 3.

Тогда в чем же проблема, если размеры сетки (колонок и интервалов) одинаковые?

Суть проблемы кроется в удобном CSS-свойстве «box-sizing» со значением «border-box», что по умолчанию установлено в бутстрапе. Из-за этого дизайнер ширину боковых отступов считает добавочно к ширине контента (1170px плюс боковые отступы по 15px справа и слева), а верстальщик, сам не ведая того, включает их в ширину контента (1170px, включая боковые отступы по 15px, т.е. ширина контента равна 1140px). Таким образом получается, что в проекте на разных этапах используют две разные сетки причем у верстальщика она более узкая.

Встречается данная ошибка и при использовании других сеток, отличных от Bootstrap. По-видимому, она зародилась, с появлением «border-box».

Решение простое – скорректировать размер контейнера: «container {width: 1200px;}» (1170px – контент плюс 15px отступы справа и слева). Также необходимо провести соответствующую корректировку контейнера на величину боковых отступов для экранов других разрешений.

Как мне кажется, не имеет смысла спорить о том, кто ответственен за исправление ошибки. Хорошим тоном для дизайнера будут уточнить этот вопрос у верстальщика, а верстальщику – помнить о такой особенности применения «border-box» для сетки. Исправление ошибки в широко распространенном фреймворке также увеличит количество сайтов, строго соответствующих дизайну.

Медиа объект. Разметка · Bootstrap. Версия v4.1.3

Документация и примеры для медиа-объекта Bootstrap по созданию высоко повторяющихся компонентов, таких как комментарии блога, твиты и т.п.

Пример

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

Ниже – пример одиночного «медиа-объекта». Только два класса потребовались для его создания – «оборачивающий» .media и .media-body, в котором лежит ваш контент. Паддинг и марджин могут настраиваться утилитами «отсупа».

<div>
  <img src=".../64x64" alt="Generic placeholder image">
  <div>
    <h5>Медиа заголовок</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Баг №12 – строчные элементы не воспринимаются как растяжимые

IE10-11 не отстраивает строчные элементы, такие как ссылки и изображения (или псевдоэлементы

::before и ::after) как растяжимые элементы. Единственное решение здесь - установить «нестрочное» значение display (т.е. block, inline-block или flex). Мы предлагаем использовать для исправления этого бага класс .d-flex, одну из наших утилит отображения.

Источник: баги «растяжимости» на GitHub

Вложенность

Медиа-объекты могут иметь бесконечную вложенность, хотя мы рекомендуем знать меру. Располагайте вложенные классы .media внутри класса .media-body родительского медиа-объекта.

<div>
  <img src=".../64x64" alt="Generic placeholder image">
  <div>
    <h5>Медиа заголовок</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div>
      <a href="#">
        <img src=".../64x64" alt="Generic placeholder image">
      </a>
      <div>
        <h5>Медиа заголовок</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

Выравнивание

Медиафайл в медиа-объекте может быть выровнен утилитами флексбокса по верхнему краю (по умолчанию), посередине, или в конце контента вашего класса .media-body.

<div>
  <img src=".../64x64" alt="Generic placeholder image">
  <div>
    <h5>Медиа, выровненные по верхнему краю</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div>
  <img src=".../64x64" alt="Generic placeholder image">
  <div>
    <h5>Медиа, выровненные по центру</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
<div>
  <img src=".../64x64" alt="Generic placeholder image">
  <div>
    <h5>Медиа, выровненные по нижнему краю</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

Порядок

Меняйте порядок контента в медиа-объектах, изменяя код HTML или добавлением стилей обычных флексбоксов для настройки свойства «order» (числовое значение).

<div>
  <div>
    <h5>Медиа объект</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src=".../64x64" alt="Generic placeholder image">
</div>

Поскольку медиа-объект нетребователен к структуре документа, вы можете использовать их к списку элементов HTML. Так, добавьте класс .list-unstyled к вашим <ul> или <ol> для удаления браузерного оформления по умолчанию этих элементов, и тогда примените класс .media к вашим <li>. Как обычно, пользуйтесь утилитами отсупа для точной настройки.

  • Медиа объект на основе списка
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

  • Медиа объект на основе списка
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

  • Медиа объект на основе списка
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<ul>
  <li>
    <img src=".../64x64" alt="Generic placeholder image">
    <div>
      <h5>Медиа объект на основе списка</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li>
    <img src=".../64x64" alt="Generic placeholder image">
    <div>
      <h5>Медиа объект на основе списка</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li>
    <img src=".../64x64" alt="Generic placeholder image">
    <div>
      <h5>Медиа объект на основе списка</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>
Bootstrap Sizing - примеры и учебник. Основное и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только эти компоненты и функции, которые вам нужны.

Если вам нужна дополнительная помощь при компиляции собственного пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Учебник по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Условные обозначения:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлы из основного каталога

    «none» означает «этот компонент не требует ничего, кроме файлов ядра»

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

    Все компоненты PRO требуют 'pro / _variables.файл scss

    СКС /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _кнопки.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss none (PRO:)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - про /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, free / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> free / _cards.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> free / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> free / _carousels.scss, pro / _carousels.scss, free / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.СКС
    | | | - _pricing.scss -> free / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> free / _forms.scss, pro / _forms.scss, free / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> free / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> free / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> free / _cards.scss
    | | - _downdowns.scss -> free / _dropdowns.scss, free / _buttons.scss
    | | - _navbars.scss -> free / _navbars.scss (PRO:)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> free / _forms.scss, free / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> free / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, free / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> free / _forms.scss, pro / _animations.scss, section / _templates.scss
    | | - _ecommerce.scss -> free / _cards.scss, pro / _cards.scss, free / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> free / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> free / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _Оценено.СКС
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

    

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Условные обозначения:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    JS /
    Dist── dist /
    │ ├── button.js
    │ ├── cards.js
    Character ├── персонаж-counter.js
    Chips ├── chips.js
    │ ├── collapsible.js -> vendor / speed.js
    Drop ├── выпадающий.js -> Popper.js, jquery.easing.js
    File ├── file-input.js
    │ ├── forms-free.js
    Material ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    Load ├── preloading.js
    Range ├── range-input.js -> vendor / speed.js
    Rol ├── scrolling-navbar.js
    S ├── sidenav.js -> vendor / speed.js, vendor / hammer.js, vendor / jquery.hammer.js
    Smooth └── smooth-scroll.js
    Int── _intro-mdb-pro.js
    ├── modules.js
    ├── срк /
    │ ├── button.js
    Cards ├── карты.JS
    Character ├── персонаж-counter.js
    Chips ├── chips.js
    │ ├── collapsible.js -> vendor / speed.js
    Drop ├── dropdown.js -> Popper.js, jquery.easing.js
    File ├── file-input.js
    │ ├── forms-free.js
    Material ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    Load ├── preloading.js
    Range ├── range-input.js -> vendor / speed.js
    Rol ├── scrolling-navbar.js
    S ├── sidenav.js -> vendor / speed.js, vendor / hammer.js, vendor / jquery.hammer.JS
    Smooth └── smooth-scroll.js
    └── продавец /
        Add── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        Chart── chart.js
        Enhanced── улучшенный-modals.js
        Hammer── hammer.js
        ├── jarallax.js
        J── jarallax-video.js -> вендор / jarallax.js
        Qu── jquery.easing.js
        Qu── jquery.easypiechart.js
        Qu── jquery.hammer.js -> vendor / hammer.js
        Qu── jquery.sticky.js
        Light── lightbox.js
        Er── picker-date.js -> продавец / сборщик.JS
        Er── picker.js
        Er── picker-time.js -> vendor / picker.js
        Roll── scrollbar.js
        Rol── scrolling-navbar.js
        Ast── toastr.js
        Velocity── speed.js
        Waves── waves.js
        Ow── wow.js
    
,

Начальная настройка входного размера


Размер входных данных в формах

Установите высоту входных элементов, используя такие классы, как .input-lg и .input-sm .

Установите ширину элементов, используя классы столбцов сетки, такие как .col-lg- * и .col-sm- * .


Высота Размер

В следующих примерах показаны элементы ввода разной высоты:

Пример



Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *