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? :)