[quote=alicja]Bardzo dziękuje za odpowiedzi, wszystkie ustawienia jakie podałam były prawidłowe pomogło dodanie
@import “bootstrap”
do wszystkich plików css , myslałam , że wystarczy do application.css[/quote]
W żadnym wypadku!
Tak jak pisze Dawids, spowoduje to ogromny plik css. Należy rozróżnić przede wszystkim require i @import. Różnica jest zasadnicza, require umieści wprawdzie kod w pliku css, ale chcąc korzystać ze wszystkich dobrodziejstw bootstrapa trzeba użyć @import, które jest słowem kluczowym sass (zresztą tak samo jest przy używaniu less). Zauważ tutaj, że require jest używane zarówno do plików css, jak i js.
Gdybyś chciała pobawić się bootstrapem jeszcze fajniej, to możesz na przykład sama definiować, co chcesz zaciągnąć. Nie wiem jak wygląda Twój plik bootstrap_and_overrides, ale możesz zamiast:
@import "bootstrap"
napisać:
[code=css]// Reset
@import “bootstrap/reset”
// Core variables and mixins
@import “bootstrap/variables”
@import “bootstrap/mixins”
// Grid system and page structure
@import “bootstrap/scaffolding”
@import “bootstrap/grid”
@import “bootstrap/layouts”
// … cała reszta[/code]
Daje Ci to dwie fajne rzeczy. Możesz dodać tylko te części, które Ci pasują (ja często biorę grid / layout / responsive, ale już reszty nie) i oczywiście nadpisać pliki bootstrap/variables jakimiś swoimi.
Pełną listę masz w tym pliku: https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less
Oczywiście musisz dodawać przedrostek bootstrap/ i usuwać rozszerzenie .less, ale ogólnie nazwy plików powinny się zgadzać.
Listę zmiennych masz tutaj: http://twitter.github.com/bootstrap/customize.html
Importowanie bootstrapa niesie za sobą jeszcze jedno dobrodziejstwo, o którym pisałem, tzn. używanie zmiennych i mixinów. Czyli możesz napisać:
.my-fancy-alert
@extend .alert-danger
font: @serifFontFamily //to jest zmienna bootstrapa
Jest to w wielu przypadkach znacznie lepsze niż dodawanie klas w kodzie html. Nie jestem tylko pewien, czy tu właśnie powinno być @extend, czy @include alert-danger. Ogólnie w less to jest słitaśnie rozwiązane, bo zarówno dziedziczenie właściwości jak i mixiny są załatwione tak samo, czyli po prostu:
.my-fancy-alert {
.alert-danger;
}
Jak to jest w sass bootstrap - możesz sprawdzić empirycznie lub patrząc w kod.
I jeszcze ostatnia uwaga na temat assetów, która niektórm przysparza z tego co wiem sporo kłopotów. Jeśli koniecznie chcemy umieścić na stronie jakiś plik css inny niż application.css, za pomocą htmlowego (bo na przykład będzie potrzebny tylko na jednej specyficznej stronie), to plik ten musi być wymieniony w enviroments/production.rb w sekcji:
config.assets.precompile += %w( my_weird_css_file.css )
Wtedy ten plik również będzie prekompilowany i będzie można go umieścić w htmlu za pomocą:
= stylesheet_link_tag 'my_weird_css_file.css'
Z taką wiedzą możesz teraz w pełni wykorzystać moc bootstrapa Pisz, jakbyś jeszcze miała wątpliwości, bo temat assetów wcale nie jest taki prosty jak się to niektórym wydaje