Bootstrap - jak modyfikować elementy frameworka?

Question

Hejka, czaruje od kilku dni w bootstrapie i chce wykorzystać go w moim projekcie. No ale jak wiadomo, każdy projekt jest inny ,a przynajmniej być powinien. Bootstrap oferuje w miare fajne i responsywne menu, ale załóżmy, że jestem łapczywy i chcę nieco zmodyfikować to menu. Nie mówię tu o jakichś mega zmianach, ale no chociaż kolor należy zmienić albo zmienić nieco wielkość. 

Ale do rzeczy, chcę wiedzieć jak odwołać się do tych komponentów w CSS. Na przykład:

mam <button class="btn btn-lg" type="button">Duży przycisk</button> - jak mogę w css zmienić np jego kolor, albo dodać box shadow? Da się w ogóle? Ta sama sytuacja w przypadku menu:

<nav class="navbar navbar-inverse navbar-static-top"> to jest pasek menu rozciągający się na całą szerokość stronki. W jaki sposób mogę to zmniejszyć, albo jakkolwiek odwołąć się do tego w CSS?

Comments

Pobierz sobie Bootstrapa w formie .zip - wypakuj go i w pliku .css (bootstrapa) możesz zmieniać co chcesz.

Jeśli dobrze znalazłem, to jest to ten plik w strukturze folderów, którą wypakowałeś: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css 

Answer 1

Ściągasz plik bootstrap.css, tworzysz plik custom.css
Następnie używasz Zbadaj element i w ciągu kilku sekund kopiujesz selektor CSS i modyfikacje wprowadzasz w custom.css. Ja tak przynajmniej robię robiłem gdy używałem tego frameworka.

Np.:

.qa-form-light-button {
    padding-left: 0;
}

Comments

Tak, to jest najszybsze rozwiązanie, sam tak robię ;)

Jeśli zależy Ci na redukcji nadpisów w CSS to możesz te zmiany robić bezpośrednio w pliku bootstrapa z tym że musisz się wtedy liczyć z tym, że będą trudności jeśli będziesz chciał podmienić pliki bootstrapa np. ze względu na aktualizację.

Answer 2

Ściągasz Bootstrapa jako zbiór plików LESS i stosujesz jako zbiór mixinów. Tyle.

Answer 3

Załaduj swój plik .css za tym bootstrapowym i w nim normalnie styluj elementy i odwołuj się np. do .navbar, .btn-lg itd.

Comments

do takich elementów jak przycisk się odwołasz, fakt, ale do takich? <nav class="navbar navbar-inverse navbar-static-top">

---

klasa navbar-inverse definiuje styl. wywal ją i daj swoją lub po prostu nadpisz ją w swoim arkuszu css. googlaj co dane klasy robią i te które odpowiadają za  wygląd albo wywalaj i dawaj swoje albo nadpisuj ;) Ps. polecam gorąco, sam z tego korzystałem na początku: https://kursbootstrap.pl