Media bootstrap 3: Bootstrap 3 Media Objects

Содержание

Адаптивный веб-дизайн: без Bootstrap не обойтись | GeekBrains

Bootstrap 4 сделал приоритетом разработку веб-сайтов для мобильных устройств. Для этого в нем появились некоторые новшества.

https://d2xzmw6cctk25h.cloudfront.net/post/328/og_cover_image/fe53195b476467efba31fdb916a7f698

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

Адаптивный веб-дизайн — подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра на любом экране.

JavaScript vs правила CSS @media

Есть два варианта верстки, которые устраивают поисковые системы.

Вариант, когда индексная страница сайта не имеет ничего, кроме нескольких тегов и блока JavaScript, который определяет, в какую именно среду он загрузился. Далее он отправляет на сервер собранную информацию, который на основании этих данных создает персонализированный под это устройство код страницы.

Плюс этого подхода в том, что ограниченные ресурсы мобильных устройств используются экономно, в расчете на них сервер и генерирует html-код. Но минусов при этом тоже не мало, главный из которых — необходимость иметь «статические» копии страниц на сервере для индексации поисковиками. Есть и трудности с навигацией браузера кнопками «впред» и «назад».

Второй подход, который по ряду причин продвигают социальные сети — адаптивный дизайн в «чистом виде». Он основан на @media — правило, которое указывает тип носителя, для которого применяется указанный стиль. Обычно их группируют по наиболее популярным размерам экранов.

Этот подход к созданию web-страниц позволяет обойтись без Ajax, а значит и без проблем с индексацией страниц поисковиками. Но на все устройства приходит контент почти одного размера, что в случае с мобильными устройствами приводит к повышенному расходу трафика, батареи и памяти.

Разработчики мобильных сайтов выбрали Bootstrap

Однако слабые устройства сейчас занимают всё меньшую и меньшую рыночную долю: смартфоны и планшеты уже достигли показателей настольных систем. Маломощными устройствами остались носимые устройства («умные» часы, браслеты) и устройства из мира «интернета вещей». Там нет надобности в просмотре «тяжелого» контента.

А вот все остальные мобильные сайты с адаптивным дизайном чаще всего строятся на базе второго подхода с использованием фреймворков типа Bootstrap, который разработал Twitter.

Он изначально писался под мобильные устройства: сетка фреймворка разработана так, чтобы была возможность изначально проектировать дизайн под маленькие экраны, а поддержку широкоформатных устройств и телевизоров можно добавить потом. Хотя возможно и наоборот, ограничений нет. В итоге он оказался весьма удачным инструментом и быстро завоевал популярностью среди разработчиков.

Bootstrap 4 становится отраслевым стандартом

Twitter Bootstrap — open source ПО, его код доступен на GitHub, актуальная версия — 3.3.6. Bootstrap 4 пока в стадии альфа-тестирования. В комплект поставки входят HTML и CSS шаблоны оформления для веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Фреймворк совместим с основными браузерами.

Но за универсальность надо платить — CSS препроцессор непривычен для начинающих программистов. Bootstrap поставляется в версии со стандартным CSS, но в исходном коде использует Sass (ранее комплектовался Less). Крупные open source проекты мигрируют на Sass, что раздражает разработчиков, привыкших к Stylus или Less.

Препроцессоры позволяют повторно использовать свойства CSS, что делает код модульным и масштабируемым. Sass же добавляет к CSS константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей, то же самое можно сделать с блоком атрибутов стиля.

Существенную помощь при работе верстальщиков окажет включение в Bootstrap спецификации FlexBox («CSS Flexible Box Layout Module»). Это расширение к стандартной CSS, поддерживается современными браузерами. Её использование позволяет строить весьма сложные макеты страниц при этом применяя простой код. При работе с мобильными сайтами это серьёзное подспорье.

Привязка к осям содержимого контейнеров в FlexBox:

Кроме того, для работы с Bootstrap необходимы навыки работы с JavaScript библиотекой jQuery. Те, кто привык к MooTools — столкнутся с некоторыми сложностями. Но всё решаемо.

Мобильный сайт — нечто другое, нежели его собрат для монитора. Всё вышеописанное могло бы показаться не очень-то и нужным лет десять назад.

Но времена меняются. Труд верстальщика переходит из разряда обычного специалиста по макетам в более сложную ипостась, приходится изучать гораздо больше «матчасти»: клиент уже не единственное место, где происходит рендеринг экрана. Да и экран экрану рознь нынче. Раз так, нужно изучать современные фреймворки, но лиха беда начало!

Тем, кто хочет разрабатывать под мобильные устройства, рекомендуем профессию «Разработчик мобильных приложений».

Bootstrap сетка за 15 минут

Bootstrap является сейчас самым используемым фреймворком. Когда он только появился, он стал отличным выбором как для разработчиков сайтов так и для любителей, благодаря своей простоте.

Любой человек который знает, хотя бы в общих чертах, HTML и CSS может начать использовать данный фреймворк уже сейчас.

В данной статье рассмотрим такое базовое понятие как, bootstrap сетка — она является фундаментом данного фреймворка.

1. Rows и Columns

Часть заголовка я специально оставил на английском языке, чтобы возникало меньше путаницы (rows — ряды, columns — колонки)

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

Rows (ряды) — это один уровень блоков. Это означает, что когда мы создаем новый ряд (row) он занимает всю ширину элемента внутри которого он находится.

Горизонтальное выравнивание осуществляется с помощью колонок (Columns). Дочерними элементами ряда может являться только колонка. Размещение контента в row без колонки — может привести к нарушению макета

<!-- Не правильно-->
<div>
    Ваш контент
</div>

<!-- Правильно-->
<div>
    <div>Правильно размещенный контент</div>
</div>

Замечание: Колонки и ряды имеют особые отношения. Каждая колонока имеют отступ — padding — в 15px слева и справа, таким образом контент внутри имеет равные отступы по краям. Такие правила «отодвигают» колонки от ряда на 15px , а это может нарушить макет, чтобы этого не происходило для row заданы отрицательные отступы что позволяет размещать крайние элементы без отступов от родителя, и именно поэтому колонку всегда следует оборачивать в row.

2. Row разделены 12

Ряд поделен на 12 равных частей. Когда мы собираемся разместить внутри ряда колонку — нам необходимо указать ее ширину — ширину которую займет колонка. Это делается путем добавления в блоку div класса col-md-номер , где номер может быть целым числом от 1 до 12. В зависимости от данного числа, столбец будет занимать определенный процент от полной щирины строки. Например: 6 это 50% от ширину ряда так как 6/12 = 0,5, 3 — 25% (3/12) и т.д.

<div>
    <div>Вся ширина ряда</div>
</div>

<div>
    <div>25%</div>
    <div>25%</div>
    <div>50%</div>
</div>

3. Обертывание колонок

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

В примере первые 2 колонки имеют ширину 8 и 4 соотвественно, что в сумме дает 12. Таким образом первая строка становится заполненной и следующий за ними элемент будет перенесен на следующую строку.

<div>
    <div></div>
    <div></div>
    <div>Эта колонка шириной 9 будет перенесена на следующую строчку</div>
</div>

4. Классы для размеров экрана

Помните мы писали .col-md-номер во втором шаге? Этот -md- означает средние размеры экрана (от слова medium — средние). В bootstrap заложены стандартные классы для использования на разных размерах экрана:

xs — (Extra small) — Экстра маленькие экраны, такие как у смартфонов, Используйте их так: .col-xs-номер

sm — (Small Screens) — Маленькие экраны, такие как у планшетов. Использование: .col-sm-номер

md — (Medium) — Средние размеры экранов, это экраны с низким количеством точек на дюйм и ноутбуки. Использование такое же как и в предыдущих примерах: .col-md-номер

lg — (Large) — Большие экраны с высоким разрешением. .col-lg-номер

Bootstrap высчитывает разрешение экрана и dpi (количество точек на дюйм или плотность пикселей) и в соответствии с этим вычислением указывает какой класс активен в данный момент. Это полноценный способ контролировать как положение, так и отображение контента в целом для любых устройств.

<div>
    <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
    <div><p>Данный блок на среднем экране займет половину, на очень маленьком - всю ширину</p></div>
</div>

5. Clearfix

В некоторых случаях бывает так что две колонки планируются разной высоты, и заставить отображаться следующий элемент, который должен быть под ними бывает проблематично. Что бы это предотвратить существует класс clearfix. Он помещает все следующие колонки на новую строку.

<div>
    <div>Эта колонка выше чем все остальныне</div>
    <div></div>
    <div></div>
    <div></div>
</div>

6. Offsets (Смещения) — ваши друзья

Изначально все колонки выравнены по левому краю и следуют строго друг за другом. Если количество колонок будет меньше 12, то справа останется свободное место.

Чтобы создать отступы слева и/или справа. Применение к любому блоку с колонкой класса .col-md-offset-2 сместит данный блок вправо на размер двух пустых колонок . Это же правило действует и ля других размеров экрана т.е. col-xs-2, col-sm-2 и прочие .

7. Классы Push и Pull

Классы .push и .pull позволяют нам переназначить привязку блоков в зависимости от экрана устройства. Класс .push двигает колонку к правому краю, а класс .pull — к левому. Отличие данного класса от offset в том что они имеют position:relative, таким образовам не сдвигая остальные блоки.

Классы push и pull имеют следущий синткасис: .col-размер-push(pull)-число. Размеры такие же как и в 4 пункте — xs, sm, md, lg. Номер это количество колонок, которые мы хотим подвинуть.

<div>
    <div>На ноутбуках этот текст будет отображаться справа от картинки, на XS экранах картинка будет справа а текст слева</div>
    <div><img src="city.jpg"></div>
</div>

Заключение

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

Но помимо данных правил существует еще ряд других, более расширенных,которые также часто используются.. Для их изучение посмотрите на русскоязычный портал о bootstrap http://bootstrap-3.ru/

50+ бесплатных адаптивных BootStrap HTML-шаблонов ~ Страницы Интернета

Bootstrap — мощный и элегантный, интуитивно понятный фронт-енд фреймворк, разработанный командой Twitter. Это open-source CSS и JavaScript среда разработки современных интернет проектов. Относительно молодая платформа веб-разработки, безусловно заслуживающая изучения, предлагает множество полезных вещей: стили компонентов интерфейса (заголовки, вкладки, навигационные панели…) и HTML-элементов (кнопоки, формы, шрифты…), адаптивные queries, JS-плагины и т.д. Основанный на принципе «Сначала мобильные» (Mobile first), фреймворк изначально был задуман для упрощения и ускорения процесса разработки сайтов. Сегодня BootStrap с размахом используется на веб пространстве рунета. Во многих случаях, темы на бутстрап это идеальный вариант для тех, кого интересуют шаблоны адаптивного дизайна и тех, кому необходимо создать приличный современный сайт с минимальными затратами. Правильно подобранный BootStrap HTML шаблон не разочарует того, кто решил использовать его под коммерческий проект или того, кому нужен простой бутстрап шаблон (…ищущим bootstrap шаблоны бесплатно), так как благодаря легко настраиваемому инструментарию всегда есть возможность для внесения изменений или доработки под свои нужды. Замечательная особенность бутстрап шаблонов в том, что самостоятельно разобраться и осуществить это под силу даже тому, у кого нет большого опыта в программировании и оформлении сайта. К тому же всегда можно натянуть BootStrap на любую CMS, например интегрировав его компоненты в WordPress шаблон. Профессионалов бутсраперов в этом фреймворке привлекает возможность повторно использовать наработки, создавая при этом приличного вида проекты.

Если вам посчастливится встретить подходящий шаблон на этом популярном фреймворке, то можно считать это первым шагом к построению дизайна сайта, который будет вне досягаемости для ваших конкурентов. В этом посте собраны более 50 тщательно отобранных бесплатных адаптивных BootStrap HTML шаблонов из самых различных интернет-источников.

Bootstrap шаблоны — многоцелевые / портфолио / бизнес

1. Libra

Libra — мощный BootStrap HTML-шаблон с чистым дизайном и хорошим юзабилити — идеален для создания корпоративного / портфолио сайта. Действительно шикарный функционал для бесплатного шаблона, при этом многое — с неограниченными возможностями (для красивого оформления сайта). Ключевые особенности: шаблон с большим макетом (1170px), супер адаптивный, Background Uploader — позволяет использовать различные бэкграунды, изображения и цвета для каждого поста или страницы, Unlimited Sliders — 9 шикарных слайдеров (включено 2 премиум слайдера стоимостью 30$ и великолепный Polaroid слайдер, которого вы не встретите на Themeforest ! ), Header Uploader — добавляющий в шапку сайта для различных страниц разные изображения, неограниченные портфолио с 9-ю макетами, неограниченные галереи и видео-галереи, шорткод-менеджер c 200+ шорткодами…Шаблон распространяется по лицензии CC. Дополнительные бонусы: поддерживает Post Formats, 500 шрифтов google fonts, шаблон SEO оптимизирован и имеет встроенную SEO-панель в админке.

2. Flat Design Portfolio Template

Этот эффектный шаблон сайта-портфолио с плоским дизайном разработал талантливый филиппинский UI дизайнер Lester Gonzales. Шаблон имеет: полную адаптивность и хорошо оптимизированный для тачскрин устройств пользовательский интерфейс, красивые плоские цвета, совместимость с основными браузерами. Поставляется в двух версиях: 1) многоцелевой 2) одностраничный, с красивым эффектом гладкой прокрутки (Smooth Scroll).

3. Passion Free Bootstrap Theme

Passion — пример стильной многоцелевой темы на Bootstrap, предназначенной для построения уникальных и современных бизнес-сайтов & сайтов с минималистичным дизайном. Это действительно тема с уникальным дизайном: см. страницы About, Portfolio, Services и многое остальное. Функциональные возможности и особенности: форма контактов с валидацией, кросбраузерность, используется Bootstrap 3.0.3, jQuery 1.8.1, фильтр в портфолио, нестандартные шрифты (CSS3 font-face), адаптивный дизайн темы и легкость ее модификации. А благодаря масштабируемой векторной графике Font Awesome можно менять размеры иконок, не теряя в качестве (совместимо с IE7, будет отлично выглядеть на дисплеях с высоким разрешением). Все это вместе делает Passion Free Bootstrap Theme лучшим выбором из тех бутстрап тем, которые можно скачать и использовать бесплатно.

4. mPurpose Bootstrap Template

mPurpose – адаптивный HTML/CSS шаблон с современным чистым дизайном в минималистичном стиле. Имеет более 30 примеров страниц и впечатляющий для бесплатного шаблона набор полезного функционала. В шаблон встроено пять цветовых схем — синяя, оранжевая, зеленая, красная и серая. mPurpose подойдет для создания персонального веб-сайта и коммерческого проекта. В общем — отличный шаблон для широкого спектра сайтов.

Вот некоторые из многочисленных бонусов шаблона: страницы портфолио (выбор из 4-х опций), Сервисы/Возможности (3 опции), FAQ, карта сайта; страница событий, цен, продуктов, вакансий; страница авторизации, контактов, «О нас», Team page и страница вывода новостей блога. Также, шаблон mPurpose снабжен стандартным функционалом e-Commerce сайта, необходимым для удобного оформления заказа: листингами, слайдером товаров, корзиной покупок и деталями продуктов. Mega Drop Down меню — для сайтов (интеренет-магазинов) с объемной навигацией.

5. SPOT – FREELANCE & AGENCY THEME

Spot — солидная & плоская тема, созданная для фрилансеров и небольших агентств. Использован framework Bootstrap 3.0.1 Ваш сайт будет великолепно смотреться и в браузерах ПК и на экранах устройств любых размеров. Нужно поблагодарить GentsThemes за WP версию темы. В составе — стильные, современные: диаграммы, страницы цен, а также бесплатный набор иконочных шрифтов Font Awesome 4.0.

6. GotYA

Перед вами хорошо сбалансированная Bootstrap тема, которую можно скачать бесплатно. GotYA корректно работает в разных браузерах и устройствах десктоп, iPhone, iPad, pill или любой другой альтернативе мобильному устройству. Тема имеет ряд инновационных решений, которые упрощают ее использование.

7. Piccolo

К услугам пользователей — простой и чистый дизайн. В состав шаблона включено 19 макетов страниц со слайдерами, с фильтрами для галерей и удобными для просмотра изображений всплывающими окнами в стиле лайтбокс (Lightbox Pop-Ups), с функционалом уведомлений, иконками и многим другим…

8. Bootable Bootstrap Template

Bootable – трехколоночный шаблон со «sticky scrolling» дизайном — прокруткой/фиксацией информационных блоков с переходами к следующим блокам при при достаточном смещении во время скроллинга.

9. Free General Bootstrap Template

Этот бесплатный Bootstrap шаблон идеально подойдет для создания на нем любого типа бизнес-сайта.

10. Free Business Responsive Bootstrap Template

Бесплатный Bootstrap шаблон, который подойдет для демонстрации вашей коллекции, например, фотографий или для создания художественной галереи. В этом шаблоне неплохое оформление галереи и расширенные возможности навигации по превью внутри лайтбокса — можно использовать клавиатуру для просмотра изображений.

11. Nova

Nova – универсальный html шаблон на twitter bootstrap 2.3.x, в котором 16+ примеров готовых страниц. Это шаблон премиум-качества на все 100% и в нем присутствуют элементы хорошего UX-дизайна.

12. Link

Разработчик постарался довести шаблон до совершенства и полностью стилизовать под сайт агентства, укомплектовав необходимым для этого набором элементов. Шаблон предназначен для демонстрации проектов, которые нужно представить стильно и красиво. Дополнительные бонусы: 6 примеров страниц, шрифты Font Awesome 4, CSS анимация и многое другое.

13. Customizr – Free WordPress Bootstrap Theme

Customizr – бесплатная bootstrap тема WordPress с чистым и отзывчивым, плоским и полностью адаптивным дизайном. Подойдет для создания сайта компании малого бизнеса, онлайн-портфолио, корпоративных сайтов или лендингов. Опции темы: Responsive слайдер-генератор, пять основных областей виджетов, слайдер на главной, настройка опций макета HTML и многое другое. Тема имеет валидный HTML5/ CSS3 код, протестирована на кросбраузерность, готова к переводу (доступно 19 языков), подготовлена для WooCommerce, bbPress, qTranslate, имеет легко расширяемый код, который просто дополнять, реализуя возможности методов API.

Вы можете наслаждаться процессом создания красивого дизайна благодаря интегрированному в тему настройщику WP customizer. Самостоятельно определяйте внешний вид многих элементов дизайна, выбирая: скины оформления, лого, соц. профили, слайдеры, разметку, общий вид контент-блоков на главной странице и даже сможете использовать различные CSS-стили.

14. Sprint

Этот шаблон с профессиональной HTML5/CSS3 разметкой можно использоваться для различных сайтов. Наиболее интересна цветовая схема шаблона. Сочетание зеленого, черного и белого цветов, вместе с черно-белыми фотографиями позволят выделиться представленным проектам. Используя зеленый цвет для иконок в разделе сервисов, вы действительно сделаете их и ваши указанные «ОТЛИЧИЯ» заметными. Еще один оригинальный элемент дизайна: светящийся индикатор текущего положения в виде зеленой линии с маленьким шариком. Этот простой шаблон удачно разделен на 5 секций — начиная с галереи, размещенной в пределах «первого экрана» и заканчивая формой контактов.

15. Polygon

Polygon – бесплатный HTML5 шаблон с красивым адаптивным лайтбоксом галереи. Очень компактный шаблон с геометрическими формами в дизайне. Весь полигональный арт представлен шестиугольными ячейками и фигурами на главной странице, страницах сервисов и «О нас» — в виде блоков графического контента, иконок различных размеров и даже шестигранной формы карты, на странице контактов.

16. Free Bootstrap template for corporate – Moderna

Moderna – Bootstrap-3 тема для корпоративного бизнес-сайта с современным и чистым дизайном. Moderna поставляется со многими премиум-функциями платных тем: гибким слайдером изображений FlexSlider, фильтром на странице портфолио, ajax формой обратной связи на странице контактов. Также, расширить возможности темы можно пользовательскими функциями — шорт-кодами.

Скачать WordPress версию темы Moderna можно здесь.

18. Sonic Creative Portfolio

Sonic – бесплатный адаптивный шаблон на Bootstrap версии 3.1.1. со слайдером FlexSlider на главной странице. Шаблон основан на HTML5/CSS3 и подойдет для создания креативного портфолио.

19. Powerful

Powerful – адаптивный шаблон на Bootstrap, использующий геометрические фигуры в качестве основных элементов дизайна. Ключевые особенности шаблона: гибкий макет, чистый дизайн, слайдер на главной странице, фильтр по категориям для портфолио.

20. 403 Karma

403 Karma — бесплатный HTML5 шаблон на основе Bootstrap. Благодаря адаптивной верстке, плоскому дизайну и эффектному параллакс-сколлингу шаблон отлично выглят на мобильных устройствах.

21. Tonic Pro

Созданный на основе Twitter Bootstrap, шаблон Tonic Pro поставляется со слайдером, кастомным визуальным CSS-редактором (упрощающим редактирование кода), font awesome иконками и всем тем, что помогает сайту выделиться среди остальных. Базовый набор из всех полезностей предоставляется бесплатно, но вы можете приобрести премиум версию шаблона со значительно большим функционалом.

22. Free Bootstrap 3.0 HTML Template

Вам нужно найти эффектный шаблон для персональной Web-страницы, онлайн-портфолио или ресторанный шаблон, подходящий для бара, пиццерии, кафе или бистро? Тогда лучше обезопасить себя от проблем с кастомизацией и быть уверенным в возможностях шаблона, на случай возникновения необходимости расширения функционала. Free Bootstrap 3.0 HTML Template — вполне подходящее для этого решение. Хотя он создан для ознакомительных целей, вы всегда можете приобрести оригинальный шаблон (с точно такой же структурой) для создания своего startup-проекта.

23. Tulip

Tulip – креативный шаблон с адаптивной версткой, подходящий для создания сайта юридической фирмы, адвокатской конторы, консалтинговой компании и ряда коммерческих проектов, требующих современного корпоративного дизайна. Выбирая Tulip, вы получаете легальный шаблон, который можете использовать бесплатно для своих коммерческих целей. User-Frendly дизайн этого шаблона (дружественный для пользователей десктопов и мобильных устройств) всегда будет способствовать успешности будующего веб-проекта.

24. Andia – Free HTML Bootstrap Theme

Andia – бесплатная адаптивная HTML тема на Bootstrap. В составе: 5 примеров полностью адаптивных страниц, страница портфолио, сервисы, About, форма контактов. Andia идеально подойдет для креативного агентства с портфолио, личного портфолио или под небольшой бизнес проект. Особенности и функционал: адаптивный макет, адаптивный слайдер изображений, возможность демонстрировать ваши фотографии из сервиса Flickr благодаря интеграции с Flicr Photostream, возможность создавать иконки на базе иконочного шрифта Font Awesome 4.0, лента твиттер (twitter feed) и многое другое .

25. Dellow

Dellow – минималистичная адаптивная тема со множеством премиум опций, которые вы получаете бесплатно. Ключевые особенности: слайдер с эффектом параллакса в шапке, нумерованная постраничная навигация, адаптивный слайдер, кастомный хедер & футер, 4 макета страниц, кастомные виджеты & Time Display. Мощная панель настроек значительно расширяет возможности редактирования и упрощает процесс модификации темы.

26. Business Ltd

Business Ltd — бесплатный бутстрап шаблон, который можно использовать для создания любого вида бизнес-сайта.

27. Bootstrap Clinic

Bootstrap Clinic — бесплатный бизнес шаблон, который можно свободно использовать для коммерческих целей.

28. Creation – Flat Industrial Bootstrap Responsive template

Шаблон Creation предназначен для создания сайта индустриальной компании. Может широко использоваться для интернет представительств различных компаний-изготовителей, от небольших организаций до крупных производственных предприятий и фабрик. В этом шаблоне тщательно подобрана цветовая схема, хорошо организовано расположение элементов, продуман стиль и структура макета сетки. Ключевые особенности шаблона: HTML5, Flat дизайн, адаптивность, по лицензии Creative Commons Attribution 3.0 предполагается использование без ограничений. В комплект шаблона включенны исходные файлы: HTML файлы (.html), таблицы стилей (.css), изображений (.jpg/png/gif), JQuery плагинов (.js), файлы исходников Photoshop (.psd), шрифтов (.ttf).

29. My Restaurant

My Restaurant – оригинальный и стильный bootstrap шаблон с фоновым jQuery слайдером, фиксированным топ-меню на jQuery — образущим полосу и меняющим цвет при наведении. Еще один пример отличного UX-дизайна — jQuery галерея, управлять которой можно указателем или колесом мыши и образующая красивый лайтбокс с эффектом затемнения основного фона.

30. Corlate – Free Responsive Business HTML Template

Corlate – бесплатный адаптивный HTML бизнес-шаблон, со встроенными шрифтами Font Awesome и css3 анимацией. Также оснащен своим собственным бутстраповским слайдером -каруселью, шорткодами – позволяющими легко создавать вкладки, аккордеон-слайдеры и даже галереи. Это полностью адаптивный, легкий и супер-быстрый шаблон. Хорошо подойдет сайту небольшой бизнес компании, стратап-проекту, или если вам, как талантливой личности, нужен сайт для демонстрации своего творчества.

31. Progressus – elegant agency/business template

Progressus – привлекательный адаптивный бизнес шаблон, основанный на Bootstrap – HTML/CSS фреймворке. 7 макетов страниц для основных задач, стильный адаптивный дизайн, выполненный исключительно качественно от начала до конца.

32. FirmaSite – bb and buddy pressing

FirmaSite – фантастическая бесплатная тема. Основана на Twitter Bootstrap, WordPress, Buddypress и BBpress. Bootstrap подключен только файлами CSS. Тема разработана на основе 2-х колоночного макета и может отлично подойти для блога.

Bootstrap 3 Медиа-объекты

Отображение текста рядом с такими объектами, как изображения, с медиа-объектами Bootstrap.

Компонент мультимедийных объектов

Bootstrap обеспечивает простой способ выравнивания текста и изображений при их размещении рядом друг с другом. Полезно для компонентов пользовательского интерфейса, таких как комментарии в блогах, твиты и т. Д.

Медиа-объект

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventory veritatis et quasi architeo beatae vitae dicta sunt explicabo.

Медиа-объект

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illovention veritatis et quasi architeo beatae vitae dicta sunt explicabo.

Вложенные медиа-объекты

Вы можете вкладывать медиа-объекты друг в друга (т.е. во весь медиа-блок). По умолчанию вложенный медиаблок будет иметь отступ.

Медиа-объект

Вложенный медиа-объект

Горизонтальное выравнивание

Своп .media-left с .media-right для размещения мультимедийного объекта справа от тела мультимедиа (заголовок / текст).

Вам также необходимо поменять местами медиа-объект и медиа-тело в разметке (так, чтобы заголовок и текст располагались перед изображением).

Медиа-объект

Вертикальное выравнивание

Медиа-объекты по умолчанию выравниваются по верхнему краю. Вы можете изменить это, добавив .media-middle или .media-bottom до .media-left или .media-right (например, class = "media-left media-middle" ).

Средний

Медиа-объект

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consquuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consctetur, adipisci velit, sed quia

Низ

Медиа-объект

Два медиаобъекта

В медиа-блок можно поместить несколько изображений.

Вертикальный

Здесь я разместил два элемента внутри одного .media-left , в результате чего изображения располагаются вертикально.

Медиа-объект

горизонтальный

В этом случае оба изображения вложены внутри своего собственного .media-left , в результате чего они отображаются горизонтально друг к другу.

Медиа-объект

Выровнены по левому и правому краю

В медиа-блоке могут отображаться два медиа-объекта — один слева и один справа.Просто используйте .media-left для левого и .media-right для правого.

Тело носителя нужно будет вставить между ними в разметке.

Медиа-объект

Списки СМИ

Вы можете создать список мультимедиа, поместив мультимедийные объекты внутрь списка.Списки СМИ могут быть полезны для представления цепочек комментариев пользователей, списков статей и т. Д.

Чтобы создать список мультимедиа, примените класс .media-list к тегу

.media

Медиа-объект
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventory veritatis et quasi architeo beatae vitae dicta sunt explicabo.

Вложенный медиа-объект
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illovention veritatis et quasi architeo beatae vitae dicta sunt explicabo.
Медиа-объект
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illovention veritatis et quasi architeo beatae vitae dicta sunt explicabo.

Объекты загрузочного носителя

Медиа-объекты

Bootstrap предоставляет простой способ выровнять медиа-объекты (например, изображения или видео) по левому или правому краю некоторого содержимого.Это можно использовать для
отображать комментарии, твиты и т. д. в блогах:

Базовый медиа-объект

Пример

John Doe
Lorem ipsum …

John Doe

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Попробуй сам »

Объяснение примера

Используйте элемент

с классом .media , чтобы создать контейнер для
медиа-объекты.

Используйте класс .media-left для выравнивания носителя
объект (изображение) слева или класс .media-right , чтобы выровнять его по правому краю.

Текст, который должен появиться рядом с изображением, помещается в контейнер с w3-codepan «> media-body «.

Дополнительно можно использовать .media-заголовок для
заголовки.

Выравнивание по верхнему, среднему или нижнему краю

Медиа-объект также может быть выровнен по верхнему, среднему или нижнему краю с media-top , media-middle или media-bottom class:

Пример

Media Top
Lorem ipsum …

Медиацентр

Lorem ipsum …

Медиа внизу

Lorem ipsum …

Попробуй сам »

Вложенные медиа-объекты

Медиа-объекты также могут быть вложенными (медиа-объект внутри медиа-объекта):

Другой пример вложенности

Bootstrap Все классы CSS

или ячейку таблицы ( или ячейке таблицы (

Glyphicons Halflings.

или ячейку таблицы ( или ячейке таблицы ( или ячейку таблицы (

`.активный`	Добавляет серый цвет фона в строку таблицы (
) (тот же цвет используется при наведении курсора)	Попытайся	Столы
`. Активный`	Добавляет серый цвет фона к активной ссылке по умолчанию навигационная панель. Добавляет черный фон и белый цвет к текущей ссылке внутри перевернутой панели навигации.	Попытайся	Navbar
`. Активный`	Добавляет синий цвет фона к активному элементу списка в группе списка	Попытайся	Группы списков
`. Активный`	Добавляет синий цвет фона для имитации «нажатой» кнопки	Попытайся	Пуговицы
`.активный`	Анимирует полосатый индикатор выполнения	Попытайся	Прогресс-бар
`. Активный`	Добавляет синий цвет фона к активному раскрывающемуся элементу в раскрывающемся списке	Попытайся	Выпадающее меню
`. Активный`	Добавляет синий цвет фона к активной ссылке на страницы (для выделения текущей страницы)	Попытайся	Пагинация
`.аффикс`	Плагин Affix позволяет прикрепить элемент (заблокировать / закрепить) к определенной области страницы. Он переключает положение `: фиксированное` вкл. И выкл.	Попытайся	Аффикс
`. Оповещение`	Создает окно предупреждающего сообщения	Попытайся	Оповещения
`.предупреждение-опасность`	Красный ящик оповещения. Указывает на опасное или потенциально негативное действие	Попытайся	Оповещения
`. Отказ от предупреждения`	Вместе с классом `.close` этот класс используется для закрыть оповещение	Попытайся	Оповещения
`.информация оповещения`	Голубое окно предупреждения. Указывает некоторую информацию	Попытайся	Оповещения
`.alert-link`	Используется в ссылках внутри предупреждений для добавления соответствующих цветных ссылок	Попытайся	Оповещения
`. Alert-success`	Зеленое окно предупреждения.Указывает на успешное или положительное действие	Попытайся	Оповещения
`. Предупреждение`	Желтое окно предупреждения. Указывает на то, что при выполнении этого действия следует соблюдать осторожность.	Попытайся	Оповещения
`. Значок`	Создает круглый значок (серый кружок — часто используется как числовой индикатор)	Попытайся	Значки
`.bg-опасность`	Добавляет красный цвет фона к элементу. Представляет опасность или негативное действие	Попытайся	Помощники
`.bg-info`	Добавляет голубой фон к элементу. Представляет некоторую информацию	Попытайся	Помощники
`.bg-primary`	Добавляет синий цвет фона к элементу. Представляет что-то важное	Попытайся	Помощники
`.bg-success`	Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие	Попытайся	Помощники
`.bg-предупреждение`	Добавляет желтый цвет фона к элементу. Представляет предупреждение или негативное действие	Попытайся	Помощники
`. Хлебные крошки`	Пагинация. Указывает расположение текущей страницы в навигационной иерархии	Попытайся	Пагинация
`.btn`	Создает простую кнопку (серый фон и закругленные углы)	Попытайся	Пуговицы
`.btn-блок`	Создает кнопку уровня блока, занимающую всю ширину родительского элемента	Попытайся	Пуговицы
`.btn-опасный`	Красная кнопка.Указывает на опасность или негативное действие	Попытайся	Пуговицы
`.btn-default`	Кнопка по умолчанию. Белый фон и серая кайма	Попытайся	Пуговицы
`.btn-group`	Объединяет кнопки в одну строку	Попытайся	Группы кнопок
`.btn-group-обоснованный`	Заставляет группу кнопок занимать всю ширину экрана	Попытайся	Группы кнопок
`.btn-group-lg`	Большая группа кнопок (увеличивает все кнопки в группе кнопок — увеличенный размер шрифта и отступы)	Попытайся	Группы кнопок
`.btn-group-sm`	Маленькая группа кнопок (уменьшает все кнопки в группе кнопок)	Попытайся	Группы кнопок
`.btn-group-xs`	Очень маленькая группа кнопок (делает все кнопки в группе очень маленькими)	Попытайся	Группы кнопок
`.btn-group-вертикальный`	Отображает группу кнопок вертикально сложенной	Попытайся	Группы кнопок
`.btn-info`	Голубая кнопка. Представляет информацию	Попытайся	Пуговицы
`.btn-ссылка`	Делает кнопку похожей на ссылку (поведение кнопки получения)	Попытайся	Пуговицы
`.btn-lg`	Большая кнопка	Попытайся	Пуговицы
`.btn-primary`	Синяя кнопка.	Попытайся	Пуговицы
`.btn-sm`	Маленькая кнопка	Попытайся	Пуговицы
`.btn-success`	Зеленая кнопка. Указывает на успех или положительное действие	Попытайся	Пуговицы
`.btn-warning`	Желтая кнопка. Обозначает предупреждение или негативное действие	Попытайся	Пуговицы
`.btn-xs`	Очень маленькая кнопка	Попытайся	Пуговицы
`.подпись`	Добавляет текст заголовка в миниатюру `.`	Попытайся	Изображения
`.caret`	Создает значок стрелки курсора, который указывает, что кнопка представляет собой раскрывающийся список	Попытайся	Выпадающее меню
`.карусель`	Создает карусель (слайд-шоу)	Попытайся	Карусель
`.карусель-подпись`	Создает текст заголовка для каждого слайда в карусели	Попытайся	Карусель
`. Управление каруселью`	Контейнер для следующих и предыдущих ссылок	Попытайся	Карусель
`.карусель-индикаторы`	Добавляет маленькие точки / индикаторы внизу каждого слайда (который показывает, сколько слайдов в карусели и какой слайд пользователь просматривает в данный момент).	Попытайся	Карусель
`.карусель внутренняя`	Контейнер для предметов слайда	Попытайся	Карусель
`. Центральный блок`	Центрирует любой элемент (Устанавливает для элемента отображение `: блок` с полем `справа: авто` и `поле слева: авто` )	Попытайся	Помощники
`.флажок`	Контейнер для чекбоксов	Попытайся	Входы
`.checkbox-inline`	Отображает несколько флажков в одной строке	Попытайся	Входы
`.clearfix`	Очищает поплавки	Попытайся	Помощники
`.закрыть`	Обозначает значок закрытия	Попытайся	Помощники
`.col - * - *`	Адаптивная сетка (диапазон 1–12 столбцов). Очень маленькие устройства Телефоны (<768 пикселей), Маленькие устройства Планшеты (≥768 пикселей), Средние устройства Настольные компьютеры (≥992 пикселей), Большие устройства Настольные компьютеры (≥1200 пикселей). Значения столбца могут быть от 1 до 12.	Попытайся	Сетка
`.col - * - смещение- *`	Переместите столбцы вправо. Эти классы увеличивают левое поле столбца на * столбцы	Попытайся	Сетка
`.col - * - тянуть- *`	Изменяет порядок столбцов сетки	Попытайся	Сетка
`.col - * - push- *`	Изменяет порядок столбцов сетки	Попытайся	Сетка
`.коллапс`	Обозначает сворачиваемое содержимое, которое можно скрыть или показать по запросу	Попытайся	Свернуть
`. Свернуть в`	По умолчанию показывать сворачиваемое содержимое	Попытайся	Свернуть
`. Контейнер`	Контейнер фиксированной ширины, ширина которого определяется узлами экрана.Равное поле слева и справа.	Попытайся	Контейнеры
`. Контейнер для жидкости`	Контейнер, занимающий всю ширину экрана	Попытайся	Контейнеры
`. Контрольная этикетка`	Позволяет использовать метку для проверки формы	Попытайся	Формы
`.опасность`	Добавляет красный фон к строке таблицы (
). Указывает на опасное или потенциально отрицательное действие	Попытайся	Столы
`. Отключено`	Отключает кнопку (добавляет непрозрачность и значок запрета парковки при наведении курсора)	Попытайся	Пуговицы
`.отключен`	Отключает раскрывающийся список элемент (добавляет серый цвет текста и значок запрета парковки при наведении курсора)	Попытайся	Выпадающее меню
`. Отключено`	Отключает ссылку для разбивки на страницы (нельзя щелкнуть — добавляет серый цвет текста и значок запрета на парковку при наведении курсора)	Попытайся	Пагинация
`.отключен`	Отключает список элемент в группе списков (нельзя щелкнуть — добавляет серый цвет фона и значок запрета парковки при наведении курсора)	Попытайся	Группы списков
`. Делитель`	Используется для разделения ссылок в раскрывающемся меню тонкой горизонтальной рамкой	Попытайся	Выпадающее меню
`.dl-горизонтальный`	Выстраивает термины и описания в элементах рядом друг с другом. Начинается как по умолчанию s, но когда окно браузера расширяется, оно выстраивается бок о бок	Попытайся	Типографика
`. Выпадающий`	Создает переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка	Попытайся	Выпадающее меню
`.раскрывающийся заголовок`	Используется для добавления заголовков в раскрывающееся меню	Попытайся	Выпадающее меню
`. Выпадающее меню`	Добавляет стили по умолчанию для контейнера раскрывающегося меню	Попытайся	Выпадающее меню
`. Dropdown-menu-right`	Выравнивает раскрывающееся меню по правому краю	Попытайся	Выпадающее меню
`.раскрывающийся список`	Используется на кнопке, которая должна скрывать и отображать (переключать) раскрывающееся меню	Попытайся	Выпадающее меню
`. Dropup`	Обозначает раскрывающееся меню (вверх, а не вниз)	Попытайся	Выпадающее меню
`. Адаптируется к встраиванию`	Контейнер для встроенного содержимого.Правильно масштабирует видео или слайд-шоу на любом устройстве	Попытайся	Изображения
`.embed-response-16by9`	Контейнер для встроенного содержимого. Создает встроенный контент с соотношением сторон 16: 9	Попытайся	Изображения
`.embed-response-4by3`	Контейнер для встроенного содержимого.Создает встроенный контент с соотношением сторон 4: 3	Попытайся	Изображения
`. Элемент, отвечающий за встраивание`	Используется внутри `. Адаптируется к встраиванию` . Красиво масштабирует видео до родительского элемента	Попытайся	Изображения
`. Затухание`	Добавляет эффект затухания при закрытии окна предупреждения	Попытайся	Оповещения
`.форма-контроль`	Используется для элементов ввода, текстового поля и выбора, чтобы охватить всю ширину страницы и сделать их адаптивными	Попытайся	Формы
`.form-control-feedback`	Класс проверки формы	Попытайся	Входы 2
`.form-control-static`	Добавляет простой текст рядом с меткой формы в горизонтальной форме	Попытайся	Входы 2
`.форма-группа`	Контейнер для ввода формы и этикетки	Попытайся	Формы
`.form-inline`	Делает выровненным по левому краю с элементами управления встроенным блоком (только это применяется к формам в области просмотра шириной не менее 768 пикселей)	Попробуй	Формы
`.форма-горизонтальная`	Выравнивает метки и группы элементов управления формы по горизонтали	Попробуй	Формы
`.glyphicon`	Создает значок. Bootstrap предоставляет 260 бесплатных глификонов из набора	Попытайся	Глификоны
`. Опасная опасность`	Добавляет красный цвет к метке и красную границу для ввода, а также значок ошибки внутри ввода (используется вместе с `.имеет обратную связь` )	Попытайся	Формы
`. Has-feedback`	Добавляет значки обратной связи для входных данных (галочки, предупреждения и знаки ошибок)	Попытайся	Формы
`. Успех`	Добавляет зеленый цвет к метке и зеленую границу для ввода, а также значок галочки внутри ввода (используется вместе с `.имеет обратную связь` )	Попытайся	Формы
`.has-warning`	Добавляет желто-оранжевый цвет к метке и желто-оранжевую границу для ввода, а также значок галочки внутри ввода (используется вместе с `.has-feedback` ).	Попытайся	Формы
`.блок помощи`	Блок текста справки, который переносится на новую строку и может выходить за пределы одной строки.	Попытайся	Размер входа
`. Скрыто`	Заставляет элемент быть скрытым (отображение `: нет` )	Попытайся	Помощники
`. Скрытый- *`	Скрывает содержимое в зависимости от размера экрана	Попытайся	Помощники
`.скрыть`	Не рекомендуется. Используйте `.hidden` вместо	Попытайся	Помощники
`.h2 - .h6`	Делает элемент похожим на заголовок выбранного класса (h2-h6)	Попытайся	Типографика
`. Пиктограмма`	Используется в навигационной панели для создания гамбургер-меню (три горизонтальные полосы)	Попытайся	Navbar
`.значок-следующий`	Значок Unicode (стрелка вправо), используется в каруселях. Его часто заменяют глификоном	Попытайся	Карусель
`.icon-prev`	Значок Unicode (стрелка, указывающая влево), используется в каруселях. Его часто заменяют глификоном	Попытайся	Карусель
`.img-circle`	Преобразует изображение в круг (не поддерживается в IE8 и более ранних версиях)	Попытайся	Изображения
`.img-отзывчивый`	Делает изображение адаптивным	Попытайся	Изображения
`.img-закругленное`	Добавляет закругленные углы к изображению	Попытайся	Изображения
`.img-thumbnail`	Преобразует изображение в миниатюру (границы)	Попытайся	Изображения
`.in`	Затухает на выступах	Попытайся	Вкладки
`.info`	Добавляет голубой фон в строку таблицы (
).Указывает на нейтральное информативное изменение или действие	Попытайся	Столы
`.инициализм`	Отображает текст внутри элемента с немного меньшим размером шрифта	Попытайся	Типографика
`. Группа ввода`	Контейнер для улучшения ввода путем добавления значка, текста или кнопки впереди или позади них в качестве «справочного текста»	Попытайся	Входы
`.вход-группа-LG`	Большая группа входов	Попытайся	Входы
`. Вход-группа-см`	Малая группа ввода	Попытайся	Входы
`. Вход-группа-аддон`	Вместе с классом `.input-group` , этот класс позволяет добавлять значок или текст справки рядом с полем ввода	Попытайся	Входы
`.ввод-группа-БТН`	Вместе с классом `.input-group` этот класс прикрепляет кнопку рядом с входом. Часто используется как панель поиска	Попытайся	Входы
`. Input-lg`	Большое поле ввода	Попытайся	Размер входа
`.ввод-см`	Малое поле ввода	Попытайся	Размер входа
`. Невидимый`	Делает элемент невидимым (видимость `: скрыт` ). Примечание: Даже если элемент невидим, он будет занимать место на странице	Попытайся	Помощники
`.товар`	Класс добавлен к каждому элементу карусели. Может быть текст или изображения	Попытайся	Карусель
`.джумботрон`	Создает серый прямоугольник с полями и закругленными углами, который увеличивает размер шрифта текста внутри него. Создает большую рамку для привлечения дополнительного внимания к особому содержанию или информации	Попытайся	Jumbotron
`.этикетка`	Добавляет серый скругленный прямоугольник к элементу. Предоставляет дополнительную информацию о чем-либо (например, «Новое»)	Попытайся	Этикетки
`. Этикетка-опасность`	Красная этикетка	Попытайся	Этикетки
`. Этикетка`	Голубая этикетка	Попытайся	Этикетки
`.этикетка-успех`	Зеленая этикетка	Попытайся	Этикетки
`. Этикетка-предупреждение`	Желтая этикетка	Попытайся	Этикетки
`свинец`	Увеличить размер шрифта и высоту строки абзаца	Попытайся	Типографика
`.левый`	Используется для идентификации левого элемента управления карусели	Попытайся	Карусель
`.list-group`	Создает группу списка с рамкой для элементов	Попытайся	Группа списка
`. List-group-item`	Добавлен к каждому элементу в группе списков	Попытайся	Группа списка
`.список-группа-элемент-заголовок`	Создает заголовок группы списка (используется в других элементах, кроме )	Попытайся	Группа списка
`.list-group-item-text`	Используется для текста элемента внутри группы списка (используется для других элементов, кроме )	Попытайся	Группа списка
`.список-группа-пункт-опасность`	Красный цвет фона для элемента списка в группе списков	Попытайся	Группа списка
`. List-group-item-info`	Голубой цвет фона для элемента списка в группе списков	Попытайся	Группа списка
`.list-group-item-success`	Зеленый цвет фона для элемента списка в группе списков	Попытайся	Группа списка
`.список-группа-элемент-предупреждение`	Желтый цвет фона для элемента списка в группе списков	Попытайся	Группа списка
`. List-inline`	Помещает все элементы списка в одну строку (горизонтальное меню)	Попытайся	Вкладки
`. List-unstyled`	Удаляет все стили списка по умолчанию (маркеры, левое поле и т. Д.).) стайлинг от или список	Попытайся	Типографика
`. Марка`	Выделение текста: выделенный текст	Попытайся	Типографика
`.media`	Выравнивает медиа-объекты (например, изображения или видео — часто используются для комментариев в сообщениях в блогах и т. Д.)	Попытайся	Медиа-объекты
`.медиа-тело`	Текст, который должен отображаться рядом с медиа-объектом	Попытайся	Медиа-объекты
`. Медиа-заголовок`	Создает заголовок внутри медиа-объекта	Попытайся	Медиа-объекты
`.media-list`	Вложенные списки носителей	Попытайся	Медиа-объекты
`.медиа-объект`	Обозначает медиа-объект (изображение или видео)	Попытайся	Медиа-объекты
`. Модальный`	Определяет контент как модальный и привлекает к нему внимание	Попытайся	Модалы
`. Модальный кузов`	Определяет стиль тела модального окна.Добавьте сюда любую разметку HTML (p, img и т. Д.)	Попытайся	Модалы
`.modal-content`	Стилизует модальный (граница, цвет фона и т. Д.). Внутри него добавьте верхний, основной и нижний колонтитулы модального окна, если необходимо	Попытайся	Модалы
`.modal-dialog`	Устанавливает правильную ширину и поля модального окна	Попытайся	Модалы
`.модальный нижний колонтитул`	Нижний колонтитул модального окна (часто содержит кнопку действия и кнопку закрытия)	Попытайся	Модалы
`.modal-header`	Заголовок модального окна (часто содержит заголовок и кнопку закрытия)	Попытайся	Модалы
`.модальный-LG`	Большой модальный (шире, чем по умолчанию)	Попытайся	Модалы
`. Модально-открытый`	Используется в элементе для предотвращения прокрутки страницы ( `переполнение: скрыто` )	Попытайся	Модалы
`.modal-sm`	Малый модальный (без ширины)	Попытайся	Модалы
`.модальный заголовок`	Название модального окна	Попытайся	Модалы
`.nav nav-tabs`	Обозначает меню с вкладками	Попытайся	Вкладки
`.nav nav-pills`	Обозначает меню с таблетками	Попытайся	Вкладки
`.nav .navbar-nav`	Используется в контейнере , который содержит элементы списка со ссылками внутри панели навигации	Попытайся	Navbar
`. С выравниванием по навигации`	Центры таблеток / таблеток. Обратите внимание, что на экранах размером меньше 768 пикселей элементы складываются друг в друга (содержимое остается по центру)	Попытайся	Вкладки
`.с навигацией`	Таблетки или таблетки вертикальной стопкой	Попытайся	Вкладки
`.nav-вкладки`	Создает меню с вкладками	Попытайся	Вкладки
`.navbar`	Создает панель навигации	Попытайся	Navbar
`.марка навбара`	Добавлен к ссылке или элементу заголовка внутри панели навигации для представления логотипа или заголовка	Попытайся	Navbar
`.navbar-btn`	Вертикальное выравнивание кнопки внутри панели навигации	Попытайся	Navbar
`.navbar-свернуть`	Сворачивает панель навигации (скрывается и заменяется значком меню / гамбургера на мобильных телефонах и небольших планшетах)	Попытайся	Navbar
`.navbar-по умолчанию`	Создает панель навигации по умолчанию (светло-серый цвет фона)	Попытайся	Navbar
`.navbar-фиксированное дно`	Заставляет навигационную панель оставаться в нижней части экрана (липкая / фиксированная)	Попытайся	Navbar
`.navbar-fixed-top`	Заставляет навигационную панель оставаться в верхней части экрана (липкая / фиксированная)	Попытайся	Navbar
`.Навбар-форма`	Добавлен для формирования элементов внутри навигационной панели для их вертикального центрирования (правильное заполнение)	Попытайся	Navbar
`.navbar-заголовок`	Добавлен в элемент контейнера, который содержит ссылку / элемент, представляющий логотип или заголовок	Попытайся	Navbar
`.navbar-inverse`	Создает черную панель навигации (вместо светло-серой)	Попытайся	Navbar
`.navbar-левый`	Выравнивает навигационные ссылки, формы, кнопки или текст на навигационной панели по левому краю	Попытайся	Navbar
`.navbar-ссылка`	Стилизует элемент так, чтобы он выглядел как ссылка внутри навигационной панели (якоря получают правильное заполнение и подчеркивание при наведении, в то время как другие элементы, такие как p или span, получают эффект наведения по умолчанию — белый цвет на перевернутой панели навигации и черный цвет на панели навигации по умолчанию )	Попытайся	Navbar
`.navbar-nav`	Используется в контейнере , который содержит элементы списка со ссылками внутри панели навигации	Попытайся	Navbar
`.navbar-right`	Выравнивает навигационные ссылки, формы, кнопки или текст на навигационной панели по правому краю.	Попытайся	Navbar
`.navbar-static-top`	Удаляет левую, верхнюю и правую границы (закругленные углы) с панели навигации (панель навигации по умолчанию имеет серую границу и радиус границы 4 пикселя по умолчанию)	Попытайся	Navbar
`.navbar-text`	Выровняйте по вертикали любые элементы внутри навигационной панели, которые не являются ссылками (обеспечивает правильное заполнение)	Попытайся	Navbar
`.navbar-toggle`	Стилизует кнопку, которая должна открывать панель навигации на маленьких экранах. Часто используется вместе с тремя классами `.icon-bar` для обозначения переключаемого значка меню (гамбургер / полоски)	Попытайся	Navbar
`.след.`	Используется в элементе управления карусели для идентификации следующего элемента управления	Попытайся	Карусель
`.следующий`	Используется для выравнивания кнопок пейджера по правой стороне страницы (следующая кнопка)	Попытайся	Пейджер
`.page-header`	Добавляет горизонтальную линию под заголовком (+ добавляет дополнительное пространство вокруг элемента)	Попытайся	Заголовок страницы
`.пейджер`	Создает предыдущие / следующие кнопки (используются в элементах )	Попытайся	Пейджер
`.pagination`	Создает разбиение на страницы (полезно, если у вас есть веб-сайт с большим количеством страниц. Используется для элементов )	Попытайся	Пагинация
`.pagination-lg`	Большая разбивка на страницы (каждая ссылка на страницу получает размер шрифта 18 пикселей. По умолчанию 14 пикселей)	Попытайся	Пагинация
`.pagination-sm`	Маленькая разбивка на страницы (каждая ссылка на страницу получает размер шрифта 12 пикселей. По умолчанию 14 пикселей)	Попытайся	Пагинация
`.панель`	Создает рамку с некоторым отступом вокруг содержимого	Попытайся	Панели
`. Панель-корпус`	Контейнер для содержимого внутри панели	Попытайся	Панели
`.панель-развал`	Сворачиваемая панель (переключение между скрытием и отображением панелей)	Попытайся	Свернуть
`.панель-опасность`	Красная панель. Указывает на опасность	Попытайся	Панели
`.panel-info`	Голубая панель. Обозначает информацию	Попытайся	Панели
`.панель-успех`	Зеленая панель. Указывает на успех	Попытайся	Панели
`.панель-предупреждение`	Желтая панель. Указывает на предупреждение	Попытайся	Панели
`. Нижний колонтитул`	Создает нижний колонтитул панели (светлый цвет фона)	Попытайся	Панели
`.панель-группа`	Используется для группировки множества панелей.Это удаляет нижнее поле под каждой панелью	Попытайся	Панели
`. Заголовок панели`	Создает заголовок панели (светлый цвет фона)	Попытайся	Панели
`.panel-title`	Используется внутри `.panel-heading` для настройки стиля текста (удаляет поля и добавляет размер шрифта 16 пикселей)	Попытайся	Панели
`.всплывающее окно`	Всплывающее окно, которое появляется, когда пользователь нажимает на элемент	Попытайся	Поповер
`. С предварительной прокруткой`	Делает элемент прокручиваемым ( `max-height` 350 пикселей и обеспечивает полосу прокрутки по оси Y)	Попытайся	Помощники
`.предыдущая`	Используется в каруселях для обозначения «предыдущей» ссылки	Попытайся	Карусель
`. Предыдущий`	Используется для выравнивания кнопок пейджера по левой стороне страницы (предыдущая кнопка)	Попытайся	Пейджер
`. Прогресс`	Контейнер для прогресс-бара	Попытайся	Прогресс-бар
`.прогресс-бар`	Создает индикатор выполнения	Попытайся	Прогресс-бар
`. Прогресс-бар-опасность`	Красный индикатор выполнения. Указывает на опасность	Попытайся	Прогресс-бар
`.progress-bar-info`	Голубой индикатор выполнения.Обозначает информацию	Попытайся	Прогресс-бар
`. Прогресс-бар в полоску`	Создает полосатый индикатор выполнения	Попытайся	Прогресс-бар
`. Прогресс-бар-успех`	Зеленый индикатор выполнения. Указывает на успех	Попытайся	Прогресс-бар
`.индикатор прогресса`	Желтый индикатор выполнения. Указывает на предупреждение	Попытайся	Прогресс-бар
`. Тягово-левый`	Перемещение элемента влево	Попытайся	Помощники
`. Тягово-правый`	Плавающий элемент вправо	Попытайся	Помощники
`.правый`	Используется для определения правого элемента управления карусели	Попытайся	Карусель
`. Ряд`	Контейнер для отзывчивых столбцов	Попытайся	Сетка
`. Водосточные`	Удаляет желоба из строки и ее столбцов	Попытайся	Сетка
`.показать`	Показывает элемент (отображение `: блок)`	Попытайся	Помощники
`. Маленький`	Создает более светлый второстепенный текст в любом заголовке	Попытайся	Типографика
`только .sr`	Скрывает элемент на всех устройствах, кроме программ чтения с экрана	Попытайся	Помощники
`.sr-only-focusable`	Скрывает элемент на всех устройствах, кроме программ чтения с экрана	Попытайся	Помощники
`. Успех`	Добавляет зеленый цвет фона к строке таблицы (
). Указывает на успех или положительное действие	Попытайся	Столы
`.tab-content`	Используется вместе с `.tab-pane` для создания переключаемых / динамических вкладок / таблеток	Попытайся	Вкладки
`. Панель`	Используется вместе с `.tab-content` для создания переключаемых / динамических вкладок / таблеток	Попытайся	Вкладки
`.стол`	Добавляет базовый стиль к таблице (отступы, нижние границы и т. Д.)	Попытайся	Столы
`. С бортиком`	Добавляет границы со всех сторон таблицы и ячеек	Попытайся	Столы
`. Столовый конденсат`	Делает стол более компактным, разрезая заполнение ячеек пополам	Попытайся	Столы
`.стол-навес`	Создает таблицу с возможностью зависания (добавляет серый цвет фона в строки таблицы при наведении)	Попытайся	Столы
`. Адаптивная таблица`	Делает таблицу адаптивной (при необходимости добавляет горизонтальную полосу прокрутки)	Попытайся	Столы
`.текст с большой буквы`	Обозначает прописной текст	Попытайся	Типографика
`.text-center`	Выравнивание текста по центру	Попытайся	Типографика
`.text-dangerous`	Красный цвет текста. Указывает на опасность	Попытайся	Типографика
`.текст скрыть`	Скрывает текст (помогает заменить текстовое содержимое элемента фоновым изображением)	Попытайся	Типографика
`.text-info`	Голубой цвет текста. Обозначает информацию	Попытайся	Типографика
`. Выравнивание по тексту`	Обозначает текст с выравниванием по ширине	Попытайся	Типографика
`.текст слева`	Выравнивает текст по левому краю	Попытайся	Типографика
`. Текст в нижнем регистре`	Переводит текст в нижний регистр	Попытайся	Типографика
`. Без звука`	Серый цвет текста	Попытайся	Типографика
`.текст-nowrap`	Предотвращает перенос текста	Попытайся	Типографика
`.text-primary`	Синий цвет текста	Попытайся	Типографика
`. Текст-право`	Выравнивает текст по правому краю	Попытайся	Типографика
`.текст-успех`	Зеленый цвет текста. Указывает на успех	Попытайся	Типографика
`. Верхний регистр текста`	Делает текст заглавными	Попытайся	Типографика
`. Текст-предупреждение`	Желто-оранжевый цвет текста. Указывает на предупреждение	Попытайся	Типографика
`.миниатюра`	Добавляет рамку вокруг элемента (часто изображений или видео), чтобы он выглядел как эскиз	Попытайся	Изображения
`.tooltip`	Всплывающее окно, которое появляется, когда пользователь наводит указатель мыши на элемент	Попытайся	Подсказка
`.видимый- *`	Не рекомендуется, начиная с версии 3.2.0. Используется для отображения и / или скрытия содержимого на устройстве. Примечание: Используйте `.hidden- *` вместо	Попытайся	Помощники
`.visible-print-block`	Отображает элемент (отображение `: блок` ) в печатном (предварительном) виде		Помощники
`.видимая печать в строке`	Отображает элемент (отображение `: встроенный` ) в печатном (предварительном) виде		Помощники
`.visible-print-inline-block`	Отображает элемент (отображение `: встроенный блок` ) в печатном (предварительном) виде		Помощники
`.скрытая печать`	Скрывает элемент (отображение `: нет` ) в режиме печати (предварительное)		Помощники
`. Предупреждение`	Добавляет желтый цвет фона в строку таблицы (
). Указывает на предупреждение	Попытайся	Столы
`.колодец`	Добавляет закругленную границу вокруг элемента с серым цветом фона и небольшим отступом.	Попытайся	Уэллс
`.well-LG`	Большой колодец (дополнительная обивка)	Попытайся	Уэллс
`.well-sm`	Малый колодец (без прокладки)	Попытайся	Уэллс

  Bootstrap 4 медиаобъекта 
      


 
  Медиа-объекты 
  Bootstrap предоставляет простой способ выровнять медиа-объекты (например, изображения или видео) вместе с контентом.Медиа-объекты
часто используется для отображения комментариев в блогах, твитов и т. д .: 


   
  Базовый медиа-объект 
  

  Чтобы создать медиа-объект, добавьте класс  .media  к элементу контейнера,
и поместить мультимедийный контент в дочерний контейнер с классом  .media-body . При необходимости добавьте отступы и поля с помощью утилиты интервалов: 

  Пример 
 
  
 
  
  
  Джон Доу   Опубликовано
  19 февраля 2016 г.   
 
  Lorem ipsum... 
 

  
 
 
 
 
Попробуй сам "

 
  Вложенные медиа-объекты 
  Медиа-объекты также могут быть вложенными (медиа-объект внутри медиа-объекта): 
  

  Чтобы вложить медиа-объекты, поместите новый контейнер  .media  внутри контейнера  .media-body : 

  Пример 
 
  
 
  
  
  Джон Доу   Опубликовано
  19 февраля 2016 г.   
 
  Lorem ipsum... 
 

   
  
  
  Джейн Доу   Опубликовано
  20 февраля 2016 г.   
 
  Lorem ipsum ... 
 
 
 
 
   
 
 
 
 
 
Попробуй сам "

 
  Изображение носителя с выравниванием по правому краю 
  

  Чтобы выровнять мультимедийное изображение по правому краю, добавьте изображение после .media-body  контейнер: 

  Пример 
 
  
 
  
  Джон Доу   Опубликовано
  19 февраля 2016 г.   
 
  Lorem ipsum ... 
 

  
 
  
 
 
 
Попробуй сам "

 
  Выравнивание по верхнему, среднему или нижнему краю 
  Используйте гибкие утилиты, классы  align-self- * , чтобы разместить медиа-объект на
вверху, посередине или внизу: 



  Пример 

  
 
 
 
 Media Top 
 Lorem ipsum... 
   
 
 

   
  
  Медиацентр 
 
  Lorem ipsum ... 
 
 
 
 
 
  < ! - Медиа внизу -> 
 
 
  
  
  Медиа внизу 
 
  Lorem ipsum ... 
 
 
 
 
 
 
Попробуй сам "



 


 
  Bootstrap Media Queries - примеры и руководство.Базовое и расширенное использование 
 
    Компиляция и настройка
   

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

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

  Руководство по компиляции и настройке

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

    
    Легенда:

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

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

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

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

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

    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
    | | - _buttons.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 нет (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
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, бесплатно / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _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 -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

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

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

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

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── Enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    
 Bootstrap Video - примеры и учебник. Базовое и расширенное использование 
 Компиляция и настройка
 
 Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
 эти компоненты и
 функции, которые вам нужны.
 Если вам нужна дополнительная помощь в компиляции пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.
 Руководство по компиляции и настройке
 Карта зависимостей файлов SCSS в MDBootstrap:
 
    Легенда:

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

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

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

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

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

    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
    | | - _buttons.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 нет (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
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, бесплатно / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _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 -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

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

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

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

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── Enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    
 .
No related posts.

 Share :

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30