Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Настройка bootstrap: Настройка темы. Начало работы · Bootstrap

On

Настройка bootstrap: Настройка темы. Начало работы · Bootstrap

By alexxlab

Содержание

Настройка. Настройка · Bootstrap v5.0.2

Обзор

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

Наши два наиболее предпочтительных метода:

  1. Использование Bootstrap через систему управления пакетами для использования и расширения наших исходныех файлов.

  2. Использоввание скомпилированныех файлов дистрибутива Bootstrap или jsDelivr для добавления или переопределения стилей Bootstrap.

Хотя мы здесь подробно не рассказаваем о том, как использовать каждый менеджер пакетов, мы можем дать некоторые рекомендации по использованию Bootstrap с вашим собственным компилятором Sass.

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

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

CSP и встроенные SVG

Некоторые компоненты Bootstrap включают встроенные SVG-файлы в наш CSS, чтобы согласованно и легко стилизовать компоненты в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через background-image), поэтому Вы можете более тщательно изучить свои варианты.

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

Настройка Bootstrap: выбор нужных компонентов

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

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

Зачем настраивать Bootstrap

Это очень хороший вопрос, поскольку вы же можете просто скачать целиком весь архив, не настраивая его, и работать с ним. Есть две причины: во-первых, скорее всего вам не понадобятся все компоненты Bootstrap, а, во-вторых, размер всего фреймворка не такой уж незначительный (даже в сжатом виде) — 525 Кб. Плюс 95 Кб весит jQuery, потому что без него фреймворк не будет работать. Такую роскошь не может позволить себе ни один фронтенд разработчик, поэтому вам нужно убрать все лишнее. В любом случае всегда удаляйте ненужные компоненты.

Выбор компонентов

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

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

Базовый CSS (Common CSS)

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

Стили для печати (print media styles)

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

@media print {
/* ваши стили */
}

@media print {

  /* ваши стили */

}

Типографика (Typography)

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

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

Вот как можно изменить простой текст без использования дополнительных стилей:

Код (Code)

Форматирование кода на страницах. Конечно, здесь не будет подсветки синтаксиса. Для этого нужно будет использовать сторонний плагин (не имеющий никакого отношения к Bootstrap). Но фреймворк позволит вам отличать код от обычного текста с помощью использования тегов code, pre или kdb.

Сеточная система (Grid system)

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

Давайте посмотрим на пример того, как это может выглядеть:

Таблицы (Tables)

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

После простого добавления Bootstrap, без внесения каких-либо изменений в HTML, таблица будет выглядеть вот так:

Формы (Forms)

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

Отметьте чекбокс «Форма» («Form»), если вам предстоит создание формы.

Кнопки (Buttons)

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

Утилиты для отзывчивого дизайна (Responsive utilities)

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

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

Компоненты (Components)

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

1. Глиф-иконки (Glyphicons). Иконочный шрифт. Весит около 250 Кб и редко используется. Поэтому если он не нужен, отключите его.

2. Группы кнопок (Button groups). Блоки, состоящие из пары кнопок.

3.Группы полей ввода (Input groups). Расширение для текстовых блоков и полей, например, «Имя пользователя» (Username):

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

4. Навигация (Navs). Навигация по табам (вкладкам). Для использования нужно подключить js-модуль.

5. Навигационная панель (Navbar). Навигация для главного меню; может быть фиксированной, светлой или темной.

6. «Хлебные крошки» (Breadcrumbs). Позволяет пользователям отслеживать местонахождение на сайте.

7. Постраничная навигация (Pagination). Отображает количество страниц на веб-сайте. Особенно полезно для блогов.

8. Переключатель страниц (Pager). Кнопки «вперед» и «назад».

9. Этикетки (Labels). Имеется 6 типов:

10. Бейджи (Badges). Используются, например, для отображения количества непрочитанных сообщений.

11. Приветственный блок (Jumbotron). Большой блок с вступительным текстом. Обычно используется на промо-сайтах и содержит короткое описание проекта.

12. Миниатюры (Thumbnails). Отвечает за отображение уменьшенных вариантов изображений.

13. Предупреждения (Alerts). Указывают на успех, ошибку, информацию или подсказку.

14. Индикатор процесса (Progress bars). Процесс выполнения отображается в процентах. Дополнительно можно применять анимацию и добавлять полосатый фон.

15. Медиа объекты (Media items). Форматирование блоков с комментариями, твитами и т.д. Это обычно списки с вложенными элементами, у которых может отличаться отступ слева, как у традиционных древовидных комментариев.

16. Группы списков (List groups). Форматирование списков с дополнительными возможностями: сноски, ссылки, примечания, уведомления (смотрите «этикетки» («labels»)).

17.Панели (Panels). Блоки с хедером, основным контентом и футером. Могут использоваться для усовершенствованных уведомлений, а также для элементов управления или форм.

18. Встраивание отзывчивых элементов (Responsive embed). «Отзывчивые» объекты могут расширяться и подстраиваться под разные размеры экрана для отображения видео в нужных пропорциях и без непосредственного указания размера.

19. Вдавленные элементы (Wells). Блоки с подсказками, альтернативным оформлением для цитат и т.д.

20. Иконка закрытия (Close icon). Предназначение должно быть понятно по названию.

Компоненты JavaScript

Bootstrap расширяет возможности динамических функций. Работа данного раздела фреймворка основывается на jQuery, и он обязательно должен быть подключен к bootstrap.min.js. Состоит данный раздел из следующих компонентов:

1. Анимация компонентов (Component animations) (для JS). Плавные переходы, анимация.

2. Выпадающие элементы (Dropdowns). Выпадающие списки.

3. Всплывающие подсказки (Tooltips). Небольшие появляющиеся подсказки.

4. Всплывающие элементы (Popovers). По сути такие же всплывающие подсказки, к которым вы можете добавить динамический контент, хедер и основной текст:

5. Модальные окна (Modals). Всплывающие окна. Вы можете изменять их размеры, добавлять заголовок, основной текст, футер, изменять их так, как вам захочется. По умолчанию они выглядят так:

6. Карусель (Carousel). Простой слайдер с выбором анимации.

Настройка переменных

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

Создайте ваш файл style.css и уже в нем определяйте стили, которые «перезапишут» стили по умолчанию.

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

Скачивание

После того как вы закончите с изменением настроек, нажмите на кнопку «Компилировать и скачать» («Compile and download»). В загруженном архиве у нас будут содержаться только выбранные нами элементы. Для сравнения: небольшой проект использует лишь какую-то часть функционала, поэтому размер фреймворка очень легко уменьшить с 600 Кб до 100 Кб. Полученные в результате файлы можно сохранить в папке с проектом, а затем подключить bootstrap.min.css и (если нужно) bootstrap.min.js.

Источник: //basicuse.net/

Редакция: Команда webformyself.

Фреймворк Bootstrap 5. Быстрый старт

Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Настройка · Bootstrap v5.0

Обзор

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

Два наших предпочтительных метода:

  1. Использование Bootstrap через менеджер пакетов, чтобы Вы могли использовать и расширять наши исходные файлы.
  2. Использование скомпилированных файлов дистрибутива Bootstrap или jsDelivr, чтобы Вы могли добавлять или переопределять стили Bootstrap.

Хотя мы не можем здесь подробно описывать, как использовать каждый менеджер пакетов, мы можем дать некоторые рекомендации по использованию Bootstrap с Вашим собственным компилятором Sass.

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

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

CSP и встроенные SVG

Некоторые компоненты Bootstrap включают встроенные SVG-файлы в наш CSS, чтобы согласованно и легко стилизовать компоненты в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через background-image), поэтому Вы можете более тщательно изучить свои варианты.

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

Bootstrap: что это такое и как его установить

Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.

Что нужно знать о Bootstrap перед началом работы

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

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

Какую версию Bootstrap выбрать?

Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает, что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11. 

В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.

В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.

  • В пятой версии не будет поддержки Internet Explorer. 

  • Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.

Читайте также

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

  • Подключить компилированные файлы c помощью BootstrapCDN.

  • Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.

  • Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров. 

  • Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

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

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

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:


<!DOCTYPE html>

<html lang="ru">

<head>

     <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Эта ссылка загружает с CDN все необходимые файлы Bootstrap -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Перед закрывающим тегом <body> подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты  -->     

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous" ></script>

</body>

</html>

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js. 

В папке css — файлы стилей. 

  • bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.

  • bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.

  • bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot.min.css — минифицированная версия.

В папке js — файлы для работы JavaScript.

  • bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.

  • bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS. 

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:


<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/bootstrap.css" >

</head>

<body>

    <h2>Привет, мир!</h2>

    <!-- Сначала подключаем библиотеку JQuery, затем — Bootstrap JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="js/bootstrap.js"></script>    

</body>

</html>

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

Начинаем верстать с помощью Bootstrap

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

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

Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно. 

Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента. 

Изначально карусель выглядит вот так.

Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править. 

Находим в коде карусель. Вот она: 


<div data-ride="carousel">

Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами. 

Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.

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

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

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

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

Bootstrap Sass – установка и настройка

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

В этой статье я покажу вам, как конфигурировать и настраивать Bootstrap Sass.

Установка

Есть несколько вариантов установки Bootstrap-sass.

Загрузка

Вы можете скачать Bootstrap-sass с сайта. После скачивания вам необходимо распаковать содержимое архива в папку с проектом.

Compass

Если вы используете Compass, то у вас должен быть установлен Ruby. Для установки Bootstrap-sass необходимо ввести в командную строку:

gem install bootstrap-sass

gem install bootstrap-sass

Если у вас есть существующий Compass проект, то необходимо ввести в командную строку:

compass install bootstrap -r bootstrap-sass

Если вы хотите начать новый проект с установки Bootstrap-sass, введите:

compass create my-new-project -r bootstrap-sass —using bootstrap

Bower

Мы можем установить Bootstrap-sass с помощью пакетного менеджера Bower. Для меня это лучший вариант установки.

bower install bootstrap-sass

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

После того как мы установили нужную версию Bootstrap-sass, необходимо настроить проект. Первое, что необходимо сделать – создать папки для стилей css и sass (если вы используете Compass, то папки уже созданы). Папка sass содержит .scss файлы которые будут компилироваться в стили .css. Создайте в папке Sass файл style.scss (Compass создает этот файл автоматически).

Файл style.scss используется для импорта компнентов Bootstrap. В файле необходимо прописать следующие строки:

Если вы скачали:

@import «bootstrap-sass-3.3.4/assets/stylesheets/bootstrap»;

@import «bootstrap-sass-3.3.4/assets/stylesheets/bootstrap»;

Установили через Compass:

@import «bootstrap»;

Через Bower:

@import «../bower_components/bootstrap-sass/assets/stylesheets/bootstrap»;

Дальше мы должны найти файл с переменными Bootstrap-sass _variables.scss и скопировать его в нашу папку Sass. Смените имя файла на _customVariables.scss. Символ “_” в начале имени файлов означает, что файл не будет компилироваться. Если вы используете Compass, то можете пропустить этот шаг.

Вы можете импортировать файл _custom.scss, который будет содержать стили вашего проекта. Кто-то предпочитает писать свои стили непосредственно в файле style.scss после импортированных файлов Bootstrap-sass и переменных.

@import «customVariables»;

@import «../bower_components/bootstrap-sass/assets/stylesheets/bootstrap»;
@import «../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass»;
@import «custom»;

Обратите внимание, что мы импортируем файл с нашими переменными _customVariables.scss перед файлами Bootstrap-sass. Дело в том, что все переменные Bootstrap в устанавливаются по умолчанию и, чтобы переопределить их значения, необходимо подключить наши переменные в самом начале.

Работа с переменными

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

//$font-size-base:14px !default;
$font-size-base:20px !default;

//$font-size-base:14px !default;

$font-size-base:20px !default;

Как вы видите, я закомментировал оригинал и написал под ним своё значение.

Имейте в виду, что Bootstrap содержит большое количество переменных. Найти нужные переменные вы сможете в файлах Bootstrap-sass. Например, мне нужно поменять оформление navbar. Я открываю файл _navbar.scss и нахожу в нм переменную отвечающую за цвет навигации.

// Default navbar
.navbar-default {
background-color: $navbar-default-bg;
border-color: $navbar-default-border;

.navbar-brand {
color: $navbar-default-brand-color;
&:hover,
&:focus {
color: $navbar-default-brand-hover-color;
background-color: $navbar-default-brand-hover-bg;
}
}

// Default navbar

.navbar-default {

    background-color: $navbar-default-bg;

    border-color: $navbar-default-border;

 

.navbar-brand {

    color: $navbar-default-brand-color;

    &:hover,

    &:focus {

    color: $navbar-default-brand-hover-color;

    background-color: $navbar-default-brand-hover-bg;

    }

}

Bootstrap 3-Настройка Ширины Устройства — CodeRoad

Я использую Bootstrap 3 и онлайн-инструмент настройки- http://getbootstrap.com/customize/ — для установки определенной ширины устройства, но CSS в пакете, который я загружаю, кажется, отсутствует какая-либо сеточная система.

Я включаю файл bootstrap.css, а вот мой HTML. 

    <div>
        <div>
            <div>
                <div>
                    <div>
                        a
                    </div>
                    <div>
                        a
                    </div>
                    <div>
                        a
                    </div>
                    <div>
                        a
                    </div>
                </div>
            </div>
            <div>
                right sidebar
            </div>
        </div>
    </div>

twitter-bootstrap

twitter-bootstrap-3

Поделиться

Источник


Pete    

20 декабря 2013 в 13:02

3 ответа

  • использование ширины устройства в запросе media

    Дисплей с двумя колонками, левая колонка имеет важные вещи — правая колонка не так важна. То, что я хочу на мобильном телефоне с шириной устройства меньше X, — это — левый столбец имеет ширину, равную ширине устройства , правый столбец имеет ширину, равную 50% ширины устройства или 270px, в…

  • настройка bootstrap 3 меньше вопросов о структуре проекта

    Я прочитал следующую статью, в которой описывается хорошая структура проекта Bootstrap Less, позволяющая настраивать bootstrap без редактирования исходного кода. Но это для Bootstrap 2 я думаю: http://coding.smashingmagazine.com/2013/03/12/настройка-bootstrap/ . Мне очень нравится эта статья,…

Поделиться


Evgeny Samsonov    

20 декабря 2013 в 13:05


3

Сейчас сетевая система действительно изменилась. Классы span-* взяты из bootstrap 2.
Вы должны использовать сейчас:

  • .col-xs-* (Телефоны (<768px)
  • .col-sm-* (≥768px)
  • .col-md-* Рабочих стола (≥992px)
  • .col-lg-* (≥1200px).

http://getbootstrap.com/css/#сетка-вступление

Поделиться


Getz    

20 декабря 2013 в 13:07


1

Вы установили правильные «точки останова media запросов»? Если вы считаете, что Zip неверно, проверьте его с помощью Merge/Diff-Tool.

Поделиться


RobSky    

20 декабря 2013 в 13:11

  • Bootstrap 3: Есть ли способ иметь контейнер фиксированной ширины только для очень маленьких размеров устройств?

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

  • Настройка видового экрана, начального масштаба и ширины устройства не изменяет размер до ширины устройства

    http://www.designbeeadvertising.com / Независимо от того, как я устанавливаю мета-видовой экран, независимо от того, как я его изменяю и изменяю, сайт все равно выходит за пределы ширины устройства на Android/iPhone/iPad. Я продолжаю рекомендовать клиенту мобильный адаптивный сайт, но они хотят,…

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

Bootstrap 3.x + Сайт Фиксированной Ширины

Здравствуйте Коллеги Разработчики, Я собираюсь начать новый проект, где наш клиент базируется US. Пройдя через требования и рекомендации по дизайну, я вижу, что они ищут веб-сайт фиксированной…

Bootstrap 3-цветные блоки полной ширины

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

Как создать выпадающее меню полной ширины вне контейнера в Bootstrap 3?

Как создать выпадающее меню полной ширины вне навигационного контейнера? Я хочу создать выпадающее меню для нескольких элементов списка, как starbucks.nl в Bootstrap 3.

использование ширины устройства в запросе media

Дисплей с двумя колонками, левая колонка имеет важные вещи — правая колонка не так важна. То, что я хочу на мобильном телефоне с шириной устройства меньше X, — это — левый столбец имеет ширину,…

настройка bootstrap 3 меньше вопросов о структуре проекта

Я прочитал следующую статью, в которой описывается хорошая структура проекта Bootstrap Less, позволяющая настраивать bootstrap без редактирования исходного кода. Но это для Bootstrap 2 я думаю:…

Bootstrap 3: Есть ли способ иметь контейнер фиксированной ширины только для очень маленьких размеров устройств?

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

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

http://www.designbeeadvertising.com / Независимо от того, как я устанавливаю мета-видовой экран, независимо от того, как я его изменяю и изменяю, сайт все равно выходит за пределы ширины устройства…

Как использовать Bootstrap 3 mixins?

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

android определение ширины устройства

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

Настройка размера шрифта в зависимости от ширины и высоты устройства

В моем приложении я показываю CardView, который имеет textview (название учетной записи). Высота вида карты, которую я вычисляю, основана на ширине устройства. Поскольку я устанавливаю высоту…

Настройка Bootstrap, установленного с npm

Я использую webpack, чтобы потребовать Bootstrap, поэтому я устанавливаю bootstrap с npm, но я также хочу настроить Bootstrap , изменив ‘variables.less’, это вызывает проблему, в следующий раз, когда я обновлю Bootstrap с npm, моя модификация исчезнет, так что же мне делать?

twitter-bootstrap

npm

webpack

Поделиться

Источник


Littlee    

26 августа 2015 в 02:46

2 ответа

  • Установка Bootstrap 4 alpha с NPM

    Как я могу конкретно установить Bootstrap 4 Alpha с помощью NPM. Использование npm install bootstrap устанавливает только текущую версию 3.3.5.

  • Node.js: получить (абсолютный) корневой путь установленного пакета npm

    Задача Я ищу универсальный способ получить (абсолютный) корневой путь установленного пакета npm в Node.js. Проблема Я знаю о require.resolve , но это даст мне точку входа (путь к основному модулю), а не корневой путь пакета. Возьмем в качестве примера bootstrap-sass . Допустим, он установлен…


5

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

Поделиться


Shane Cavaliere    

28 августа 2015 в 07:15


3

Основываясь на ответе Шейна , я сделал это так:

  • скопировать node_modules/bootstrap/less/bootstrap.less в boostrap-custom.less
  • поместите этот файл в исходное дерево , например src/style/bootstrap-custom.less
  • в файле создайте переменную, указывающую на источники less начальной загрузки (которые находятся под node_modules ), и найдите/замените все существующие директивы @import , чтобы указать правильный путь (см. Пример ниже). Настраивайте по мере необходимости.
  • require / import этот файл, где это необходимо: import './style/bootstrap-custom.less';

Пример (адаптировать относительный путь, закомментировать нежелательные модули, выполнить настройки и т. Д): 

/* Custom Bootstrap composer */

@BS: "../../node_modules/bootstrap/less";

// Core variables and mixins
@import "@{BS}/variables.less";
@import "@{BS}/mixins.less";

// Reset and dependencies
@import "@{BS}/normalize.less";
@import "@{BS}/print.less";
// Disabling glyphicons for [reasons]
//@import "@{BS}/glyphicons.less";
[...]

Интерполяция переменных в операторах @import была реализована менее чем в 1.4.0 , поэтому в настоящее время она должна поддерживаться везде.

Это должно пережить (незначительные) обновления для начальной загрузки. Конечно, если они сильно изменят основной файл .less , вам может потребоваться адаптировать или переделать его.

Поделиться


Hugues M.    

12 июня 2017 в 14:35

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

Установка bootstrap с npm завершается неудачно

Я пытаюсь установить bootstrap (LESS) с npm на Debian, но он продолжает терпеть неудачу. Именно это я и делаю: git clone https://github.com/twbs/bootstrap.git npm install Ошибка, которую я получаю,…

Найдите версию установленного пакета npm

Как найти версию установленного пакета node.js/npm ? Это печатает версию самого npm: npm -v <package-name> Это печатает загадочную ошибку: npm version <package-name> Это печатает версию…

что такое npm i bootstrap@next?

Когда я проходил настройку bootstrap в angularjs 2, я наткнулся на следующий шаг в этой ссылке, Как добавить загрузки в angular-интерфейс командной строки проекта npm i bootstrap@next Я понимаю,…

Установка Bootstrap 4 alpha с NPM

Как я могу конкретно установить Bootstrap 4 Alpha с помощью NPM. Использование npm install bootstrap устанавливает только текущую версию 3.3.5.

Node.js: получить (абсолютный) корневой путь установленного пакета npm

Задача Я ищу универсальный способ получить (абсолютный) корневой путь установленного пакета npm в Node.js. Проблема Я знаю о require.resolve , но это даст мне точку входа (путь к основному модулю),…

Использование Bootstrap 3, установленного с npm

Я совсем новичок с npm, так что мне немного трудно. Я установил: npm install bootstrap-jquery —save и npm install jquery —save и в моем .js у меня есть следующее: import ‘jquery’; import…

Импорт Bootstrap с помощью NPM

Итак, я новичок в NPM & Webpack, и у меня есть вопрос о том, как import bootstrap. Прямо сейчас я знаю, что npm install —save bootstrap поместит bootstrap в качестве зависимости в мой…

Bootstrap 4 beta npm зависимость с ng-bootstrap

В бета-версии Bootstrap 4 добавлена новая зависимость-popper.js. Если я обновлю свои зависимости npm в package.json до Bootstrap 4 beta и ng-bootstrap до 1.0.0-beta.5, я получу UNMET PEER DEPENDENCY…

npm установить bootstrap vs загрузить исходный код

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

Использование npm установленного JS/CSS lib в приложении Laravel

На самом деле я экспериментирую с Laravel и npm, и мне трудно использовать Bootstrap Tags Input lib внутри моего приложения (также как и любой другой установленный lib npm). Это кажется довольно…

Начало работы · 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 Поддерживается Поддерживается Н / Д
Настольные браузеры

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

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 для включения поддержки медиа-запросов.

box-shadow

Feature Internet Explorer 8 Internet Explorer 9
border-radius Не поддерживается Поддерживается
Поддерживается
преобразование Не поддерживается Поддерживается, с префиксом -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, в то время как модальное окно открыто, если начальное касание жеста прокрутки находится в границах текстового или

Перепечатка и любое использование материалов сайта допускается только с разрешения автора
© 2008-2024 Evgeniy Krysanov Карта Сайта