Question

如何自定义bootstrap元素？我应该在custom.css中使用完全相同的引导类，还是应该为每个自定义创建新类？

Answer 1

除了bootstrap类之外，我还建议创建新类并将该类添加到HTML元素中。这样你就可以覆盖并向引导类添加信息，并根据需要修改元素。

为什么这样？

这是一种更简洁的方法，因为如果知道引导程序的其他人进入并在您的项目中工作，您希望能够访问默认的未更改的引导程序类。

Answer 2

<强> 1。不要修改bootstrap.css文件

当你需要升级bootstrap时，它会让你的生活变得复杂（你需要这样做）。

<强> 2。创建自己的css文件，并在需要原始引导程序时覆盖

如果他们设置了一个顶部栏，比方说color: black;，但是你白了，为这个顶栏创建一个新的非常具体的选择器，并在特定的顶栏上使用此规则。例如，对于表格，它将是<table class="zebra-striped mycustomclass">。如果你在bootstrap.css之后声明你的css文件，这将覆盖你想要的任何内容。

添加自定义样式表

在Bootstrap CSS文件夹中创建一个新文件，并将其命名为custom.css。

现在，在您网站的部分中，在默认引导样式表之后加载新的自定义CSS文件。它看起来应该是这样的。

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

应用自定义样式要修改或应用其他样式到您的网页，只需将正确的代码添加到您的custom.css文件。无需直接编辑任何原始Bootstrap样式。

例如，如果您确定不喜欢按钮上的圆角，则可以在custom.css文件中应用以下样式。

.btn {
    border-radius: 0px;
}

现在，如果使用默认的Bootstrap样式（.btn类）向网页添加按钮，则角落不会被舍入。这是因为您的自定义样式表会覆盖默认的Bootstrap样式表。

在默认引导样式表之后添加自己的自定义样式表的好处是，如果Bootstrap升级，您只需将Bootstrap样式表替换为新样式表，您的自定义样式将保持不变。请注意，对于主要升级，您可能需要修改自定义样式。尽管如此，即使使用这种方法进行重大升级仍然会容易得多。

Answer 3

根据您的要求，如果需要更改所有输入，请在custom.css中获取bootstrap类，或者仅为一个或两个元素添加自己的类。

Answer 4

您应该在之前充电bootstrap并在之后进行自定义更改。您可以覆盖bootstrap的类，但是您应该在另一个文件上执行它。

这应该是一个很好的做法，因为您可以毫无问题地升级bootstrap的库而不会丢失代码

使用bootstrap类或自己的类来自定义css？

4 个答案: