时间戳

首页 > 解决方案 > 无法正确修改 boostrap 主题

css - 无法正确修改 boostrap 主题

问题描述

所以我从我在互联网上找到的一个主题添加了一个自定义 .css 文件，它覆盖了一些 boostrap 属性，它似乎适用于某些情况，但是例如，如果我在 :root{} 部分更改原色styles.css，它似乎没有改变任何东西。此外，我应该如何知道在我的渲染中继续使用相同的引导语法？

style.css 的根

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #1abc9c;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #1abc9c;
    --secondary: #2c3e50;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #ffc107;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

引导语法

<Navbar bg="light" expand="lg" bg="dark" variant="dark">

标签： cssreactjssassreact-bootstrap

解决方案

Bootstrap 包括其核心 CSS 类，但也有一个“重新启动”样式表，可以更改核心 HTML5 元素样式。这包括对控制基于文本的继承属性的 html 和 body 元素的更改。他们称这些样式为“重新启动”，但它只是“重置”元素表的更简单版本。该工作表只是选择 HTML5 元素的子集并“重置”它们的一些样式属性，然后再将它们叠加到自定义类上。多年来，我们已经完成了这些类型的 HTML 元素重置，但为新旧浏览器使用了更强大的设置。我发现 Bootstrap 更不成熟的重置版本会导致混乱和不可预测性，在添加 Bootstrap 样式类之前更改默认 UA 浏览器元素的外观，这是可预测的。

为了解决这个问题，我构建了一个 Bootstrap“更清洁”样式表，它可以去除这些样式，同时允许您使用它们的常规类。结果是您可以更好地控制基于文本的继承、在 html 和 body 元素上设置的样式以及它们的整体框模型更改，这些更改在旧代理中并不总是支持。除非有人问，否则我不会在这里张贴那张纸。

但这里是Bootstrap Cleaner 样式表的一个小示例，它将为您删除 Bootstrap 的默认字体和颜色，而不会影响您在 Bootstrap 中使用的其余自定义类。然后，您可以像我一样应用自己的正文字体和颜色，但仍然使用 Bootstrap 的样式类。请注意，这适用于 IE 和非 IE 浏览器，方法是使用后备属性，然后为可以将属性值重置为默认浏览器样式表的较新浏览器使用“all:revert”：

html body {
    display: block;
    margin: initial;
    zoom: 1;
    font-family: sans-serif;
    font-size: initial;
    padding: initial;
    font-weight: normal;
    line-height: normal;
    color: initial;
    text-align: initial;
    background-color: initial;
    all: revert;
}

推荐阅读