相关疑难解决方法(0)

我刚从Twitter开始使用Bootstrap,我想知道什么是"最佳实践"用于定制.我想开发一个系统,该系统将利用一个CSS模板的所有电源(引导或其他),彻底(容易地)修改的,是可持续的(即 - 当引导的下一个版本是从Twitter的我不要公布"我必须重新开始.

例如,我想在顶部导航中添加背景图像.看起来有三种方法可以解决这个问题:

1. 修改bootstrap.css中的.topbar类.我不是特别喜欢这个,因为我会有很多.topbar项目,我不一定要以同样的方式修改它们.
2. 使用我的背景图像创建新类并应用这两种样式(new和bootstrap到我的元素).这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中然后仅使用我的自定义类未处理的部分来避免这种冲突.同样,这需要比我认为必要的更多工作,虽然它很灵活,但是当Twitter发布下一部分时,它不允许我轻松更新bootstrap.css.
3. 使用.LESS中的变量来实现自定义.这似乎是一个很好的方法,但没有使用过.很少我担心在客户端编译css和代码可持续性.

虽然我使用的是Bootstrap,但这个问题可以推广到任何css模板.

提前感谢您的意见.

我有一个应用程序,其中设计需要从桌面到平板电脑的1280断点,或者xl到lg.但是,Bootstrap本身的xl断点为1200.

我需要为引导程序全局更改xl断点.我是否必须从源文件重新编译Bootstrap 4？

我尝试使用我的Sass构建设置:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1280px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

但是,xl全局的断点没有任何改变,它仍然会在1200px宽度处进行中断.

我使用Bootstrap 4.5并bg-dark在我的 HTML 模板中使用。我想实现一个“亮/暗”开关。

所以，Bootstrap 有一个bg-lightcss 类，但我不确定当前的方法如何使用它。让我澄清一下我的困惑：

1. 一旦“开关”打开，我是否应该替换所有出现的bg-darkwith bg-light？

2. 如果我想稍微修改的颜色bg-light和bg-dark，是“主题化”的正确方法？我找不到任何示例来覆盖这些变量（通过 SASS），除了在我的 CSS 中手动覆盖它们，例如.bg-dark { ... }

非常感谢！

编辑:这个问题被标记为重复这一个,但看到接近这个答案的末尾增编,看看这个问题不问,什么回答不回答.

我正在使用一个使用Bootstrap 3的Web应用程序.我有一个基本的3层覆盖架构,其中1)Bootstrap的_variables.scss包含核心变量,2)_app-variables.scss包含覆盖Bootstrap的基本app变量_variables.scss和3)_client-variables.scss包含覆盖_app-variables.scss的特定于客户端的自定义.#2或#3(或两者)都可以是空白文件.所以这是覆盖顺序:

_variables.scss // Bootstrap's core
_app-variables.scss // App base
_client-variables.scss // Client-specific

在理论上足够简单,但由于我称之为"变量依赖"而出现问题 - 变量被定义为其他变量.例如:

$brand: blue;
$text: $brand;

现在,假设上述变量在_variables.scss中定义.然后让我们说在_app-variables.scss中,我只覆盖$ brand变量使其变为红色:$brand: red.由于SASS按顺序逐行解释代码,它首先将$ brand设置为蓝色,然后将$ text设置为蓝色(因为$ brand在此时为蓝色),最后将$ brand设置为红色.因此最终结果是,之后更改$品牌不会影响任何基于旧品牌价值的变量:

_variables.scss
---------------------
$brand: blue;
$text: $brand; // $text = blue
.
.
.

_app-variables.scss
---------------------
$brand: red; // this does not affect $text, b/c $text was already set to blue above.

但显然这不是我想要的 - 我希望我的$品牌改变能够影响所有依赖它的东西.为了正确覆盖变量,我现在只是将_variables.scss的完整副本复制到_app-variables.scss中,然后在_app-variables中进行修改.同样地,我将_app-variables.scss的完整副本复制到_client-variables.scss中,然后在_client-variables.scss中进行修改.从维护的角度来看,这显然不太理想(轻描淡写) - 每当我对_variables.scss(在Bootstrap升级的情况下)或_app-variables.scss进行修改时,我都必须手动涓流改变文件覆盖堆栈.此外,我不得不重新宣布一些我甚至可能无法克服的变量.

我发现LESS有他们所谓的"延迟加载"(http://lesscss.org/features/#variables-feature-lazy-loading),其中变量的最后一个定义在任何地方使用,甚至在最后一个定义之前.我相信这会解决我的问题.但有没有人知道使用SASS的适当的变量覆盖解决方案？

附录:
这是我已经考虑过的一种技术:以相反的顺序包含文件,!default用于所有变量(这个技术也在这个问题的答案中提出).所以这是如何发挥作用: …

我使用BootstrapCDN.其他样式用sass编写并由gulp构建.我需要创建自己的breakpionts.如果我使用CDN,是否可以制作它们？我无法弄清楚该怎么做.我必须创建这些断点:

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;

我想得到这样的东西:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->

我找到了手册,我正在尝试这个:

$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)  !default;

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px, …

我试图自定义一个Bootstrap 4.我想将_variable.scss文件中的设置复制到_custom.scss来覆盖.但我没有在源代码中找到_custom.scss文件.如何在项目中添加此_custom.scss文件？

我想改变许多东西,例如按钮颜色,或者例如更改导航栏(标题)上的背景图像颜色.我使用boostrap-sass gem所以我不能使用boostrap网站' Customize page

我是否真的应该在我的文件custom.css.scss上覆盖所有这些,或者我可以在更低的位置更改这些吗？我没有找到.css文件允许我在我的项目文件中执行此操作(我搜索了所有的lib,app和供应商/资产,但现在我找到了boost的css.我怀疑这是因为他们不在那里,但他们'直接在gem文件中)我有很多变化,所以我觉得支持这么多东西不是最好的选择.

最好的方法是什么？谢谢

我正在使用Bootstrap Twitter做我的第一步,并且需要扩展组件.例如,我想更改导航栏背景,但不更改原始css文件.

我尝试.test使用新背景创建一个新类:

.test{
    background-color: red !important;
}

我在hmtl中调用了它:

 <div class="navbar navbar-fixed-top test">

但是,它不起作用.怎么办呢？

我正在尝试在我的项目中使用Bootstrap v4变量,但它存储在array(_variables.scss)中:

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

我怎样才能在我的sass中引用它:

@media(max-width: $grid-breakpoints[xs]) {
  font-size: 20px;
}

所以这是来自Bootstrap文档的引用:

Bootstrap 4中的每个Sass变量都包含!default标志,这意味着即使在定义了原始变量之后,您也可以覆盖自己Sass中的默认值.

以下是我的theme.scss文件内容:

// Bootstrap original
@import "bootstrap/scss/bootstrap";

// Variables overrides
@import "custom-variables";

自定义custom-variables.scss文件的内容(仅测试):

$body-color: #555;
$font-family-base: serif;

所有东西都可以编译好,但是没有更改样式(例如,主体颜色和基本字体系列保持原始Bootstrap文件中的相同.来吧？

我要导入的字体本身没有 500 的字体粗细（这是 Bootstrap 开箱即用的字体粗细之一）。如何更改默认值。我在这里看了：https : //getbootstrap.com/docs/4.1/getting-started/theming/#variable-defaults

遵循 B5 新文档，这是您应该如何使用新实用程序 API 添加新实用程序的方式。我还没有得到新的输出。

例子：

@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor
      responsive: true,
      values: auto pointer grab,
    )
  )
);

我的文件：

@import "bootstrap.scss";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

• 我需要导入 bootstrap.scss 因为 $utilities 否则未定义
• 目标是添加一个新属性以使按钮变圆。简单示例以测试新 API。虽然不工作
• 我正在使用https://github.com/twbs/bootstrap-npm-starter来编译 scss 文件：src是 starter.scss，输出是 starter.css

我找不到新的属性按钮四舍五入