twitter-bootstrap
Aanpassing Twitter Bootstrap-stijl

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

Opmerkingen

Een ding om op te merken is dat men de naam custom.css moet vermelden na de hoofdbootstrap.css, anders worden de waarden van custom.css niet daadwerkelijk geïmplementeerd.

Standaard CSS overschrijven

Iedereen houdt van Twitter-bootstrap , maar sommigen van ons houden niet van het standaardontwerp. Dus hier is een eenvoudige gids over hoe u het ontwerp van boostrap kunt beginnen aanpassen. Twitter boostrap wanneer gekloond biedt een set standaard CSS-bestanden die we kunnen overschrijven.

Het e-mail css-bestand dat we moeten overschrijven is de boostrap.min.css onder de boostrap/dist/css .

Volg deze 2 eenvoudige stappen om het standaardontwerp van boostrap te negeren.

Maak een custom.css (of noem het wat je maar wilt) en koppel het aan je 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>

Begin met aanpassen. We willen bijvoorbeeld de kleur van de standaardknop wijzigen. Als je de standaardknopstijl van bootstrap wilt gebruiken, moet je de klasse btn toevoegen aan je tag <button class="btn">Sample</button> . Schrijf gewoon de volgende code op uw custom.css .
```
.btn{
    background-color:red;
}
```
De bovenstaande code zal zoiets produceren.
Standaard :

Op maat :

Deze techniek zal ons redden van het herschrijven van de hele knopstijlen die al door boostrap-bijdragers zijn geschreven. Dit heeft ons ook gered van het schrijven van onze eigen CSS-klasse die voor mij minder vervelend is.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow