จะเปลี่ยนสีหลักของ bootstrap ได้อย่างไร?

Question 1

เป็นไปได้ไหมที่จะเปลี่ยนสีหลักของ bootstrap ให้ตรงกับสีของแบรนด์ ฉันใช้ธีมกระดาษของ bootswatch ในเคสของฉัน

Question 2

อัปเดต 2020 สำหรับ Bootstrap 4

เมื่อต้องการเปลี่ยนหลักหรือใด ๆของชุดรูปแบบสีใน Bootstrap 4 SASS, ตั้งค่าตัวแปรที่เหมาะสมก่อนที่จะbootstrap.scssนำเข้า สิ่งนี้ทำให้ scss ที่กำหนดเองของคุณสามารถแทนที่ค่าเริ่มต้น! ...

$primary: purple;
$danger: red;

@import "bootstrap";

การสาธิต: https://codeply.com/go/f5OmhIdre3

ในบางกรณีคุณอาจต้องการกำหนดสีใหม่จากตัวแปร Bootstrap อื่นที่มีอยู่ สำหรับ @ นี้นำเข้าฟังก์ชันและตัวแปรก่อนเพื่อให้สามารถอ้างอิงได้ในการปรับแต่ง ...

/* 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 เพิ่มเติมจำนวนมากเนื่องจากมีหลาย-primaryรูปแบบ (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary ฯลฯ ... ) และบางคลาสเหล่านี้มีการเปลี่ยนแปลงของสีเล็กน้อยบนเส้นขอบโฮเวอร์และสถานะที่ใช้งานอยู่ ดังนั้นถ้าคุณต้องใช้ CSS ดีกว่าที่จะกำหนดเป้าหมายการใช้องค์ประกอบหนึ่งเช่นการเปลี่ยนสีปุ่มหลัก

โซลูชันเหล่านี้จะใช้ได้กับBootstrap 5 alpha

Question 3

มีสองวิธีที่คุณสามารถไปได้

http://getbootstrap.com/customize/

และเปลี่ยนสีในการปรับเปลี่ยนนี้และดาวน์โหลด bootstrap ที่กำหนดเอง

หรือคุณสามารถใช้ sass กับเวอร์ชันนี้https://github.com/twbs/bootstrap-sassและนำเข้าใน sass assets / stylesheets / _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;

และรวบรวมผลลัพธ์

Question 4

ฉันได้สร้างเครื่องมือนี้แล้ว: https://lingtalfi.com/bootstrap4-color-generatorคุณเพียงแค่ใส่หลักในฟิลด์แรกจากนั้นเลือกสีของคุณแล้วคลิกสร้าง

จากนั้นคัดลอกโค้ด scss หรือ css ที่สร้างขึ้นแล้ววางลงในไฟล์ชื่อ my-colors.scss หรือ my-colors.css (หรือชื่ออะไรก็ได้ที่คุณต้องการ)

เมื่อคุณรวบรวม scss เป็น cssแล้วคุณสามารถรวมไฟล์ css นั้นไว้หลัง bootstrap CSS ได้แล้วคุณก็พร้อมที่จะไป

กระบวนการทั้งหมดจะใช้เวลาประมาณ 10 วินาทีหากคุณได้รับส่วนสำคัญของมันโดยมีเงื่อนไขว่าไฟล์my-colors.scssถูกสร้างและรวมอยู่ในแท็ก head ของคุณแล้ว

หมายเหตุ: เครื่องมือนี้สามารถใช้เพื่อลบล้างสีเริ่มต้นของ bootstrap (สีหลักรองอันตราย ...

Note2: เครื่องมือนี้ถูกสร้างขึ้นมาเพื่อทำงานร่วมกับ bootstrap 4 (เช่นตอนนี้ไม่ใช่เวอร์ชันที่ตามมา)

Question 5

องค์ประกอบใด ๆ ที่มีแท็ก "primay" จะมีสี @ 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 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 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>

ขยายข้อมูลโค้ด

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไฟล์ CSS แต่งกับบูตนี่คือการเชื่อมโยงที่เป็นประโยชน์: https://bootstrapbay.com/blog/bootstrap-button-styles/

Question 6

Bootstrap 4

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน:

ฉันสร้าง_custom_theme.scss ไฟล์ของตัวเองที่มีเนื้อหาคล้ายกับ:

/* 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";

Question 7

นี่อาจเป็นคำถามเก่าไปหน่อย แต่ฉันต้องการแบ่งปันวิธีที่ดีที่สุดที่ฉันพบในการปรับแต่ง bootstrap มีเครื่องมือออนไลน์ที่เรียกว่าเป็นhttps://bootstrap.build/appbootstrap.build ใช้งานได้ดีและไม่จำเป็นต้องติดตั้งหรือสร้างเครื่องมือ!

Question 8

วิธีที่ถูกต้องในการเปลี่ยนสีหลักเริ่มต้นใน Bootstrap 4.x โดยใช้ SASS หรือสีอื่น ๆ เช่นรองสำเร็จและอื่น ๆ

สร้างไฟล์ SASS ต่อไปนี้และนำเข้า Bootstrap 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";

Question 9

การใช้ SaSS
เปลี่ยนสีของแบรนด์

$brand-primary:#some-color;

สิ่งนี้จะเปลี่ยนสีหลักใน UI ทั้งหมด

ใช้ css -
สมมติว่าคุณต้องการเปลี่ยนสีหลักของปุ่มดังนั้น

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

ค้นหาองค์ประกอบและเพิ่มกฎ css / sass ใหม่ในไฟล์ใหม่และแนบหลังจากที่คุณโหลด bootstrap css

Question 10

กฎ Bootstrap 4

คำตอบส่วนใหญ่ที่นี่มีความถูกต้องมากหรือน้อย แต่ทั้งหมดนี้มีปัญหาบางประการ (สำหรับฉัน) ดังนั้นในที่สุด googleing ผมพบว่าขั้นตอนที่ถูกต้องตามที่ระบุไว้ในเอกสารบูตทุ่มเท: https://getbootstrap.com/docs/4.0/getting-started/theming/

สมมติว่าติดตั้ง bootstrap node_modules/bootstrapแล้ว

A. สร้าง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. ในโฟลเดอร์เดียวกันให้สร้าง_your_variables_theme.scssไฟล์

C. ปรับแต่งตัวแปร bootstrap ใน_your_variables_theme.scssไฟล์ตามกฎนี้:

คัดลอกและวางตัวแปรจาก_variables.scssตามที่ต้องการปรับเปลี่ยนค่าของพวกเขาและเอาธง! เริ่มต้น หากมีการกำหนดตัวแปรไว้แล้วตัวแปรนั้นจะไม่ถูกกำหนดใหม่โดยค่าเริ่มต้นใน Bootstrap

การแทนที่ตัวแปรภายในไฟล์ Sass เดียวกันอาจมาก่อนหรือหลังตัวแปรเริ่มต้น อย่างไรก็ตามเมื่อเอาชนะข้ามไฟล์ Sass, แทนที่คุณจะต้องมาก่อนที่จะนำเข้าไฟล์

ตัวแปรเริ่มต้นมีอยู่ในnode_modules/bootstrap/scss/variables.scss.

Question 11

Bootstrap 5

สำหรับ bootstrap 5 คุณสามารถไปที่ไฟล์ scss หลักและเพิ่ม:

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

หรือการเปลี่ยนแปลงใด ๆ ที่คุณต้องการ ...

และอย่าลืมนำเข้า bootstrap ทันที

ไฟล์ main.scss สุดท้ายของคุณควรมีลักษณะดังนี้:

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


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

Question 12

เนื่องจากเงินทุน 4 คุณสามารถได้อย่างง่ายดายเปลี่ยนสีหลักของเงินทุนของคุณโดยการดาวน์โหลดไฟล์ CSS ง่ายในBootstrapColor.net คุณไม่จำเป็นต้องรู้ SASS และไฟล์ CSS ก็พร้อมใช้งานสำหรับเว็บไซต์ของคุณแล้ว คุณสามารถเลือกสีที่คุณต้องการเช่นสีฟ้าครามม่วงชมพูแดงส้มเหลืองเขียวนกเป็ดน้ำหรือสีฟ้า

Question 13

คุณไม่สามารถเปลี่ยนสีในไฟล์ cdn
ดาวน์โหลดไฟล์ bootstrap
ค้นหาไฟล์ bootstrap.css
เปิดไฟล์ (bootstrsap.css) และค้นหา 'primary'
เปลี่ยนเป็นสีที่คุณต้องการ

Question 14

นี่เป็นวิธีแก้ปัญหาที่ง่ายมาก

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

แทนที่ระดับ BG-มืดกับBG-ที่กำหนดเอง

ใน CSS

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

Question 15

ใช่ฉันขอแนะนำให้เปิดไฟล์. css ตรวจสอบหน้าและค้นหารหัสสีที่คุณต้องการเปลี่ยนและค้นหาทั้งหมดและแทนที่ (ขึ้นอยู่กับโปรแกรมแก้ไขข้อความของคุณ) เป็นสีที่คุณต้องการ ทำเช่นนั้นกับทุกสีที่คุณต้องการเปลี่ยน