Как получить только адаптивную сетку из Bootstrap 3?

109

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

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

html css twitter-bootstrap responsive-design Мануэль Сапата
источник

Ответы:

159

Перейдите на http://getbootstrap.com/customize/ и переключите то, что вы хотите, из структуры BS3, а затем нажмите «Скомпилировать и загрузить», и вы получите выбранные вами CSS и JS.

Настройщик Bootstrap

Откройте CSS и удалите все, кроме сетки. Они также включают некоторые вещи для нормализации. И вам нужно будет настроить все стили на вашем сайте на box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Кристина
источник
Спасибо, Кристина. Я ожидал, что есть способ получить только стили сетки.
Мануэль Сапата
8
Нет, они также загружают вспомогательные материалы, normalize и scaffolding.less (который имеет глобальную рамку), который требует от вас настройки всех вещей, у которых есть отступы. Как и раньше, у вашего поля было 10 пикселей, а общее количество составляло 200 пикселей, но внутри было 180 пикселей, поэтому вам пришлось установить ширину на 180 пикселей, теперь вы устанавливаете ширину 200 пикселей или просто ничего и вставляете его в класс столбца сетки.
Кристина
box-sizingинформация для сброса: css-tricks.com/… & paulirish.com/2012/box-sizing-border-box-ftw
Коста,
все еще есть normalize.css
rab
@rab - это упомянуто в ответе. Если хотите, удалите, но это полезно.
Кристина
17

Оформить заказ zirafa / bootstrap-grid-only . Он содержит только сетки начальной загрузки и отзывчивый утилит , которые вам не нужно (сброса или что - нибудь), и упрощает сложность работы непосредственно с файлами МЕНЬШЕ .

Burrbrown
источник
1

Я бы предложил вместо этого использовать MDO http://getpreboot.com/ . Начиная с prebootверсии 2, обратные порты LESS миксинов / переменных, используемых для создания системы сетки Bootstrap 3.0, намного легче, чем использование генератора CSS. Фактически, если вы включаете только, preboot.lessнакладных расходов НЕ НЕТ, потому что весь файл состоит из миксинов / переменных и, следовательно, используется только при предварительной компиляции, а не в окончательном выводе.

srquinn
источник
1

Похоже, теперь вы можете загрузить только сетку в новых функциях загрузки Bootstrap 4s.

Ричард Клиффорд
источник
0

Прошло много времени с тех пор, как этот вопрос был задан, но, возможно, теперь вы можете вообще отказаться от Bootstrap и использовать CSS Grid! (это проще, аккуратнее, гибче и быстрее). См. Эту классную статью: Прекратите использовать Bootstrap - создайте практичный шаблон CSS Grid для пользовательского интерфейса на основе компонентов

Алекс Файербранд
источник
0

В Bootstrap 4 в их GitHub уже есть отдельные файлы. Вы можете найти их здесь

https://github.com/twbs/bootstrap/tree/main/dist/css
Хари Дас
источник