網(wǎng)站導航

zblogPHP模板zbpkf
zblog免費模板zblogfree
zblog模板學習zblogxuexi
zblogPHP仿站zbpfang

如何更改自舉原色？

有可能改變引導原色以匹配品牌顏色嗎？在我的案例中，我使用了bootswatch的紙質(zhì)主題。

引導數(shù)據(jù)庫5.3(2023年更新)

下面是一個使用現(xiàn)有顏色變量($orange)的例子。

// required to get $orange variable
@import "functions"; 
@import "variables";

$primary: $orange; // set the $primary variable

// merge with existing $theme-colors map
$theme-colors: map-merge($theme-colors, (
  "primary": $primary
));

// set changes
@import "bootstrap";

https://codeply.com/p/qFez3k8oIF

引導數(shù)據(jù)庫5(2021年更新)

對于Bootstrap 5，SASS覆蓋方法仍然是相同的。如果您沒有引用任何現(xiàn)有的引導變量來設(shè)置新的顏色，您只需要設(shè)置主題變量和@import引導

$primary: rebeccapurple;

@import "bootstrap"; //use full path to bootstrap.scss

https://codeply.com/p/iauLPArGqE

引導程序4*

要更改Bootstrap 4 SASS中的主要顏色或任何主題顏色，請在導入bootstrap.scss之前設(shè)置適當?shù)淖兞俊ＤJ值...

$primary: purple;
$danger: red;

@import "bootstrap";

演示:https://codeply.com/go/f5OmhIdre3

在某些情況下，您可能希望從另一個現(xiàn)有的引導變量設(shè)置新的顏色。為此，首先導入函數(shù)和變量，以便它們可以在定制中被引用...

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

演示:https://codeply.com/go/lobGxGgfZE

另見:這個答案，這個答案或改變按鈕顏色(CSS或SASS)

也可以只用CSS來改變原色，但是這需要很多額外的CSS，因為有很多原色的變化(btn-prim ary，alert-prim ary，bg-primary，文本-primary，表格-primary，邊框-primary，等等...)并且其中一些類在邊框、懸停和活動狀態(tài)上有輕微的顏色變化。因此，如果你必須使用CSS，最好使用目標組件，比如改變主按鈕的顏色。

我創(chuàng)造了這個工具:https://lingtalfi.com/bootstrap4-color-generator, 您只需在第一個字段中輸入原色，然后選擇您的顏色，并單擊生成。

然后復制生成的scss或css代碼，粘貼到一個名為my-colors.scss或my-colors.css(或者你想要的任何名稱)的文件中。

一旦將scss編譯成css，就可以在引導css之后包含該css文件，這樣就萬事俱備了。

如果您已經(jīng)創(chuàng)建了my-colors.scss文件并包含在您的head標記中，那么整個過程大約需要10秒鐘。

注意:此工具可用于覆蓋引導的默認顏色(原色、次原色、危險色、...)，但是如果你愿意也可以創(chuàng)建自定義顏色(藍色，綠色，三元色，...).

注2:該工具是為bootstrap 4設(shè)計的(即目前沒有任何后續(xù)版本)。

有兩條路可以走

http://getbootstrap.com/customize/

并在此調(diào)整和下載定制的自舉改變顏色。

或者，您可以將sass與此版本的https://github.com/twbs/bootstrap-sass一起使用，并導入到您的sass assets/樣式表/ _bootstrap.scss中，但在導入之前，您可以更改默認的變量顏色

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

并編譯結(jié)果

自舉5

對于bootstrap 5，您只需轉(zhuǎn)到您的主scss文件并添加:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

或者你想做的任何改變...

并且不要忘記導入bootstrap。

最終的main.scss文件應該如下所示:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";

自舉4

這是對我有用的:

我創(chuàng)建了自己的_custom_theme.scss文件，內(nèi)容類似于:

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

將它添加到bootstrap.scss文件的頂部并重新編譯(在我的例子中，我將它放在一個名為！scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

任何帶有“primary”標簽的元素都有@brand-primary顏色。改變它的方法之一是添加一個定制的css文件，如下所示:

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}

<link  rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>

這可能是一個有點老的問題，但我想分享我發(fā)現(xiàn)的定制bootstrap的最好方法。有一個在線工具叫做bootstrap . build https://bootstrap.build/app.，它非常好用，不需要安裝或構(gòu)建工具！

使用SASS在Bootstrap 4.x中更改默認原色的正確方法，或任何其他顏色，如二次色、成功色等。

創(chuàng)建以下SASS文件，并按照說明導入引導SASS:

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";

使用SaSS 改變品牌顏色

$brand-primary:#some-color;

這將改變所有用戶界面的主要顏色。假設(shè)你想改變按鈕的主要顏色。因此

btn.primary{
  background:#some-color;
}

搜索元素并添加新的css/sass 規(guī)則放入一個新文件中，并在加載引導css后附加它。

這里的大多數(shù)答案或多或少都是正確的，但都有一些問題(對我來說)。所以，最后，我在谷歌上找到了正確的程序，正如專用的引導文檔:https://getbootstrap.com/docs/4.0/getting-started/theming/.中所述

假設(shè)bootstrap安裝在node_modules/bootstrap中。

A.創(chuàng)建your_bootstrap.scss文件:

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

B.在同一文件夾中，創(chuàng)建_your_variables_theme.scss文件。

C.遵循以下規(guī)則自定義_your_variables_theme.scss文件中的引導變量:

根據(jù)需要從_variables.scss中復制并粘貼變量，修改它們的值，并刪除！默認標志。如果a 變量已經(jīng)被賦值，那么它不會被重新賦值 Bootstrap中的默認值。

同一個Sass文件中的變量覆蓋可以在之前或之后出現(xiàn) 默認變量。然而，當覆蓋Sass文件時，您的覆蓋必須在導入引導程序的Sass文件之前進行。

默認變量位于node _ modules/bootstrap/scss/variables . scss中。

這似乎對我在引導v5 alpha 3中工作

_variables-overrides.scss

$primary: #00adef;

$theme-colors: (
  "primary":    $primary,
);

主網(wǎng)站

// Overrides
@import "variables-overrides";

// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";

// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";

// Helpers
@import "@/node_modules/bootstrap/scss/helpers";

// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";

@import "custom";

自舉5.2。更新

如果您正在與SCSS和你想修改顏色，你應該添加地圖到您的SCSS文件。

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2

然后:

$custom-colors: (
        "white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

最后:

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

其余的。

從Bootstrap 4開始，你可以通過在BootstrapColor.net上下載一個簡單的CSS文件來輕松改變Bootstrap的原色。你不需要知道SASS，CSS文件已經(jīng)可以用于你的網(wǎng)站了。你可以選擇你想要的顏色，如藍色、靛藍色、紫色、粉紅色、紅色、橙色、黃色、綠色、藍綠色或青色。

這是一個非常簡單的解決方案。

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

用bg-custom替換bg-dark類。

在CSS中

.bg-custom {
  background-color: red;
}

是的，我建議打開。css文件，檢查頁面并找到您想要更改的顏色代碼，找到全部并替換(取決于您的文本編輯器)為您想要的顏色。對所有你想改變的顏色都這樣做

上一篇vue可以替換jquery

下一篇c 中怎么保存為json數(shù)據(jù)

色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

網(wǎng)站導航

網(wǎng)站導航

網(wǎng)站分類

如何更改自舉原色？

色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

網(wǎng)站導航

網(wǎng)站導航

網(wǎng)站分類

如何更改自舉原色？

相關(guān)文章