بوت استرپ تم
بوت استرپ 4 را با متغیرهای جدید Sass داخلی ما برای ترجیحات سبک جهانی برای تغییر قالب و اجزای آسان سفارشی کنید.
مقدمه
در بوت استرپ 3، قالب‌بندی عمدتاً توسط تغییر متغیرها در LESS، CSS سفارشی و یک شیوه نامه موضوعی جداگانه که در distفایل‌های خود گنجانده‌ایم هدایت می‌شد. با کمی تلاش، می‌توان ظاهر بوت استرپ 3 را بدون دست زدن به فایل‌های اصلی دوباره طراحی کرد. بوت استرپ 4 روشی آشنا، اما کمی متفاوت ارائه می دهد.
اکنون، قالب‌بندی توسط متغیرهای Sass، نقشه‌های Sass و CSS سفارشی انجام می‌شود. صفحه سبک تم اختصاصی دیگری وجود ندارد. در عوض، می‌توانید تم داخلی را برای افزودن گرادیان، سایه‌ها و موارد دیگر فعال کنید.
ساس
از فایل‌های Sass منبع ما برای استفاده از متغیرها، نقشه‌ها، میکس‌ها و موارد دیگر استفاده کنید. در ساختمان، دقت گرد کردن Sass را به 6 افزایش داده‌ایم (به طور پیش‌فرض 5 است) تا از مشکلات گرد کردن مرورگر جلوگیری کنیم.
ساختار فایل
در صورت امکان، از تغییر فایل های اصلی بوت استرپ خودداری کنید. برای 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 دوباره تخصیص داده نمی‌شود.
لیست کامل متغیرهای Bootstrap را در scss/_variables.scss. برخی از متغیرها روی تنظیم شده‌اند null، این متغیرها ویژگی را خروجی نمی‌کنند مگر اینکه در پیکربندی شما لغو شوند.
لغو متغیرها در همان فایل 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. توجه داشته باشید که باید آن را بین الزامات و گزینه های ما قرار دهید:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
$theme-colors: map-remove($theme-colors, "info", "light", "dark");
// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...کلیدهای مورد نیاز
بوت استرپ وجود برخی از کلیدهای خاص را در نقشه های 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 اضافی، یا حتی اگر می خواهید پرمخاطب تر باشید، یک توابع عمومی اضافه کنید.
تضاد رنگ
یک تابع اضافی که در بوت استرپ قرار می دهیم، تابع کنتراست رنگ است 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`
}Escape SVG
ما از escape-svgتابع برای فرار از <کاراکترها >و #برای تصاویر پس زمینه SVG استفاده می کنیم. این کاراکترها باید فرار کنند تا تصاویر پس زمینه به درستی در IE ارائه شوند.
توابع اضافه و تفریق
ما از توابع addو subtractبرای بسته بندی تابع CSS calcاستفاده می کنیم. هدف اصلی این توابع جلوگیری از خطا در هنگام ارسال مقدار "unitless" 0به یک calcعبارت است. عباراتی مانند calc(10px - 0)، با وجود درست بودن ریاضی، در همه مرورگرها خطا برمی‌گردانند.
مثالی که کالک معتبر است:
$border-radius: .25rem;
$border-width: 1px;
.element {
// Output calc(.25rem - 1px) is valid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output the same calc(.25rem - 1px) as above
border-radius: subtract($border-radius, $border-width);
}مثالی که محاسبه نامعتبر است:
$border-radius: .25rem;
$border-width: 0;
.element {
// Output calc(.25rem - 0) is invalid
border-radius: calc($border-radius - $border-width);
}
.element {
// Output .25rem
border-radius: subtract($border-radius, $border-width);
}گزینه های Sass
بوت استرپ 4 را با فایل متغیرهای سفارشی داخلی ما سفارشی کنید و به راحتی تنظیمات CSS جهانی را با $enable-*متغیرهای جدید Sass تغییر دهید. مقدار یک متغیر را نادیده بگیرید و در npm run testصورت نیاز دوباره کامپایل کنید.
می توانید این متغیرها را برای گزینه های کلیدی جهانی در scss/_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-prefers-reduced-motion-media-query |
true(پیش فرض) یاfalse |
prefers-reduced-motionدرخواست رسانه را فعال می‌کند ، که انیمیشن‌ها/انتقال‌های خاصی را بر اساس تنظیمات برگزیده مرورگر/سیستم عامل کاربران سرکوب می‌کند. |
$enable-hover-media-query |
trueیا false(پیش فرض) |
منسوخ |
$enable-grid-classes |
true(پیش فرض) یاfalse |
تولید کلاس‌های CSS را برای سیستم شبکه فعال می‌کند (به عنوان مثال،،،، و .containerغیره )..row.col-md-1 |
$enable-caret |
true(پیش فرض) یاfalse |
کارت شبه عنصر را فعال می .dropdown-toggleکند. |
$enable-pointer-cursor-for-buttons |
true(پیش فرض) یاfalse |
مکان نما «دست» را به عناصر دکمه غیرفعال اضافه کنید. |
$enable-print-styles |
true(پیش فرض) یاfalse |
سبک ها را برای بهینه سازی چاپ فعال می کند. |
$enable-responsive-font-sizes |
trueیا false(پیش فرض) |
اندازه فونت پاسخگو را فعال می کند. |
$enable-validation-icons |
true(پیش فرض) یاfalse |
background-imageنمادها را در ورودی های متنی و برخی از فرم های سفارشی برای حالت های اعتبار سنجی فعال می کند. |
$enable-deprecation-messages |
trueیا false(پیش فرض) |
روی را تنظیم کنید تا trueهنگام استفاده از میکس‌ها و عملکردهای منسوخ که قرار است در حذف شوند، هشدارها نشان داده شود v5. |
رنگ
بسیاری از اجزا و ابزارهای مختلف 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فایل Bootstrap موجود است.
خاکستری ها
مجموعه گسترده ای از متغیرهای خاکستری و نقشه Sass scss/_variables.scssبرای سایه های خاکستری ثابت در پروژه شما. توجه داشته باشید که اینها "خاکستری های سرد" هستند که به جای خاکستری های خنثی به رنگ آبی ظریف تمایل دارند.
در داخل scss/_variables.scss، متغیرهای رنگ Bootstrap و نقشه 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, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--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);
}متغیرهای نقطه شکست
در حالی که ما در ابتدا نقاط شکست را در متغیرهای CSS خود گنجانده بودیم (به عنوان مثال، --breakpoint-md)، اینها در پرس‌و‌جوهای رسانه پشتیبانی نمی‌شوند ، اما همچنان می‌توانند در مجموعه قوانین در جستارهای رسانه استفاده شوند. این متغیرهای نقطه شکست در CSS کامپایل شده برای سازگاری به عقب باقی می مانند، زیرا می توانند توسط جاوا اسکریپت مورد استفاده قرار گیرند. در مشخصات بیشتر بیاموزید
در اینجا نمونه ای از مواردی که پشتیبانی نمی شود آورده شده است:
@media (min-width: var(--breakpoint-sm)) {
...
}و در اینجا نمونه ای از آنچه پشتیبانی می شود آورده شده است:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}