twitter-bootstrap
Twitter Bootstrap Style Anpassning

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

Anmärkningar

En sak att notera är att man måste nämna custom.css-namn efter huvudstartstrap.css, annars kommer inte värdena på custom.css faktiskt att implementeras.

Överbryter standard CSS

Alla älskar twitter bootstrap , men vissa av oss tycker inte om att det är standarddesign. Så här är en enkel guide för hur du börjar anpassa boostraps design. Twitter boostrap när klonad ger en uppsättning standard css-filer som vi kan åsidosätta.

Mail-css-filen som vi behöver åsidosätta är boostrap.min.css under boostrap/dist/css katalogen.

För att åsidosätta boostraps standarddesign följer du dessa två enkla steg.

Skapa ett custom.css (eller så kan du namnge det du vill) och länka det till ditt 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>

Börja anpassa. Vi vill till exempel ändra färgen på standardknappen. Om du vill använda bootstraps standardknappstil måste du lägga till btn klassen på dig <button class="btn">Sample</button> -tagg. Skriv bara följande kod på din custom.css .
```
.btn{
    background-color:red;
}
```
Koden ovan kommer att producera något liknande.
Standard :

Anpassad:

Den här tekniken räddar oss från att skriva om hela knappstilarna som redan skrevs av boostrap-bidragsgivare. Detta räddade oss också från att skriva vår egen css-klass som för mig är mindre tråkig.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow