如何设计 Bootstrap 样式？ [复制]答案

【问题标题】：How to style Bootstrap? [duplicate]如何设计 Bootstrap 样式？ [复制]
【发布时间】：2016-05-23 03:47:30
【问题描述】：

我很难理解引导程序 (http://getbootstrap.com/)。你们可能会笑，但这是真的:)

我知道如何添加导航以及它们提供的几乎所有组件

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

复制和粘贴可以完成这项工作，但我们如何设置它的样式？是纯粹的重写类吗？

.navbar {
    my override style
}

.navbar-default {
    my override style
}

或者我们创建自己的类，如果我有博客，我将其称为 blog-nav，然后设置样式以使其看起来像我喜欢的那样？

<nav class="navbar navbar-default blog-nav">

</nav>

我无法理解 Bootstrap 中样式化的想法，我知道 bootstrap 遵循 OOCSS（面向对象的 CSS）架构，我发现这个想法在样式化时非常有效。

回到问题如何设置引导程序样式？例如我想在页面中创建一个交互式面板

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default></div>
        </div>
        <div class="col-md-3">
            ...
        </div>
        <div class="col-md-3">
            ...
        </div>
    </div>
</div>

如何自定义面板？.. 我必须覆盖面板类，还是创建一个新类并将其添加到面板旁边？

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default my-panel<!-- Like this? -->></div>
        </div>
    </div>
</div>

我该如何遵循 OOCSS，我已经了解了这个概念，但是分离类意味着每个类都将具有特定的样式，而另一个类将基于父类（base/object）工作/样式化。我如何确定每个班级都有这个和那个样式？这对我来说很难:(

如果有人对此有提示以及如何设计引导程序或任何相关的最佳实践，请与我分享:) 和和平。

谢谢

【问题讨论】：

只要确保在 Bootstrap 样式表之后调用带有自定义代码的样式表，就可以了。祝你好运。
twitter-bootstrap 与引导无关！

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

自定义引导程序的基本思想是重写引导程序类。

所以在您的html 文件中，您首先调用bootstrap.css 或bootstrap.min.css 文件。根本不要编辑这个文件。

如果你想修改一个特定的类，制作你自己的style.css 文件并在其中创建一个同名的类。现在你可以在这个类中添加你想要的所有样式。

现在，当您调用 style.css 时，请确保它始终位于 bootstrap.min.css 类的下方，以便覆盖生效。

所以html 页面的head 部分看起来像：

<head>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
   <link href="/css/style.css" rel="stylesheet" type="text/css">
</head>

例如：如果你想修改.panel 类的样式，在你的style.css 文件中，

.panel{
//Your styles. The class name will be exactly same as the bootstrap class name. 
}

【讨论】：

但是如果我想要不同的面板变体怎么办？如果我为 .panel 设置样式，它将适用于所有面板。
是的，它将适用于所有面板。您可以创建自定义类并将其与 html 中的引导类一起添加

【解决方案2】：

你需要在这里做的是。制作您的自定义样式表并放在引导样式表之后。像这样

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/customstyle.css" rel="stylesheet">

我更喜欢创建自己的自定义类并将其与引导程序类一起使用，因此如果将来您想更改引导程序版本，那么它不会影响您的更改。

你需要关注的另一件事是：

如果没有必要，尽量避免使用 !important 属性
不要触摸引导样式或 js 文件。更改您的自定义样式
将媒体查询放在您的自定义样式之后。

【讨论】：

所以基本上最好在bootstrap类之后添加我自己的类？例如

是的，没错。自己上课。