twitter-bootstrap
Twitter Personnalisation du style Bootstrap

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

Remarques

Une chose à noter est qu'il faut mentionner le nom custom.css après le bootstrap.css principal, sinon les valeurs de custom.css ne seront pas réellement implémentées.

Remplacement du CSS par défaut

Tout le monde aime le bootstrap sur Twitter , mais certains d'entre nous n'aiment pas sa conception par défaut. Donc, voici un guide simple sur la façon de commencer à personnaliser la conception de boostrap. Twitter boostrap lorsque cloné fournit un ensemble de fichiers CSS par défaut que nous pouvons remplacer.

Le fichier css de courrier que nous devons remplacer est le boostrap.min.css sous le boostrap/dist/css .

Pour remplacer la conception par défaut de boostrap, suivez ces deux étapes simples.

custom.css un custom.css (ou nommez-le comme vous voulez) et liez-le à votre 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>

Commencez à personnaliser. Par exemple, nous voulons changer la couleur du bouton par défaut. Si vous voulez utiliser le style de bouton par défaut de bootstrap, vous devez ajouter la classe btn sur la <button class="btn">Sample</button> . Il suffit d'écrire le code suivant sur votre custom.css .
```
.btn{
    background-color:red;
}
```
Le code ci-dessus produira quelque chose comme ça.
Défaut :

Douane :

Cette technique nous évitera de réécrire l'intégralité des styles de boutons déjà écrits par les contributeurs boostrap. Cela nous a également évité d'écrire notre propre classe CSS qui est pour moi moins fastidieuse.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow