Информационный портал по безопасности. Как использовать бутстрап для блога на вордпресс Стартовый шаблон для верстки на bootstrap 3

Приветствую всех гостей моего блога и гиков веб-разработки. Сегодняшняя публикация будет посвящена ознакомлению с таким востребованным фреймворком, как Bootstrap. Прочитав текущую статью, вы узнаете, для чего он был создан, как работать с bootstrap и как его устанавливать, какие инструменты предоставляет данный фреймворк и где его чаще всего применяют. Ну а теперь вперед разбирать новый материал!

Что же представляет из себя Bootstrap?

Bootstrap – это фреймворк, разработанный специально для верстки фронтенда (внешнего интерфейса) веб-сервисов и приложений.

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

Наиболее популярные среди них – это Tooltip, который отвечает за всплывающие окна, Dropdown — отвечающий за выпадающие списки, Carousel, организовывающий прокручиваемый слайдер, и еще некоторые.

С полным списком существующих плагинов, шаблонов и компонентов можно ознакомиться на официальном сайте http://getbootstrap.com/getting-started/ . Также с его помощью начиная со второй версии можно создавать отзывчивую верстку.

Несколько слов об истории

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

Bootstrap был создан Марком Отто и Джейкобом Торнтоном специально для социальной сети Twitter. Он выступал в качестве внутренней библиотеки. Именно поэтому иногда можно встретить название Twitter Bootstrap.

Изначально библиотека называлась Twitter Blueprint. Однако к тому моменту, как продукт был выпущен в широкие массы (а это случилось 19 августа 2011 года), его наименование было изменено на Bootstrap. На сегодняшний день существует четыре версии фреймворка.

Наиболее заметной и востребованной на данный момент является Bootstrap 3 . В нем впервые была использована концепция mobile first . Помимо этого, было внедрено множество поправок и улучшений.

Какие плюсы использования Bootstrap?

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

А сейчас я хочу обратить все ваше внимание на удобные готовые решения, которые предоставляет Bootstrap, и их положительные стороны.

Итак, при подключении описываемого фреймворка вам предоставляется возможность использовать такие готовые элементы, как:

  • Всевозможные компоненты, в которые входят: панели навигации, выпадающие списки, кнопки, индикаторы процесса, разбиения на страницы и другие;
  • JavaScript-плагины, среди которых есть переходы, модальные и выпадающие элементы, всплывающие блоки и подсказки, сворачивание, реализация вкладок, слайдеры и другие;
  • Шаблоны сеток, в том числе и плавающих;
  • Макеты;
  • И конечно же реализация отзывчивого дизайна.

Стоит отдельное внимание уделить сеткам или как о них еще говорят верстке макетов. Сейчас будет небольшой спойлер, уж простите меня, ведь я решил посвятить данной теме отдельную статью, но ничего не поделать!

Благодаря данному инструменту Bootstrap очень часто используется для написания сайтов. Потому что это действительно грамотный и мощный механизм для блочной верстки. Создателями фреймворка было предусмотрено максимальное количество колонок – 12. Этого более чем достаточно для установки «каркаса» .

Помимо этого, в некоторых ситуациях использование Бутстрапа не только упрощает код, а и значительно экономит ваше время. При этом не стоит опасаться, что какие-то элементы не будут работать в проблемных браузерах (да-да, я намекаю на IE), потому что Bootstrap полностью совместим со .

Как подключить фреймворк?

Существует несколько вариантов подключения данного инструмента. Пожалуй, начну с установки загрузочного файла.

Итак, на официальном сайте по ссылке , можно скачать текущие версии Bootstrap-а. Все очень просто. Просто выбираете подходящий для вас установочный пакет и нажимаете на кнопку «Download». На этом же сайте вы можете скачать альфа-версию Bootstrap 4.

Второй способ – это конечно же использование CDN. Так, чтобы подключить последние версии фреймворка, вам необходимо вставить вот такую ссылку:

Если вам нужно подключить уменьшенную версию JavaScript, то коперните вот эту строчку:

Ну а темы подключаются следующим образом:

На русифицированном веб-сайте можно посмотреть обучающее видео по подключению данного фреймворка (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/ ).

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

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

Bootstrap CDN Установка с помощью Bower

You can also install and manage Bootstrap"s Less, CSS, JavaScript, and fonts using Bower :

$ bower install bootstrap Что включено

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

Требуется jQuery

Обратите внимание, что все JavaScript плагины требуют jQuery должны быть подключены, как показано на . Обратитесь в наш bower.json чтобы посмотреть какие версии jQuery поддерживаются.

Сборник кода Bootstrap 3

После загрузки, разархивируйте сжатые каталоги. Вы должны увидеть нечто похожее на это:

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff

Это является наиболее базовая форма Bootstrap: собранные файлы, для их быстрой вставки в любой веб-проект. Мы предоставляем сборник CSS и JS (bootstrap.*), а также ее минимизированный вариант (bootstrap.min.*). CSS (bootstrap.*.map) are available for use with certain browsers" developer tools. Как дополнительные опции тем Bootstrap - также предоставляются шрифты с Glyphicons.

Исходный код Bootstrap

Исходный код Bootstrap включает прекомпелированный CSS, JavaScript, и средства шрифтов, вместе с исходным Less, JavaScript, и документацией. Более конкретно, оно включает в себя следующее и более:

Bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/

less/ , js/ , и шрифты/ вашего исходного CSS, JS, и иконки (соответственно). Папка dist/ включает в себя все перечисленные предкомпилированные загрузки, что в разделе выше. Папка docs/ включает в себя исходный код для нашей документации, и примеры/ использования Bootstrap. Кроме того, любой другой включенный файл обеспечивает поддержку для пакетов, информацию о лицензиях и развитии.

Компиляция CSS и JavaScript grunt docs (Build & test the docs assets)

Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve .

grunt (Построить абсолютно все и запустить тесты)

Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll . Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.

Поиск и устранение неисправностей

Если у вас возникли проблемы с установкой зависимостей или запуска команд Grunt, сначала удалить /node_modules/ каталог сгенерированный npm. Затем, повтор npm install .

Базовый шаблон

Начните с базовым HTML шаблоном, или измените . Мы надеемся, что вы настроите наши шаблоны и примеры, адаптируя их для своих нужд.

Ниже приведен HTML-код, который использует минимизированную версию Bootstrap-документа.

Bootstrap 101 Template Привет, мир! Примеры шаблонов

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

Использование фреймверка Разметки

Несколько примеров макетов разметки со всеми четырьмя уровнями вложенности и прочее.

Шаги для блокировки адаптивного просмотра
  • Не создавайте с именем viewport как об этом сказано в документах CSS
  • Отмените width , .container для каждого уровня разметки определенной ширины, например так: width: 970px !important; Убедитесь, что этот код идет после включения основного кода Bootstrap CSS. При желании можно избежать!important с медиа-запросами или со специальным селектором.
  • Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
  • Для макета разметки используйте классы.col-xs-* как дополнение или вместо классов medium/large. Не волнуйтесь, разметка с классом xs (extra small) масштабируется для всех размеров экранов.

    • Вам все еще нужен Respond.js для IE8 (поскольку наши медиа-запросы все еще существуют и должны обрабатываться). Это заблокирует свойство "мобильность сайта" Bootstrap.

    Шаблон Bootstrap с заблокированной адаптивностью

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

    Переход с v2.x на v3.x

    Посмотрите на переход из старой версии Bootstrap на v3.x? Ознакомьтесь наше руководство по переходу .

    Браузер и поддержка устройств

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

    Поддержка браузерами

    В частности, мы поддерживаем последние версии из следующих браузеров и платформ. На Windows, мы поддерживаем Internet Explorer 8-11 . Более конкретная информация поддержки предоставлена ниже.

    Chrome Firefox Internet Explorer Opera Safari Android iOS Mac OS X Windows
    Поддерживается Поддерживается N/A Не поддерживается N/A
    Поддерживается N/A Не поддерживается Поддерживается
    Поддерживается Поддерживается Поддерживается Поддерживается
    Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

    Bootstrap должен достаточно хорошо выглядеть и вести себя в Chromium и Chrome для Linux, Firefox для Linux, и Internet Explorer 7, хотя они официально не поддерживаются.

    Internet Explorer 8 и 9

    Internet Explorer 8 и 9 также поддерживается, однако помните, что некоторые свойства CSS3 и элементы HTML5 не в полной мере поддерживаются данным браузерами. Кроме того, Internet Explorer 8 требует использования Respond.js , чтобы разрешить поддержку медиа запросов.

    Свойство Internet Explorer 8 Internet Explorer 9 border-radius box-shadow transform transition placeholder
    Не поддерживается Поддерживается
    Не поддерживается Поддерживается
    Не поддерживается Поддерживается с префиксом -ms
    Не поддерживается
    Не поддерживается

    Один за одним, мы включаем это в документацию и примеры Bootstrap в качестве демонстрации.

    Процентное округления в Safari

    The rendering engine of versions of Safari prior to v7.1 for OS X and Safari for iOS v8.0 had some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you had 12 individual grid columns, you"d notice that they came up short compared to other rows of columns. Besides upgrading Safari/iOS, you have some options for workarounds:

    • Добавить.pull-right в вашей последней колонки в разметке, чтобы получить жесткое выравнивание по правому краю.
    • Изменить проценты вручную, чтобы получить идеальное округления для Safari (более сложно, чем в первом варианте)
    Модули, navbars, и виртуальные клавиатуры Переполнение и прокрутка

    Поддержка overflow: hidden для элемента достаточно ограничена в iOS и Android. В браузере этих устройств, при прокруткі за пределы верхней или нижней модальной части, начинает прокручиваться содержание в .

    Виртуальная клавиатура

    Обратите внимание - если вы используете форму ввода в модальном окне или навигации, iOS имеет ошибку отображения, через которую не обновляется позиция фиксированных элементов при вызова виртуальной клавиатуры. Существуют некоторые обходные пути для этого, в том числе - трансформирующие элементы position: absolute , или при выявлении фокуса на элементе вызывают таймер и пробуют исправить это вручную. Bootstrap не обрабатывает такие ошибки, так что вам нужно самим это решить.

    Navbar Dropdowns

    Элемент.dropdown-backdrop не используется на iOS в навигации из-за сложности с z-index. Таким образом, чтобы закрыть выпадающие меню, необходимо просто нажать элемент выпадающего (или любой другой элемент, который будет генерировать событие нажатия в iOS).

    Браузерное масштабирование

    При изменении размера страницы, неизбежно оказывается некорректное отображение некоторых элементов: это касается и Bootstrap, и остальных веб-документа. В зависимости от конкретного случая, мы можем исправить это (при необходимости вы можете открыть соответствующий запрос, но сначала необходимо поискать или нет аналогичных запросов). Тем не менее, но как правило мы игнорируем их, поскольку они часто не имеют прямого решения, кроме создания обходных путей в виде хаков (hacky).

    Печать

    Even in some modern browsers, printing can be quirky.

    In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap"s extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:

    • Примените extra-small разметку и убедитесь, что ваша страница выглядит приемлемо.
    • Настройка значения @screen-* Less переменных, чтобы ваш бумага для принтера рассматривалась больше, чем extra-small.
    • Добавте пользовательские запросы, чтобы изменить размер разметки точек останова только для печатных СМИ.

    Also, as of Safari v8.0, fixed-width .container s can cause Safari to use an unusually small font size when printing. See #14868 for more details. One potential workaround for this is adding the following CSS:

    @media print { .container { width : auto ; } } Android stock браузер

    Из коробки, Android 4.1 (и даже некоторые новые релизы по-видимому) ставит с браузера приложение, как в веб-браузере по умолчанию(в отличие от Chrome). К сожалению, браузер приложение имеет множество ошибок и несоответствий с CSS в целом.

    Select меню

    На элементе, в Android браузере не будет отображаться элементы управления если есть border-radius и/or border . (Смотри этот вопрос по StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать элемент без стиля на Android браузере. Агент пользователя фырканье предотвращает помехи с Chrome, Safari, and Mozilla браузерами.

    $ (function () { var nua = navigator . userAgent var isAndroid = (nua . indexOf ("Mozilla/5.0" ) > - 1 && nua . indexOf ("Android " ) > - 1 && nua . indexOf ("AppleWebKit" ) > - 1 && nua . indexOf ("Chrome" ) === - 1 ) if (isAndroid ) { $ ("select.form-control" ). removeClass ("form-control" ). css ("width" , "100%" ) } }) Валидаторы

    In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren"t yet fully standardized, but these are used purely for progressive enhancement.

    These validation warnings don"t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don"t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

    Our HTML docs likewise have some trivial and inconsequential HTML validation warnings due to our inclusion of a workaround for a certain Firefox bug .

    Поддержка третьих сторон

    Хотя мы официально не поддерживаем сторонние плагины или дополнение, мы предлагаем несколько полезных советов, которые помогут избежать возможных проблем в ваших проектах.

    Размерность блоков

    В зависимости от контекста, вы можете переопределить box-sizing только там, где это необходимо (Вариант 1), либо сбросить его для целых областей (Вариант 2).

    /* Box-sizing resets * * Reset individual elements or override regions to avoid conflicts due to * global box model settings of Bootstrap. Two options, individual overrides and * region resets, are available as plain CSS and uncompiled Less formats. */ /* Option 1A: Override a single element"s box model via CSS */ .element { -webkit-box-sizing : content-box ; -moz-box-sizing : content-box ; box-sizing : content-box ; } /* Option 1B: Override a single element"s box model by using a Bootstrap Less mixin */ .element { .box-sizing (content-box ) ; } /* Option 2A: Reset an entire region via CSS */ .reset-box-sizing , .reset-box-sizing *, .reset-box-sizing * :before , .reset-box-sizing * :after { -webkit-box-sizing : content-box ; -moz-box-sizing : content-box ; box-sizing : content-box ; } /* Option 2B: Reset an entire region with a custom Less mixin */ .reset-box-sizing { & , *, * :before , * :after { .box-sizing (content-box ) ; } } .element { .reset-box-sizing () ; } Доступность

    Bootstrap следует общим веб-стандартам, и—при минимальных дополнительных усилиях—может быть использован для создания сайтов, доступных через AT .

    Пропуск навигации

    Если ваше навигационное меню имеет много линков и находится перед главным содержанием в DOM, добавьте линк Перейти к главному содержимому непосредственно после тега .

    Skip to main content The main page content. Вложенные заголовки

    При вложении заголовков ( - ), ваш основное заглавие документа должен быть . Следующие заголовки должны логически вибудовуватись используя - , чтобы программа, которая считывает заголовки, могла сконструировать содержание страницы.

    Цветовой контраст

    Currently, some of the default color combinations available in Bootstrap (such as the various styled button classes, some of the code highlighting colors used for basic code blocks , the .bg-primary contextual background helper class, and the default link color when used on a white background) have a low contrast ratio (below the recommended ratio of 4.5:1). This can cause problems to users with low vision or who are color blind. These default colors may need to be modified to increase their contrast and legibility.

    Дополнительные ресурсы Она позволяет: Она не требует:
    • Включает в себя исходный код Bootstrap, или о любых изменениях, которые вы сделали с ним, можно собирать в другие дистрибутивы то, что он включает в себя
    • Предоставлять изменения, которые вы внесли в Bootstrap для демонстрации в проекте Bootstrap (хотя обратная связь приветствуется)

      • Перевели новый или есть перевод лучше? Откройте запрос, чтобы добавить его в наш список.

    Перед загрузкой убедитесь, что у вас имеется редактор кода (мы рекомендуем Sublime Text 3) и некоторые знания в области HTML и CSS. Здесь мы не будем затрагивать исходные файлы, но скачать и изучить их Вы всегда можете сами. Мы сфокусируем наше внимание на начале работы с компилированными файлами Bootstrap.

    Загрузка компилированных файлов

    Самый быстрый способ начать работу: получить компилированные и минимизированные версии наших CSS, JS, и изображений. Никаких документов или исходных файлов.

    2. Структура файлов

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

    После загрузки распакуйте сжатую папку, чтобы увидеть структуру (компилированого) Bootstrap. Она должна быть примерно такой:

    bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min . css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min . js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . md

    Это основная форма Bootstrap: компилированные файлы для быстрого и легкого использования почти в любом Web-проекте. Мы предоставляем вам компилированные CSS и JS (bootstrap.*), и также компилированные и минимизированные CSS и JS (bootstrap.min.*). Файлы изображений сжаты при помощи ImageOptim , приложения Mac для сжатия изображений в PNG.

    Пожалуйста, обратите внимание, что все плагины JavaScript требуют jQuery.

    3. Что включено

    Bootstrap оснащен HTML, CSS и JS для всех видов работы, они все перечислены в категориях, которые вы можете найти в верхней части страницы .

    Разделы документов Поддерживаемые элементы

    Общие стили для тела (body) для сброса типа и фона, стилей ссылок, сетки шаблонов и двух простых элементов разметки.

    Стили CSS

    Стили для общих элементов HTML: оформления, кода, таблиц, форм и кнопок. Также включает в себя Glyphicons , великолепный набор иконок.

    Компоненты

    Основные стили для простых компонентов интерфейса: вкладок и кнопок, панелей навигации, сообщений, заголовков страниц и др.

    Плагины Javascript

    Как и компоненты, эти плагины Javascript являются интерактивными компонентами для всплывающих подсказок, информационных блоков, модальных компонентов и др.

    Список компонентов

    Все вместе компоненты и плагины Javascript содержат следующие элементы интерфейса:

    • Группы кнопок
    • Выпадающие списки кнопок
    • Навигационные вкладки, кнопки и списки
    • Панель навигации
    • Ярлыки
    • Бейджи
    • Заголовки страниц и элемент hero
    • Миниатюры
    • Сообщения
    • Индикаторы процесса
    • Модальные элементы
    • Выпадающие списки
    • Всплывающие подсказки
    • Информационные блоки
    • Элемент «Гармошка»
    • Элемент «Карусель»
    • Опережающий ввод с клавиатуры
    4. Основной шаблон HTML

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

    Вот как выглядит типичный файл HTML :

  • Шаблон Bootstrap 101
  • Привет, мир!

    • Чтобы сделать такой шаблон Bootstrap , просто присоедините соответствующие файлы CSS и JS:

  • Шаблон Bootstrap 101
  • Привет, мир!

    • И все настроено! Добавив эти два файла, вы можете с помощью Bootstrap разрабатывать сайт или приложение.

    Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.

    Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.

    Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.

    Кто еще не знаком с Bootstrap?

    Bootstrap - это библиотека CSS кода, предоставлена компанией Твиттер и распространяется бесплатно. Значительно упрощает жизнь веб дизайнеру. В архиве прилагается небольшое дополнение в виде js файла. Подробнее об установке и использовании можно узнать на официальном сайте.

    Примеры решений: http://getbootstrap.com/components/ - табы, стилизация таблиц, всплывающие окна, навигация, менюшки, вертикальные списки, кнопки, иконки и другие прелести. Тоже на англ. языке.

    Что нужно знать прежде о сетках bootstrap?

    Ранее, во второй версии бутстрапа, были лишь некоторые дополнения для мобильных решений. В третей версии — весь фреймверк изначально адаптирован под различные устройства: мобильные, планшеты, десктопы. Сейчас проясниться:)

    Почти весь функционал бутстрапа осуществляется через использование элементарных классов.

    Весь код body контента содержится в специальном div блоке. Он может быть фиксированной ширины .container , или полноэкранным.container-fluid .

    Сеточная система

    Состоит из 12 ячеек, каждая из которых является div блоком, в строке.row.

    Теперь посмотрите таблицу ниже, чтобы было легче понимать следующие куски кода.

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

    Внимание! Можно создавать сетку изначально ориентируясь на несколько устройств одновременно. Достигается это путем комбинирования префиксов.

    Пример 1. Создадим некие сетки только для десктопных устройств:


    .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6

    Пример 2 . А теперь скомбинируем сетку для десктопа и мобильного одновременно:


    .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6

    Статья, в которой рассмотрим сайты, предлагающие веб-дизайнерам, разработчикам или просто любителям бесплатные шаблоны (templates) и темы (themes) для Bootstrap.

    Сайты, на которых можно бесплатно скачать Bootstrap шаблоны

    Данный сайт содержит бесплатные темы и шаблоны Bootstrap как для личного так и для коммерческого использования. Все шаблоны разложены по категориям "лендинг страницы", "одностраничные сайты", "блоги", "портфолио" и т.д.

    На данном сайте доступны для просмотра и скачивания бесплатные адаптивные шаблоны Bootstrap. Страница этого ресурса состоит из двух разделов. В первом разделе (вверху страницы) распологаются платные шаблоны, а во втором разделе (внизу страницы) - бесплатные.

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

    На этом сайте представлены бесплатные и платные темы. Правда выбор бесплатных тем, да и платных не так велик. Но, зато на PrepBootstrap содержится для фреймворка Bootstrap очень большое число HTML виджетов и компонентов (более 100).

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

    Сайт, на котором представлено очень большой выбор тем для Twitter Bootstrap. Для удобства поиска все темы сгруппированы в категории подобно тому, как это сделано на сайте Start Bootstrap.

    Сайт Free CSS содержит большое количество тем, включая темы для платформы Twitter Bootstrap. Каждую из тем можно вживую посмотреть с помощью кнопки "Live Demo" и при желании скачать.

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

    На сайте WebThemez доступны для скачивания более 200 бесплатных шаблонов для Bootstrap. К каждому шаблону приложено описание и его ключевые особенности.