Source

د تیمنګ بوټسټریپ

د اسانه تیمنګ او اجزاو بدلونونو لپاره د نړیوال سټایل غوره توبونو لپاره زموږ د نوي جوړ شوي Sass متغیرونو سره بوټسټریپ 4 تنظیم کړئ.

پیژندنه

په بوټسټریپ 3 کې، تیمنګ په لویه کچه په لږ، دودیز CSS، او یو جلا موضوع سټایل شیټ کې د متغیر اووررایډونو لخوا پرمخ وړل شوی و چې موږ په خپلو distفایلونو کې شامل کړی. د یو څه هڅو سره ، یو څوک کولی شي د اصلي فایلونو لمس کولو پرته د بوټسټریپ 3 لید په بشپړ ډول له سره ډیزاین کړي. Bootstrap 4 یو پیژندل شوی، مګر یو څه مختلف طریقه وړاندې کوي.

اوس، تیمنګ د Sass متغیرونو، Sass نقشې، او دودیز CSS لخوا ترسره کیږي. دلته نور وقف شوي موضوع سټایل شیټ نشته؛ پرځای یې، تاسو کولی شئ جوړ شوی موضوع فعال کړئ ترڅو تدریجي، سیوري، او نور ډیر څه اضافه کړئ.

ساس

زموږ د سرچینې Sass فایلونو څخه کار واخلئ ترڅو د متغیرونو، نقشو، مکسینونو او نورو څخه ګټه پورته کړئ. زموږ په جوړښت کې موږ د ساس راؤنډینګ دقیقیت 6 ته لوړ کړی دی (د ډیفالټ په واسطه دا 5 دی) ترڅو د براوزر ګردي کولو مسلو مخه ونیسي.

د فایل جوړښت

هرکله چې امکان ولري، د بوټسټریپ اصلي فایلونو بدلولو څخه ډډه وکړئ. د ساس لپاره، دا پدې مانا ده چې خپل سټایل شیټ رامینځته کړئ چې بوټسټریپ واردوي نو تاسو کولی شئ ترمیم او پراخ کړئ. فرض کړئ چې تاسو د بسته بندۍ مدیر لکه npm کاروئ، تاسو به د فایل جوړښت ولرئ چې داسې ښکاري:

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

که تاسو زموږ د سرچینې فایلونه ډاونلوډ کړی وي او د بسته بندۍ مدیر نه کاروئ، نو تاسو به په لاسي ډول د دې جوړښت سره ورته یو څه تنظیم کړئ، د بوټسټریپ سرچینې فایلونه له خپل ځان څخه جلا وساتئ.

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

واردول

په خپل custom.scssکې، تاسو به د بوټسټریپ سرچینې ساس فایلونه وارد کړئ. تاسو دوه اختیارونه لرئ: ټول بوټسټریپ شامل کړئ، یا هغه برخې غوره کړئ چې تاسو ورته اړتیا لرئ. موږ وروستی هڅوو، که څه هم خبر اوسئ چې زموږ په برخو کې ځینې اړتیاوې او انحصار شتون لري. تاسو به اړتیا ولرئ زموږ د پلگ انونو لپاره ځینې جاواسکریپټ هم شامل کړئ.

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

د دې ځای په ځای کولو سره، تاسو کولی شئ په خپل custom.scss. تاسو کولی شئ د اړتیا سره سم د برخې لاندې د بوټسټریپ برخې اضافه کول هم پیل کړئ // Optional. موږ وړاندیز کوو چې زموږ د bootstrap.scssفایل څخه د بشپړ وارداتو سټیک ستاسو د پیل ټکي په توګه وکاروئ.

متغیر ډیفالټ

په بوټسټریپ 4 کې د Sass هر متغیر کې !defaultبیرغ شامل دی چې تاسو ته اجازه درکوي د بوټسټریپ سرچینې کوډ بدلولو پرته په خپل Sass کې د متغیر ډیفالټ ارزښت بیرته راوباسئ. د اړتیا سره سم متغیرات کاپي او پیسټ کړئ، د دوی ارزښتونه تعدیل کړئ، او !defaultبیرغ لرې کړئ. که یو متغیر لا دمخه ټاکل شوی وي ، نو دا به په بوټسټریپ کې د ډیفالټ ارزښتونو لخوا بیا نه ټاکل کیږي.

تاسو به په کې د بوټسټریپ متغیرونو بشپړ لیست ومومئ scss/_variables.scss.

د ورته Sass فایل کې متغیر اوورایډونه د ډیفالټ متغیرونو دمخه یا وروسته راځي. په هرصورت، کله چې د Sass فایلونو په اوږدو کې تیریږي، نو ستاسو زیربنا باید مخکې له دې چې تاسو د بوټسټریپ ساس فایلونه وارد کړئ راشي.

دلته یو مثال دی چې د npm له لارې د بوټسټریپ واردولو او تالیف کولو لپاره background-colorاو بدلوي:color<body>

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

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

په بوټسټریپ کې د هر متغیر لپاره د اړتیا په صورت کې تکرار کړئ، په شمول لاندې نړیوال اختیارونه.

نقشې او لوپونه

بوټسټریپ 4 کې یو څو د ساس نقشې شاملې دي، د کلیدي ارزښت جوړه چې د اړونده سی ایس ایس کورنۍ رامینځته کول اسانه کوي. موږ د خپلو رنګونو، گرډ بریک پوائنټونو، او نورو لپاره د ساس نقشې کاروو. لکه د Sass متغیرونو په څیر، د Sass ټولې نقشې !defaultبیرغ شامل دي او کیدای شي له پامه غورځول شي او پراخ شي.

زموږ ځینې ساس نقشې د ډیفالټ په واسطه په خالي نقشو کې یوځای شوي. دا د دې لپاره ترسره کیږي چې د ورکړل شوي ساس نقشې اسانه پراختیا ته اجازه ورکړي ، مګر د نقشې څخه د توکو لرې کول یو څه ستونزمن کولو لګښت راځي .

نقشه بدله کړئ

زموږ په $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 نقشې کیلي کارول کیږي.

د مثال په توګه، موږ د لینکونو، تڼیو، او فورمو حالتونو لپاره د ,، primaryاو successکلیدونو dangerڅخه کار اخلو. $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);
}

دا تاسو ته اجازه درکوي د ساس نقشې څخه یو رنګ غوره کړئ لکه څنګه چې تاسو د v3 څخه د رنګ متغیر وکاروئ.

.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`
}

د Sass اختیارونه

زموږ د جوړ شوي دودیز متغیر فایل سره د بوټسټریپ 4 تنظیم کړئ او په اسانۍ سره د نوي $enable-*Sass متغیرونو سره نړیوال CSS غوره توبونه بدل کړئ. د یو متغیر ارزښت له پامه غورځول او د اړتیا سره سم بیا کمپایل npm run testکړئ.

تاسو کولی شئ دا تغیرات د بوټسټریپ scss/_variables.scssفایل کې د کلیدي نړیوالو انتخابونو لپاره ومومئ او تنظیم کړئ.

متغیر	ارزښتونه	تفصیل
`$spacer`	`1rem`(ډیفالټ)، یا کوم ارزښت> 0	د ډیفالټ سپیسر ارزښت مشخص کوي ترڅو په برنامه توګه زموږ د سپیسر اسانتیاوې رامینځته کړي .
`$enable-rounded`	`true`(default) یا`false`	`border-radius`په مختلفو اجزاوو کې وړاندې شوي سټایلونه فعالوي .
`$enable-shadows`	`true`یا `false`(ډیفالټ)	`box-shadow`په مختلفو اجزاوو کې وړاندې شوي سټایلونه فعالوي .
`$enable-gradients`	`true`یا `false`(ډیفالټ)	`background-image`په مختلفو برخو کې د سټایلونو له لارې مخکې تعریف شوي ګریډینټ فعالوي .
`$enable-transitions`	`true`(default) یا`false`	`transition`په مختلفو برخو کې مخکینۍ تعریف شوي s فعالوي .
`$enable-prefers-reduced-motion-media-query`	`true`(default) یا`false`	د `prefers-reduced-motion`میډیا پوښتنې فعالوي ، کوم چې د کاروونکو د براوزر/آپریټنګ سیسټم غوره توبونو پراساس ځینې متحرکات / لیږدونه فشاروي.
`$enable-hover-media-query`	`true`یا `false`(ډیفالټ)	بې برخې شوي
`$enable-grid-classes`	`true`(default) یا`false`	د ګریډ سیسټم لپاره د CSS ټولګیو نسل فعالوي (د بیلګې په توګه،،،، `.container`او `.row`نور `.col-md-1`).
`$enable-caret`	`true`(default) یا`false`	د pseudo عنصر کارټ فعالوي `.dropdown-toggle`.
`$enable-print-styles`	`true`(default) یا`false`	د چاپ کولو اصلاح کولو لپاره سټایلونه فعالوي.
`$enable-validation-icons`	`true`(default) یا`false`	په متني آخذونو `background-image`کې شبیه فعالوي او د تایید حالتونو لپاره ځینې دودیز فارمونه.

رنګ

د بوټسټریپ ډیری بیلابیل برخې او اسانتیاوې د رنګونو لړۍ له لارې رامینځته شوي چې په ساس نقشه کې تعریف شوي. دا نقشه په ساس کې لوپ کیدی شي ترڅو ژر تر ژره د قواعدو لړۍ رامینځته کړي.

ټول رنګونه

ټول رنګونه په بوټسټریپ 4 کې شتون لري، د 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.

په راتلونکي کې، موږ به د هر رنګ سیوري لپاره د ساس نقشې او تغیرات چمتو کړو لکه څنګه چې موږ لاندې د خړ رنګونو سره ترسره کړي.

د موضوع رنګونه

scss/_variables.scssموږ د رنګ سکیمونو رامینځته کولو لپاره د کوچني رنګ پیلیټ رامینځته کولو لپاره د ټولو رنګونو فرعي سیټ کاروو ، چې د Sass متغیرونو او د بوټسټراپ فایل کې د Sass نقشې په توګه هم شتون لري .

لومړني

ثانوي

بریالیتوب

خطر

خبرتیا

معلومات

رڼا

تیاره

خړ

د خړ متغیرونو پراخه سیټ او scss/_variables.scssستاسو په پروژه کې د خړ سیوري دوامداره سیوري لپاره د Sass نقشه. په یاد ولرئ چې دا "ښکلي خړ" دي، کوم چې د غیر جانبدار خړ پر ځای د فرعي نیلي ټون په لور روان دي.

100

۲۰۰

۳۰۰

۴۰۰

۵۰۰

۶۰۰

۷۰۰

۸۰۰

۹۰۰

دننه scss/_variables.scss، تاسو به د بوټسټریپ رنګ تغیرات او د ساس نقشه ومومئ. دلته د $colorsساس نقشه یوه بیلګه ده:

$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;

په نقشه کې ارزښتونه اضافه کړئ، لیرې کړئ، یا بدل کړئ ترڅو تازه کړئ چې دوی په ډیری نورو برخو کې څنګه کارول کیږي. بدبختانه پدې وخت کې ، هره برخه دا ساس نقشه نه کاروي. راتلونکي تازه معلومات به پدې کې د ښه والي لپاره هڅه وکړي. تر هغه وخته، د ${color}متغیرونو او د دې Sass نقشې کارولو په اړه پالن جوړ کړئ.

اجزا

د بوټسټریپ ډیری برخې او اسانتیاوې د @eachلوپونو سره جوړ شوي چې د Sass نقشې باندې تکرار کیږي. دا په ځانګړي توګه زموږ لخوا د یوې برخې $theme-colorsډولونو رامینځته کولو او د هرې وقفې لپاره د ځواب ویونکي ډولونو رامینځته کولو لپاره ګټور دی. لکه څنګه چې تاسو دا ساس نقشې تنظیم کړئ او بیا یې تنظیم کړئ، تاسو به په اتوماتيک ډول خپل بدلونونه په دې لوپونو کې منعکس کړئ.

ترمیم کونکي

د بوټسټریپ ډیری برخې د بیس - ترمیم کونکي ټولګي چلند سره رامینځته شوي. دا پدې مانا ده چې د سټایل ډیری برخه په اساس طبقه کې شامله ده (د بیلګې په توګه، .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);
}

ځواب ورکوونکی

دا ساس لوپونه هم د رنګ نقشو پورې محدود ندي. تاسو کولی شئ د خپلو برخو یا اسانتیاو ځواب ویونکي تغیرات هم رامینځته کړئ. د مثال په توګه زموږ د ځواب ویونکي متن ترتیب کولو اسانتیاوې واخلئ چیرې چې موږ د میډیا پوښتنې سره د ساس نقشې @eachلپاره لوپ مخلوط کوو.$grid-breakpoints

@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، ستاسو بدلونونه به په هغه نقشه کې تکرار شوي ټولو لوپونو باندې پلي شي.

د سی ایس ایس متغیرونه

Bootstrap 4 په خپل ترتیب شوي CSS کې شاوخوا دوه درجن CSS دودیز ملکیتونه (متغیرونه) شامل دي. دا معمولا کارول شوي ارزښتونو ته اسانه لاسرسی چمتو کوي لکه زموږ د موضوع رنګونه ، بریک پوائنټونه ، او لومړني فونټ سټیکس کله چې ستاسو د براوزر انسپکټر ، کوډ سینڈ باکس ، یا عمومي پروټوټایپ کې کار کوي.

شته متغیرات

دلته هغه متغیرونه دي چې موږ پکې شامل دي (یادونه وکړئ چې :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);
}

د وقفې نقطې متغیرات

په داسې حال کې چې موږ په اصل کې زموږ په CSS متغیرونو کې د وقفې نقطې شاملې کړې (د مثال په توګه --breakpoint-md)، دا د رسنیو پوښتنو کې نه ملاتړ کیږي ، مګر دوی لاهم د رسنیو پوښتنو کې د قواعدو په چوکاټ کې کارول کیدی شي . دا د وقفې نقطې متغیرونه د شاته مطابقت لپاره په ترتیب شوي CSS کې پاتې دي په دې شرط چې دوی د جاواسکریپټ لخوا کارول کیدی شي. نور معلومات په سپیک کې زده کړئ .

دلته د هغه څه یوه بیلګه ده چې نه ملاتړ کیږي:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

او دلته د هغه څه یوه بیلګه ده چې ملاتړ کیږي:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}