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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

1. В принципе, вам необходимо изменить файл bootstrap css. В основном обернуть весь файл начальной загрузки CSS внутри этого:

   .bootstrap { // весь файл boostrap CSS идет здесь }

2. Использование http://winless.org/online-less-compiler для генерации нового кода CSS. Вам необходимо пройти код выше в левую сторону формы в приведенной выше ссылке.

3. Скопируйте и пропустите вывод из приведенной выше ссылки в файл css. Включите этот файл css в свой html.

4. Когда вам нужно использовать boostrap, просто разместите вокруг элементов, на которые вы хотите загрузочный лоток.

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

Answer 3

Я сделал GIST с Bootstrap 3 все внутри класса с именем .bootstrap-обертку 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%}