آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

معرفی

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

در حال حاضر، آنها توسط متغیرهای sass، نقشه های sass و CSS سفارشی انجام می شود. تم سبک تم اختصاص داده نشده است؛ در عوض، شما می توانید تم ساخته شده را فعال کنید برای اضافه کردن شیب، سایه و بیشتر تم ساخته شده را فعال کنید.

 

sass

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

 

ساختار فایل

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

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

 

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

 

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

 

اهمیت

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

 // 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 خود تغییر دهید. شما همچنین می توانید بخشی از بوت استرپ را به بخش // بخش اختیاری در صورت نیاز اضافه کنید. ما پیشنهاد می کنیم با استفاده از پشته واردات کامل از فایل bootstrap.scss بوت استرپ به عنوان نقطه شروع خود استفاده کنید.

 

variable defaults

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

تغییر متغیر در همان فایل Sass می تواند قبل یا بعد از متغیرهای پیش فرض باشد. با این حال، هنگامی که در سراسر فایل های sass مورد سوء استفاده قرار می گیرد قبل از وارد کردن فایل های sass bootstarp خود، لغود می شود.

در اینجا یک مثال است که پس زمینه و رنگ را برای <body> هنگام وارد کردن و کامپایل Bootstrap از طریق npm تغییر می دهد:

 

 // Your variable overrides $body-bg: #000; $body-color: #111; // Bootstrap and its default variables @import "node_modules/bootstrap/scss/bootstrap";

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

 

maps and loops

بوت استرپ 4 شامل تعداد انگشت شماری از نقشه های Sass، جفت های ارزش کلیدی است که باعث ایجاد خانواده های CSS مربوطه می شود. ما از نقشه های sass  برای رنگ ها، نقاط خالی شبکه و موارد دیگر استفاده می کنیم. درست مانند متغیرهای Sass، تمام نقشه های Sass شامل پرچم پیش فرض هستند و می توانند لغو و تمدید شوند.

برخی از نقشه های 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 خاص استفاده می شود روبرو شوید.

برای مثال، از کلید های اولیه، موفقیت و خطر از theme-colors$ برای لینک ها، دکمه ها و حالت های فرم استفاده می کنیم. جایگزینی مقادیر این کلید ها باید هیچ مشکلی را نشان ندهد، اما حذف آنها ممکن است مسائل تلفیقی Sass را ایجاد کند. در این موارد، شما باید کد Sass را تغییر دهید که از این مقادیر استفاده می کند.

 

عملکرد

بوت استرپ از چندین توابع 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 را انتخاب کنید بسیار شبیه محوه استفاده از یک متغییر رنگ از v3.

 

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

 

ما همچنین یک تابع دیگر برای گرفتن یک سطح خاص رنگ از نقشه themes-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); }

 

 

color contrast

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

به عنوان مثال، برای ایجاد نمونه های رنگ از نقشه 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 options

 

Variable Values Description
$spacer 1rem (default), or any value > 0 Specifies the default spacer value to programmatically generate our spacer utilities.
$enable-rounded true (default) or false Enables predefined border-radius styles on various components.
$enable-shadows true or false(default) Enables predefined box-shadow styles on various components.
$enable-gradients true or false(default) Enables predefined gradients via background-image styles on various components.
$enable-transitions true (default) or false Enables predefined transitions on various components.
$enable-hover-media-query true or false(default) Deprecated
$enable-grid-classes true (default) or false Enables the generation of CSS classes for the grid system (e.g., .container.row.col-md-1, etc.).
$enable-caret true (default) or false Enables pseudo element caret on .dropdown-toggle.
$enable-print-styles true (default) or false Enables styles for optimizing printing.

 

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

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

 

رنگ

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

 

تمام رنگ ها

Blue
Indigo
Purple
Pink
Red
Orange
Yellow
Green
Teal
Cyan

 

تمام رنگ های موجود در 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"); }

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

 

رنگ های قالب 

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

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

 

 

 

grays

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

100
200
300
400
500
600
700
800
900

 

در داخل variables.scss_، متغیرهای رنگ ما و نقشه Sass را پیدا خواهید کرد. در اینجا یک مثال از color Sass map$ است:

 $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 باشد.

 

components

 

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

 

اصلاح کنندگان

 

بسیاری از اجزای بوت استرپ با یک روش طبقه بندی پایه ساخته شده اند. این به این معنی است که بخش عمده ای از یک ظاهر طراحی شده به یک کلاس پایه محسوب می شود در حالیکه تغییرات سبک به کلاس های اصلاح کننده محدود می شود. کلاس های این اصلاح کننده از نقشه  themes-colors$ ساخته شده است تا تعداد و نام کلاس های اصلاح کننده ما را سفارشی کند.

در اینجا دو مثال از چگونگی حلقه ما روی نقشه themes-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$ خود دارید، تغییرات خود را به تمام حلقه هایی که روی آن نقشه تکرار می شود اعمال کنید.

 

متغییر های css

 

بوت استرپ 4 شامل حدود 12ویژگی شمارشی css در css کامپایل شده است. در هنگام کار در مرورگر Inspector، یک ساندویچ کد، به راحتی دسترسی به ارزش های معمول استفاده شده است مانند رنگ های مهم، نقطه های شکست و ستون های اصلی فونت خود را ارائه می دهد.

 

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

در اینجا متغیرهایی که شامل آنها هستیم. آنها در فایل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; } }