覆盖默认 CSS

Created: November-22, 2018

每个人都喜欢 twitter bootstrap ，但我们中的一些人不喜欢它的默认设计。所以这里有一个关于如何开始定制 boostrap 设计的简单指南。克隆时的 Twitter boostrap 提供了一组我们可以覆盖的默认 css 文件。

我们需要覆盖的邮件 css 文件是 boostrap/dist/css 目录下的 boostrap.min.css。

要覆盖 boostrap 的默认设计，请遵循以下 2 个简单步骤。

创建一个 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>

开始定制。例如，我们想要更改默认按钮的颜色。如果你想使用 bootstrap 的默认按钮样式，你需要在 <button class="btn">Sample</button> 标签上添加 btn 类。只需在 custom.css 上编写以下代码即可。
```
.btn{
    background-color:red;
}
```
上面的代码将生成这样的东西。

默认值：

定制：

这种技术将使我们无法重写已由 boostrap 贡献者编写的整个按钮样式。这也使我们免于编写自己的 css 类，这对我来说不那么乏味。