Устаревшие конфликты CSS с Bootstrap - как решить?

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

Я внедряю bootstrap на сайт, который существует довольно долгое время и развивался на протяжении многих лет. Как только я добавляю bootstrap css и js в свой html, многие элементы перепутались. Насколько я могу судить, это объясняется тем, что я использовал те же имена классов, что и bootstrap. Например, у меня есть класс под названием "btn", а также bootstrap. Все мои кнопки выглядят уродливыми и/или нечетными. Список можно продолжать и продолжать.

Является ли это в значительной степени для курса, когда люди сначала реализуют Bootstrap на существующем сайте? Это просто вопрос прохождения старых файлов css и переименование? Какие-нибудь элегантные решения?

Ответ 1

Paul and Millimoose оба обеспечили решение, которое сработало для меня. Однако для новичков решение заняло немного места, поэтому здесь пошаговое описание того, что сработало для меня (и, по моему мнению, они рекомендуют).

В принципе, вам нужно изменить файл bootstrap css. В основном оберните весь загрузочный файл css внутри:

.bootstrap { // здесь идет весь файл css. }
Используйте http://winless.org/online-less-compiler для генерации нового кода css. Вам нужно будет пройти код выше в левую сторону формы в приведенной выше ссылке.
Скопируйте и запустите вывод из указанной ссылки в файл css. Включите этот файл css в свой html.
Когда вам нужно использовать boostrap, просто поместите вокруг элементов, которые вы хотите использовать для загрузки.

Большое спасибо за помощь в решении этого решения. Хорошо работает.

Ответ 2

Я думаю, что самый простой способ - использовать предварительный процессор css для пространства имен всех компонентов bootstraps css.

Если вы добрались до своего github repo: https://github.com/twbs/bootstrap/, вы увидите, что у них есть LESS-распределение кода. Оттуда вы можете прописать все свои стили, обернув библиотеку в какой-то класс, например упомянутый миллимод.

С их помощью вы можете добавить пространство имен bootstrap к определенным элементам html, и библиотека будет влиять только на dom node и его дочерние элементы.

Ответ 3

Я сделал GIST с Bootstrap 3 внутри класса с именем .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

Я начал с этого инструмента: http://www.css-prefix.com/ И исправить остальные с помощью поиска и замены в PHPstorm. Все шрифты @font-face размещены на maxcdn.

Пример первой строки

.bootstrap-wrapper {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}