د تیمنګ بوټسټریپ
د اسانه تیمنګ او اجزاو بدلونونو لپاره د نړیوال سټایل غوره توبونو لپاره زموږ د نوي جوړ شوي Sass متغیرونو سره بوټسټریپ 4 تنظیم کړئ.
په بوټسټریپ 3 کې، تیمنګ په لویه کچه په لږ، دودیز CSS، او یو جلا موضوع سټایل شیټ کې د متغیر اووررایډونو لخوا پرمخ وړل شوی و چې موږ په خپلو dist
فایلونو کې شامل کړی. د یو څه هڅو سره ، یو څوک کولی شي د اصلي فایلونو لمس کولو پرته د بوټسټریپ 3 لید په بشپړ ډول له سره ډیزاین کړي. Bootstrap 4 یو پیژندل شوی، مګر یو څه مختلف طریقه وړاندې کوي.
اوس، تیمنګ د Sass متغیرونو، Sass نقشې، او دودیز CSS لخوا ترسره کیږي. دلته نور وقف شوي موضوع سټایل شیټ نشته؛ پرځای یې، تاسو کولی شئ جوړ شوی موضوع فعال کړئ ترڅو تدریجي، سیوري، او نور ډیر څه اضافه کړئ.
زموږ د سرچینې Sass فایلونو څخه کار واخلئ ترڅو د متغیرونو، نقشو، مکسینونو او نورو څخه ګټه پورته کړئ.
هرکله چې امکان ولري، د بوټسټریپ اصلي فایلونو بدلولو څخه ډډه وکړئ. د ساس لپاره، دا پدې مانا ده چې خپل سټایل شیټ رامینځته کړئ چې بوټسټریپ واردوي نو تاسو کولی شئ ترمیم او پراخ کړئ. فرض کړئ چې تاسو د بسته بندۍ مدیر لکه npm کاروئ، تاسو به د فایل جوړښت ولرئ چې داسې ښکاري:
که تاسو زموږ د سرچینې فایلونه ډاونلوډ کړی وي او د بسته بندۍ مدیر نه کاروئ، نو تاسو به په لاسي ډول د دې جوړښت سره ورته یو څه تنظیم کړئ، د بوټسټریپ سرچینې فایلونه له خپل ځان څخه جلا وساتئ.
په خپل custom.scss
کې، تاسو به د بوټسټریپ سرچینې ساس فایلونه وارد کړئ. تاسو دوه اختیارونه لرئ: ټول بوټسټریپ شامل کړئ، یا هغه برخې غوره کړئ چې تاسو ورته اړتیا لرئ. موږ وروستی هڅوو، که څه هم خبر اوسئ چې زموږ په برخو کې ځینې اړتیاوې او انحصار شتون لري. تاسو به اړتیا ولرئ زموږ د پلگ انونو لپاره ځینې جاواسکریپټ هم شامل کړئ.
د دې ځای په ځای کولو سره، تاسو کولی شئ په خپل custom.scss
. تاسو کولی شئ د اړتیا سره سم د برخې لاندې د بوټسټریپ برخې اضافه کول هم پیل کړئ // Optional
. موږ وړاندیز کوو چې زموږ د bootstrap.scss
فایل څخه د بشپړ وارداتو سټیک ستاسو د پیل ټکي په توګه وکاروئ.
په بوټسټریپ 4 کې د Sass هر متغیر کې !default
بیرغ شامل دی چې تاسو ته اجازه درکوي د بوټسټریپ سرچینې کوډ بدلولو پرته په خپل Sass کې د متغیر ډیفالټ ارزښت بیرته راوباسئ. د اړتیا سره سم متغیرات کاپي او پیسټ کړئ، د دوی ارزښتونه تعدیل کړئ، او !default
بیرغ لرې کړئ. که یو متغیر لا دمخه ټاکل شوی وي ، نو دا به په بوټسټریپ کې د ډیفالټ ارزښتونو لخوا بیا نه ټاکل کیږي.
د ورته Sass فایل کې متغیر اوورایډونه د ډیفالټ متغیرونو دمخه یا وروسته راځي. په هرصورت، کله چې د Sass فایلونو په اوږدو کې تیریږي، نو ستاسو زیربنا باید مخکې له دې چې تاسو د بوټسټریپ ساس فایلونه وارد کړئ راشي.
دلته یو مثال دی چې د npm له لارې د بوټسټریپ واردولو او تالیف کولو لپاره background-color
او بدلوي:color
<body>
په بوټسټریپ کې د هر متغیر لپاره د اړتیا په صورت کې تکرار کړئ، په شمول لاندې نړیوال اختیارونه.
بوټسټریپ 4 کې یو څو د ساس نقشې شاملې دي، د کلیدي ارزښت جوړه چې د اړونده سی ایس ایس کورنۍ رامینځته کول اسانه کوي. موږ د خپلو رنګونو، گرډ بریک پوائنټونو، او نورو لپاره د ساس نقشې کاروو. لکه د Sass متغیرونو په څیر، د Sass ټولې نقشې !default
بیرغ شامل دي او کیدای شي له پامه غورځول شي او پراخ شي.
زموږ ځینې ساس نقشې د ډیفالټ په واسطه په خالي نقشو کې یوځای شوي. دا د دې لپاره ترسره کیږي چې د ورکړل شوي ساس نقشې اسانه پراختیا ته اجازه ورکړي ، مګر د نقشې څخه د توکو لرې کول یو څه ستونزمن کولو لګښت راځي .
زموږ په $theme-colors
نقشه کې د موجوده رنګ بدلولو لپاره، لاندې خپل دودیز Sass فایل کې اضافه کړئ:
د نوي رنګ $theme-colors
اضافه کولو لپاره، نوې کیلي او ارزښت اضافه کړئ:
د رنګونو لرې کولو لپاره $theme-colors
، یا کوم بل نقشه، وکاروئ map-remove
:
بوټسټراپ د ساس نقشو کې د ځینې ځانګړي کیلي شتون فرض کوي لکه څنګه چې موږ دا پخپله کارولي او پراخوي. لکه څنګه چې تاسو شامل شوي نقشې تنظیم کړئ، تاسو ممکن د غلطیو سره مخ شئ چیرې چې د ځانګړي Sass نقشې کیلي کارول کیږي.
د مثال په توګه، موږ د لینکونو، تڼیو، او فورمو حالتونو لپاره د ,، primary
او success
کلیدونو danger
څخه کار اخلو. $theme-colors
د دې کلیدونو ارزښتونو ځای په ځای کول باید کومه ستونزه ونلري ، مګر د دوی لرې کول ممکن د Sass تالیف مسلو لامل شي. په دې مواردو کې، تاسو به د Sass کوډ تعدیل ته اړتیا ولرئ چې د دې ارزښتونو څخه کار اخلي.
بوټسټریپ د Sass ډیری افعال کاروي، مګر یوازې یو فرعي سیټ د عمومي تیمنګ لپاره تطبیق کیږي. موږ د رنګ نقشو څخه د ارزښتونو ترلاسه کولو لپاره درې دندې شاملې کړې دي:
دا تاسو ته اجازه درکوي د ساس نقشې څخه یو رنګ غوره کړئ لکه څنګه چې تاسو د v3 څخه د رنګ متغیر وکاروئ.
موږ د نقشې څخه د رنګ ځانګړي کچې ترلاسه کولو لپاره بل فعالیت هم لرو. $theme-colors
د منفي کچې ارزښتونه به رنګ روښانه کړي، پداسې حال کې چې لوړې کچې به تیاره وي.
په عمل کې، تاسو به فنکشن ته زنګ ووهئ او په دوه پیرامیټونو کې تېر شئ: د رنګ نوم $theme-colors
(د مثال په توګه، ابتدايي یا خطر) او د شمیرې کچه.
اضافي فنکشنونه په راتلونکي کې اضافه کیدی شي یا ستاسو خپل دودیز Sass د اضافي Sass نقشو لپاره د کچې افعال رامینځته کولو لپاره ، یا حتی یو عمومي که تاسو غواړئ ډیر فعل اوسئ.
یو اضافي فعالیت چې موږ یې په بوټسټریپ کې شامل کړو د رنګ برعکس فعالیت دی color-yiq
. دا د YIQ رنګ ځای کاروي ترڅو په اتوماتيک ډول د ټاکل شوي اساس رنګ پراساس روښانه ( #fff
) یا تیاره ( ) برعکس رنګ بیرته راولي. #111
دا فنکشن په ځانګړي توګه د مکسین یا لوپس لپاره ګټور دی چیرې چې تاسو ډیری ټولګي رامینځته کوئ.
د مثال په توګه، زموږ له $theme-colors
نقشې څخه د رنګ سویچونو تولید لپاره:
دا د یو اړخیز برعکس اړتیاو لپاره هم کارول کیدی شي:
تاسو کولی شئ زموږ د رنګ نقشې دندو سره اساس رنګ هم مشخص کړئ:
زموږ د جوړ شوي دودیز متغیر فایل سره د بوټسټریپ 4 تنظیم کړئ او په اسانۍ سره د نوي $enable-*
Sass متغیرونو سره نړیوال CSS غوره توبونه بدل کړئ. د یو متغیر ارزښت له پامه غورځول او د اړتیا سره سم بیا کمپایل npm run test
کړئ.
تاسو کولی شئ دا تغیرات زموږ په _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-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 |
د چاپ کولو اصلاح کولو لپاره سټایلونه فعالوي. |
د بوټسټریپ ډیری بیلابیل برخې او اسانتیاوې د رنګونو لړۍ له لارې رامینځته شوي چې په ساس نقشه کې تعریف شوي. دا نقشه په ساس کې لوپ کیدی شي ترڅو ژر تر ژره د قواعدو لړۍ رامینځته کړي.
ټول رنګونه چې په Bootstrap 4 کې شتون لري، زموږ په scss/_variables.scss
فایل کې د Sass تغیراتو او د Sass نقشې په توګه شتون لري. دا به په راتلونکو کوچنیو ریلیزونو کې پراخه شي ترڅو اضافي سیوري اضافه کړي ، لکه د خړ پییل پیلیټ په څیر چې موږ دمخه پکې شامل یو.
دلته دا دي چې تاسو څنګه کولی شئ دا په خپل ساس کې وکاروئ:
د رنګ کارولو ټولګي هم د ترتیب color
او ترتیب لپاره شتون لري background-color
.
په راتلونکي کې، موږ به د هر رنګ سیوري لپاره د ساس نقشې او تغیرات چمتو کړو لکه څنګه چې موږ لاندې د خړ رنګونو سره ترسره کړي.
scss/_variables.scss
موږ د رنګ سکیمونو رامینځته کولو لپاره د کوچني رنګ پیلیټ رامینځته کولو لپاره د ټولو رنګونو فرعي سیټ کاروو ، چې زموږ په فایل کې د Sass تغیراتو او Sass نقشې په توګه هم شتون لري .
د خړ متغیرونو پراخه سیټ او scss/_variables.scss
ستاسو په پروژه کې د خړ سیوري دوامداره سیوري لپاره د Sass نقشه.
دننه _variables.scss
، تاسو به زموږ د رنګ تغیرات او د ساس نقشه ومومئ. دلته د $colors
ساس نقشه یوه بیلګه ده:
په نقشه کې ارزښتونه اضافه کړئ، لیرې کړئ، یا بدل کړئ ترڅو تازه کړئ چې دوی په ډیری نورو برخو کې څنګه کارول کیږي. بدبختانه پدې وخت کې ، هره برخه دا ساس نقشه نه کاروي. راتلونکي تازه معلومات به پدې کې د ښه والي لپاره هڅه وکړي. تر هغه وخته، د ${color}
متغیرونو او د دې Sass نقشې کارولو په اړه پالن جوړ کړئ.
د بوټسټریپ ډیری برخې او اسانتیاوې د @each
لوپونو سره جوړ شوي چې د Sass نقشې باندې تکرار کیږي. دا په ځانګړي توګه زموږ لخوا د یوې برخې $theme-colors
ډولونو رامینځته کولو او د هرې وقفې لپاره د ځواب ویونکي ډولونو رامینځته کولو لپاره ګټور دی. لکه څنګه چې تاسو دا ساس نقشې تنظیم کړئ او بیا یې تنظیم کړئ، تاسو به په اتوماتيک ډول خپل بدلونونه په دې لوپونو کې منعکس کړئ.
د بوټسټریپ ډیری برخې د بیس - ترمیم کونکي ټولګي چلند سره رامینځته شوي. دا پدې مانا ده چې د سټایل ډیری برخه په اساس طبقه کې شامله ده (د بیلګې په توګه، .btn
) پداسې حال کې چې د سټایل توپیرونه د بدلون کونکي ټولګیو پورې محدود دي (د بیلګې په توګه، .btn-danger
). دا ترمیم کونکي ټولګي د $theme-colors
نقشې څخه جوړ شوي ترڅو زموږ د ترمیم کونکي ټولګیو شمیر او نوم تنظیم کړي.
دلته دوه مثالونه دي چې موږ څنګه $theme-colors
نقشه ته لوپ کوو ترڅو .alert
اجزاو او زموږ د .bg-*
شالید ټولو اسانتیاو ته بدلون ورکوونکي پیدا کړو.
دا ساس لوپونه هم د رنګ نقشو پورې محدود ندي. تاسو کولی شئ د خپلو برخو یا اسانتیاو ځواب ویونکي تغیرات هم رامینځته کړئ. د مثال په توګه زموږ د ځواب ویونکي متن ترتیب کولو اسانتیاوې واخلئ چیرې چې موږ د میډیا پوښتنې سره د ساس نقشې @each
لپاره لوپ مخلوط کوو.$grid-breakpoints
که تاسو اړتیا لرئ خپل بدلون بدل کړئ $grid-breakpoints
، ستاسو بدلونونه به په هغه نقشه کې تکرار شوي ټولو لوپونو باندې پلي شي.
بوټسټریپ 4 په دې ترتیب شوي CSS کې شاوخوا دوه درجن CSS دودیز ملکیتونه (متغیرونه) شامل دي. دا معمولا کارول شوي ارزښتونو ته اسانه لاسرسی چمتو کوي لکه زموږ د موضوع رنګونه ، بریک پوائنټونه ، او لومړني فونټ سټیکس کله چې ستاسو د براوزر انسپکټر ، کوډ سینڈ باکس ، یا عمومي پروټوټایپ کې کار کوي.
دلته هغه متغیرونه دي چې موږ پکې شامل دي (یادونه وکړئ چې :root
اړین دی). دوی زموږ په _root.scss
فایل کې موقعیت لري.
د CSS متغیرونه د Sass متغیرونو ته ورته انعطاف وړاندیز کوي ، مګر پرته له دې چې براوزر ته وړاندې شي د تالیف اړتیا پرته. د مثال په توګه، دلته موږ د خپل پاڼې فونټ او لینک سټایلونه د CSS متغیرونو سره بیا تنظیم کوو.
تاسو کولی شئ د خپلو رسنیو پوښتنو کې زموږ د وقفې نقطې متغیرونه هم وکاروئ: