Szukaj…


Uwagi

Należy zauważyć, że należy wymienić nazwę custom.css po głównym bootstrap.css, w przeciwnym razie wartości custom.css nie zostaną faktycznie zaimplementowane.

Przesłanianie domyślnego CSS

Wszyscy uwielbiają pasek startowy na Twitterze , ale niektórym z nas nie podoba się domyślny projekt. Oto prosty przewodnik, jak rozpocząć dostosowywanie projektu boostrap. Boostrap Twitter po sklonowaniu zapewnia zestaw domyślnych plików css, które możemy zastąpić.

Plik css poczty, który musimy zastąpić, to boostrap.min.css w katalogu boostrap/dist/css .

Aby zastąpić domyślny projekt boostrap, wykonaj 2 proste kroki.

  1. custom.css plik custom.css (lub możesz nadać mu dowolną nazwę) i połącz go z custom.css index.html

    <html>
    <head>
        <title>Customize Bootstrap</title>
    
        <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css">
        <!-- This mus be declared after the bootstrap.min.css -->
        <link rel="stylesheet" type="text/css" href="path/to/your/custom.css">
    </head>
    <body>
        <!-- Do something -->
    </body>
    </html>
    
  2. Zacznij dostosowywać. Na przykład chcemy zmienić kolor domyślnego przycisku. Jeśli chcesz użyć domyślnego stylu przycisku bootstrap, musisz dodać klasę btn do <button class="btn">Sample</button> . Po prostu napisz następujący kod na custom.css .

    .btn{
        background-color:red;
    }
    

    Powyższy kod wytworzy coś takiego.

    Domyślna :

    wprowadź opis zdjęcia tutaj

    Zwyczaj :

    wprowadź opis zdjęcia tutaj

Ta technika uratuje nas przed przepisaniem całych stylów przycisków, które zostały już napisane przez autorów boostrap. To również uratowało nas przed napisaniem własnej klasy css, która jest dla mnie mniej uciążliwa.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow