Jak dostosować bootstrap css przy użyciu bootstrap-sass

Question

Chciałbym zmienić wiele rzeczy, na przykład kolor przycisków lub na przykład zmienić kolor tła obrazu na pasku nawigacji (nagłówek). Używam programu boostrap-sass gem, więc nie mogę użyć witryny boostrap "Customize page

Czy naprawdę powinienem zastąpić te wszystkie na moim pliku custom.css.scss, czy mogę zmienić je gdzieś na niższym poziomie? Nie znajduję plików .css pozwalających mi to zrobić w moim pliku projektu (przeszukałem wszystkie biblioteki lib, aplikacje i dostawców/zasoby, ale nowsze znalazłem css boostrap.) Podejrzewam, że to dlatego, że ich nie ma, ale oni 're bezpośrednio w plikach gem) Mam wiele zmian, więc czuję się przesadnie, tak wiele rzeczy nie jest najlepszą opcją.

Jaki jest najlepszy sposób na zrobienie tego? Dzięki

Answer 1

Nigdy nie należy modyfikować oryginalnych plików Boostrap. Najlepszą opcją jest zastąpienie zajęć własnymi. Możesz to zrobić, tworząc plik css w folderze assets/stylesheets, który zostanie automatycznie dołączony do aplikacji.

Answer 2

Zacząłem używać smaku Sass na Twitterze Bootstrap i właśnie wymyśliłem sensowną strukturę moich plików, dzięki czemu mogę tworzyć własne niestandardowe przesłonięcia bez naruszania plików podstawowych i zachować wszystkie swoje CSS w jednym pliku dla szybsze ładowanie.

W skrócie umieściłem wszystkie pliki sass w zasobach/sassie i utworzyłem podkatalog o nazwie bootstrap dla plików podstawowych. Następnie tworzę katalog rodzeństwa o nazwie motyw dla moich niestandardowych plików scss.

Przejdź do /bootstrap, a wewnątrz tego katalogu znajduje się plik o nazwie bootstrap.scss, który zawiera wszystkie podstawowe komponenty. Zmień nazwę pliku na theme.scss i umieścić go w katalogu nadrzędnego tak:

Jak widać mam już jakiś zwyczaj unieważniając Sass zawiera już pliki w katalogu tematycznego. Zostaną one umieszczone na końcu domyślnego kodu CSS programu startowego podczas jego kompilacji.

Magia dzieje, gdy idziesz do theme.scss i zmienić zawierać ścieżki like so. Spójrz na spód obrazu, aby przesłonić i w górę, aby uzyskać odniesienie do zmiennych niestandardowych.

Uwaga: Jeśli chcesz edytować zmienne w bootstrap, że to dobry pomysł, aby zrobić własny _variables.scss plik w katalogu theme i włączenie go na najwyższym swojego pliku theme.scss. W ten sposób możesz przesłonić zmienne bootstrap, które będą obowiązywały wraz z aktualizacjami w przyszłości.

Następnie dodaj na swoich stronach theme.css i voila. Tak właśnie zacząłem to robić i nie natrafiłem jeszcze na żadne błędy.

Uważam to za najmniej skomplikowaną z metod, które widziałem. A kiedy pojawią się nowe aktualizacje, zaktualizuję tylko podstawowe pliki bootstrap i zachowam moje zmiany!

Answer 3

Ja też mam ten sam problem i lubię odpowiedź Gillytecha, ale chciałbym dodać, że nie trzeba kopiować wszystkiego od _zmienników.plik scss do własnego pliku zmiennych. Musisz zadeklarować i użyć tych samych zmiennych, których używa Bootstrap, i upewnić się, że będziesz ładować pliki zmiennych przed załadowaniem pliku _variables.scss Bootstrap.

Zauważysz, że wiele zmiennych Bootstrap ma "! Default" po przypisaniu do niego wartości. Oznacza to, że sass nie zastąpi go, jeśli jest już zdefiniowany.

Więc mój plik theme.scss wygląda następująco:

@import "superhero-variables"; 
@import "bootstrap"; 
@import "superhero-theme"; 

Znalazłem to tutaj pod "Styling Bootstrap ze zmiennymi": http://pivotallabs.com/sass-with-bootstrap/