Bootstrap twitter 4: Bootstrap · The most popular HTML, CSS, and JS library in the world.

Twitter Bootstrap 4: как предотвратить появление пробелов в границе при использовании поля между двумя строками?

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

Пожалуйста, взгляните на выписку из кода:

<div>
    <div>Name</div>
    <div>Alice</div>
</div>
<div>
    <div>Surname</div>
    <div>Smith</div>
</div>

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

Каковы возможные пути решения этой проблемы?

html

twitter-bootstrap

Поделиться

Источник

alexalok    

24 мая 2019 в 08:02

2 ответа

2

Вы можете использовать класс от pt-3 до inner col внутри строки для заполнения сверху

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div>
  <div>
      <div>Name</div>
      <div>Alice</div>
  </div>
  <div>
      <div>Surname</div>
      <div>Smith</div>
  </div>
</div>

Поделиться

Hiren Vaghasiya    

24 мая 2019 в 08:16

1

Используйте заполнение вместо поля:

.p-3 {
  padding: .5rem 0 !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div>
    <div>Name</div>
    <div>Alice</div>
</div>
<div>
    <div>Surname</div>
    <div>Smith</div>
</div>

Поделиться

connexo    

24 мая 2019 в 08:17

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

Twitter-bootstrap таблица Как получить только внешние пограничные линии, а не между строками

У меня есть <table class=table table-condensed> Раньше у меня там был table-bordered , но он дает мне строки между строками. Я просто хочу, чтобы верхняя, нижняя, левая и правая линии были…

Добавление переменной whitespace между двумя строками

Я не использую язык кодирования. Это должно быть прямо regex. Мне нужно добавить переменную длину whitespace между двумя строками. Строка, которую я передаю в regex, имеет количество пробелов в…

Как уменьшить маржу между двумя строками / контейнерами в Twitter Bootstrap?

У меня есть две строки в двух контейнерах, но я не могу понять, как уменьшить нижнее и верхнее поля/отступы, чтобы приблизить содержимое. bottom content — это слишком далеко, и я хотел бы приблизить…

Twitter bootstrap: добавление полей, изображений позиций и пробелов между полями формы

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

Как добавить поля между столбцами twitter bootstrap, не вызывая разрыва сетки?

Я использую Twitter Bootstrap v3.0.3. Мой вопрос относится к прилагаемому скриншоту. Как я могу добавить поля между столбцами, не вызывая падения/обертывания третьего столбца

Twitter Bootstrap: добавление отступов между строками сетки, которые появляются только при стекировании строк

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

Предотвратить появление дополнительных пробелов в fwrite?

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

Как предотвратить активное состояние навигации от создания пространства при масштабировании?

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

В JavaScript, если между двумя строками добавляется несколько пробелов, почему они преобразуются в один пробел во время выполнения кода?

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

Пространство между двумя строками в таблице bootstrap

Как добавить пространство между двумя строками таблицы начальной загрузки? Мне нужно как-то понравиться: ——— | A B | ——— ——— | C D | ——— ——— | E F | ——— Смотрите…

twitter-bootstrap — Можно ли комбинировать классы Bootstrap 4 form-inline и float-sm-right?

Html:

<form>
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

Это из примера с использованием Bootstrap v4.alpha2. (Я уже выяснил, что вместо pull- следует использовать float- 🙁

Но в Bootstrap v4.0.0 это не работает; который я установил с помощью bower.

Какое решение — получить форму на правом краю? Или классы нельзя совмещать?

Я должен сказать: Bootstrap делает вид, что упрощает стилизацию, но для меня это становится все хуже и хуже — столько изменений между версиями 🙁

Изменить: я дам вам весь блок кода:

<nav>
  <a href="#">Navbar</a>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Надеюсь, со всем, совместимым с bootstrap v4.0.0!

2

Ad Rienks

20 Мар 2018 в 17:53

2 ответа

Лучший ответ

Панель навигации Bootstrap 4 — это flexbox, поэтому float не работает для выравнивания. Самый простой способ — использовать автоматические поля, чтобы сдвинуть форму вправо. Просто используйте ml-auto, который есть margin-left:auto; …

https://www.codeply.com/go/Xhdz5MQIDS

<nav>
  <a href="#">Navbar</a>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Связанный вопрос:
Bootstrap 4 выравнивает элементы навигационной панели вправо

11

Zim
20 Мар 2018 в 15:44

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<div>
    <div>
        <div>
            <form>
                <input type="text" placeholder="Search">
                <button type="submit">Search</button>
            </form>
        </div>
    </div>
</div>

5

WebDevBooster
20 Мар 2018 в 14:58

Ответы на вопросы на собеседование Bootstrap (Twitter Bootstrap) (часть 1).

• Что такое Twitter Bootstrap?

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.

• Какие основные преимущества Bootstrap?

Основные преимущества Bootstrap: 

• Экономия времени — Bootstrap позволяет сэкономить время и усилия, используя шаблоны дизайна и классы, и сконцентрироваться на других разработках.
• Высокая скорость — динамичные макеты Bootstrap масштабируются на разные устройства и разрешения экрана без каких-либо изменений в разметке.
• Гармоничный дизайн — все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом.
• Простота в использовании — платформа проста в использовании, пользователь с базовыми знаниями HTML и CSS может начать разработку с Twitter Bootstrap.
• Совместимость с браузерами — Twitter Bootstrap совместим с Mozilla Firefox, Yandex Browser, Google Chrome, Safari, Internet Explorer и Opera.
• Открытое программное обеспечение — Twitter Bootstrap это фреймворк с открытым исходным кодом, который предполагает удобство использования, посредством открытости исходных кодов и бесплатной загрузки.
• Он также поддерживает кастомизацию на веб-основе.

• Что включает в себя пакет Bootstrap?

Bootstrap включает включает в себя:

• Scaffolding — Bootstrap предоставляет базовую структуру с табличной системой Grid System, стилями ссылок, фоном.
• CSS — Bootstrap поставляется с функцией глобальных CSS настроек, основными HTML элементами, имеющими стили и улучшенных с помощью расширяемых классов, и передовой табличной системой.
• Components — Bootstrap  содержит более десятка компонентов многократного использовании, построенных для обеспечения иконографии, выпадающих элементов, навигации, оповещений, всплывающих панелей popovers, и многое другое.
• JavaScript Plugins — Bootstrap содержит более десятка пользовательских подключаемых модулей jQuery. Вы можете легко подключить их все, или по одному.
• Customize — вы можете настроить Bootstrap компоненты, LESS переменные и jQuery плагины, чтобы получить свою собственную версию Bootstrap.

• Какие основные инструменты Bootstrap?

Основные инструменты Bootstrap:

• Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу «.span2» («.col-md-2» в третьей версии фреймворка), который можно использовать в CSS описании документа.
• Шаблоны — фиксированный или резиновый шаблон документа.
• Типографика — описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
• Медиа — представляет некоторое управление изображениями и видео.
• Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.
• Формы — классы для оформления форм и некоторых событий происходящих с ними.
• Навигация — классы оформления для табов, вкладок, страничности, меню и тулбара.
• Алерты — оформление диалоговых окон, подсказок и всплывающих окон

• Что такое отзывчивый или адаптивный дизайн?

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

• Что такое Contextual классы таблицы в Bootstrap?

Contextual классы позволяют изменить цвет фона табличных строк или индивидуальных ячеек:

• .active — применяет цвет при наведении на конкретную строку или ячейку.
• .success — указывает на успешное или положительное действие.
• .warning — указывает предупреждение, что, возможно, потребуется действие.
• .danger — указывает на опасное или потенциально негативное действие.

• Что такое Bootstrap Grid System?

Bootstrap включает в себя отзывчивую, гибкую «сетку», которая надлежащим образом масштабируется до 12 столбцов при увеличении размера устройства или окна просмотра. Она включает в себя предопределенные классы для простых вариантов компоновки, а также мощные сложные классы для генерации более семантических макетов.

• Что такое Bootstrap media запросы?

Медиа запросы (Media Queries)  —  позволяют перемещать, показывать и скрывать контент, основываясь на размере экрана.

• Какие виды контейнеров в Bootstrap вы знаете?

Контейнер является «фундаментом», с которого начинают создавать сетку веб-страницы сайта. На платформе Twitter Bootstrap контейнеры бывают 2 видов:

• Фиксированный контейнер (элемент div с классом «.container»). Он имеет строго определённую ширину для определённого типа устройств. Т.е. для одного устройства контейнер имеет одну ширину, для другого устройства — другое значение ширины. Всего в Bootstrap 3 определено 4 типа устройств:
• xs (смартфоны — ширина контейнера равна ширине рабочей области окна браузера).
• sm (планшеты — 750px).
• md (ноутбуки — 970px).
• lg (персональные компьютеры — 1170px). Позиционируется фиксированный контейнер в горизонтальном направлении по центру, это достигается за счёт CSS свойства «margin: 0 auto».
• Жидкий «текучий» контейнер (элементы div с классом «.fluid-container»). Он имеет ширину, равную ширине рабочей области окна браузера. Т.е. ширина жидкого «текучего» контейнера не является фиксированной, а изменяется при любом изменении ширины рабочей области окна браузера. Сетку сайта, которую проектируют на основе жидкого «текучего» контейнера называют ещё «резиновой».

• Покажите основную табличную структуру в Bootstrap.

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

• Что такое Offset смещение столбцов?

Смещения расстояние между столбцами это полезная функция для более специализированных шаблонов. Она может быть использована, например, чтобы сместить столбцы на дополнительный интервал. «.соl-xs = *» — классы не поддерживают смещения, но они легко копируются с помощью пустой ячейки.

• Как можно упорядочить столбцы в Bootstrap?

Вы можете легко изменить порядок встроенных столбцов с помощью классов-модификаторов «.col-md-push-*» и «.col-md-pull-*» в диапазоне от 1 до 11.

• Какими двума способами вы можете отобразить код в Bootstrap?

Код в Bootstrap вы можете отобразить двумя способами:

• Поместить код в строковый тег <code>.
• Для выделения 2-х и более строк кода используйте тег <pre>. Избегайте использования угловых скобок < и >, для корректного отображения фрагментов кода. Всегда используйте теги <pre> как можно левее в редакторе кода, так как внутри тега <pre> сохраняются все отступы и пробелы.

• Как сделать изображения responsive(отзывчивым)?

Bootstrap 3 позволяет сделать изображения отзывчивыми путем добавления класса «. img-responsive» в  тег <img>. Этот класс применяет «max-width: 100%;» и «height: auto;» к изображению, так что изображение красиво масштабируется относительно родительского элемента.

• Какие основные этапы создания формы в Bootstrap?

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

• Указать вид формы. В Bootstrap 3 различают следующие виды форм: вертикальная (без добавления класса), горизонтальная (.form-horizontal) и в одну строку (.form-inline).
• Добавить к необходимым текстовым элементам управления <input>, <textarea>, <select> класс «.form-control», чтобы установить им ширину, равную 100% (всю доступную ширину родительского элемента).
• Поместить каждую надпись (<label>) и элемент управления в контейнер <div>…</div> с классом «.form-group». Это необходимо сделать, чтобы задать для элементов в форме оптимальные отступы.

• В чом разница между вертикальною и горизонтальной формой?

Вертикальная форма — это макет формы, в которой её элементы располагаются вертикально, т.е. один под другим. Данная форма создаётся без добавления класса к элементу формы (<form>). Метки и элементы управления формы необходимо размещать в блоке с классом «.form-group».
Горизонтальная форма — это форма, в которой надписи и элементы управления находящиеся в одной группе (<div>…</div>) располагаются на одной строке.

• Объясните типографику и ссылки в Bootstrap.

Bootstrap устанавливает основной глобальный фон, типографику и стили ссылок.

• Основной глобальный фон — устанавливает «background-color: #fff» в элементе <body>.
• Шрифты — используют @font-family-base, @font-size-base, и @line-height-base атрибуты.
• Стили ссылок — устанавливают глобальный цвет ссылки через атрибут @link-color и применяют подчеркивание ссылки исключительно для «:hover».

• Что такое Нормализация(Normalize) в Bootstrap?

Bootstrap использует нормализацию чтобы установить кросс согласованность для браузеров.
Normalize.css это современная, HTML5 — готовая альтернатива CSS. Это небольшой файл CSS, который обеспечивает лучшую кросс-браузерную согласованность в стилях по умолчанию для HTML элементов. 

• Что такое Lead Body Copy?

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

• Какие типы списков поддерживаются в Bootstrap?

Bootstrap поддерживает упорядоченные списки, неупорядоченные и списки определений.

• Упорядоченный список(Ordered lists) — является списком. который отображается в каком-либо последовательном порядке и начинается с цифры.
• Неупорядоченный список(Unordered lists) — является списком, который не имеет никакого определенного порядка и отображается в традиционном стиле с маркерами. Если вы не хотите, чтобы маркеры отображались, вы можете удалить стиль, используя класс «.list-unstyled». Вы также можете разместить все элементы списка в одну строку с помощью класса «.list-inline».
• Списки определений(Definition lists) — в этом типе списка, каждый элемент списка может состоять из <dt> и <dd> элементов. <dt> обозначает термин «определение», и как в словаре, это термин (или словосочетание), которое определяется. Далее, <dd> является определением <dt>. Вы можете разместить термины и описания в <dl> линии бок о бок с использованием класса «dl-horizontal».

• Что такое Glyphicons?

Glyphicons это великолепный набор иконок, которые вы можете использовать вместо изображений в ваших веб-проектах.

• Как использовать Glyphicons?

Чтобы использовать Glyphicons значки, просто используйте следующий код почти в любом месте в вашем коде. Оставьте пространство между значком и текстом для правильного заполнения.
<span class = «glyphicon glyphicon-search»></span>

• Что такое плагин Transition?

Плагин Transition предоставляет простые эффекты перехода, такие как скольжения или затухание в диалоговых окнах.

• Что такое Modal плагин?

Modal это окно предназначенное для отображения на веб-странице некоторого контента посредством модального окна. В Bootstrap 3 и 4, модальное окно (modal) представляет собой контейнер, который визуально отображается над остальным содержимым страницы.
Модальные окна на веб-странице применяется для решения большого круга задач. Например, может использоваться для отображения регистрационной формы пользователю, изображения в увеличенном масштабе, какого-то важного события, произошедшего на сайте и чего-то другого.

• Как использовать плагин Dropdown?

Можно через атрибуты данных, добавить data-toggle=»dropdown» на ссылку или кнопку для переключения выпадающего меню.

Если вам нужно сохранить ссылки нетронутыми (что полезно, если браузер не позволяет JavaScript), используйте атрибут data-target вместо href=»#».

Для вызова dropdown меню с помощью JavaScript, используйте следующий метод

• Что такое Bootstrap карусель?

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

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

Стандартные методы Bootstrap карусели:

• .carousel(options)  — инициализирует карусель с дополнительными параметрами и запускает процесс смены слайдов
• .carousel(‘cycle’) — запускает процесс смены слайдов слева направо
• .carousel(‘pause’) — останавливает процесс автоматической смены слайдов карусели
• .carousel(number) — осуществляет переход на определённый слайд карусели, который устанавливается с помощью числа number (отчёт ведётся с 0, по аналогии с массивом)
• .carousel(‘prev’) — осуществляет переход на предыдущий слайд
• .carousel(‘next’) — осуществляет переход на следующий слайд

• Что такое группа кнопок?

Группа кнопок позволяют разместить несколько кнопок вместе в одной строке. Это полезно, если вы хотите разместить элементы вместе.

Bootstrap (Twitter Bootstrap) (часть 2)

twitter-bootstrap-4 — Русский — it-swarm.com.ru

twitter-bootstrap-4 — Русский — it-swarm.com.ru

it-swarm.com.ru

Как использовать разные шрифты в Bootstrap 4?

Что такое эквивалентный класс .well в Bootstrap 4?

Вам нужно использовать «контейнер» и «строку» Bootstrap, если ваш контент должен охватывать всю ширину?

Как мне настроить кнопки Twitter Bootstrap для выравнивания по правому краю?

bootstrap 4 — Когда использовать перезагрузку css и grid css?

bootstrap 4 отзывчивых утилиты видимых / скрытых xs sm lg не работает

btn-xs больше не является допустимым параметром в bootstrap 4?

Bootstrap 4 — Отзывчивые карты в столбцах карт

Как изменить цвет ссылки и цвет при наведении в Bootstrap версии 4?

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

Бутстреп 4 столбца ячейки таблицы колоды карт реагируют на основе области просмотра?

Bootstrap Только 4 гибких сетки

Ширина входов в линейном виде — Bootstrap 4

Bootstrap 4 Навбар по правому краю

Центрирование содержимого панели навигации в Bootstrap 4 (альфа 5)

загрузчик 4 в стиле выберите

Что такое class = «mb-0» в Bootstrap 4?

Bootstrap 4: Как создать навигационную панель полной ширины с содержимым контейнера (например, SO Navbar)?

Отключить отзывчивый navbar в начальной загрузке 4

Изображение загрузочной карты искажено в Internet Explorer

Как скрыть свертываемый Bootstrap 4 навигационная панель при нажатии

Bootstrap 4 Несколько панелей навигации с фиксированным верхом

Как изменить непрозрачность карточного блока в bootstrap 4

Bootstrap 4 Изменить цвет гамбургера Toggler

Bootstrap 4 панели навигации с 2 строками

Левый и правый выравнивают модальные кнопки нижнего колонтитула в Bootstrap 4

Bootstrap 4, добавить пробел между двумя колодами карт

Изменение выпадающего значка на Bootstrap 4

Bootstrap 4 Центральная нумерация страниц в столбце

Bootstrap 4: кнопка выравнивания текста по значку

Выровняйте форму по центру в Bootstrap 4

Bootstrap 4, как заставить col иметь высоту 100%?

Скрыть столбцы таблицы, используя Bootstrap 4

Можно ли сделать неопределенный индикатор выполнения с помощью Twitter Bootstrap?

Пять одинаковых столбцов в Твиттере bootstrap

Изменить цвет навигационной панели в Твиттере Bootstrap

Адаптивный веб-сайт увеличен до полной ширины на мобильном телефоне

Центрирование изображения в Bootstrap

Bootstrap 3: тянуть вправо только для col-lg

В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?

Доступные цветовые классы текста в Bootstrap

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

Как изменить радиус границы начальной загрузки?

Как изменить основной цвет bootstrap)?

Bootstrap 4, делает прокручиваемый список-группу, в ряд, с flexbox, с или без прокрутки тела

Различия между bootstrap-flex, bootstrap-grid и bootstrap-reboot

Свернуть не работает в приложении ng-bootstrap и angular 4 для кнопки навигационной панели navbar

Как использовать Bootstrap 3 RC с Rails 4

Класс Simple_form в горизонтальной форме с bootstrap 3 не работает в Rails 4

Bootstrap 3 + Rails 4 — некоторые глификоны не работают

Как сделать поля поиска select2 v4 отзывчивыми в навигационной панели bootstrap 3?

Как убрать стрелку в выпадающем списке в Bootstrap 4?

`col-xs- *` не работает в Bootstrap 4

Разделите строку на 5 столбцов в Bootstrap 4?

как показать подсказку с bootstrap 4 и angular 2?

Angular Пользовательский интерфейс с Bootstrap 4

Bootstrap 4 центра Навбар бренда с развалом

Bootstrap 4 — вертикально центрированные элементы списка

Настройка перехода к краху в bootstrap 4

Обоснуйте кнопки с помощью Bootstrap v4

Перекрасить подсказку в Bootstrap 4

Bootstrap 4 Карусель с несколькими предметами (несколько каруселей показаны одновременно)

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

Есть ли у bootstrap 4 встроенный горизонтальный разделитель?

Как заставить рухнуть аккордеон Bootstrap v4 при нажатии всего заголовка div?

Bootstrap 4 карусель не отзывчивые изображения

Изменить цвет фона кнопки в Bootstrap 4

Добавьте интервал между вертикально сложенными столбцами в Bootstrap 4

Bootstrap 4 navbar цвет

Bootstrap 4 меняет цвет всплывающей подсказки

Почему между Bootstrap 4 строки нет вертикального пробела)

Совместите текст прямо в строке с Bootstrap 4

Как заставить bootstrap-datepicker работать с Bootstrap 3?

Как я могу предотвратить прокрутку тела и сдвиг, когда загружен модальный диалог Twitter начальной загрузки?

Могу ли я проверить, является ли Bootstrap Модальным Показанным / Скрытым?

Bootstrap 3.1.0 модальное изменение размеров не применяется

События Bootstrap 3 datetimepicker не запускаются

Как открыть два модальных диалога в Twitter Bootstrap одновременно

начальная ширина тегов загрузки

input-group-addon с начальной загрузкой

Как загрузочную таблицу использовать для поиска и фильтрации?

Bootstrap — Программно присоединить и показать поповер к элементу

Что такое tabindex = «- 1» в bootstrap для

Jquery, чтобы открыть Bootstrap v3 модал удаленного URL

Как правильно проверить модальную форму

Обновить Bootstrap-стол

Bootstrap — размер и тень меню с плавающей кнопкой действий

ng-bootstrap не работает в angular 4

Почему Bootstrap 4 Navbar всегда рушится?

bootstrap-datetimepicker для начальной загрузки 4

Как я могу держать Twitter Bootstrap Popover открытым до тех пор, пока в него не войдет моя мышь?

Реализация Твиттера bootstrap carousel v2.3.2

Можете ли вы отключить вкладки в Bootstrap?

Твиттер Bootstrap событие onclick на кнопках-радио

Добавить значок для отправки кнопки в Twitter bootstrap 2

Как центрировать div с Bootstrap2?

Изображение логотипа Twitter-Bootstrap-2 в верхней части панели навигации

Есть ли что-нибудь встроенное в Twitter Bootstrap 2.0 для выравнивания содержимого таблицы?

Потрясающе, тип ввода ‘отправить’

Изменить ширину выделенного тега в Twitter Bootstrap

Content dated before 2011-04-08 (UTC) is licensed under CC BY-SA 2.5. Content dated from 2011-04-08 up to but not including 2018-05-02 (UTC) is licensed under CC BY-SA 3.0. Content dated on or after 2018-05-02 (UTC) is licensed under CC BY-SA 4.0. | Privacy

Theme.Bootstrap / Готовые сайты, темы / Дополнения MODX / modstore.pro

Версия
3.1.0-pl

Дата выпуска
10.11.2020

Просмотры
18 878

Внимание, этот компонент требует версию PHP
5.4
или выше!
Если ваш сайт использует PHP ниже требуемого, установка этого
дополнения может его сломать.

Внимание, этот компонент требует версию MODX не ниже
2.3
!

Этот компонент устанавливает Bootstrap 4 на ваш сайт, для лёгкой интеграции других дополнений: pdoTools, miniShop2, Office, mSearch3 и т.д.

При установке создаются 5 типовых чанка:

• Head — основные теги и регистрация скриптов со стилями
• Navbar — навигационная панель
• Content — демонстрационное содержимое, просто вывод ресурсов через pdoPage
• Crumbs — хлебные крошки
• Footer — подвал с таймингами

И один шаблон:

• Bootstrap — где эти чанки вызываются

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

Twitter Bootstrap 2.0.4 Документация — BootstrapDocs

Нужны причины полюбить Bootstrap? Не смотрите дальше.

Создан для ботаников

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

Для всех уровней квалификации

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

Универсальный

Первоначально созданный для использования только в современных браузерах, Bootstrap расширился и теперь включает поддержку всех основных браузеров (даже IE7!), А с Bootstrap 2 — планшетов и смартфонов.

Сетка из 12 столбцов

Грид-системы

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

Адаптивный дизайн

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

Styleguide docs

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

Растущая библиотека

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

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

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

Построен на LESS

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

новых вопросов ‘twitter-bootstrap’ — переполнение стека

новейших вопросов ‘twitter-bootstrap’ — qaru

Bootstrap — это интерфейсный фреймворк, предназначенный для ускорения разработки веб-приложений и сайтов.По вопросам, связанным с версией Bootstrap, также используйте тег конкретной версии из тегов «twitter-bootstrap-2», «twitter-bootstrap-3», «bootstrap-4» и «bootstrap-5».

Как я могу просмотреть Accordion в Razor View MVC?

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

задан 22 часа назад

Выпадающее меню Bootstrap не работает и не раскрывается

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

спросил вчера

Кнопка загрузки PDF

Я делаю генератор резюме, и мне нужна помощь.Я делаю кнопку, которая сгенерирует резюме в формате pdf и сделает его загружаемым. Есть ли способ сделать это в HTML и CSS, а не в js и jquery?

спросил 2 дня назад

Пробовал использовать Toggler в Bootstrap, но он не работает

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

спросил 2 дня назад

(Bootstrap 5) Элементы Col не встроены в строку

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

спросил 2 дня назад

Чекнов

1,942 22 золотых знака1717 серебряных знаков2929 бронзовых знаков

+200

Встроенное видео Youtube не заполняет экран

Я пытаюсь создать сайт для свадьбы моего друга.Я использую Bootstrap 5, а встроенное видео не заполняет размер экрана. Вот живая тестовая страница
HTML:

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Twitter Bootstrap Grid System Учебное пособие

Последнее обновление 14 октября 2021 г., 10:24:41 (UTC / GMT +8 часов)

Введение

В этом руководстве вы узнаете, как использовать Twitter Bootstrap для создания Grid-системы.

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

Объясняя это просто, в веб-дизайне мы создаем строки и столбцы, используя HTML и CSS для создания сетки.А столбцы содержат фактическое содержимое.

Начиная с версии 2.3.2, Twitter Bootstrap предлагает два типа сеток. Система сетки по умолчанию имеет ширину 940 пикселей и 12 столбцов. Вы можете добавить к нему адаптивную таблицу стилей, и тогда она станет адаптируемой к ширине 724 пикселей и 1170 пикселей по отношению к области просмотра, в которой она отображается.

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

Было бы замечательно, если бы вы скачали последние файлы начальной загрузки из «http://twitter.github.io/bootstrap/assets/bootstrap.zip». Вы можете увидеть файловую структуру этой загрузки из нашего вводного руководства.

Начало работы с сеткой по умолчанию

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

Bootstrap использует класс CSS «row» для создания горизонтальных строк и CSS-класс «spanx» (где значение x от 1 до 12) для создания вертикальных столбцов. Итак, два создают сетку из трех столбцов (каждый столбец содержит некоторый текстовый контент), наш HTML будет выглядеть следующим образом

  

  
    
    
    
    <ссылка href = "bootstrap / css / bootstrap.min.css "rel =" stylesheet "media =" screen ">
  
  


  
 
 Lorem ipsum dolor sit amet, освящающий adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Сед элеифенд неумми диам. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue.Aliquam Vehicula mi в Маурисе. Maecenas placerat, nisl at consquat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consquat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. 
 
  
 
 Lorem ipsum dolor sit amet, освящающий adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.Сед элеифенд неумми диам. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam Vehicula mi в Маурисе. Maecenas placerat, nisl at consquat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consquat vitae, orci. Fusce id felis.Vivamus sollicitudin metus eget eros. 
 
  
 
 Lorem ipsum dolor sit amet, освящающий adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Сед элеифенд неумми диам. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam Vehicula mi в Маурисе. Maecenas placerat, nisl at consquat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus.Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consquat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. 
 


  
    
  

 
 

Вот наглядное изображение системы сеток

Итак, мы закончили тем, что создали сетку из трех столбцов, используя класс span4 для каждого из столбцов.Есть класс «контейнер» для хранения всей конструкции. Вы можете просмотреть этот пример здесь. И из этого мы можем получить общий синтаксис для того, какой класс CSS будет использоваться для создания заданного количества столбцов.

Общий синтаксис для создания сетки :

  


встроенные элементы, такие как span, элементы уровня блока, такие как p, div.

повторить 
 y раз.
 
 

Где y — это количество столбцов, которые вы хотите создать, а сумма x (используемых через y количество столбцов) равна 12 (поскольку это максимальное количество столбцов, которое вы можете создать).Значение x должно быть положительным целым числом, а значения должны быть от 1 до 12.

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

Как создаются строки в фиксированной сетке

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

статистика классов строк с этим

  .row {
  маржа слева: -20 пикселей;
  * масштабирование: 1;
}
 
 

Установлено отрицательное левое поле в 20 пикселей и «* zoom: 1;» установлен. «*» здесь указывает на все элементы, а установка свойства масштабирования на 1 используется для исправления ошибок в IE6 / 7. Установка для свойства масштабирования значения 1 устанавливает внутреннее свойство с именем hasLayout, которое устраняет многие проблемы масштабирования / рендеринга IE6 / 7.

  .row: до,
.row: after {
  дисплей: таблица;
  высота строки: 0;
  содержание: "";
}
 
 

Bootstrap использует приведенный выше код CSS для создания строк.Он использует свойства CSS «: before» и «: after». Это псевдоэлементы. «: before» используется для вставки некоторого содержимого перед целевым элементом, а «: after» используется для вставки того же самого после целевого элемента. «дисплей: таблица;» делает элемент визуализированным в виде таблицы. Наряду с этим, было проверено, что строки не имеют собственной высоты строки, установив «line-height: 0;» и поскольку используется ‘content: «»‘, ни до, ни после рассматриваемого элемента содержимое не вставляется.

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

  .row: after {
  ясно: оба;
}
 
 

Как создаются столбцы в фиксированной сетке

  [class * = "span"] {
  плыть налево;
  минимальная высота: 1px;
  маржа слева: 20 пикселей;
}
 
 

Это используемое правило CSS. ‘[class * = «span»]’ выбирает любой элемент, имеющий атрибут класса, значение которого начинается с ‘span’. Теперь, чтобы разместить столбцы рядом друг с другом, «float: left;» используется. И все столбцы имеют минимальную высоту 1 пиксель из-за «min-height: 1px» и левого поля 20 пикселей.

Для установки ширины столбцов используются отдельные правила CSS. В следующей таблице подробно показаны

  .span12 {
  ширина: 940 пикселей;
}
 
 

  .span11 {
  ширина: 860 пикселей;
}
 
 

  .span10 {
  ширина: 780 пикселей;
}
 
 

  .span9 {
  ширина: 700 пикселей;
}
 
 

  .span8 {
  ширина: 620 пикселей;
}
 
 

  .span7 {
  ширина: 540 пикселей;
}
 
 

  .span6 {
  ширина: 460 пикселей;
}
 
 

  .span5 {
  ширина: 380 пикселей;
}
 
 

  .span4 {
  ширина: 300 пикселей;
}
 
 

  .span2 {
  ширина: 220 пикселей;
}
 
 

  .span2 {
  ширина: 140 пикселей;
}
 
 

  .span1 {
  ширина: 60 ​​пикселей;
}
 
 

Пример сетки Twitter Bootstrap по умолчанию

В этом примере показано, как создать 1 столбец, 2 столбца, 6 столбцов, 12 столбцов и 4 столбца (в указанном порядке).

Также обратите внимание, что все созданные столбцы обернуты классом «контейнер», который используется для создания фиксированного макета с помощью Twitter Bootstrap.

  






<стиль>
.span12 h2 {цвет: # FE6E4C; font-weight: жирный; padding: 5px;}
h4 {margin: 10px 0 10px 0;}






 w3resource.com - это руководство по веб-дизайну и разработке. 




  


 w3resource предлагает руководства по веб-разработке.Мы верим в открытый исходный код. Стандарты любви. И отдавайте предпочтение простоте и удобочитаемости при обслуживании контента. У нас более 3000 страниц с уникальным контентом и тысячи примеров. У нас есть онлайн-редакторы, которые могут поиграть с примерами кода. 




 Некоторые темы и многое другое ...: 


  


  


  


  


  


  




 Сайты социальных сетей, которыми можно поделиться: 




  


  


  


  


  


  


  


  


  


  


  


  




 Разработка веб-интерфейса: 
 HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript 


 Внутренняя разработка: 
 PHP, Ruby, Python, Java, ASP.NET, SCALA 


 Управление базой данных: 
 SQL, MySQL POstgreSQL, NoSQL, MongoDB 


 API, инструменты и советы: 
 Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG 





 
 

Это то, что вы создадите

Просмотр

Просмотрите приведенный выше пример в другом окне браузера.

Здесь вы можете загрузить все файлы HTML, CSS, JS и изображения, использованные в приведенном выше примере.

Добавление отзывчивости к сетке по умолчанию

Если вы хотите добавить адаптивные функции в эту сетку по умолчанию Twitter Bootstrap, просто добавьте

сразу после строки, в которую вы добавили собственный CSS в свой HTML-файл.

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

Есть два условия, когда играет роль адаптивность системы сетки по умолчанию. Когда область просмотра (пространство, доступное для отображения сетки) больше 1200 пикселей [достигается с помощью @media (min-width: 1200px)], когда область просмотра больше 768 пикселей, но меньше 979 пикселей [устанавливается @media (min -width: 768px) и (max-width: 979px)].

Смещение столбцов: сетка по умолчанию

Используя смещение, вы можете переместить столбец вправо от его исходного положения.Это достигается путем добавления левого поля к столбцу. Используя Twitter Bootstrap, вы можете использовать класс «offsetx» (где значение x — положительное целое число) вместе с классом «spany» (где значение y — положительное целое число). В зависимости от значения «x» в «offestx» связанный столбец перемещается на «x» столбцов вправо от его исходного положения.

Ширина смещений определяется в Bootstrap CSS. У offset12 самое высокое левое поле 980 пикселей, а у offset1 самое нижнее левое поле 100 пикселей.

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

В следующем примере мы хотим создать сетку из двух столбцов, в которой мы хотим, чтобы левый столбец был перемещен на 4 столбца вправо. Тогда HTML-код для этого будет следующим:

  

  
    
    
    
    <ссылка href = "bootstrap / css / bootstrap.min.css "rel =" stylesheet "media =" screen ">
  
  
    

    


 Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Сед элеифенд неумми диам. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue.Aliquam Vehicula mi в Маурисе. Maecenas placerat, nisl at consquat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consquat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. 


 Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.Сед элеифенд неумми диам. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam Vehicula mi в Маурисе. Maecenas placerat, nisl at consquat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consquat vitae, orci. Fusce id felis.Vivamus sollicitudin metus eget eros. 



    
    
  

 
 

Вы можете просмотреть живую демонстрацию здесь и скачать код здесь.

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

Вложенные столбцы: сетка по умолчанию

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

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

  

  
    
    
    
    
  
  
    

    

    

    

    

   
 Меценат aliquet velit vel turpis.Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi conctetuer mi, a ultricies massa est sed nisl. Класс aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede. 
    
   

 Меценат aliquet velit vel turpis.Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi conctetuer mi, a ultricies massa est sed nisl. Класс aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede. 
    
    
   
  

  
 Меценат aliquet velit vel turpis.Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi conctetuer mi, a ultricies massa est sed nisl. Класс aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede. 
    
   
   
    
    
  

 
 

Вы можете просмотреть живую демонстрацию здесь и можете скачать код здесь

В приведенном выше примере строка, которая находится непосредственно под контейнером, имеет два столбца, определяемых ‘class = «span7″‘ и ‘class = «span5″‘. Всего столбцов 12. Префект. Теперь мы добавили еще одну строку в левый столбец, а затем создали два столбца, определенные как ‘class = «span4″‘ и ‘class = «span3″‘, поэтому он соответствует общему количеству столбцов, указанному для его родительского столбца (7 = 4 +3).

Вы также можете добавить сюда адаптивную функцию.

Заключение

В этом руководстве мы обсуждали сеточную систему Bootstrap по умолчанию. Это руководство основано на версии 2.3.2 Bootstrap. Ниже приводится краткое изложение того, что мы обсуждали в этом руководстве:

• Система сеток Twitter Bootstrap по умолчанию имеет ширину 940 пикселей и может содержать 12 столбцов.
• В таблице строки создаются с помощью ‘class = «row»‘, а столбцы создаются с ‘class = «spanx»‘, где x — положительное целое число.Сумма x для всех используемых столбцов не должна превышать 12.
• Добавив отзывчивый CSS Bootstrap, вы можете добавить адаптивные функции в сетку по умолчанию.
• Вы можете использовать смещения, чтобы создать дополнительное пространство для столбца. Для этого используется ‘class = «offsetx»‘, где x — положительное целое число. Если вы используете смещения, то общее количество столбцов, включая количество используемых смещений, не может превышать 11.
• Столбцы могут быть вложенными. Если используются вложенные столбцы, при подсчете общего количества столбцов в сетке (в строке непосредственно под контейнером) вложенные столбцы также считаются столбцами вверх по иерархии.
• Смещение может выполняться также и для вложенных столбцов.

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

Предыдущая: Twitter Bootstrap 3 Обзор CSS
Следующая:
Учебник по макету Twitter Bootstrap

Макет

— что дизайнеры должны знать о Twitter Bootstrap 4? Макет

— что дизайнеры должны знать о Twitter Bootstrap 4? — Обмен стеками графического дизайна

Сеть обмена стеков

Сеть Stack Exchange состоит из 178 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

2. 0

3. +0

6. Авторизоваться
   Подписаться

Graphic Design Stack Exchange — это сайт вопросов и ответов для профессионалов, студентов и энтузиастов графического дизайна.Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил
6 лет, 1 месяц назад

Просмотрено
357 раз

Закрыт .Этот вопрос должен быть более конкретным. В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав это сообщение.

Закрыт 6 лет назад.

Я знаю, что эта тема не связана с твердым кодированием, но я все же хочу вытащить ее.

Что дизайнеры должны знать о Twitter Bootstrap 4? http://v4-alpha.getbootstrap.com/

Можете ли вы поделиться какой-либо информацией, которую должен знать каждый дизайнер или исследовать в связи с этим новым выпуском Bootstrap?

Спасибо за идеи!

Создан 01 окт.

2

В Bootstrap 4 у вас будет больше возможностей и гибкости:

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

• Перемещено с Less на Sass .Bootstrap теперь компилируется быстрее, чем когда-либо, благодаря Libsass, и мы присоединяемся к постоянно растущему сообществу разработчиков Sass.
• Улучшенная сетка. Мы добавили новый уровень сетки, чтобы лучше ориентироваться на мобильные устройства, и полностью переработали наши семантические миксины.
• Дополнительная поддержка flexbox здесь. Будущее уже наступило — переключите логическую переменную и перекомпилируйте свой CSS, чтобы воспользоваться преимуществами системы сеток и компонентов на основе flexbox.
• Выпавшие лунки, эскизы и панели для карточек.Карточки — это новый компонент Bootstrap, но они будут чувствовать себя очень знакомыми, поскольку они делают почти все, что делали лунки, миниатюры и панели, только лучше.
• Все наши сбросы HTML объединены в новый модуль Reboot. Перезагрузка начинается там, где останавливается Normalize.css, что дает вам более самоуверенные сбросы, такие как изменение размера окна: границы поля, настройки полей и многое другое в одном файле Sass.

И так далее .. Щелкните здесь, чтобы узнать полную информацию о Bootstrap 4

Создан 01 окт.

1. Цвета по умолчанию, используемые для ссылок, кнопок, ошибок, статуса, успеха и т. Д.(еще можно изменить ..)
2. Это отзывчивый дизайн.
3. Основан на 12 сеточной системе.
4. Поля и отступы по умолчанию.
5. Что он предоставляет настраиваемые всплывающие окна (модальные) и всплывающие подсказки.

Вот и все приходит на ум. Подробнее здесь

РЕДАКТИРОВАТЬ: Скоро появится Bootstrap 4, так что вам тоже стоит взглянуть на него.

Создан 01 окт.

1

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками layout или задайте свой вопрос.

Graphic Design Stack Exchange лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

twitter-bootstrap Tutorial => Bootstrap 4 Centering

Пример

Как центрировать элемент, столбец или содержимое внутри столбца работает по-другому в Bootstrap 4.

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

• text-center все еще используется для отображения : встроенные элементы
• mx-auto заменяет центральный блок на центр дисплей: блок элементов
• offset- * или mx-auto можно использовать для центрирования столбцов сетки

mx-auto (автоматические поля оси x) будет центрировать display: block or display: flex elements, которые имеют определенную ширину , (% , vw , px , и т. Д. ..). Flexbox используется по умолчанию для столбцов сетки, поэтому существуют также различные методы центрирования flexbox.

Центрировать текст или встроенные элементы:
текстовый центр

  

    
 я в центре 
    

        
 Я в центре! 
    

  

Центр дисплей: блок или дисплей: гибкий :
mx-auto

Центрировать колонны с использованием смещений: смещение- *

  

    

        
 Я по центру .col-4 (смещение 4)
    

  

Колонны можно также центрировать с помощью: mx-auto

  

    

        
 У меня по центру .col-4 
    

  

Демо Bootstrap 4 Горизонтальное центрирование

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

Для вертикального центрирования в Bootstrap 4 (ось Y) см. Документацию по:
Bootstrap 4 Vertical Align

twitter / bootstrap — Packagist

Бутстрап

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

Сообщить об ошибке
·
Функция запроса
·
Темы
·
Блог

Бутстрап 5

Наша ветка по умолчанию предназначена для разработки нашего выпуска Bootstrap 5. Перейдите в ветку v4-dev , чтобы просмотреть readme, документацию и исходный код для Bootstrap 4.

Содержание

Быстрый старт

Доступно несколько вариантов быстрого запуска:

• Скачать последнюю версию
• Клонируйте репо: git clone https: // github.com / twbs / bootstrap.git
• Установить с помощью npm: npm install bootstrap
• Установить с пряжей: пряжа добавить бутстрап
• Установить с помощью Composer: composer require twbs / bootstrap: 5.1.3
• Установить с помощью NuGet: CSS: Загрузочный пакет установочного пакета Sass: Установочный пакет bootstrap.sass

Прочтите страницу «Приступая к работе» для получения информации о содержимом платформы, шаблонах, примерах и многом другом.

Статус

Что включено

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

  бутстрап /
├── css /
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── бутстрап-сетка.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js /
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── бутстрап.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map
  

Мы предоставляем скомпилированные CSS и JS ( bootstrap. * ), а также скомпилированные и минифицированные CSS и JS ( bootstrap.min. * ). Исходные карты ( bootstrap. *. Map ) доступны для использования с некоторыми инструментами разработчика браузеров. Связанные файлы JS ( bootstrap.bundle.js и минифицированный bootstrap.bundle.min.js ) включают Popper.

Ошибки и запросы функций

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

Документация

Документация

Bootstrap, включенная в этот репо в корневом каталоге, создана с помощью Hugo и размещена на страницах GitHub по адресу https: // getbootstrap.com /. Документы также можно запускать локально.

Поиск по документации осуществляется с помощью DocSearch от Algolia. Работаете над поиском? Обязательно установите debug: true в site / assets / js / search.js .

Локальная работа с документацией

1. Запустите npm install , чтобы установить зависимости Node.js, включая Hugo (конструктор сайтов).
2. Запустите npm run test (или конкретный сценарий npm), чтобы восстановить распределенные файлы CSS и JavaScript, а также ресурсы нашей документации.
3. Из корневого каталога / bootstrap запустите npm run docs-serve в командной строке.
4. Откройте http: // localhost: 9001/ в своем браузере и вуаля.

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

Документация к предыдущим выпускам

Вы можете найти все наши документы по предыдущим выпускам на https://getbootstrap.com/docs/versions/.

Предыдущие выпуски и документация к ним также доступны для загрузки.

Участие

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

Более того, если ваш запрос на вытягивание содержит исправления или функции JavaScript, вы должны включить соответствующие модульные тесты. Весь HTML и CSS должны соответствовать Руководству по кодам, которое ведет Марк Отто.

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

доступны в конфигурации редактора для удобного использования в обычных текстовых редакторах. Узнайте больше и загрузите плагины по адресу https: // editorconfig.org /.

Сообщество

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

• Подпишитесь на @getbootstrap в Twitter.
• Прочтите официальный блог Bootstrap и подпишитесь на него.
• Присоединяйтесь к официальной комнате Slack.
• Общайтесь с другими загрузчиками в IRC. На сервере irc.libera.chat в канале #bootstrap .

Справку по реализации

• можно найти на сайте Stack Overflow (с тегом bootstrap-5 ).
• Разработчики должны использовать ключевое слово bootstrap в пакетах, которые изменяют или добавляют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной обнаруживаемости.

Версии

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

См. Раздел «Релизы» нашего проекта GitHub для просмотра журналов изменений для каждой версии выпуска Bootstrap. Сообщения с объявлениями о выпуске в официальном блоге Bootstrap содержат сводку наиболее примечательных изменений, внесенных в каждый выпуск.

Создатели

Марк Отто

Джейкоб Торнтон

Спасибо

Спасибо BrowserStack за предоставленную инфраструктуру, которая позволяет нам тестировать в реальных браузерах!

Спонсоры

Поддержите этот проект, став спонсором.Здесь будет отображаться ваш логотип со ссылкой на ваш веб-сайт. [Стать спонсором]

Поддерживающие

Спасибо всем нашим спонсорам! 🙏 [Стать спонсором]

Авторские права и лицензия

Авторские права на код и документацию 2011–2021 гг., Авторы Bootstrap и Twitter, Inc. Код выпущен под лицензией MIT. Документы выпущены по лицензии Creative Commons.

Foundation 4 лучше, чем Twitter Bootstrap 2. И вот почему.

Несколько месяцев назад я написал свою первую статью Twitter Bootstrap vs. Foundation 4. В статье хорошо оценивается размер фреймворков на основе их статистики. По сути, это статья о ленте. Я пришел к выводу, что выбор фреймворка для вас был непростым. У каждого были свои преимущества или, по крайней мере, различия, и оба, казалось, стоили попробовать. Для ясности, я написал это о Twitter Bootstrap 2, а не о новом Bootstrap 3 RC1, который недавно был выпущен.

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

Мальчик был я неправ.

Foundation 4 — это улучшенная платформа для Twitter Bootstrap

Я только что получил свой первый опыт работы с Foundation 4, создавая веб-сайт для местной компании по обслуживанию лимузинов.По правде говоря, я начал разрабатывать его в Twitter Bootstrap. Когда я работал с клиентами над дизайном, я много говорил о том, как сайт будет отзывчивым и будет отлично работать как на ПК, так и на мобильных платформах. Я не беспокоился, потому что знал, что у меня в заднем кармане есть Bootstrap. Но при работе в Bootstrap возникли две проблемы: одна небольшая, а другая не такая уж и маленькая.

Foundation 4 имеет лучшую сеточную систему

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

Настоящая проблема обнаружилась, когда я захотел контролировать то, как сайт выглядит на мобильных экранах. Скажу прямо: Twitter Bootstrap недоработан, когда дело касается форматирования для мобильных устройств.

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

Это стало мне ясно, когда мне позвонил клиент и спросил, могу ли я разработать первую страницу, чтобы разместить ее на веб-сайте, пока я занимаюсь дизайном остальной части веб-сайта. Я взял свой psd и нарезал его, а затем закодировал страницу в Bootstrap. Он выглядел довольно большим из-за сетки шириной 1170 пикселей, но выглядел как мой дизайн, так что я был счастлив. Затем я нашел CyberCrab, прекрасный инструмент, который показывает любой веб-сайт в популярных форматах устройств. Просмотреть сайт, отформатированный для ПК или iPhone, стало так же просто, как нажать кнопку.

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

Да, технически сайт был отзывчивым. Дивы сворачивались, и контент перетекал таким образом, что сайт технически «работал». Но это выглядело ужасно. Большая часть моего форматирования была потеряна. Сетки иконок превратились в один длинный ряд иконок. Это выглядело как работа дизайнера, которому все равно.

Но это было неправдой. Я заботился, черт возьми!

Foundation 4 является Mobile-First

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

Я не лгу, когда говорю следующее: Foundation 4 максимально приближен к тому, чтобы сделать макеты CSS чем-то интересным. Потому что макеты CSS — это не весело. Не позволяйте никому говорить вам иначе. Но Foundation 4 все это меняет.

Что в нем такого замечательного, так это то, что вы можете объявить, сколько столбцов div должен занимать на большом экране, а затем ТАКЖЕ определить, сколько он должен занимать на маленьком экране. В конечном итоге вы можете очень легко создавать сложные мобильные макеты. Просто добавьте несколько названий классов и готово.

Позвольте мне проиллюстрировать это для вас.

На главной странице Event Shuttle Service есть сетка значков, подсказывающих, когда использовать их автомобили.

В Twitter Bootstrap на маленьком экране тот же список будет выглядеть так:

Закодировано с помощью Twitter Bootstrap

Это один полный экран на iPhone 5.Пользователям придется пролистывать 4 экрана, чтобы увидеть все значки, что кажется неуместным. Очевидно, что второй ряд вполне подойдет. Но как это легко сделать в Bootstrap, когда сетка всего одна? Ответ: вы не можете. Ты сам по себе.

Примерно в это же время я запаниковал и решил попробовать Foundation 4. После переделки страницы в Foundation 4 та же самая сетка на iPhone 5 выглядела так:

Закодировано с использованием Foundation 4

Две колонны! И, честно говоря, я мог бы изменить это на четыре столбца одним нажатием клавиши, если бы захотел.

Давайте кратко рассмотрим код, который делает это возможным.

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

 

     
     
 Концерты 
 

Принцип работы Foundation 4 очень прост. Вам нужен div с классом «row» (не показан), чтобы установить, как вы уже догадались, строку. Каждая строка состоит из 12 столбцов.Это верно независимо от того, занимаетесь ли вы всей страницей или вкладываете ли вы свою сетку. Магическое число всегда равно 12. Пока в вашей строке в сумме получается 12, проблем не возникнет. Осталось только указать, хотите ли вы использовать большую или маленькую сетку. В этом случае мы заявили, как мы хотим, чтобы значки выглядели в большой и маленькой сетке.

«small-6» указывает браузеру отображать 1 столбец, занимающий половину экрана. «Большой-3» указывает браузеру отображать 1 столбец на четверть экрана (потому что 3 × 4 = 12).В итоге получается, что на большом экране четыре значка подряд, а на маленьком экране — два значка подряд.

Очень полезно.

Но Foundation 4 только начинается.

Еще одна проблема, с которой я столкнулся, заключалась в том, что у меня было 8 значков, которые я хотел равномерно распределить по 12 столбцам, которые затем сворачивались в две строки по четыре для маленьких экранов. Опять же, Фонд 4 меня прикрыл. Они включают в себя что-то, называемое сеткой блоков, которая берет любой список и равномерно распределяет его по строке.

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

И при просмотре на маленьком экране они аккуратно сворачиваются в два ряда.

Это поведение было выполнено с помощью этого кода:

 

     

          

             
 
               
 Кожаное сиденье с запахом 
 
             
 
               
 Встроенный ледяной сундук 
 
             
 
               
 Огни для вечеринок 
 
             
 
               
 Конфиденциальность 
 
             
 
               
 2 телевизора с плоским экраном 
 
             
 
               
 Объемный звук 
 
             
 
               
 DVD-плеер 
 
             
 
               
 Качество Mercedes-Benz 
 
          
     
 

Как видите, первым идет div с классом «row», за ним следует класс large-12.Это указывает на один битовый столбец. Затем в него вложен неупорядоченный список. Он имеет два класса: «сетка мелких блоков-4» и «сетка крупных блоков-8». Надеюсь, это говорит само за себя. В нем говорится, что для маленьких экранов отображать 4 элемента списка в строке, а для большой сетки — 8 элементов списка в строке.

Моей следующей проблемой было использование слайдера изображений. Если вы используете Twitter Bootstrap, вы можете использовать их «Карусель», хотя неясно, форматируется ли она для мобильных устройств или ее можно пролистывать. Но с Foundation 4 вы получаете слайдер изображений под названием Orbit.А Orbit IS предназначена для мобильных устройств.

Используя комбинацию Orbit и классов отображения и скрытия в сетке, я смог сделать несколько действительно хороших галерей для Party Van моего клиента. Я создал страницу со значками, при нажатии на которые вы попадаете в галерею орбиты:

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

Да, это Дженна на фото.

Foundation 4 также имел другие функции (аналогичные тем, что есть в Twitter Bootstrap 2), которые прекрасно работали, включая стили форм и модальное окно.

Foundation 4 даже имеет значки, похожие на Font Awesome (также известные как значки Bootstrap), которые были разработаны для Twitter Bootstrap, которые я добавил в свой дизайн. Хотя, честно говоря, их документация оставляет желать лучшего.

А если говорить о документации, то, без сомнения, Foundation 4 документирована лучше.Страница значков является исключением. Но практически во всех остальных случаях Foundation 4 лучше объясняет себя в документации, чем Twitter Bootstrap.

ZURB более полезен, чем сообщество Bootstrap

Это, наверное, грубо сказать, но сообщество Bootstrap довольно неубедительно. Позвольте мне сказать это по-другому: очень мало от сообщества Bootstrap готово к производству. Все вспомогательные продукты от Jetstrap и ниже могут помочь вам начать работу, но когда кодирование становится горячим и тяжелым, вы быстро замечаете их ограничения.Приятно, что существует такое большое сообщество, но, за исключением Font Awesome, я обнаружил, что его ценность ограничена. Как бы то ни было, я пробовал использовать Fuel UX в двух проектах и ​​оба раза отказывался от него.

С другой стороны,

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

Я ответил ему, спрашивая о моей единственной проблеме с Фондом 4.В нем задействован jQuery.

Веб-сайт Event Shuttle Service использует WordPress в качестве своей CMS. Это означало создание собственной темы с нуля с помощью Foundation 4. Все было хорошо, пока я не начал пробовать разные плагины. Когда я попробовал плагин NextGen Gallery или Google Analyticator, все кнопки «делать что-нибудь» на сайте сломались. Небольшое расследование показало, что плагины нарушают работу jQuery. И тогда я впервые узнал о запуске jQuery в бесконфликтном режиме.

Скажу честно.Javascript — не моя сильная сторона. Я больше всего надеялся, что кто-то еще столкнулся с этой проблемой и опубликовал об этом в Интернете.

Потом мне написал Крис.

Я поднял свою проблему на флагшток ZURB, и через несколько часов Крис ответил. Он скопировал другого парня — Марка — на мой вопрос. Марк отправил мне по электронной почте страницу, которую он разместил на Github в ответ на мой вопрос, с чертовым ответом . Я имею в виду, что код просто там. Вырезать, вставить и бац… больше никаких проблем.

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

Единственная вещь, которую я не решила на веб-сайте Event Shuttle Service, — это адаптивные изображения. Если это новая фраза для вас, по сути, это означает, что в идеале на странице будут загружаться изображения с высоким или низким разрешением в зависимости от размера вашего экрана. Таким образом, маленькие экраны будут получать изображения меньшего размера с меньшими размерами файлов, а большие экраны будут получать изображения большего размера с большими размерами файлов. Хотя я так и не добрался до реализации, я, по крайней мере, подумал об этом. Лучшим ответом, казалось, были Adaptive Images.Но стоит отметить, что ZURB тоже об этом подумал. У них есть собственное решение под названием Interchange. Я не сомневаюсь, что попробую это сделать в своем следующем проекте. И если прошлое может служить ориентиром, оно окажется именно тем, что мне нужно.

К концу

Напомним, что Foundation 4 лучше, потому что он ориентирован на мобильные устройства с двумя сетками, имеет множество полезных элементов, которые помогут вам настроить ваш сайт, имеет лучшую документацию, а ZURB — отличная компания, которая сочла нужным выяснить примерно все ваши проблемы до того, как они у вас возникнут, и уже создали для них решение.А если нет, напишите им по электронной почте, и они наверняка вам помогут.

Я вижу, что Bootstrap выходит с версией 3 — их собственный дизайн, ориентированный на мобильные устройства. Это хорошо и все такое, но я не думаю, что вернусь назад.