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

109

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

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

— Мануэль Сапата
источник

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
источник

8

Просто выберите Grid systemи получите "отзывчивые утилиты": http://jsfiddle.net/7LVzs/

— Джморван
источник

4

Сделал сборку Grunt только с сеткой Bootstrap 3.3.5:

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

~ 10 КБ минимизировано.

Если вам нужны другие части из Bootstrap, просто включите их в /src/less/bootstrap.less.

— Horgen
источник

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

— Хари Дас
источник