Starsze konflikty CSS z Bootstrap - jak rozwiązać?

Question

Jestem nowy w Bootstrap, więc to może być naiwne pytanie dla was wszystkich. Ale jestem pewien, że inni mają lub będą mieli podobne pytanie, więc tutaj jest.

Wdrażam bootstrap do strony, która istnieje od dłuższego czasu i ewoluowała przez lata. Jak tylko dodaję bootstrap css i js do mojego html, wiele elementów zostanie pomieszanych. O ile mogę powiedzieć, jest to przypisane do mnie przy użyciu tych samych nazw klas co bootstrap. Na przykład mam klasy o nazwie "btn" i tak samo bootstrap. Wszystkie moje guziki wyglądają brzydko i/lub dziwnie ukształtowane. Lista jest długa.

Czy jest to odpowiednik kursu, gdy ludzie po raz pierwszy implementują Bootstrap w istniejącej witrynie? Czy jest to tylko kwestia przejrzenia starych plików CSS i zmiany nazwy? Wszelkie eleganckie rozwiązania tam?

Answer 1

Myślę, że najłatwiej jest użyć pre-procesora css do przestrzeni nazw wszystkich składników css bootstraps.

Jeśli dostałeś do repozytorium github: https://github.com/twbs/bootstrap/, zobaczysz, że mają MESS rozproszenie kodu. Stamtąd możesz zmienić przestrzeń nazw wszystkich swoich stylów, owijając bibliotekę w jakiejś klasie, takiej jak wspomniany milimozy.

Z ich można dodać obszar nazw bootstrap do niektórych elementów html, a biblioteka spowoduje tylko ten dom węzeł i jego dzieci.

Answer 2

Paul i Millimoose zapewnili rozwiązanie, które sprawdziło się u mnie. Jednak dla początkujących rozwiązanie wymagało trochę kopania, więc oto opis krok po kroku, co zadziałało dla mnie (i co uważam za polecające).

1. Zasadniczo trzeba zmodyfikować plik css bootstrap. Zasadniczo owinąć cały plik bootstrap css wewnątrz to:

   .bootstrap { // cały plik boostrap css idzie tu }

2. Zastosowanie http://winless.org/online-less-compiler wygenerować nowy kod CSS. Musisz powyżej kodu powyżej lewej stronie formularza w powyższym linku.

3. Skopiuj i poprzedź wyjście z powyższego linku do pliku css. Dodaj ten plik css do swojego html.

4. Kiedy potrzebujesz użyć boostrap, po prostu umieść wokół elementów, do których ma się ładować bootstrap.

Wielkie dzięki za pomoc w ustaleniu tego rozwiązania. Działa dobrze.

Answer 3

Zrobiłem GIST z Bootstrap 3 wszystko wewnątrz klasy o nazwie .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e

zacząłem z tego narzędzia: http://www.css-prefix.com/ i naprawić resztę z wyszukiwaniem i wymienić w PHPstorm. Wszystkie czcionki @ font-face są hostowane na maxcdn.

Pierwszy przykład linia

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