Chcę używać Twitter Bootstrap, ale tylko na określonych elementach, więc muszę znaleźć sposób na prefiksowanie wszystkich klas Twitter Bootstrap moim prefiksem lub użycie mniejszej liczby kombinacji. Nie mam jeszcze z tym doświadczenia, więc nie bardzo rozumiem, jak to zrobić. Oto przykład kodu HTML, który próbuję nadać stylowi:
<div class="normal-styles">
<h1>dont style this with bootstrap</h1>
<div class="bootstrap-styles">
<h1>use bootstrap</h1>
</div>
</div>
W tym przykładzie Twitter Bootstrap będzie wyglądał normalnie w obu stylach h1
, ale chcę być bardziej selektywny co do obszarów, w których stosuję style Twitter Bootstrap.
twitter-bootstrap
less
Andrzej
źródło
źródło
Odpowiedzi:
Okazało się to łatwiejsze niż myślałem. Zarówno Less, jak i Sass obsługują przestrzenie nazw (nawet przy użyciu tej samej składni). Kiedy dołączasz bootstrap, możesz to zrobić w selektorze, aby umieścić go w przestrzeni nazw:
Aktualizacja: w przypadku nowszych wersji LESS, oto jak to zrobić:
Tutaj udzielono odpowiedzi na podobne pytanie.
źródło
@import
oryginalnego Bootstrapa. Wydaje mi się, że miałem również problemy z modami, ponieważ Bootstrap stosuje określone klasy do tagu body najwyższego poziomu. Nie pamiętam, czy znalazłem rozwiązanie. Wydaje mi się, że w końcu napisałem własną zamianę modalną.@ Andrew świetna odpowiedź. Warto również zauważyć, że bootstrap modyfikuje treść {}, głównie w celu dodania czcionki. Więc kiedy nadasz mu przestrzeń nazw przez LESS / SASS, twój wyjściowy plik css będzie wyglądał następująco: (w bootstrap 3)
ale oczywiście nie będzie tagu body w twoim div, więc zawartość bootstrap nie będzie miała czcionki bootstrap (ponieważ cały bootstrap dziedziczy czcionkę po rodzicu)
Aby naprawić, odpowiedź powinna brzmieć:
źródło
margin: 0;
Umieszczając odpowiedzi @Andrew, @Kevin i @ adamj razem (plus kilka innych stylów), jeśli umieścisz następujące elementy w pliku o nazwie „bootstrap-namespaced.less”, możesz po prostu zaimportować „bootstrap-namespaced.less” do dowolnego mniej plik:
źródło
Dodanie przestrzeni nazw do bootstrap CSS zepsuje funkcjonalność modalną, ponieważ bootstrap dodaje klasę „modal-backdrop” bezpośrednio do treści. Rozwiązaniem jest przeniesienie tego elementu po otwarciu okna modalnego, np .:
Możesz usunąć element w module obsługi dla zdarzenia „hide.bs.modal”.
źródło
this.modalService.open('myModal', {container: '#modalgoeshere'})
Użyj wersji plików .less. Określ, których mniej plików potrzebujesz, a następnie zawiń te pliki .less za pomocą:
To da ci wynik:
źródło
Zrobiłem GIST z Bootstrap 3 w klasie o nazwie .bootstrap-wrapper https://gist.github.com/onigetoc/20c4c3933cabd8672e3e
Zacząłem od tego narzędzia: http://www.css-prefix.com/ A resztę naprawiłem, wyszukując i zamieniając w PHPstorm. Wszystkie czcionki @ font-face są hostowane na maxcdn.
Przykład pierwszej linii
źródło
Przestrzenie nazw przerywają tło div wtyczki Modal, ponieważ jest on zawsze dodawany bezpośrednio do tagu <body>, pomijając element przestrzeni nazw, do którego zastosowano style.
Możesz to naprawić, zmieniając odniesienie do wtyczki na
$body
przed wyświetleniem tła:$body
Nieruchomość decyduje, gdzie zostaną dodane tłem.źródło
Aby lepiej wyjaśnić wszystkie kroki, o których mówił Andrew, tym, którzy nie wiedzą, czym jest Less. Oto link, który całkiem dobrze wyjaśnia jak to się robi krok po kroku Jak izolować Bootstrap lub inne biblioteki CSS
źródło
Najprostsze rozwiązanie - zacznij używać niestandardowych, izolowanych klas css dla Bootstrap.
Na przykład, dla Bootstrap 4.1 pobierz pliki z katalogu css4.1 -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
i zawiń swój kod HTML w div z klasą bootstrapiso:
Szablon strony z izolowanym bootstrapem 4 będzie
źródło
Napotkałem ten sam problem i metoda zaproponowana przez @Andrew niestety nie pomogła w moim konkretnym przypadku. Klasy Bootstrap zderzyły się z klasami z innego frameworka. Tak powstał ten projekt https://github.com/sneas/bootstrap-sass-namespace . Zapraszam do korzystania.
źródło
Jako kolejna uwaga dla wszystkich. Aby modały działały z tłem, możesz po prostu skopiować te style z bootstrap3
źródło
Pierwszy klon bootstrap z github:
Wymagania dotyczące instalacji:
Otwórz scss / bootstrap.scss i dodaj swoją przestrzeń nazw:
Skompiluj bootstrap:
Otwórz
dist/css/bootstrap.css
i usuń przestrzeń nazw z taguhtml
ibody
.Następnie skopiuj zawartość folderu dist do swojego projektu i gotowe.
Baw się dobrze!
źródło