Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Jak dostosować wygląd Bootstrap?

8

Hej, witam po tygodniu przerwy! Powód, dla którego mnie nie było możecie już oglądać już od wczoraj… Chodzi oczywiście o nowy wygląd bloga – po przejściu na WordPress, żaden z darmowych tematów niezbyt mi się nie podobał, dlatego postanowiłem, że zamiast kupować jakiś płatny, zrobię swój własny, a przy okazji się czegoś nowego nauczę… 🙂 No ale ja dziś nie o tym przecież… Dziś pokażę Wam jak dostosować wygląd Bootstrap do własnych potrzeb.

Jednym z efektów ubocznych mojej ostatniej pracy nad tematem interfejsu użytkownika do tego bloga jest też niniejszy wpis, ponieważ temat ten oparłem na opisywanym przeze mnie nie tak dawno temu frameworku Bootstrap. Jak mogliście się dowiedzieć, Bootstrap to zestaw predefiniowanych klas CSS, pozwalających na tworzenie w pełni responsywnych interfejsów użytkownika. Do tego dochodzą klasy pozwalające nadać ładny styl praktycznie wszystkim elementom HTML. Tak jak wspominałem w przytoczonym powyżej wpisie, dostępny jest też edytor, pozwalający zmieniać nam różne parametry tych klas. Co jednak, jeśli domyślny sposób wyświetlania nam nie odpowiada i chcielibyśmy dość mocno ingerować w jego wygląd? Okazuje się, że to dość proste!

Jak dostosować wygląd Bootstrap do własnych potrzeb?

Oczywiście najlepiej będzie to pokazać na przykładzie. Weźmy chociażby klasę form-control, służącą do nadawania odpowiedniego wyglądu i zachowania kontrolkom formularza:

<input id="author" class="form-control" type="text" placeholder="Wpisz swoje imię lub nick..." size="30" value="test" name="author">

Standardowo dzięki tej klasie, element input ma zaokrąglone narożniki, dodany jest wokół niego cień, a gdy wybierze się tę kontrolkę, dodawana jest jej niebieska obwódka. Poniżej pełna definicja tej klasy:

.form-control {
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

Aby teraz zmienić te ustawienia należy (zgodnie z zaleceniami Bootstrap’a) utworzyć własną klasę, niech to będzie na przykład form-control-custom i przypisać ją do odpowiedniego elementu, zaraz po klasie którą chcemy zmodyfikować:

<input id="author" class="form-control form-control-custom" type="text" placeholder="Wpisz swoje imię lub nick..." size="30" value="test" name="author">

Następnie przekopiowujemy wszystkie ustawienia klasy form-control do klasy form-control-custom (można je odczytać na przykład za pomocą Firebug’a). Teraz wystarczy tylko w nowo utworzonej klasie odpowiednio zmodyfikować poszczególne ustawienia oraz usunąć te, których nie chcemy zmieniać. Przykładowy efekt poniżej:

.form-control-custom {
    border-radius: 2px;
    box-shadow: none;
    float: left;
}

W moim przykładzie mam tylko trzy zmiany – zmniejszam zaokrąglenie do 2 pikseli, wyłączam cieniowanie oraz dodaję zachowanie float. Klasy styli odpalają się jak wiadomo kaskadowo, a że styl podstawowy został nadany przed tym dodatkowym, „customowym” to nasze zmiany nadpiszą styl Bootstrap’a bez konieczności dodawania hacków typu „!important” itp. Prawda, że proste? 🙂

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!

  • Tigris

    W odpowiedzi na pierwszy akapit:
    Bardzo przejrzysty, podoba mi się prostota i nastawienie na treść. Mam tylko jedno „ale”.
    Prawa Kolumna w stosunku do białego pola tekstu tak mocno kontrastuje, że aż rozprasza. Tym samym lewa kolumna z treścią wydaje mi się ściśnięta. Dodam, że czytam na rozdzielczości 1280x1024px i aż skorzystałem z EverNote żeby uprościć ten widok.

    Osobiście lubię używać LESS niż CSS z Bootstrapem.

    • Burczu

      Hej, dzięki za uwagi! Wezmę je pod rozwagę;)

      Co do LESS – jak najbardziej popieram! Nie chciałem po prostu zaciemniać przykładu.

  • Mniszek

    No to jeszcze komentarze czekaja na responsive 🙂

    • Burczu

      Co masz na myśli? Czegoś nie dopatrzyłem?

      • Mniszek

        zloz sobie strone do postaci minimalnej, czyli wersja komorkowa i zobacz na ten konkretny moj post. im wiecej odpowiedzi, tym wieksze wciecie, a co za tym idzie mniej miejsca na tekst, ktorego w mobilnym wygladzie nie ma 🙂

      • Burczu

        Rzeczywiście, nie zwróciłem na to uwagi… dzięki! Poprawię to w najbliższym czasie!

  • Wojtek(szogun1987)

    Pierwszym podstawowym sposobem na modyfikację wyglądu Bootstrapa jest wykorzystanie zakładki Customize na stronie http://getbootstrap.com/ fajne jest że po ściągnięciu w paczce zip dostajemy pliczek config.json który wskazuje nam jakie ustawienia na formularzu zmieniliśmy, mniej fajne jest to że gdy stwierdzimy że chcemy zmodyfikować coś jeszcze to musimy wszystko ponownie wklepać ręcznie (przynajmniej ja nie znalazłem przycisku zaczytującego konfigurację).

    • Burczu

      Tak, wspominałem już o zakładce Customize w poprzednim wpisie o Bootstrap’ie