Question

我很难理解bootstrap（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中的样式，我知道引导程序遵循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，我已经得到了概念，但是分离类意味着每个类将具有特定的样式，而另一个类将基于父类（基础/对象）工作/样式化。我怎样才能确定每个班级都有这个和那个样式？这对我来说很难:(

如果有人有关于这方面的提示以及如何设计引导程序或相关内容的最佳做法，请与我分享:)和和平。

谢谢

Answer 1

自定义引导程序的基本思想是覆盖引导类。

因此，在html文件中，您首先要调用bootstrap.css或bootstrap.min.css文件。根本不要编辑此文件。

如果要修改特定类，请创建自己的style.css文件并创建一个具有相同名称的类。现在，您可以在此课程中添加所需的所有样式。

现在，当您致电style.css时，请确保它始终位于bootstrap.min.css级别下方，以使覆盖生效。

因此head页面的html部分如下所示：

<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. 
}

Answer 2

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

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

我更喜欢制作您自己的自定义类并将其与引导类放在一起，以便将来如果您想更改引导版本，那么它不会影响您的更改。

您需要遵循的其他事项是：

如果没有必要，尽量避免使用！重要财产
不要触摸bootstrap样式或js文件。以自定义样式进行更改
将媒体查询放在自定义样式之后。

如何设置Bootstrap样式？

2 个答案: