بوت استرپ تم

بوت استرپ 4 را با متغیرهای جدید Sass داخلی ما برای ترجیحات سبک جهانی برای تغییر قالب و اجزای آسان سفارشی کنید.

مقدمه

در بوت استرپ 3، قالب‌بندی عمدتاً توسط تغییر متغیرها در LESS، CSS سفارشی و یک شیوه نامه موضوعی جداگانه که در distفایل‌های خود گنجانده‌ایم هدایت می‌شد. با کمی تلاش، می‌توان ظاهر بوت استرپ 3 را بدون دست زدن به فایل‌های اصلی دوباره طراحی کرد. بوت استرپ 4 روشی آشنا، اما کمی متفاوت ارائه می دهد.

اکنون، قالب‌بندی توسط متغیرهای Sass، نقشه‌های Sass و CSS سفارشی انجام می‌شود. صفحه سبک تم اختصاصی دیگری وجود ندارد. در عوض، می‌توانید تم داخلی را برای افزودن گرادیان، سایه‌ها و موارد دیگر فعال کنید.

ساس

از فایل‌های Sass منبع ما برای استفاده از متغیرها، نقشه‌ها، میکس‌ها و موارد دیگر استفاده کنید.

ساختار فایل

در صورت امکان، از تغییر فایل های اصلی بوت استرپ خودداری کنید. برای Sass، این به معنای ایجاد شیوه نامه خود است که Bootstrap را وارد می کند تا بتوانید آن را تغییر دهید و گسترش دهید. با فرض اینکه از یک مدیریت بسته مانند npm استفاده می کنید، ساختار فایلی به شکل زیر خواهید داشت:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

اگر فایل‌های منبع ما را دانلود کرده‌اید و از یک مدیریت بسته استفاده نمی‌کنید، می‌خواهید به صورت دستی چیزی شبیه به آن ساختار را تنظیم کنید و فایل‌های منبع بوت استرپ را از فایل‌های منبع خود جدا نگه دارید.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

واردات

در خود custom.scss، فایل‌های Sass منبع Bootstrap را وارد می‌کنید. شما دو گزینه دارید: همه Bootstrap را بگنجانید یا قطعات مورد نیاز خود را انتخاب کنید. ما دومی را تشویق می‌کنیم، اگرچه توجه داشته باشید که برخی الزامات و وابستگی‌ها در اجزای ما وجود دارد. همچنین باید مقداری جاوا اسکریپت را برای افزونه های ما اضافه کنید.

// Custom.scss
// Option A: Include all of Bootstrap

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

// Custom.scss
// Option B: Include parts of Bootstrap

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

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

با این تنظیمات، می توانید شروع به تغییر هر یک از متغیرها و نقشه های Sass در خود کنید custom.scss. همچنین می‌توانید در // Optionalصورت نیاز بخش‌هایی از Bootstrap را در زیر بخش اضافه کنید. پیشنهاد می کنیم از پشته کامل واردات از bootstrap.scssفایل ما به عنوان نقطه شروع استفاده کنید.

پیش فرض های متغیر

هر متغیر Sass در Bootstrap 4 شامل !defaultپرچمی است که به شما امکان می دهد بدون تغییر کد منبع بوت استرپ، مقدار پیش فرض متغیر را در Sass خود لغو کنید. متغیرها را در صورت نیاز کپی و جایگذاری کنید، مقادیر آنها را تغییر دهید و !defaultپرچم را حذف کنید. اگر متغیری قبلاً اختصاص داده شده باشد، با مقادیر پیش‌فرض در Bootstrap دوباره تخصیص داده نمی‌شود.

لغو متغیرها در همان فایل Sass می تواند قبل یا بعد از متغیرهای پیش فرض باشد. با این حال، هنگامی که در فایل‌های Sass نادیده گرفته می‌شوید، بازنویسی‌های شما باید قبل از وارد کردن فایل‌های Sass Bootstrap انجام شود.

در اینجا یک مثال است که هنگام وارد کردن و کامپایل Bootstrap از طریق npm ، background-colorو colorfor را تغییر می‌دهد:<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

در صورت لزوم برای هر متغیری در Bootstrap، از جمله گزینه های جهانی زیر، این کار را تکرار کنید.

نقشه ها و حلقه ها

Bootstrap 4 شامل تعدادی نقشه Sass، جفت‌های ارزش کلیدی است که تولید خانواده‌های CSS مرتبط را آسان‌تر می‌کند. ما از نقشه های Sass برای رنگ ها، نقاط شکست شبکه و موارد دیگر استفاده می کنیم. درست مانند متغیرهای Sass، همه نقشه‌های Sass شامل !defaultپرچم هستند و می‌توان آن‌ها را لغو و گسترش داد.

برخی از نقشه های Sass ما به طور پیش فرض در نقشه های خالی ادغام می شوند. این کار برای امکان گسترش آسان یک نقشه Sass انجام می شود، اما به قیمت حذف موارد از نقشه کمی دشوارتر است.

نقشه را اصلاح کنید

برای تغییر رنگ موجود در $theme-colorsنقشه، موارد زیر را به فایل Sass سفارشی خود اضافه کنید:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

به نقشه اضافه کنید

برای افزودن یک رنگ جدید به $theme-colors، کلید و مقدار جدید را اضافه کنید:

$theme-colors: (
  "custom-color": #900
);

حذف از نقشه

برای حذف رنگ ها از $theme-colorsیا هر نقشه دیگری، از map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

کلیدهای مورد نیاز

بوت استرپ وجود برخی از کلیدهای خاص را در نقشه های Sass فرض می کند که ما خودمان از آنها استفاده کرده و گسترش می دهیم. همانطور که نقشه های ارائه شده را سفارشی می کنید، ممکن است در هنگام استفاده از یک کلید Sass map خاص با خطاهایی مواجه شوید.

برای مثال، ما از کلیدهای، و از primaryبرای successپیوندها ، دکمه‌ها و حالت‌های فرم استفاده می‌کنیم. جایگزین کردن مقادیر این کلیدها نباید مشکلی ایجاد کند، اما حذف آنها ممکن است باعث ایجاد مشکلاتی در کامپایل Sass شود. در این موارد، شما باید کد Sass را تغییر دهید که از آن مقادیر استفاده می کند.danger$theme-colors

کارکرد

بوت استرپ از چندین توابع Sass استفاده می کند، اما تنها یک زیرمجموعه برای تم کلی قابل استفاده است. ما سه تابع برای دریافت مقادیر از نقشه های رنگی قرار داده ایم:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

اینها به شما این امکان را می دهند که یک رنگ را از نقشه Sass انتخاب کنید، دقیقاً مانند نحوه استفاده از یک متغیر رنگ از نسخه 3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

ما همچنین عملکرد دیگری برای دریافت سطح خاصی از رنگ از $theme-colorsنقشه داریم. مقادیر سطح منفی رنگ را روشن می کند، در حالی که سطوح بالاتر تیره می شود.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

در عمل، شما باید تابع را فراخوانی و در دو پارامتر ارسال کنید: نام رنگ از $theme-colors(به عنوان مثال، اولیه یا خطر) و یک سطح عددی.

.custom-element {
  color: theme-color-level(primary, -10);
}

توابع اضافی را می توان در آینده اضافه کرد یا Sass سفارشی شما برای ایجاد توابع سطح برای نقشه های Sass اضافی، یا حتی اگر می خواهید پرمخاطب تر باشید، یک توابع عمومی اضافه کنید.

تضاد رنگ

یکی از عملکردهای اضافی که در Bootstrap قرار می دهیم، تابع کنتراست رنگ است color-yiq. از فضای رنگی YIQ برای برگرداندن خودکار رنگ کنتراست روشن ( #fff) یا تیره ( #111) بر اساس رنگ پایه مشخص شده استفاده می کند. این تابع به ویژه برای میکس‌ها یا حلقه‌هایی که در آن چندین کلاس تولید می‌کنید مفید است.

به عنوان مثال، برای تولید نمونه های رنگی از $theme-colorsنقشه ما:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

همچنین می توان از آن برای نیازهای کنتراست یکباره استفاده کرد:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

شما همچنین می توانید یک رنگ پایه را با توابع نقشه رنگی ما مشخص کنید:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

گزینه های Sass

بوت استرپ 4 را با فایل متغیرهای سفارشی داخلی ما سفارشی کنید و به راحتی تنظیمات CSS جهانی را با $enable-*متغیرهای جدید Sass تغییر دهید. مقدار یک متغیر را نادیده بگیرید و در npm run testصورت نیاز دوباره کامپایل کنید.

شما می توانید این متغیرها را برای گزینه های کلیدی جهانی در _variables.scssفایل ما پیدا و سفارشی کنید.

متغیر	ارزش های	شرح
`$spacer`	`1rem`(پیش‌فرض)، یا هر مقدار > 0	مقدار پیش‌فرض فاصله‌گذار را برای تولید برنامه‌ای ابزارهای فاصله‌گذار ما مشخص می‌کند.
`$enable-rounded`	`true`(پیش فرض) یا`false`	`border-radius`استایل های از پیش تعریف شده را روی اجزای مختلف فعال می کند.
`$enable-shadows`	`true`یا `false`(پیش فرض)	`box-shadow`استایل های از پیش تعریف شده را روی اجزای مختلف فعال می کند.
`$enable-gradients`	`true`یا `false`(پیش فرض)	گرادیان های از پیش تعریف شده را از طریق `background-image`استایل ها روی اجزای مختلف فعال می کند.
`$enable-transitions`	`true`(پیش فرض) یا`false`	s های از پیش تعریف شده `transition`را روی اجزای مختلف فعال می کند.
`$enable-hover-media-query`	`true`یا `false`(پیش فرض)	منسوخ
`$enable-grid-classes`	`true`(پیش فرض) یا`false`	تولید کلاس‌های CSS را برای سیستم شبکه فعال می‌کند (به عنوان مثال،،،، و `.container`غیره ).`.row.col-md-1`
`$enable-caret`	`true`(پیش فرض) یا`false`	کارت شبه عنصر را فعال می `.dropdown-toggle`کند.
`$enable-print-styles`	`true`(پیش فرض) یا`false`	سبک ها را برای بهینه سازی چاپ فعال می کند.

رنگ

بسیاری از اجزا و ابزارهای مختلف Bootstrap از طریق یک سری رنگ تعریف شده در نقشه Sass ساخته می شوند. این نقشه را می توان در Sass حلقه کرد تا به سرعت مجموعه ای از قوانین را تولید کند.

همه رنگ ها

تمام رنگ های موجود در Bootstrap 4، به عنوان متغیرهای Sass و نقشه Sass در scss/_variables.scssفایل ما موجود هستند. این در نسخه‌های کوچک بعدی برای افزودن سایه‌های اضافی، بسیار شبیه پالت خاکستری که قبلاً اضافه کرده‌ایم، گسترش خواهد یافت.

آبی

نیل

رنگ بنفش

رنگ صورتی

قرمز

نارنجی

رنگ زرد

سبز

آبی رنگ

فیروزه ای

در اینجا نحوه استفاده از آنها در Sass آمده است:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

کلاس های کاربردی رنگ نیز برای تنظیم colorو background-color.

در آینده، همانطور که با رنگ‌های خاکستری زیر انجام دادیم، نقشه‌ها و متغیرهای Sass را برای سایه‌های هر رنگ ارائه خواهیم کرد.

رنگ های تم

ما از زیرمجموعه‌ای از همه رنگ‌ها برای ایجاد یک پالت رنگ کوچک‌تر برای تولید طرح‌های رنگی استفاده می‌کنیم که به عنوان متغیرهای Sass و نقشه Sass در scss/_variables.scssفایل ما نیز موجود است.

اولیه

ثانوی

موفقیت

خطر

هشدار

اطلاعات

سبک

تاریک

خاکستری ها

مجموعه گسترده ای از متغیرهای خاکستری و نقشه Sass scss/_variables.scssبرای سایه های خاکستری ثابت در پروژه شما.

100

200

300

400

500

600

700

800

900

در داخل _variables.scss، متغیرهای رنگ و نقشه Sass ما را خواهید یافت. در اینجا یک نمونه از $colorsنقشه Sass آمده است:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

مقادیر را در نقشه اضافه، حذف یا تغییر دهید تا نحوه استفاده از آنها در بسیاری از مؤلفه‌های دیگر به‌روزرسانی شود. متأسفانه در حال حاضر، همه مؤلفه ها از این نقشه Sass استفاده نمی کنند. به روز رسانی های آینده در تلاش برای بهبود این موضوع خواهد بود. تا آن زمان، برای استفاده از ${color}متغیرها و این نقشه Sass برنامه ریزی کنید.

اجزاء

بسیاری از مؤلفه‌ها و ابزارهای کمکی Bootstrap با @eachحلقه‌هایی ساخته شده‌اند که روی نقشه Sass تکرار می‌شوند. این به ویژه برای تولید انواع یک جزء توسط ما $theme-colorsو ایجاد انواع پاسخگو برای هر نقطه شکست مفید است. همانطور که این نقشه های Sass را سفارشی می کنید و دوباره کامپایل می کنید، به طور خودکار تغییرات خود را در این حلقه ها منعکس می کنید.

اصلاح کننده ها

بسیاری از اجزای بوت استرپ با رویکرد کلاس اصلاح کننده پایه ساخته شده اند. این بدان معناست که بخش عمده ای از یک ظاهر طراحی شده در یک کلاس پایه (مثلاً .btn) قرار می گیرد در حالی که تغییرات سبک به کلاس های اصلاح کننده (مثلاً، .btn-danger) محدود می شود. این کلاس‌های اصلاح‌کننده از $theme-colorsروی نقشه ساخته شده‌اند تا تعداد و نام کلاس‌های اصلاح‌کننده ما را سفارشی کنند.

در اینجا دو مثال از نحوه حلقه زدن $theme-colorsروی نقشه برای تولید اصلاح کننده‌های .alertکامپوننت و همه .bg-*ابزارهای پس‌زمینه ما آورده شده است.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

پاسخگو

این حلقه‌های Sass به نقشه‌های رنگی نیز محدود نمی‌شوند. شما همچنین می توانید تغییرات پاسخگو از اجزا یا ابزارهای خود را ایجاد کنید. به عنوان مثال ابزارهای تراز متن پاسخگو ما را در نظر بگیرید که در آن یک @eachحلقه برای $grid-breakpointsنقشه Sass را با یک جستجوی رسانه ای ترکیب می کنیم.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

اگر نیاز به تغییر خود $grid-breakpointsداشته باشید، تغییرات شما برای همه حلقه‌هایی که روی نقشه تکرار می‌شوند اعمال می‌شود.

متغیرهای CSS

Bootstrap 4 شامل حدود دوجین ویژگی (متغیر) سفارشی CSS در CSS کامپایل شده خود است. اینها هنگام کار در Inspector مرورگر شما، جعبه ماسه‌ای کد یا نمونه‌سازی عمومی، دسترسی آسان به مقادیر رایج مانند رنگ‌های طرح زمینه، نقاط شکست، و پشته‌های فونت اصلی ما را فراهم می‌کنند.

متغیرهای موجود

در اینجا متغیرهایی هستند که ما اضافه می کنیم (توجه داشته باشید که :rootلازم است). آنها در _root.scssپرونده ما قرار دارند.

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

مثال ها

متغیرهای CSS انعطاف پذیری مشابهی با متغیرهای Sass ارائه می دهند، اما بدون نیاز به کامپایل قبل از ارائه به مرورگر. به عنوان مثال، در اینجا ما فونت و سبک های پیوند صفحه خود را با متغیرهای CSS بازنشانی می کنیم.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

همچنین می توانید از متغیرهای نقطه شکست ما در جستارهای رسانه ای خود استفاده کنید:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}