css - كيفية تغيير اللون الأساسي bootstrap؟




twitter-bootstrap twitter-bootstrap-3 (8)

أي عنصر يحمل علامة "primay" يحتوي على color @ 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 المخصصة مع bootstrap ، إليك رابط مفيد: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

هل من الممكن تغيير لون bootstrap الأساسي ليتناسب مع لون العلامة التجارية؟ أنا أستخدم موضوع الورق الخاص بـ bootswatch في حالتي.


الطريقة الصحيحة لتغيير اللون الأساسي الافتراضي في 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";

قد يكون هذا السؤال قديمًا بعض الشيء ، لكنني أرغب في مشاركة أفضل طريقة وجدت لتخصيص bootstrap. هناك أداة عبر الإنترنت تسمى bootstrap.build https://bootstrap.build/app . إنه يعمل بشكل رائع ولا يحتاج إلى أدوات التثبيت أو البناء!


لقد قمت بإنشاء هذه الأداة: https://lingtalfi.com/bootstrap4-color-generator ، يمكنك ببساطة وضع الابتدائي في الحقل الأول ، ثم اختيار اللون الخاص بك ، وانقر فوق إنشاء.

ثم انسخ كود scss أو css الذي تم إنشاؤه ، والصقه في ملف باسم my-colours.scss أو my-colours.css (أو أي اسم تريده).

قم بتضمين هذا الملف بعد بدء تشغيل bootstrap css وأنت على ما يرام.

تستغرق العملية بأكملها حوالي 10 ثوانٍ إذا حصلت على جوهرها ، شريطة أن يكون ملف my-colours.scss قد تم إنشاؤه بالفعل وإدراجه في علامة رأسك.

ملاحظة: يمكن استخدام هذه الأداة لتخطي الألوان الافتراضية لأحذية التمهيد (أساسي ، ثانوي ، خطر ، ...) ، ولكن يمكنك أيضًا إنشاء ألوان مخصصة إذا كنت تريد (الأزرق والأخضر والثالث ، ...).

NOTE2: تم إنشاء هذه الأداة للعمل مع bootstrap 4 (أي ليس أي إصدار لاحق في الوقت الحالي).


نعم ، أقترح فتح ملف .css ، وفحص الصفحة والعثور على رمز اللون الذي تريد تغييره والبحث عن الكل والاستبدال (حسب محرر النصوص) للون الذي تريده. قم بذلك بكل الألوان التي تريد تغييرها


هذا هو الحل السهل جدا.

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

استبدال فئة bg-dark ، مع bg-custom .

في CSS

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

تحديث 2018 لـ Bootstrap 4

لتغيير اللون الأساسي ، أو أي من ألوان السمات في Bootstrap 4 SASS ، قم بتعيين المتغيرات المناسبة قبل استيراد bootstrap.scss . يسمح هذا scss المخصص الخاص بك بتجاوز القيم الافتراضية ...

$primary: purple;
$danger: red;

@import "bootstrap";

العرض التوضيحي: https://www.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://www.codeply.com/go/lobGxGgfZE

راجع أيضًا هذه الإجابة أو هذه الإجابة لتغيير لون الزر في (CSS أو SASS)

من الممكن أيضًا تغيير اللون الأساسي باستخدام CSS فقط ، ولكنه يتطلب الكثير من CSS الإضافي نظرًا لوجود العديد من الاختلافات الأولية (btn - أساسي - تنبيه - أساسي - bg - أساسي - نص - أساسي - جدول - أساسي - حد - أساسي ، إلخ ...) وبعض هذه الفئات لها اختلافات ألوان طفيفة على الحدود ، التحويم ، والحالات النشطة. لذلك ، إذا كان يجب عليك استخدام CSS ، فمن الأفضل استخدام مكون واحد مستهدف مثل تغيير لون الزر الأساسي .


  • لا يمكنك تغيير اللون في ملف cdn.
  • قم بتنزيل ملف bootstrap.
  • البحث عن ملف bootstrap.css.
  • افتح هذا الملف (bootstrsap.css) وابحث عن "أساسي".
  • تغييره إلى اللون الذي تريده.






bootstrap-4