Бутстрап 3 на русском: Bootstrap 3 · Документация на русском языке

Содержание

C чего начать · Bootstrap на русском

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

Bootstrap

Компилированый и минимизированный CSS, JavaScript, и шрифты. Нет документов или оригинальные исходные файлы не включены.

Скачать Bootstrap

Bootstrap CDN

Сотрудники MaxCDN любезно предоставили поддержку CDN для Bootstrap CSS и JavaScript. Просто используйте эти ссылки Bootstrap CDN.

<!-- Последняя компиляция и сжатый CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">

<!-- Дополнение к теме -->
<link rel="stylesheet" href="https://maxcdn.
bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Последняя компиляция и сжатый JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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

Вы также можете установить и управлять Bootstrap’ы Less, CSS, JavaScript, и шрифты, используя Bower:

$ bower install bootstrap

Установить с помощью npm

Вы также можете установить Bootstrap используя npm:

$ npm install [email protected]

require('bootstrap') загрузит все Bootstrap’ы jQuery плагины на объект jQuery. На bootstrap сам модуль ничего не экспортирует. Вы можете вручную загрузить Bootstrap’ы jQuery плагины индивидуально загрузки /js/*.js файлы верхнего уровня пакета каталог.

Bootstrap’ы package.json содержит некоторые дополнительные метаданные в следующих разделах:

  • less — путь к Bootstrap’ы основным источником Less файл
  • style — путь к Bootstrap’ы не сжатый CSS, который был предварительно скомпилированные с использованием стандартных настроек (нет настройки)

Установить с помощью Composer

Вы также можете установить и управлять Bootstrap Less, CSS, JavaScript, и шрифты, используя Composer:

$ composer require twbs/bootstrap

Autoprefixer необходимых для Less/Sass

Bootstrap использует Autoprefixer заниматься CSS вендорных префиксов. Если вы компилируете Bootstrap от Less/Sass источник а не через наш Gruntfile, Вам необходимо интегрировать Autoprefixer в процессе построения себя. Если вы используете предварительно скомпилированные Bootstrap или через наш Gruntfile, вам не нужно беспокоиться об этом, потому что Autoprefixer уже интегрированы в Gruntfile.

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

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

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

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

Это является наиболее базовая форма 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/, и fonts/ вашего исходного CSS, JS, и иконки (соответственно).

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

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

Установка Grunt

Чтобы установить Grunt, необходимо сначала загрузить и установить node.js (которая включает в себя npm). npm расшифровывается для узлов упакованных модулей и это способ управления зависимостями развития посредством node.js.

Then, from the command line:
  1. Установите grunt-cli в глобальном масштабе npm install -g grunt-cli.
  2. Передите в главный /bootstrap/ каталог, а затем запустите npm install. npm посмотрите на package.json файл и автоматически установите необходимые местные зависимости, перечисленные в нем.

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

Доступные команды Grunt

grunt dist (Просто собрать CSS и JavaScript)

Регенерирует каталог /dist/ с скомпилированными и уменьшенными CSS и файлами JavaScript. Обычно для пользователя Bootstrap , это команда необходима.

grunt watch (Счетчик)

Часы уменьшают исходные файлы и автоматически перекомпилирует их в CSS при каждом сохранении изменений.

grunt test (Выполнить тесты)

Запуск У jshint и the Помощью qunit тестов (автоматически) в Помощи phantomjs.

grunt docs (сборка и проверка документов активов)

Сборка и тестирование CSS, JavaScript, и прочих активов, которые используются при локальном использовании документации через bundle exec jekyll serve.

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Верхние 3 мета-тега *должны* быть указаны в первую очередь в head; любой другой контент в head должен быть указан *после* этих тегов -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.
min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- Предупреждение: Respond.js не работает при просмотре страницы через файл:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script > <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h2>Hello, world!</h2> <!-- на jQuery (необходим для Bootstrap - х JavaScript плагины) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Включают все скомпилированные плагины (ниже), или включать отдельные файлы по мере необходимости --> <script src="js/bootstrap.min.js"></script> </body> </html>

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

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

docs/examples/ каталога.

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

Стартовый шаблон

Ничего кроме базового: сборник CSS, JavaScript, и использован контейнер.

Темы Bootstrap

Настройте темы Bootstrap чтобы разнообразить вид страниц.

Разметки

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

Jumbotron

Создание вокруг большого экрана навигационной панели и нескольких колонок, используя базовую систему разметки.

Узкий Jumbotron

Создание более персонализированных страниц через сужение контейнера по умолчанию и большого экрана.

Navbars в действии

Навигационное меню

Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.

Статическое навигационное меню

Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.

Фиксированное навигационное меню

Базовый шаблон, который включает навигационное меню вместе с дополнительным содержанием.

Пользовательские компоненты

Крышка

Одностраничный шаблон для построения простых и красивых домашних страниц.

Карусель

Сочетание в шаблоне нав. меню и карусели, с добавлением некоторых новых компонентов.

Блог

Простой блог в две колонки с пользовательской навигацией, заголовком, и видом.

Панель приборов

Базовая структура для администратора приборная панель с фиксированным боковым меню и панели навигации.

Страница входа

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

Выровненное нав. меню

Создание компонованого нав. меню с выровненными ссылками. Внимание! Не очень дружит с Safari.

Фиксированный Нижний колонтитул

Закрепление колонтитула в нижней части браузера для случая, когда высота контента сама собой не делает этого.

Липкий Нижний колонтитул навигации

Прикреплено колонтитул в нижнюю часть браузера, с нав. меню в верхней части.

Эксперименты

Off-холст

Создание навигационного off-canvas меню с возможностью переключения для Bootstrap.

Bootlint — это официальный Bootstrap на 1 инструмент. Он автоматически проверяет для нескольких распространенных ошибок HTML на веб-страницах, использующих Bootstrap в достаточно «ванильным» образом. Ванильный Bootstrap — х компонентов/виджетов требуют от своих частей DOM соответствуют определенные структуры. Bootlint проверяет экземпляры Bootstrap компоненты правильно структурированный HTML. Попробуйте добавить Bootlint на Bootstrap веб-разработки компиляторов, так что ни одна из распространенных ошибок, замедлить развитие проекта.

Оставайтесь в курсе развития Bootstrap и обратитесь к сообществу за полезными ресурсами.

  • Прочитайте и подпишитесь на Официальный Bootstrap Блог.
  • Общайтесь с другими Bootstrapperами с помощью IRC в irc.freenode.net сервер, на ##bootstrap канала.
  • Для получения справки по использованию Bootstrap, спросите на Сайте stackoverflow, используя тег twitter-bootstrap-3.
  • Разработчики должны использовать ключевое слово bootstrap на пакеты, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичных механизмов доставки для максимального обнаружения.
  • Найти вдохновляющие примеры людей, строящих с Bootstrap на Bootstrap Экспо.

Вы также можете перейти на @getbootstrap на Twitter к последним сплетням и удивительным музыкальным клипам.

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

Шаги для блокировки адаптивного просмотра

  1. Опустите просмотр <meta> как об этом сказано в документах CSS
  2. Переопределить width на .container Для каждого грид уровня, с одной ширины, например width: 970px !important; быть уверены, что это происходит после умолчанию Bootstrap CSS. Можно избежать !important с медиа запросы или какой-селектор-фу.
  3. Если вы используете навигационное меню, удалите все меню, которые могут сворачиваться/разворачиваться.
  4. Для макета разметки используйте классы .col-xs-* как дополнение или вместо классов medium/large. Не волнуйтесь, для extra-small устройств разметка масштабируется для всех размеров экранов.

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

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

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

Просмотреть пример неадаптивного шаблона

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

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

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

Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.

Мобильных устройств

Вообще говоря, Bootstrap поддерживает последние версии браузеров каждой крупной платформы по умолчанию. Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются.

Chrome В Firefox Safari
Android Supported Supported N/A
iOS Supported Supported Supported

Браузеры для ПК

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

Chrome В Firefox Internet Explorer Opera Safari
Mac Supported Supported N/A Supported Supported
Windows Supported Supported Supported Supported Not supported

В Windows мы поддерживаем Internet Explorer 8-11.

Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (СОЭ) версия браузера Firefox.

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

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

Internet Explorer 8 и 9

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

Свойство Интернет Эксплорер 8 Интернет Эксплорер 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

Посетите Могу ли я использовать. .. для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.

Internet Explorer 8 и Respond.js

Примите во внимание следующие оговорки, при использовании Respond.js в вашей среде разработки, в рабочей среде Internet Explorer 8.

Respond.js и кросс-доменный CSS

Если вы храните Respond.js и CSS на разных (суб)доменах (например, на CDN) — это требует некоторых дополнительных установок. Ознакомьтесь с документацией Respond.js для уточнений.

Respond.js и

file://

Через правила безопасности браузера, Respond.js не работает при просмотре через протокол file:// (например, когда вы открываете HTML файл локально). Чтобы протестировать настройки чувствительности в IE8, просматривайте ваши страницы через HTTP(S). Ознакомьтесь с документацией Respond.js для уточнений.

Respond.

js и @import

Respond.js не работает с CSS, на которые ссылаются как @import. В частности, некоторые конфигурации Drupal, как известно, используют @import. Ознакомьтесь с документацией Respond.js для уточнений.

Internet Explorer 8 и box-sizing

IE8 не в полной мере поддерживает box-sizing: border-box; при комбинировании с min-width, max-width, min-height или max-height. По этой причине, начиная с v3.0.1, мы больше не поддерживаем max-width, .container.

Internet Explorer 8 и @font-face

IE8 имеет некоторые проблемы с @font-face в сочетании с :before. Bootstrap использует эту комбинацию с его символичной иконкой. Если страница кэшируется, и загружается без мыши по окну (т.е. нажать кнопку обновления или загрузки в встроенном кадре), то страница вынесена до загрузки шрифтов. При наведении курсора на страницу (тело) покажет некоторые значки и зависший над остальными иконами покажет также. Смотреть выпуск #13863 для деталей.

Режим совместимости с IE

Bootstrap не поддерживает режим совместимости в старых версиях Internet Explorer. Чтобы быть уверенным, что вы используете последнюю версию такого режима для IE, просмотрите включен соответствующий тег <meta> на вашей странице:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Подтвердите режим документа, открыв средства отладки: нажмите F12 и проверьте «Document Mode».

Этот тег входит в состав всех Bootstrap документациий и примеров для обеспечения лучшей визуализации возможных в каждой поддерживаемой версии Internet Explorer.

Просмотрите эти вопросы на StackOverflow для уточнений.

Internet Explorer 10 на Windows 8 и Windows Phone 8

Интернет Эксплорер 10 не отличает ширину устройства с шириной окна просмотра, и, следовательно, неправильно применяет медиа запросы в CSS Bootstrap. Как правило, вы могли бы просто добавить быстрый фрагмент CSS чтобы исправить это:

@-ms-viewport       { width: device-width; }

Однако, это не работает для устройств, работающих под управлением Windows Phone 8 версий старше, чем Обновления 3 (а.к.а. GDR3), поскольку это вызывает такие устройства, чтобы главным образом показать основной рабочий стол вместо узкого «phone» view. Для решения этой проблемы вам необходимо включать следующие CSS и JavaScript, чтобы обойти ошибку.

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
// Авторских 2014-2015 Twitter, Вкл.
// Лицензированных в соответствии с MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle. appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone 8 и Device-Width.

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

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

Движок для отображения версий Safari до версии v7.1 для OS X и Safari для iOS В8.0 были некоторые проблемы с количеством десятичных знаков, используемых в нашем .col-*-1 грид классов. Так что если у вас 12 индивидуальный грид столбцы, Вы заметите, что они придумали короткие по сравнению с другими рядами колонн. Помимо обновления сафари на iOS, у вас есть несколько вариантов решений:

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

Модули, navbars, и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка overflow: hidden на <body> элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхней или нижней части модального в любом из браузеров этих устройств, в <body> контент начнет прокручиваться. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.

текстовых полей iOS и прокрутки

Начиная с iOS 9.3, в то время как модальные открыт, если начальное касание прокрутки жест в пределах границы текста <input> или <textarea> В <body> содержание под модальным будет прокручиваться вместо модальных себя. Смотрите В WebKit ошибка № 153856.

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

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

Меню Навигации

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

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

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

Липкий

:hover/:focus на мобильном

Хотя реальное зависание не возможно на большинстве сенсорных экранов, мобильные браузеры эмулируют поддержку зависания и делают :hover «Липким». Другими словами, :hover стили начинают применяться после нажатия элемента и прекращают применение только после того, как пользователь нажимает какие-либо другие элементы. Поэтому :hover из Bootstrap’а может привести к нежелательному «залипанию» на таких браузерах. Некоторые мобильные браузеры также делают :focus липкий. Пока что нет простого решения таких вопросов, помимо полного удаления таких стилей.

Печать

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

В частности, в Chrome версии 32 независимо от параметров отступов и размеров полей, Chrome при печати использует значительно более узкую область просмотра, чем физический размер бумаги при отображении медиа запросов. Это может привести к тому, при печати Bootstrap неожиданно активирует очень мелкую сетку. Смотри подробности в Ошибке #12078 и Ошибке Chrome #273306. Рекомендуемые обходные пути:

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

Также, как Сафари и v8. 0, фиксированной ширины .container может вызвать Сафари использовать необычайно маленький размер шрифта при печати. См. #14868 и В WebKit ошибка #138192 Для более подробной информации. Одним из возможных обойти это, добавив следующие CSS:

@media print {
  .container {
    width: auto;
  }
}

Заводские Android браузеры

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

Меню выбора

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

<script>
$(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%')
  }
})
</script>

Хотите увидеть пример? Проверьте это JS Bin demo.

Валидаторы

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

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

Наш HTML-документы также имеют некоторые тривиальным и несущественным HTML проверка предупреждения, в связи с наличие решения ошибок в Firefox.

Bootstrap Бутстрап 4 Учебник Справочник на русском примеры


Bootstrap 4 — это новейшая версия Bootstrap, которая является наиболее популярной платформой HTML, CSS и JavaScript для разработки адаптивных мобильных веб-сайтов.

Bootstrap 4 абсолютно бесплатно скачать и использовать!

Начните учить Bootstrap 4 сейчас »

Start Bootstrap 4


Попробуйте примеры

Этот учебник Bootstrap 4 содержит сотни примеров Bootstrap 4.

С помощью нашего онлайн-редактора вы можете отредактировать код и нажать на кнопку для просмотра результата.

Пример Bootstrap 4


  Моя первая Bootstrap страница
  Измените размер этой адаптивной страницы, чтобы увидеть эффект!

<div>
  <div>
    <div>
      <h4>Колонка 1</h4>
      <p>Просто текст ..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 2</h4>
      <p>Просто текст ..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 3</h4>
      <p>Просто текст ..</p>
      <p>Новый текст..</p>
    </div>
  </div>
</div>

Нажмите на «Просмотр демо в редакторе» кнопку, чтобы увидеть, как работает.



Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.

Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.


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

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


Ссылки Bootstrap

Полный список всех классов Bootstrap 4 CSS с описанием и примерами:

Если вы хотите сделать больше с компонентами Bootstrap, смотрите наш полный Bootstrap 4 с JavaScript все примеры:



сетка bootstrap ломается — CodeRoad



Итак, вот удаленная ссылка , она на русском языке, но это не имеет значения. Дело в том, что сетка bootstrap иногда ломается, и я не знаю почему. Иногда это выглядит нормально, но потом я увеличиваю страницу до 75%, и она ломается. Я предполагаю,что он также разбивается на разных экранах ноутбуков без масштабирования. Должен ли я предоставить вам какой-то код или что-то еще?

html css twitter-bootstrap
Поделиться Источник name name     28 июня 2016 в 14:57

2 ответа


  • bootstrap не ломается на мобильном телефоне

    Я сделал этот сайт с Bootstrap 3, и когда я изменяю размер своего браузера, мобильная версия с пользовательской навигационной панелью переключается на правильный макет. Но на моем мобильном устройстве (проверено на iPhone) кажется, что сайт не ломается на последней точке останова. Это дает мне…

  • Bootstrap — 4 сетка столбцов разрывается после определенной точки

    У меня возникла проблема с выяснением того, почему сетка bootstrap, кажется, ломается после определенного момента в моей демо-версии, она выглядит так, не обращайте внимания на верхнюю часть(col-sm-9 и col-sm-3), она находится в своем собственном ряду. до сих пор в 13 пунктах он выглядит так: 14…



2

Вы можете добавить CSS clear «reset» каждые 4 элемента, как это. Это будет работать без установки определенной высоты.

@media (min-width: 992px) {
    .category-wrap:nth-child(4n+1) {
        clear: left;
    }
}

Поделиться Zim     28 июня 2016 в 15:12



0

Добавьте height: 150px; к ur .category-wrap , чтобы исправить это.

.category-wrap {
    margin-top: 15px;
    height: 150px;
}

Поделиться Shank     28 июня 2016 в 15:02


Похожие вопросы:


Почему Span ломается в Bootstrap

Я пытался создать сайт с помощью bootstrap. Когда я попытался добавить несколько пролетов в основную область содержимого [ Span5, Span5 и Sidebar Span2] боковая панель ломается и переходит к…


Бутстрап-сетка с разной высотой изображения

Я работаю над динамической сеткой обложек альбомов с CSS и Bootstrap 3, и все работает нормально, когда все изображения масштабируются 1:1. Но когда появляется изображение, которое не масштабируется…


Почему мой bootstrap navbar ломается

Я пытаюсь создать навигационную панель, как показано ниже, которая имеет 300px на левой стороне и 300px на правой стороне с центральной шириной 100% . Как мы можем достичь этого макета с помощью…


bootstrap не ломается на мобильном телефоне

Я сделал этот сайт с Bootstrap 3, и когда я изменяю размер своего браузера, мобильная версия с пользовательской навигационной панелью переключается на правильный макет. Но на моем мобильном…


Bootstrap — 4 сетка столбцов разрывается после определенной точки

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


Bootstrap Адаптивная Сетка Изображений

Я хочу создать адаптивную сетку изображений с помощью Bootstrap. У меня есть 4 изображения, и мне нужна сетка 1×4 для настольного размера и сетка 2×2 для мобильного размера. Я попробовал следующий…


Сетка Bootstrap не отображается

У меня возникли проблемы с правильным отображением сетки bootstrap. Мой код выглядит следующим образом <div class=container> <div class=row> <div…


Bootstrap сетка разрывается, когда текст большой

Я сталкивался с этой проблемой несколько раз и не мог найти правильного решения. В основном у меня есть загрузочная сетка с 2 столбцами рядом с текстом (и, скажем, 4 строками). Если один из…


Сетка автозаполнения bootstrap

Возможно ли с помощью bootstrap автоматически заполнить пробелы в моем макете? У меня есть сетка с cols-xs-6 и только один элемент с col-xs-12 , но все эти данные динамичны, и контейнер col-xs-12 не. ..


Bootstrap 4 Как настроить класс bootstrap элемента сетки, но только если сетка сломается?

Можно ли каким-то образом настроить класс начальной загрузки элемента сетки с col-md-9 на col-md-12 , но только в том случае, если сетка ломается (например, из-за изменения размера окна браузера)….

HTML/CSS. Сеточная система Bootstrap 3

Данный туториал предоставляет информацию о «грид» системе фреймворка Bootstrap 3.

Сеточная система Twitter Bootstrap предлагает быстрый и простой способ создавать разметку веб-страниц. Twitter Bootstrap 3 идет в комплекте с адаптивной мобильной плавающей системой сеток, которая структурируется вплоть до 12 колонок в зависимости от увеличения размера устройства или экрана. Давайте посмотрим, как она работает.

  1. Чтобы правильно выравнять и задать внутренний отступ сетки, блоки с классом .row нужно располагать внутри блоков с классом .container (фиксированная ширина) или .container-fluid (по ширине странице).

  2. Блоки с классом .row необходимо использовать для создания горизонтальных групп колонок.

  3. Содержание нужно располагать внутри колонок и только колонки могут быть непосредственными потомками блоков с классом .row.

  4. Предопределенные классы сеток, например .row и .col-xs-4, позволяют быстро создавать разметку сеток. Также можно использовать миксины языка стилей less для увеличения количества типов семантической разметки.

  5. Колонки создают промежутки (gutters) (разрывы между содержанием колонок) через внутренний отступ (padding). Этот внутренний отступ (padding) смещается для первой и последней колонок из-за отрицательного значения внешнего отступа (margin) блоков с классом .row.

  6. Колонки сеток создаются путем указания требуемого числа из двенадцати доступных колонок. Например, для трех одинаковых колонок нужно использовать три контейнера с классом .col-xs-4.

  7. Классы сеток применяются к устройствам, в которых ширина больше или равна контрольным размерам, и переопределяют классы сеток, предназначенных для меньших устройств. Таким образом, применение любого класса .col-md- к элементу задаст стиль не только для средних, но и для больших устройств в том случае, если не используется класс .col-lg- .

Разметка

Twitter Bootstrap 3 включает предопределенные классы сеток, чтобы быстро верстать сеточную разметку для различных типов устройств, например мобильные телефоны, планшеты, компьютеры и т.п. Например, можно использовать класс .col-xs- , чтобы создавать сеточные колонки для очень маленьких устройств, как, например, мобильный телефон; таким же образом класс .col-sm- употребляется для маленьких устройств ~ планшетов, класс .col-md- для средних устройств ~ компьютеров и .col-lg- для больших экранов компьютеров. Ниже приводятся виды разметки системы сеток Bootstrap.

  1. Очень маленькие устройства ~ телефоны (<768px)

  2. Маленькие устройства ~ планшеты (≥768px)

  3. Средние устройства ~ компьютеры (≥992px)

  4. Большие устройства ~ компьютеры (≥1200px)

Настройки сеток

Пожалуйста, ознакомьтесь со следующей таблицей для более детальной информации:

Разметка сеточной системы Bootstrap 3Очень маленькие устройства
Телефоны (<768px)
Маленькие устройства
Планшеты (≥768px)
Средние устройства
Компьютеры (≥992px)
Большие устройства
Компьютеры (≥1200px)
Максимальная ширина контейнераНет (авто)750px970px1170px
Префикс класса. col-xs-.col-sm-.col-md-.col-lg-
Максимальная ширина колонкиАвто~62px~81px~97px
Ширина промежутка (Gutter)15px с каждой стороны колонки (например 30px)

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

Приведем примеры:

  1. Stacked-to-horizontal (Построение блоков столбцом, которое переходит в строчное на компьютерах). При помощи простого набора сеточных классов .col-md-*, можно создать базовую сеточную систему, при которой блоки располагаются столбцом на мобильных устройствах и планшетах (очень маленькие и маленькие устройства), но трансформируются в строку на компьютерах (средние устройства). Колонки сетки могут располагаться в любом блоке с классом .row.

    Пример кода:

    <div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    	<div>.col-md-1</div>
    </div>
    <div>
    	<div>.col-md-8</div>
    	<div>.col-md-4</div>
    </div>
    <div>
    	<div>.col-md-4</div>
    	<div>.col-md-4</div>
    	<div>.col-md-4</div>
    </div>
    <div>
    	<div>.col-md-6</div>
    	<div>.col-md-6</div>
    </div>   
    
  2. Fluid container (Подвижный контейнер). Превратите любую сеточную разметку с фиксированной шириной в подвижную, изменив класс контейнера с . container на .container-fluid.

    <div>
    	<div>
    	...
    	</div>
    </div>
    
  3. Mobile and desktop (Мобильные устройства и компьютер). Можно использовать классы сеток для очень маленьких и средних устройств, добавляя .col-xs-* .col-md-* в колонки.

    Пример кода:

    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div>
    	<div>.col-xs-12 .col-md-8</div>
    	<div>.col-xs-6 .col-md-4</div>
    </div>
        
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div>
      <div>.col-xs-6 .col-md-4</div>
      <div>.col-xs-6 .col-md-4</div>
      <div>.col-xs-6 .col-md-4</div>
    </div>
      
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div>
      <div>.col-xs-6</div>
      <div>.col-xs-6</div>
    </div>
      
  4. Mobile, tablet, desktops (Мобильный, планшет, компьютеры). Постройте еще более динамичную разметку для планшета при помощи класса .col-sm-* , используя предыдущий пример.

    Пример кода:

    <div>
    	<div>.col-xs-12 .col-sm-6 .col-md-8</div>
    	<div>.col-xs-6 .col-md-4</div>
    </div>
    <div>
    	<div>.col-xs-6 .col-sm-4</div>
    	<div>.col-xs-6 .col-sm-4</div>
    	<!-- Optional: clear the XS cols if their content doesn't match in height -->
    	<div></div>
    	<div>.col-xs-6 .col-sm-4</div>
    </div>
    
  5. Column wrapping (Перенос колонок). Если в одном блоке с классом .row находится больше 12 колонок, каждая группа дополнительных колонок будет переходить на новою строку как единое целое.

    Пример кода:

    <div>
        <div>.col-xs-9</div>
        <div>.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
        <div>. col-xs-6<br>Subsequent columns continue along the new line.</div>
    </div>
    
  6. Responsive column resets (Исправление адаптивных колонок). При использовании четырех доступных сеток, вы столкнетесь с проблемой, когда в определенных точках колонки выглядят неправильно из-за разницы высоты. Чтобы это исправить, используйте комбинацию блока с классом .clearfix и адаптивных служебных классов.

    Пример кода:

    <div>
    	<div>.col-xs-6 .col-sm-3</div>
    	<div>.col-xs-6 .col-sm-3</div>
    
    <!-- Add the extra clearfix for only the required viewport -->
    	<div></div>
    	<div>.col-xs-6 .col-sm-3</div>
    	<div>.col-xs-6 .col-sm-3</div>
    </div>
    
  7. Offsetting columns (Смещение колонок). Двигайте колонки вправо при помощи классов .col-md-offset-* . Эти классы увеличивают отступ слева от блока на * количество колонок. Например, класс .col-md-offset-4 подвинет блок с классом .col-md-4 на четыре колонки.

    Пример кода:

    <div>
    	<div>.col-md-4</div>
    	<div>.col-md-4 .col-md-offset-4</div>
    </div>
    <div>
    	<div>.col-md-3 .col-md-offset-3</div>
    	<div>.col-md-3 .col-md-offset-3</div>
    </div>
    <div>
    	<div>.col-md-6 .col-md-offset-3</div>
    </div>
    
    
  8. Nesting columns (Вложенные колонки). Чтобы вложить содержание в основную сетку, добавьте новый блок с классом .row и набор колонок .col-sm-* внутри существующей колонки .col-sm-*. Вложенные блоки с классом row должны включать набор из 12 или менее колонок (не рекомендуется использовать все 12 доступных колонок).

    Пример кода:

    <div>
    	<div>
    	Level 1: .col-sm-9
    		<div>
    		<div>
    		Level 2: .col-xs-8 .col-sm-6
    		</div>
    			<div>
    			Level 2: .col-xs-4 .col-sm-6
    		</div>
    		</div>
    	</div>
    </div>
    
  9. Column ordering (Порядок отображения колонок). Порядок отображения встроенных сеточных колонок можно изменить при помощи модифицированных классов .col-md-push-* and .col-md-pull-*.

    Пример кода:

    <div>
    	<div>.col-md-9 .col-md-push-3</div>
    	<div>.col-md-3 .col-md-pull-9</div>
    </div>
    

Адаптивные служебные классы Bootstrap

  1. Используйте следующие адаптивные классы, чтобы управлять видимостью элементов на устройствах, чьи размеры экранов подпадают под определенный тип. В версии v3.2.0, классы .visible-*-* для каждого контрольного размера представляются в трех вариантах, по одному на каждое значение свойства CSS display : inline, block и inline-block.

    КлассОписание
    .visible-xs-*
    Делает элемент видимым только для очень маленьких устройств с шириной экрана меньше 768px. Скрыт для других.
    .visible-sm-*
    Делает элемент видимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Скрыт для других.
    .visible-md-*
    Делает элемент видимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Скрыт для других.
    .visible-lg-*
    Делает элемент видимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Скрыт для других.
  2. Подобным образом можно использовать служебные классы для скрытия, чтобы прятать элементы на определенных устройствах:

    КлассОписание
    .hidden-xs
    Делает элемент невидимым только для очень маленьких устройств с шириной экрана меньше 768px. Видим для других.
    .hidden-sm
    Делает элемент невидимым только для маленьких устройств с шириной экрана больше или равной 768px (т.е. ≥768px), но меньше 992px. Видимый для других.
    .hidden-md
    Делает элемент невидимым только для средних устройств с шириной экрана больше или равной 992px (т.е. ≥992px), но меньше 1200px. Видимый для других.
    .hidden-lg
    Делает элемент невидимым только для больших устройств с шириной экрана больше или равной 1200px (т.е. ≥1200px). Видимый для других.
  3. Можно использовать следующие служебные классы, чтобы показать или убрать определенные элементы при печати страницы.

    .visible-print-block
    Делает невидимыми блочные элементы (block) при предпросмотре страницы в браузере для печати.
    .visible-print-inline
    Делает невидимыми строчные элементы (inline) при предпросмотре страницы в браузере для печати.
    .visible-print-inline-block
    Делает невидимыми строчно-блочные элементы (inline-block) при предпросмотре страницы в браузере для печати.
    .hidden-print
    Скрывает элементы, которые видимы в браузере, при печати.

О SchoolsW3



Перевод c сайта W3schools на русский язык

SchoolsW3 сайт для веб разработчиков


Веб разработчик: Щипунов Андрей Леонидович


W3schools на русском языке


Сайт SchoolsW3, для веб разработчиков, с инструкциями, ссылками на веб языки разработки, такие как HTML, CSS, JavaScript, PHP, SQL, W3.CSS и Bootstrap, охватывает большинство php веб программирования.

Сайт получил свое название от Всемирной паутины (W3),он не связан с W3C.

W3schools был первоначально создан в 1998 году Refsnes Data, норвежская разработка программного обеспечения и консалтинговая компания.


W3schools перевод с английского

SchoolsW3 фокусируется на простоте.

SchoolsW3 легок в практике и онлайн обучении.

SchoolsW3 использует простое объяснение кода с простыми иллюстрациями того, как его использовать.

SchoolsW3 учебники начинаются с базового уровня вплоть до профессионального.


Попробуйте Сами

SchoolsW3 представляет тысячи примеров кода.

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


SchoolsW3 бесплатные веб учебники

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


Вы можете помочь

Очень много времени уходит, чтобы сделать на SchoolsW3 точный и правильный перевод.

Если вы обнаружили ошибку или нерабочую ссылку, просьба сообщить о ней.

Используйте ссылку «сообщить об ошибке» внизу каждой страницы.


Добавить ссылку на нас

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

Чтобы добавить простую текстовую ссылку, вставьте следующий HTML код на вашем сайте:

<a href=»https://schoolsw3.com/»>SchoolsW3.com</a>

Если вы хотите, чтобы связать с баннером, Пожалуйста, выберите из: Баннеры и кнопки


Демография

Происхождение Процент
Азия 38 %
Америка 30 %
Европа 28 %
Африка 3 %
Океания 2 %

Источник: Google Аналитик


Создание темы на основе Bootstrap 3 для Drupal 7

Внимание! Данная статья несколько устарела. В новой версии темы Bootstrap иная структура папок. О новом принципе создания субтемы можно прочесть в статье  Создание темы на основе Bootstrap 3 для Drupal 7. Обновление.

Небольшой гайд по созданию темы на основе фреймворка Bootstrap 3. Фреймворк чудесно масштабируемый и значительно упрощает создание темы. Создание темы для Drupal 7 состоит из следующих этапов:

  1. Установка Bootstrap
  2. Установка модуля jquery update
  3. Создание субтемы 
  4. Настройка субтемы
  5. Выбор типа подключения Bootstrap
  6. Компиляция LESS файлов
  7. Подключение субтемы

1. Установка Bootstrap

Скачать тему оформления Bootstrap. Тема должна располагаться \sites\all\themes​\. Тему активировать не нужно.

2. Установить модуль

jQuery Update.

Указать  в настройках следующие версии jquery:

3.Создание субтемы.

Внутри темы Bootstrap находиться папка bootstrap_subtheme. Нужно её скопировать в папку с темами \sites\all\themes​\. Это и будет заготовкой для субтемы.

4. Настройка субтемы.

Переименовываем bootstrap_subtheme например в bootstrap_drupal. Также переименовываем файл bootstrap_subtheme.info.starterkit в bootstrap_drupal.info. Редактируем его следующим образом.

name = Bootstrap drupal
description = A Bootstrap Sub-theme.
core = 7.x
base theme = bootstrap

5. Выбор типа подключения Bootstrap

Имеются два способа подключения Bootstrap:

  1. Использование CDN
  2. Локальные файлы

Использование CDN

Раскомментировать все строки под заголовком «METHOD 2» в .info файле. Файл для css находится по адресу bootstrap_drupal /css/style.css. Плюс этого способа — это простота, а минус — придётся перезаписывать все правила, которые не понадобятся. По умолчанию будет подгружено много библиотек. После окончания проекта, для ускорения работы сайта, лишние стили и скрипты желательно отключить.

exclude[css][] = 'modules/book/book.css'
exclude[js][]  = 'bootstrap/js/popover.js

Использование локальных файлов. 

Раскомментировать следующие строки:

 scripts[] = 'bootstrap/js/affix.js'
 scripts[] = 'bootstrap/js/alert.js'
 scripts[] = 'bootstrap/js/button.js'
 scripts[] = 'bootstrap/js/carousel.js'
 scripts[] = 'bootstrap/js/collapse.js'
 scripts[] = 'bootstrap/js/dropdown.js'
 scripts[] = 'bootstrap/js/modal.js'
 scripts[] = 'bootstrap/js/tooltip.js'
 scripts[] = 'bootstrap/js/popover.js'
 scripts[] = 'bootstrap/js/scrollspy.js'
 scripts[] = 'bootstrap/js/tab.js'
 scripts[] = 'bootstrap/js/transition.js'

Cкачать дистрибутив Bootstrap sourse и распаковать в папку с темой. Не забываем папку переименовать в bootstrap. Файлы должны расположиться так:

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

6. Компиляция LESS файлов

Компилировать файлы LESS можно программой WinLess. Работать с ней просто. Скачать, установить и добавить папку LESS для компиляции.

7. Подключение субтемы

Если был выбран метод с использованием CDN — субтема готова к работе и дальнейшей темизации.

Если был выбран метод с локальными файлами — нужно в настройках темы отключить выбор BootstrapCDN version.

Субтема создана! 

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

Я ещё использую модуль Views Bootstrap он добавляет во views несколько форматов. Все они упрощают использование «фишек» фреймворка.

Напоследок, полезные ссылки по использование Bootstrapa:

http://getbootstrap.com/components/ — компоненты фреймворка на английском;

http://bootstrap-3.ru/components.php — компоненты фреймворка на русском;

http://getbootstrap.com/customize/  — кастомайзер компонентов, очень удобно собирать под конкретный проект.

 

UIkit 3 на русском. Уроки, примеры, разметка.

Представляем вашему вниманию UIkit 3 — новую версию легкого модульного front-end фреймворка для разработки быстрых и мощных web-интерфейсов. В версии 3 были улучшены и расширены многие компоненты и функции, которых не было и нет в других фреймворках. Любите Bootstrap? Ознакомьтесь со списком ниже и сравните.

Что нового в UIkit 3? В чем отличия от UIkit 2?

Прощай, JQuery!

Жизнь без JQuery возможна! UIkit 3 избавился от нее. Совсем. К примеру, на этом сайте ее нет. Естественно, все будет работать быстрее, так как размер jQuery огромен, при этом используется малая часть кода.

Новый UIkit позволяет избавиться не только от JQuery, но и связанных сторонних библиотек, например, Fancybox, Owl Carousel, Masonry, WOW, ScrollSpy, Skrollr, параллаксы и так далее. Вот такое масштабное изменение JavaScript. Просто подключите UIkit на вашу страницу и убедитесь сами. Для полного счастья свяжите с Vue.js или React 😉

SVG, анимация, параллакс

Вставляйте SVG в разметку различными способами, стилизуйте и анимируйте.

Сетка

Новая сетка, как и ранее, использует flexbox для создания динамических и гибких макетов. Она работает в связке с новым компонентом ширины, включающим дополнительные параметры. Можно равномерно распределять столбцы, автоматически применять размеры содержимого или увеличить ширину столбца, чтобы заполнить оставшееся пространство. Режимы, разумеется, комбинируются. Здесь не нужно вечно вставлять «row» и пустые блоки. При использовании атрибута uk-grid необходимый класс проставляется автоматически, а система сетки заботится о полях, переносах и отступах с помощью JavaScript.

Очень очень очень много разного текста

Наведите

Идет бычок, качается, вздыхает на ходу: ох, доска кончается, сейчас я упаду!

Masonry

Сетка Masonry в UIkit 3 стала частью компонента Grid. Элементы сетки можно упорядочивать в многостолбцовой схеме без пропусков, независимо от того, имеют ли ячейки сетки другую высоту. У него одна главная задача — он устраняет пробелы. Никакой магии, никакого абсолютного позициионирования! Просто добавьте uk-grid = "masonry: true" в любую сетку, чтобы включить эффект Masonry.

С помощью встроенного Lazy Load из компонента Изображения можно сделать динамическую фотогалерею.

Компонент Иконки

Компонент Иконки поставляется с собственной системой значков SVG, теперь это не Font Awesome. Он динамически внедряет иконки SVG, которые можно легко стилизовать с помощью CSS. Все иконки были созданы по индивидуальному заказу и содержат много красивых элементов практически для каждого варианта использования. Есть возможность добавления собственных иконок.

  • home
  • sign-in
  • sign-out
  • user
  • users
  • lock
  • unlock
  • comments
  • hashtag
  • tag
  • cart
  • credit-card
  • mail
  • receiver
  • print
  • search
  • location
  • bookmark
  • settings
  • cog
  • nut
Компонент Инверсия

Важный элемент обновленного дизайна UIkit. Инвертирует большинство других компонентов UIkit 3 для любого фона — темного или светлого. Больше не нужно писать собственные стили при отображении элементов на разных фонах. Просто добавьте класс .uk-light для темного фона в светлом стиле или .uk-dark для светлого фона в темном стиле.

Light

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

Я — кнопка

Dark

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

Я — кнопка
Drag and Drop

Компонент позволяет сортировать и перетаскивать объекты. Как на страницах аудиозаписей в соцсетях.

  • Элемент 1

  • Элемент 2

  • Элемент 3

  • Элемент 4

  • Элемент 5

  • Элемент 6

  • Элемент 7

  • Элемент 8

Компонент Навигационная панель

Был расширен новый режим переключения (клик и наведение), добавлен прозрачный вариант, который также можно использовать с компонентом Инверсия. Этот стиль выглядит великолепно на любом фоне. Новый режим dropbar отображает выпадающие списки внутри полноэкранного фонового контейнера.

Фильтр + Masonry

Фильтруйте и сортируйте элементы в многостолбцовых макетах по категории, дате или другим метаданным. В UIkit 3 компонент Фильтр работает отдельно и больше не привязан к сетке. Любой макет может быть отфильтрован или отсортирован независимо от того, как элементы расположены. Он работает с эффектами Masonry и параллакса, примененными к сетке. Элементы исчезают и перемещаются с плавными переходами между различными состояниями фильтрации и сортировки.

Компонент Карточки

Это новый централизованный способ представления различных видов контента. Он заменяет старый компонент Панели.

Default

Системы неслыханно быстрые ошибаются неслыханно быстро.

Primary

Системы неслыханно быстрые ошибаются неслыханно быстро.

Secondary

Системы неслыханно быстрые ошибаются неслыханно быстро.

Компоненты Drop и Dropdown

Компоненты Drop & Dropdown с их повышенной гибкостью позволяют отображать что угодно. Для определения поведения доступны дополнительные параметры, например выравнивание границ для выравнивания выпадающего списка относительно любого выбранного элемента на странице.

По ширине

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

По центру

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Новый слайдер

Новый компонент Слайдер позволяет отображать несколько элементов контента одновременно. Вы можете переключаться по ряду объектов, плавно раскрывая новые. Слайдер был написан с нуля, разделяя его кодовую базу с компонентом Слайд-шоу. Благодаря этой модульности UIkit JavaScript увеличил размер файла всего на 2 КБ (gzip), включая компонент Слайдер и все другие улучшения. И помните, все это работает без зависимости от jQuery! 🙂 Прокручивается стрелками, точечной навигацией, пальцами или мышкой.

  • Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

  • Заголовок

    Когда я вижу, как ты верстаешь, малыш, ты меня пугаешь.

Компонент Offcanvas

Компонент Offcanvas был полностью переработан, добавлены новые режимы анимации с возможностью реверса.

Slide Push Reveal None

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Заголовок

Работает машина, заменяющая сто человек, а вокруг стоят сто человек и смотрят, как она работает.

Компонент Формы

В UIkit 3 все ранее использующиеся компоненты форм объединили в один. Рассмотрите простой пример создания формы входа UIkit, включающий сразу несколько новых модульных компонентов: форма, наложение, модальные окна, высота, кнопки, инверсия, отступы, позиционирование.

Наложение, Позиции и Переходы

Были разделены, чтобы их можно было использовать вместе с другими компонентами.

Top

Bottom

Left

Right

Margin & Padding

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

Блочный элемент

Toggle

Компонент Toggle получил большую функциональность, например, переключение классов в зависимости от размера области просмотра, даже на самого себя.

Toggle

Первая анимация

Компонент Фон

Включает в себя красивые параметры фона и поставляется с несколькими режимами отображения и смешивания.

Изображения

Компонент Изображения ускоряет время загрузки страницы и уменьшает трафик, загружая картинки лишь тогда, когда они входят в область просмотра. Это просто находка для желающих приблизить Page Speed к заветной сотне. Вот как это работает:

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

Эта страница лопнет, если мы перечислим все новинки. Поэтому здесь лишь некоторые из новых дополнений UIkit 3.

UIkit на русском языке. Документация, примеры, уроки.

Начало работы · Bootstrap

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

Bootstrap

Скомпилированные и минимизированные CSS, JavaScript и шрифты. Никакая документация или исходные файлы не включены.

Загрузить Bootstrap

Исходный код

Source Less, файлы JavaScript и шрифтов, а также наши документы. Требуется компилятор Less и некоторая настройка.

Загрузить исходный код

Bootstrap CDN

Ребята из MaxCDN любезно предоставляют поддержку CDN для CSS и JavaScript Bootstrap. Просто используйте эти ссылки Bootstrap CDN.

  


      
    
  
  
    

Привет, мир!

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

Получите исходный код для каждого примера ниже, загрузив репозиторий Bootstrap.Примеры можно найти в каталоге docs / examples / .

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

Стартовый шаблон

Только основы: скомпилированные CSS и JavaScript вместе с контейнером.

Тема Bootstrap

Загрузите дополнительную тему Bootstrap для визуального улучшения работы.

Сетки

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

Jumbotron

Создайте вокруг jumbotron с навигационной панелью и некоторыми основными столбцами сетки.

Узкий jumbotron

Создайте более настраиваемую страницу, сузив контейнер и jumbotron по умолчанию.

Панель навигации в действии

Панель навигации

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

Статическая верхняя панель навигации

Супер базовый шаблон со статической верхней панелью навигации с некоторым дополнительным контентом.

Фиксированная панель навигации

Супер базовый шаблон с фиксированной верхней панелью навигации и некоторым дополнительным контентом.

Пользовательские компоненты

Обложка

Одностраничный шаблон для создания простых и красивых домашних страниц.

Карусель

Настройте панель навигации и карусель, а затем добавьте новые компоненты.

Блог

Простой макет блога из двух столбцов с настраиваемой навигацией, заголовком и типом.

Панель мониторинга

Базовая структура панели администратора с фиксированной боковой панелью и панелью навигации.

Страница входа в систему

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

Прикрепленный нижний колонтитул

Прикрепите нижний колонтитул к нижней части области просмотра, если содержимое короче его.

Прикрепленный нижний колонтитул с навигационной панелью

Прикрепите нижний колонтитул к нижней части области просмотра с фиксированной навигационной панелью вверху.

Эксперименты

Не отвечает Bootstrap

Легко отключить отзывчивость Bootstrap согласно нашим документам.

Off-canvas

Создайте переключаемое меню навигации вне холста для использования с Bootstrap.

Bootlint - это официальный инструмент для линтера Bootstrap HTML. Он автоматически проверяет несколько распространенных ошибок HTML на веб-страницах, которые используют Bootstrap довольно «ванильным» способом. Компоненты / виджеты Vanilla Bootstrap требуют, чтобы их части DOM соответствовали определенным структурам. Bootlint проверяет, что экземпляры компонентов Bootstrap имеют правильно структурированный HTML. Подумайте о добавлении Bootlint в ваш набор инструментов для веб-разработки Bootstrap, чтобы ни одна из распространенных ошибок не замедлила разработку вашего проекта.

Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

Вы также можете подписаться на @getbootstrap в Твиттере, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.

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

Действия по отключению отзывчивости страницы

  1. Пропустите область просмотра , упомянутую в документах CSS.
  2. Замените ширину на .контейнер для каждого уровня сетки с единственной шириной, например width: 970px! important; Убедитесь, что это идет после CSS Bootstrap по умолчанию. При желании вы можете избежать ! Important с помощью медиа-запросов или какого-нибудь селектора.
  3. При использовании панелей навигации удалите все действия при сворачивании и раскрытии панели навигации.
  4. Для макетов сетки используйте классы .col-xs- * в дополнение или вместо средних / больших. Не волнуйтесь, очень маленькая сетка устройства масштабируется для всех разрешений.

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

Шаблон начальной загрузки с отключенной отзывчивостью

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

Посмотреть неотвечающий пример

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

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

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

Альтернативные браузеры, которые используют последнюю версию WebKit, Blink или Gecko, напрямую или через API веб-представления платформы, явно не поддерживаются. Однако Bootstrap должен (в большинстве случаев) правильно отображаться и работать и в этих браузерах. Более конкретная информация о поддержке представлена ​​ниже.

Мобильные устройства

Вообще говоря, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой основной платформы.Обратите внимание, что прокси-браузеры (такие как Opera Mini, режим Opera Mobile Turbo, UC Browser Mini, Amazon Silk) не поддерживаются.

Поддерживается Поддерживается Поддерживается
Chrome Firefox Safari
Android Поддерживается Поддерживается N / A
Настольные браузеры

Точно так же поддерживаются последние версии большинства настольных браузеров.

Chrome Firefox Internet Explorer Opera Safari
Мак Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

В Windows мы поддерживаем Internet Explorer 8-11 .

Для Firefox, помимо последней нормальной стабильной версии, мы также поддерживаем последнюю версию Firefox с расширенной поддержкой (ESR).

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

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

Internet Explorer 8 и 9

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

Feature Internet Explorer 8 Internet Explorer 9
border-radius Не поддерживается Поддерживается
box-shadow Поддерживается
преобразование Не поддерживается Поддерживается, с префиксом -ms
переход Не поддерживается

2 заполнитель
Не поддерживается Могу ли я использовать... Подробнее о поддержке браузером функций CSS3 и HTML5.

Internet Explorer 8 и Respond.js

Остерегайтесь следующих предупреждений при использовании Respond.js в вашей среде разработки и производства для Internet Explorer 8.

Respond.js и междоменный CSS

Использование Respond.js с CSS размещенный в другом (под) домене (например, в CDN), требует дополнительной настройки. Подробности см. В документации Respond.js.

Respond.js и

файл: //

В соответствии с правилами безопасности браузера, Respond.js не работает со страницами, просматриваемыми по протоколу file: // (например, при открытии локального HTML-файла). Чтобы протестировать адаптивные функции в IE8, просматривайте свои страницы через HTTP (S). Подробности см. В документации Respond.js.

Respond.js и

@import

Respond.js не работает с CSS, на который ссылается @import . В частности, известно, что некоторые конфигурации Drupal используют @import . Подробности см. В документации Respond.js.

Internet Explorer 8 и размер окна

IE8 не полностью поддерживает размер окна : border-box; в сочетании с min-width , max-width , min-height или max-height .По этой причине, начиная с версии 3.0.1, мы больше не используем max-width на .container s.

Internet Explorer 8 и @ font-face

IE8 имеет некоторые проблемы с @ font-face в сочетании с : до . Bootstrap использует эту комбинацию со своими Glyphicons. Если страница кэшируется и загружается без наведения указателя мыши на окно (т. Е. Нажимает кнопку обновления или загружает что-либо в iframe), то страница отображается до загрузки шрифта. При наведении указателя мыши на страницу (тело) отображаются некоторые значки, а при наведении курсора на остальные значки также отображаются их.Подробности см. В выпуске № 13863.

IE Режимы совместимости

Bootstrap не поддерживается в старых режимах совместимости Internet Explorer. Чтобы убедиться, что вы используете последний режим рендеринга для IE, рассмотрите возможность включения на свои страницы соответствующего тега :

    

Подтвердите режим документа, открыв инструменты отладки: нажмите F12 и отметьте« Режим документа ».

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

См. Этот вопрос StackOverflow для получения дополнительной информации.

Internet Explorer 10 в Windows 8 и Windows Phone 8

Internet Explorer 10 не отличает ширину устройства от ширины области просмотра и, таким образом, неправильно применяет медиа-запросы в CSS Bootstrap. Обычно вы просто добавляете небольшой фрагмент CSS, чтобы исправить это:

  @ -ms-viewport {width: device-width; }  

Однако это не работает для устройств под управлением Windows Phone 8 версий, предшествующих обновлению 3 (a.к.а. GDR3), поскольку он заставляет такие устройства показывать в основном вид рабочего стола вместо узкого «телефонного» вида. Чтобы решить эту проблему, вам необходимо в включить следующие CSS и JavaScript, чтобы обойти ошибку .

  @ -ms-viewport {ширина: ширина-устройства; }
@ -o-viewport {ширина: ширина устройства; }
@viewport {ширина: ширина устройства; }  
  // Copyright 2014-2015 Twitter, Inc.
// Лицензия MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
если (навигатор.userAgent.match (/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement ('стиль')
  msViewportStyle.appendChild (
    document.createTextNode (
      '@ -ms-viewport {width: auto! important}'
    )
  )
  document.querySelector ('голова'). appendChild (msViewportStyle)
}  

Для получения дополнительной информации и рекомендаций по использованию см. Windows Phone 8 и Device-Width.

В качестве предупреждения мы включаем это во всю документацию и примеры Bootstrap в качестве демонстрации.

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

Механизм рендеринга версий Safari до v7.1 для OS X и Safari для iOS v8.0 имели некоторые проблемы с количеством десятичных знаков, используемых в наших классах сетки .col - * - 1 . Итак, если бы у вас было 12 отдельных столбцов сетки, вы бы заметили, что они короче по сравнению с другими рядами столбцов. Помимо обновления Safari / iOS, у вас есть несколько вариантов обходных решений:

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

Модальные окна, панели навигации и виртуальные клавиатуры

Переполнение и прокрутка

Поддержка переполнения : скрытый в элементе весьма ограничен в iOS и Android.С этой целью, когда вы прокручиваете верхнюю или нижнюю часть модального окна в браузерах этих устройств, содержимое начнет прокручиваться. См. Ошибку Chrome № 175502 (исправлена ​​в Chrome v40) и ошибку WebKit № 153852.

Текстовые поля iOS и прокрутка

Начиная с iOS 9.3, в то время как модальное окно открыто, если начальное касание жеста прокрутки находится в границах текстового или