1. Dom
  2. Pytanie i odpowiedź
  3. Dostosowywanie szablonu Bootstrap CSS

Dostosowywanie szablonu Bootstrap CSS

2011-12-21 13 views
87

Właśnie zaczynam od Bootstrap z Twittera i zastanawiam się, jakie są "najlepsze praktyki" w zakresie dostosowywania. Chcę stworzyć system, który wykorzysta całą moc szablonu css (Bootstrap lub inny), będzie całkowicie (i łatwo) modyfikowalny, zrównoważony (tj. - kiedy kolejna wersja Bootstrap zostanie wydana z Twittera, nie będę t trzeba zacząć od nowaDostosowywanie szablonu Bootstrap CSS

na przykład, chciałbym dodać obrazy tła do górnej nawigacji wygląda na to, że są 3 sposoby, aby przejść na ten temat:..

  1. zmodyfikować zajęcia .topbar w bootstrap. css Nieszczególnie mi się to podoba, ponieważ będę miał wiele przedmiotów z .topbar i niekoniecznie chcę je modyfikować w ten sam sposób.
  2. Twórz nowe zajęcia z moimi obrazami tła a i zastosuj oba style (nowy i bootstrap do mojego elementu). Może to spowodować konflikty stylów, których można uniknąć, usuwając klasę .topbar z oddzielnych klas, a następnie używając tylko tych elementów, które nie są nadpisywane przez moją niestandardową klasę. Znowu wymaga to więcej pracy, niż uważam, że powinna być niezbędna, i chociaż jest elastyczna, nie pozwoli mi łatwo aktualizować bootstrap.css, gdy Twitter wypuszcza kolejną ratę.
  3. Użyj zmiennych w .LESS, aby uzyskać dostosowanie. Od ręki wydaje się to dobrym podejściem, ale nie używam. MNIEJ Mam obawy dotyczące kompilacji css na kliencie i stabilności kodu.

Chociaż używam Bootstrap, to pytanie można uogólnić na dowolny szablon CSS.

Z góry dziękuję za wejście.

Źródło

2011-12-21 Anne

+0

Witam @Pabluez, tak, odpowiedziałeś, patrz poniżej. Przepraszam za opóźnienie w odpowiedzi - byłem zajęty na wakacjach. – Anne

+0

Wierzę, że ten artykuł pomoże Ci http://prideparrot.com/blog/archive/2014/6/blog_template_using_bootstrap3_part2 – VJAI

+1

Ten wątek ma charakter informacyjny http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best- praktyki – ZimSystem

Odpowiedz

118

Najlepiej zrobić.

1. widelec twitter-bootstrap z github i klon lokalnie.

bardzo szybko zmieniają bibliotekę/framework (różnią się wewnętrznie, niektóre wolą bibliotekę, powiedziałbym, że to framework, ponieważ zmieniają układ od momentu załadowania go na stronę). Cóż ... rozwidlenie/klonowanie pozwoli ci łatwo pobrać nowe nadchodzące wersje.

2. Nie zmodyfikować plik bootstrap.css

To będzie komplikować swoje życie, gdy trzeba uaktualnić bootstrap (i trzeba będzie to zrobić).

3. Tworzenie własnego pliku css i nadpisać kiedy chcesz oryginalnego bootstrap rzeczy

gdyby ustawić topbar z, powiedzmy, color: black; ale wan to biały, utwórz nowy bardzo specyficzny wybieraka dla tego górny pasek i użyj tej reguły na określonym pasku górnym. Na przykład dla tabeli będzie to <table class="zebra-striped mycustomclass">. Jeśli zadeklarujesz swój plik css po bootstrap.css, to nadpisze to, co chcesz.

Źródło

2011-12-29 19:48:17 Pabluez

+13

+1 Dobra odpowiedź. Wystarczy, że dodasz jego trzeci punkt: możesz utworzyć nową klasę, aby zastosować ją obok starej klasy lub po prostu zastąpić/dodać właściwości, które chcesz zmienić. – Wex

+0

to było to, co miałem na myśli z grami telefonicznymi ...Mam zamiar edytować go w mykustomclass, oprócz pasiastych pasków (klasa bootstrap) – Pabluez

+1

czy jest coś, co możesz dodać do tego, jak to zrobić w "nowym" trybie less/sass? tj: jak można podklasować styl "bootstrap"? dziedzicz wszystko + augment. Muszę się jeszcze zastanowić, czy to jest mix-in, czy przedłużam, czy? przepraszam, że jestem głupi. –

6

Można użyć bootstrap szablon z

http://www.initializr.com/

która zawiera wszystkie pliki bootstrap .less. Możesz następnie zmienić zmienne/zaktualizować mniej plików, jak chcesz, a to automatycznie skompiluje css. Podczas wdrażania skompiluj mniej plików do css.

Źródło

2012-02-20 16:11:21 Tom

9

Od czasu odpowiedzi Pablueza w grudniu, istnieje teraz lepszy sposób na dostosowanie Bootstrapa.

Zastosowanie: Bootswatch wygenerować bootstrap.css

Bootswatch buduje normalne Twitter Bootstrap z najnowszej wersji (cokolwiek zainstalować w katalogu bootstrap), ale również importuje dostosowań. Ułatwia to korzystanie z najnowszej wersji Bootstrap, przy zachowaniu niestandardowego CSS, bez konieczności zmiany czegokolwiek na temat HTML. Możesz po prostu kołysać pliki boostrap.css.

Źródło

2012-04-16 00:36:03 mdashx

+0

można opracować na najlepszy sposób korzystania z tego. Ściągnąłem bootwatch i zbudowałem swoje css za pomocą metody zamiany próbek: motyw, ale wciąż jestem zaintrygowany, które pliki powinienem umieścić w miejscu. Próbuję dostać się do sytuacji, w której mogę pobrać zaktualizowaną wersję bootstrap lub motywu bootwatch i używać go, ale nadal używam moich dostosowanych zmiennych. (Pracuję w VisualStudio2013 Pro, jeśli to robi różnicę). Nie chcę używać javascript do kompilacji. Na razie jestem w porządku z uruchomieniem polecenia budowania. Później spróbuję znaleźć dobrą metodę automatyzacji. Dzięki Mark – mark1234

19

Myślę, że oficjalnie preferowanym sposobem jest teraz użycie Less i albo dynamicznie przesłonić plik bootstrap.css (przy użyciu less.js), albo ponownie skompilować plik bootstrap.css (przy użyciu węzła lub kompilatora Less).

Z Bootstrap docs, oto jak zastąpić style bootstrap.css dynamicznie:

Pobierz najnowszą Less.js i zawierać ścieżkę do niego (i Bootstrap) w <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less"> 
    <script src="/path/to/less.js"></script>

Aby przekompilować pliki .less, po prostu zapisz je i załaduj ponownie stronę. Less.js kompiluje je i przechowuje w lokalnej pamięci.

Lub jeśli wolisz statycznie skompilować nowy bootstrap.css z niestandardowych stylów (dla środowisk produkcyjnych):

Install słabiej narzędziem wiersza poleceń poprzez węzeł i uruchom następujące polecenie:

$ lessc ./less/bootstrap.less > bootstrap.css

Źródło

2012-08-19 20:36:11 Symmetric

+0

jest to preferowany sposób :) – Srivathsa

+1

To jest właściwa odpowiedź. –

3

Najlepszym rozwiązaniem moim zdaniem jest opracowanie niestandardowej MNIEJ pliku tym bootstrap.less, niestandardowy plik variables.less i własnymi zasadami:

  1. Clone bootstrap w katalogu root: git clone https://github.com/twbs/bootstrap.git
  2. Zmiana nazwy to "bootstrap"
  3. Utwórz plik package.json: https://gist.github.com/jide/8440609
  4. Tworzenie Gruntfile.js: https://gist.github.com/jide/8440502
  5. stworzyć "mniej" Folder
  6. Kopiowanie bootstrap/mniej/variables.less do "less" folderu
  7. zmienić ścieżkę czcionki: @icon-font-path: "../bootstrap/fonts/";
  8. Tworzenie niestandardowego stylu. mniej pliku w folderze "less", który importuje plik bootstrap.less i zmienne niestandardowe.mniej file: https://gist.github.com/jide/8440619
  9. Run npm install
  10. Run grunt watch

Teraz można modyfikować zmienne w dowolny sposób, zastępują bootstrap zasady w niestandardowym pliku style.less, a jeśli pewnego dnia chcesz zaktualizować bootstrap, możesz zastąpić cały folder bootstrap!

EDIT: I stworzył boilerplate Bootstrap przy użyciu tej techniki: https://github.com/jide/bootstrap-boilerplate

Źródło

2014-01-15 17:42:18 Jide

3

Niedawno napisał post o tym, jak robiłem to na Udacity w ciągu ostatnich kilku lat. Ta metoda oznaczała, że ​​mogliśmy aktualizować Bootstrap, gdy tylko chcieliśmy, bez konfliktów scalających, wyrzuconych zadań itp. Itp.

Post zawiera bardziej szczegółowe przykłady, ale podstawową ideą jest:

  • Zachowaj nieskazitelną kopię programu ładującego i nadpisuj go na zewnątrz.
  • Zmodyfikuj jeden plik (bootstrap's variables.less), aby zawierał własne zmienne.
  • Utwórz plik witryny @ include bootstrap.less, a następnie przesłonięcia.

To znaczy, używając mniej, a kompilowanie go do CSS przed wysłaniem go do klienta (client-side mniej, jeśli wybredny, a ja generalnie unikać go), ale to jest bardzo dobre dla pielęgnowalności/Możliwość rozbudowy i coraz Kompilacja LESS jest naprawdę łatwa. Połączony kod Gitub ma przykład użycia chrząknięcia, ale jest wiele sposobów na osiągnięcie tego - nawet GUI, jeśli to jest twoje.

korzystania z tego rozwiązania, Twój przykład problemem będzie wyglądać następująco:

  • zmienić kolor bar nav z @ NavBar-odwrotnego-BG w swojej variables.less (nie bootstrap'S)
  • Dodaj swoją pasku nawigacyjnym style do bootstrap_overrides.less, nadpisując wszystko, co musisz, jak idziesz.
  • Szczęście.

Kiedy przychodzi czas na uaktualnienie bootstrapu, po prostu wymienisz nieskazitelną kopię początkową i wszystko będzie działać (jeśli bootstrap zmienia zmiany, będziesz musiał zaktualizować przesłonięcia, ale musisz mimo to)

Wpis na blogu ze spacją to here.

Przykładowy kod na github to here.

Źródło

2015-01-03 23:10:29 betaorbust

Powiązane problemy

 Powiązane problemy