twitter-bootstrap
Personalizzazione dello stile di bootstrap di Twitter

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

Osservazioni

Una cosa da notare è che si deve citare il nome custom.css dopo il bootstrap.css principale, altrimenti i valori di custom.css non verranno effettivamente implementati.

Sostituzione del CSS predefinito

Tutti adorano twitter bootstrap , ma a qualcuno di noi non piace il design predefinito. Ecco una semplice guida su come iniziare a personalizzare il design di boostrap. Twitter boostrap quando clonato fornisce un set di file css predefiniti che possiamo sovrascrivere.

Il file css della posta che dobbiamo sovrascrivere è boostrap.min.css nella boostrap.min.css boostrap/dist/css .

Per sovrascrivere il design predefinito di boostrap segui questi 2 semplici passaggi.

custom.css un file custom.css (o puoi custom.css come vuoi) e collegarlo al tuo 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>

Inizia a personalizzare. Ad esempio vogliamo cambiare il colore del pulsante predefinito. Se si desidera utilizzare lo stile di pulsante predefinito di bootstrap, è necessario aggiungere la classe btn al <button class="btn">Sample</button> . Basta scrivere il seguente codice sul tuo custom.css .
```
.btn{
    background-color:red;
}
```
Il codice sopra produrrà qualcosa di simile.
Predefinito :

Personalizzato:

Questa tecnica ci salverà dalla riscrittura degli stili dell'intero pulsante che sono stati già scritti dai contributori di boostrap. Questo ci ha anche impedito di scrivere la nostra classe CSS che per me è meno noiosa.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow