v4 ته مهاجرت
بوټسټریپ 4 د ټولې پروژې لوی بیا لیکل دی. تر ټولو د پام وړ بدلونونه لاندې لنډیز شوي، وروسته د اړونده برخو لپاره نور ځانګړي بدلونونه.
د بیټا 3 څخه زموږ مستحکم v4.0 خوشې کیدو ته حرکت کول ، هیڅ ماتونکي بدلونونه شتون نلري ، مګر ځینې د پام وړ بدلونونه شتون لري.
-
ثابت مات شوي چاپ اسانتیاوې. پخوا، د
.d-print-*
ټولګي کارول به په غیر متوقع ډول کوم بل.d-*
ټولګي له منځه یوسي. اوس، دوی زموږ د نورو ښودنې اسانتیاو سره سمون لري او یوازې په دې رسنیو کې پلي کیږي (@media print
). -
د نورو اسانتیاوو سره سمون لپاره د شته چاپ ښودنې اسانتیاوې پراخې شوې. بیټا 3 او زاړه یوازې
block
,inline-block
,inline
, او درلودلnone
. مستحکم v4 اضافه شویflex
,inline-flex
,table
,table-row
, andtable-cell
. -
د نوي چاپ سټایلونو سره چې مشخص شوي په براوزرونو کې ثابت چاپ مخکتنه وړاندې کوي
@page
size
.
پداسې حال کې چې بیټا 2 د بیټا مرحلې په جریان کې زموږ ډیری ماتونکي بدلونونه ولیدل ، مګر موږ لاهم یو څه لرو چې د بیټا 3 خوشې کولو کې ورته اړتیا لیدل کیږي. دا بدلونونه پلي کیږي که تاسو د بیټا 2 څخه بیټا 3 یا د بوټسټریپ کومې پخوانۍ نسخې ته تازه کوئ.
- نه کارول شوي
$thumbnail-transition
تغیرات لرې کړل. موږ هیڅ شی نه لیږدوو، نو دا یوازې اضافي کوډ و. - د npm کڅوړه نور زموږ د سرچینې او لرې فایلونو پرته نور فایلونه نه لري؛ که تاسو په دوی تکیه کوئ او زموږ سکریپټونه د
node_modules
فولډر له لارې پرمخ وړئ، تاسو باید خپل کاري جریان تطابق کړئ.
-
دواړه دودیز او ډیفالټ چیک باکسونه او راډیوګانې بیا لیکل. اوس، دواړه د HTML جوړښت سره سمون لري (
<div>
د ورور سره بهرنی<input>
او<label>
) او ورته ترتیب سټایلونه (د ډیفالټ سټیک شوي، د ترمیم کونکي ټولګي سره انلاین). دا موږ ته اجازه راکوي چې د ان پټ حالت پراساس لیبل سټایل کړو، دdisabled
ځانګړتیا لپاره مالتړ ساده کول (پخوا د والدینو ټولګي ته اړتیا وه) او زموږ د فورمې اعتبار ښه ملاتړ کوي.د دې یوې برخې په توګه، موږ
background-image
د ګمرکي فورمو چک بکسونو او راډیوګانو کې د ډیری s اداره کولو لپاره CSS بدل کړی دی. پخوا، اوس لیرې شوي.custom-control-indicator
عنصر د شالید رنګ، تدریجي، او SVG عکس درلود. د شالید تدریجي تنظیم کول پدې معنی دي چې هرکله چې تاسو اړتیا لرئ یوازې یو بدل کړئ د دې ټولو ځای په ځای کول. اوس، موږ.custom-control-label::before
د ډکولو او تدریجي لپاره لرو او.custom-control-label::after
آئیکن اداره کوو.د دودیز چیک انلاین کولو لپاره ، اضافه کړئ
.custom-control-inline
. -
د ان پټ پراساس بټن ګروپونو لپاره تازه شوی انتخاب کونکی.
[data-toggle="buttons"] { }
د سټایل او چلند پرځای ، موږ یوازې د JS چلندونو لپاره صفت کاروو او د سټایل کولو لپاره په نوي ټولګيdata
تکیه کوو..btn-group-toggle
-
.col-form-legend
د یو څه ښه شوي په ګټه لرې شوی.col-form-label
. دا لاره.col-form-label-sm
او په اسانۍ سره په عناصرو کې.col-form-label-lg
کارول کیدی شي .<legend>
-
$custom-file-text
د ګمرک فایل داخلونو د دوی Sass متغیر کې بدلون ترلاسه کړ . دا نور د ځړول شوي Sass نقشه نه ده او اوس یوازې یو تار ته ځواک ورکوي — هغهBrowse
تڼۍ چې اوس زموږ د ساس څخه رامینځته شوی یوازینی سیډو عنصر دی.Choose file
متن اوس له.custom-file-label
.
-
د ان پټ ګروپ اډون اوس د ان پټ سره اړوند د دوی ځای پرځای کولو لپاره ځانګړي دي. موږ پریښودل شوي
.input-group-addon
او.input-group-btn
د دوه نوي ټولګیو لپاره،.input-group-prepend
او.input-group-append
. تاسو باید اوس په ښکاره ډول ضمیمه یا پریپینډ وکاروئ، زموږ د CSS ډیری برخه ساده کول. د ضمیمه یا مخکینۍ دننه، خپل بټنونه ځای په ځای کړئ لکه څنګه چې دوی به په بل ځای کې شتون ولري، مګر په متن کې وتړئ.input-group-text
. -
د اعتبار کولو سټایلونه اوس ملاتړ کیږي، لکه څنګه چې ډیری آخذې دي (که څه هم تاسو کولی شئ په هر ګروپ کې یوازې یو ان پټ تایید کړئ).
-
د اندازه کولو ټولګي باید په مور
.input-group
او پلار وي نه د انفرادي شکل عناصر.
پداسې حال کې چې په بیټا کې، موږ موخه لرو چې هیڅ ماتونکي بدلونونه ونه لرو. په هرصورت، شیان تل د پلان په توګه نه ځي. لاندې د بیټا 1 څخه بیټا 2 ته حرکت کولو پرمهال په ذهن کې ساتلو لپاره ماتونکي بدلونونه دي.
- لرې
$badge-color
شوی متغیر او د هغې کارول په.badge
. موږ د رنګ برعکس فعالیت کاروو ترڅو دcolor
پراساس یو غوره کړوbackground-color
، نو متغیر غیر ضروري دی. - د سی ایس ایس اصلي فلټر سره د شخړو د مخنیوي لپاره د
grayscale()
فعالیت نوم بدل کړ.gray()
grayscale
- زموږ د رنګ سکیمونو سره سمون خوري چې په بل ځای کې کارول کیږي،،،
.table-inverse
او.thead-inverse
ته.thead-default
او.*-dark
نوم بدل شوی ..*-light
- ځواب ورکوونکي میزونه اوس د هرې شبکې وقفې لپاره ټولګي جوړوي. دا د بیټا 1 څخه ماتیږي پدې کې چې
.table-responsive
تاسو یې کاروئ ډیر ورته دی.table-responsive-md
. تاسو کولی شئ اوس وکاروئ.table-responsive
یا.table-responsive-{sm,md,lg,xl}
د اړتیا په توګه. - ډراپ شوي بوور ملاتړ د بسته بندۍ مدیر په توګه د بدیلونو لپاره له مینځه وړل شوی (د بیلګې په توګه، یارن یا npm). د جزیاتو لپاره 2298 کنج وګورئ.
- بوټسټریپ لاهم jQuery 1.9.1 یا لوړ ته اړتیا لري ، مګر تاسو ته مشوره درکول کیږي چې 3.x نسخه وکاروئ ځکه چې د v3.x ملاتړ شوي براوزرونه هغه دي چې د بوټسټریپ ملاتړ کوي او v3.x ځینې امنیتي اصلاحات لري.
- نه کارول شوي
.form-control-label
ټولګي لرې کړل. که تاسو د دې ټولګي څخه کار اخیستی وي، دا د هغه.col-form-label
ټولګي نقل و چې په عمودی توګه د<label>
افقی شکل ترتیبونو کې د دې تړلې ان پټ سره په مرکز کې و. color-yiq
د مکسین څخه بدل شوی چېcolor
ملکیت پکې شامل شوی فنکشن ته چې ارزښت بیرته راګرځوي ، تاسو ته اجازه درکوي دا د هر CSS ملکیت لپاره وکاروئ. د مثال په توګه، د دې پرځایcolor-yiq(#000)
، تاسو به ولیکئcolor: color-yiq(#000);
.
pointer-events
په موډلونو کې نوي کارول معرفي کړل . بهرنی د دودیز کلیک اداره کولو لپاره.modal-dialog
د پیښو څخه تیریږيpointer-events: none
(دا ممکنه کوي چې یوازې.modal-backdrop
د هر کلیک لپاره اوریدل شي)، او بیا یې د ریښتیني لپاره سره مقابله.modal-content
کويpointer-events: auto
.
دلته د ټیکټ لوی توکي دي چې تاسو یې غواړئ خبر اوسئ کله چې له v3 څخه v4 ته حرکت وکړئ.
- د IE8، IE9، او iOS 6 ملاتړ له لاسه ورکړ. v4 اوس یوازې IE10+ او iOS 7+ دی. د هغو سایټونو لپاره چې له دې څخه یو ته اړتیا لري، v3 وکاروئ.
- د Android v5.0 Lollipop براوزر او ویب ویو لپاره رسمي ملاتړ اضافه شوی. د Android براوزر او ویب ویو پخوانۍ نسخې یوازې په غیر رسمي ډول ملاتړ کیږي.
- Flexbox د ډیفالټ لخوا فعال شوی. په عموم کې د دې معنی دا ده چې زموږ د برخو په اوږدو کې له فلوټس څخه لیرې او نور ډیر څه.
- زموږ د سرچینې CSS فایلونو لپاره له لږ څخه ساس ته بدل شوی.
px
زموږ د لومړني CSS واحد په توګه بدل شویrem
، که څه هم پکسلز لاهم د میډیا پوښتنو او د ګریډ چلند لپاره کارول کیږي ځکه چې د وسیلې لید پورټونه د ډول اندازې لخوا اغیزمن ندي.- د نړیوال فونټ اندازه
14px
له16px
. - د پنځم اختیار اضافه کولو لپاره د ګریډ ټایرونه نوي کړل (په
576px
لاندې او لاندې کوچني وسیلو ته خطاب کول) او له-xs
دې ټولګیو څخه انفکس لرې کړل. بېلګه:.col-6.col-sm-4.col-md-3
. - جلا اختیاري موضوع د SCSS متغیرونو له لارې د ترتیب وړ انتخابونو سره بدله کړه (د بیلګې په توګه،
$enable-gradients: true
). - د Grunt پرځای د npm سکریپټونو لړۍ کارولو لپاره د سیسټم بیارغونه جوړه کړئ.
package.json
د ټولو سکریپټونو لپاره وګورئ ، یا د محلي پراختیا اړتیاو لپاره زموږ د پروژې لوستل. - د بوټسټریپ غیر ځواب ویونکي کارول نور ملاتړ نه کوي.
- آنلاین Customizer د ډیرو پراخو سیټ اپ اسنادو او دودیز جوړونو په ګټه واخیست.
- د عام CSS ملکیت ارزښت جوړو او حاشیو / پیډینګ فاصلو شارټ کټونو لپاره لسګونه نوي یوټیلټي ټولګي اضافه کړل.
- فلیکس باکس ته لیږدول شوی.
- په ګریډ مکسینونو او مخکینۍ تعریف شوي ټولګیو کې د فلیکس باکس لپاره ملاتړ اضافه شوی.
- د فلیکس بکس د یوې برخې په توګه، د عمودی او افقی سمون ټولګیو لپاره ملاتړ شامل دی.
- د گرډ ټولګي نومونه او د نوي گرډ ټایر تازه شوي.
- د نور دانه کنټرول لپاره لاندې د نوي
sm
گرډ ټایر اضافه کړ.768px
موږ اوس لروxs
,sm
,md
,lg
, andxl
. د دې معنی دا هم ده چې هر ټایر په یوه کچه ټوپ شوی دی (نو.col-md-6
په v3 کې اوس.col-lg-6
په v4 کې دی). xs
د ګریډ ټولګي تعدیل شوي ترڅو انفکس ته اړتیا ونلري ترڅو په دقیق ډول نمایش وکړي چې دوی د سټایلونو پلي کول پیل کويmin-width: 0
نه د ټاکل شوي پکسل ارزښت. پرځای یې.col-xs-6
، دا اوس.col-6
دی. نور ټول گرډ ټایرونه انفکس ته اړتیا لري (د بیلګې په توګه،sm
).
- د نور دانه کنټرول لپاره لاندې د نوي
- د گرډ اندازې، مکسین، او تغیرات تازه شوي.
- د ګریډ ګټرونه اوس د ساس نقشه لري نو تاسو کولی شئ په هره وقفه کې د ګټر ځانګړي عرضونه مشخص کړئ.
- د ګریډ مکسین تازه شوي ترڅو د
make-col-ready
پریپ مکسین او الف څخه کار واخلي او د انفرادي کالم اندازه کولو لپارهmake-col
تنظیم کړي .flex
max-width
- د ګریډ سیسټم میډیا پوښتنو بریک پوائنټونه او د کانټینر عرض بدل شوی ترڅو د نوي گرډ درجې حساب وکړي او ډاډ ترلاسه کړي چې کالمونه په مساوي ډول
12
د دوی اعظمي چوکۍ سره ویشل کیږي. - د گرډ بریک پواینټ او د کانټینر عرضونه اوس د یو څو جلا متغیرونو پرځای د Sass نقشې (
$grid-breakpoints
او ) له لارې اداره کیږي.$container-max-widths
دا په@screen-*
بشپړ ډول متغیرونه بدلوي او تاسو ته اجازه درکوي په بشپړ ډول د گرډ ټایرونه تنظیم کړئ. - د رسنیو پوښتنې هم بدلې شوې. د دې پر ځای چې زموږ د رسنیو پوښتنو اعالمیې هر ځل د ورته ارزښت سره تکرار کړي، موږ اوس لرو
@include media-breakpoint-up/down/only
. اوس، د لیکلو پرځای@media (min-width: @screen-sm-min) { ... }
، تاسو لیکلی شئ@include media-breakpoint-up(sm) { ... }
.
- غورځول شوي تختې، تمبیلونه، او څاګانې د نوي ټول شامل شوي برخې لپاره، کارتونه .
- د ګلیفیکون آیکون فونټ غورځول شوی. که تاسو شبیانو ته اړتیا لرئ، ځینې اختیارونه دي:
- د ګلیفیکون پورته نسخه
- اوټیکون
- فونټ په زړه پوری
- د بدیلونو لیست لپاره د پراخولو پاڼه وګورئ . اضافي وړاندیزونه لرئ؟ مهرباني وکړئ یوه مسله یا PR خلاص کړئ.
- د Affix jQuery پلگ ان غورځول شوی.
- موږ د پرځای کارولو وړاندیز کوو
position: sticky
. HTML5 وګورئ مهرباني وکړئ د توضیحاتو او ځانګړي پولیفیل وړاندیزونو لپاره ننوتل. یو وړاندیز دا دی چې@supports
د پلي کولو لپاره یو قاعده وکاروئ (د بیلګې په توګه،@supports (position: sticky) { ... }
)/ - که تاسو د اضافي ، غیر
position
سټایلونو پلي کولو لپاره Affix کاروئ ، نو پولیفیل ممکن ستاسو د کارونې قضیې ملاتړ ونه کړي. د دې ډول کارولو لپاره یو اختیار د دریمې ډلې ScrollPos-Styler کتابتون دی.
- موږ د پرځای کارولو وړاندیز کوو
- د پیجر اجزا غورځول ځکه چې دا په لازمي ډول یو څه دودیز بټنونه وو.
- نږدې ټولې برخې یې بیاکتلې ترڅو د ماشومانو د ځانګړي انتخاب کونکو پر ځای نور غیر نیست شوي ټولګي انتخاب کونکي وکاروي.
دا لیست د v3.xx او v4.0.0 ترمنځ د اجزا لخوا کلیدي بدلونونه روښانه کوي.
د بوټسټریپ 4 لپاره نوی ریبوټ دی ، یو نوی سټایل شیټ چې زموږ د خپل یو څه نظر لرونکي ری سیٹ سټایلونو سره نورمالیز باندې رامینځته کوي. په دې فایل کې ټاکونکي یوازې عناصر کاروي — دلته ټولګي نشته. دا زموږ د بیا تنظیم کولو سټایلونه زموږ د اجزاو سټایلونو څخه د ډیر ماډلر چلند لپاره جلا کوي. ځینې خورا مهم ریسیټونه پدې کې شامل دي box-sizing: border-box
بدلونونه ، له یونټ څخه em
په rem
ډیری عناصرو کې حرکت کول ، د لینک سټایلونه ، او ډیری شکل عنصر ری سیٹونه.
- ټولې
.text-
اسانتیاوې_utilities.scss
فایل ته لیږدول شوي. - لکه څنګه چې د پولې څخه څنګ ته غورځول
.page-header
شوی، د هغې ټول سټایلونه د اسانتیاوو له لارې پلي کیدی شي. .dl-horizontal
غورځول شوی دی. پرځای یې،.row
په دې او ماشومانو<dl>
کې د ګریډ کالم ټولګي (یا مکسین) وکاروئ او وکاروئ .<dt>
<dd>
- دودیز
<blockquote>
سټایل ټولګیو ته لیږدول شوی -.blockquote
او.blockquote-reverse
ترمیم کونکی. .list-inline
اوس اړتیا لري چې د خپلو ماشومانو لیست توکي په نوي.list-inline-item
ټولګي کې پلي کړي.
- په نوم بدل
.img-responsive
شو.img-fluid
. - په نوم بدل
.img-rounded
شو.rounded
- په نوم بدل
.img-circle
شو.rounded-circle
- د انتخاب کونکي نږدې ټول مثالونه
>
لیرې شوي ، پدې معنی چې نیست شوي میزونه به اوس په اوتومات ډول د دوی له والدینو څخه سټایلونه په میراث ترلاسه کړي. دا زموږ انتخاب کونکي او احتمالي تخصیصات خورا ساده کوي. - ځواب ویونکي میزونه نور د ریپ کولو عنصر ته اړتیا نلري. پرځای یې، یوازې په
.table-responsive
حق کې واچوئ<table>
. - د دوام لپاره نوم بدل
.table-condensed
شو.table-sm
. .table-inverse
یو نوی اختیار اضافه کړ .- د جدول سرلیک ترمیم کونکي اضافه شوي:
.thead-default
او.thead-inverse
. - د متنی ټولګیو نوم بدل شوی ترڅو یو
.table-
- مخکینۍ ولري. له همدې امله.active
,.success
,.warning
,.danger
او.info
ته.table-active
,.table-success
,.table-warning
,.table-danger
او.table-info
.
- حرکت شوی عنصر
_reboot.scss
فایل ته بیا تنظیم شوی. - په نوم بدل
.control-label
شو.col-form-label
. - په ترتیب سره نوم
.input-lg
او.input-sm
ته.form-control-lg
او ته بدل.form-control-sm
شو. - د سادگي
.form-group-*
لپاره ټولګي پریښودل. اوس پرځای ټولګي وکاروئ.form-control-*
. - غورځول
.help-block
شوی او.form-text
د بلاک کچې مرستې متن لپاره یې ځای په ځای کړی. د انلاین مرستې متن او نورو انعطاف وړ انتخابونو لپاره ، د کارونې ټولګي وکاروئ لکه.text-muted
. - غورځول
.radio-inline
او.checkbox-inline
. - یوځای شوي او
.checkbox
په مختلفو ټولګیو کې شامل دي..radio
.form-check
.form-check-*
- افقی شکلونه ترمیم شوی:
- د
.form-horizontal
ټولګي اړتیا له لاسه ورکړه. .form-group
نور د.row
مکسین له لارې سټایلونه نه پلي کوي ، نو.row
اوس د افقی گرډ ترتیبونو لپاره اړین دی (د مثال په توګه ،<div class="form-group row">
)..col-form-label
د s سره عمودی مرکز لیبلونو ته نوی ټولګی اضافه شوی.form-control
..form-row
د گرډ ټولګیو سره د کمپیکٹ فارم ترتیبونو لپاره نوي اضافه شوي (.row
د یو.form-row
او تګ لپاره خپل بدل کړئ).
- د
- د دودیز فارمونو ملاتړ اضافه شوی (د چک بکسونو ، راډیوګانو ، انتخابونو ، او فایل داخلونو لپاره).
- د CSS او pseudo- ټولګیو له لارې د HTML5 فورمې اعتبار سره بدل شوی
.has-error
،.has-warning
او ټولګي..has-success
:invalid
:valid
- په نوم بدل
.form-control-static
شو.form-control-plaintext
.
- په نوم بدل
.btn-default
شو.btn-secondary
. .btn-xs
ټولګي په بشپړه توګه غورځول شوي لکه څنګه.btn-sm
چې په متناسب ډول د v3 په پرتله خورا کوچنی دی.- د jQuery پلگ ان د دولتي تڼۍ ځانګړتیا له
button.js
مینځه وړل شوې. پدې کې میتودونه$().button(string)
او$().button('reset')
میتودونه شامل دي. موږ مشوره ورکوو چې د دې پرځای د دودیز جاوا سکریپټ لږ څه وکاروئ ، کوم چې به د هغه ډول چلند کولو ګټه ولري چې تاسو یې غواړئ.- په یاد ولرئ چې د پلگ ان نورې ځانګړتیاوې (د تڼۍ چک بکسونه، د تڼۍ راډیوګانې، د واحد ټګل بټن) په v4 کې ساتل شوي.
- تڼۍ بدل کړئ
[disabled]
لکه:disabled
څنګه چې IE9 + ملاتړ کوي:disabled
. په هرصورتfieldset[disabled]
لاهم اړین دی ځکه چې اصلي معیوب شوي ساحې لاهم په IE11 کې بګی دي .
- د فلیکس باکس سره اجزا بیا لیکل.
- لرې
.btn-group-justified
شوی د بدیل په توګه تاسو کولی شئ<div class="btn-group d-flex" role="group"></div>
د عناصرو شاوخوا د ریپر په توګه وکاروئ.w-100
. .btn-group-xs
ټولګي په بشپړه توګه د لیرې کولو سره پریښودل.btn-xs
.- د تڼۍ په وسیلې بارونو کې د بټن ګروپونو تر مینځ څرګند واټن لرې شوی؛ اوس د حاشیې اسانتیاوې وکاروئ.
- د نورو برخو سره د کارولو لپاره ښه شوي اسناد.
- د والدینو انتخاب کونکو څخه د ټولو اجزاوو ، ترمیم کونکو او نورو لپاره واحد ټولګیو ته بدل شوی.
- ساده شوي ډراپ ډاون سټایلونه چې نور د ډراپ ډاون مینو سره تړل شوي د پورته یا ښکته مخ تیرونو سره ونه لیږل شي.
- ډراپ ډاونونه اوس د
<div>
s یا<ul>
s سره رامینځته کیدی شي. - د ډراپ ډاون سټایلونه او مارک اپ بیا جوړ کړئ ترڅو د ډراپ ډاون توکو لپاره اسانه ، جوړ شوي ملاتړ چمتو
<a>
کړي<button>
. - په نوم بدل
.divider
شو.dropdown-divider
. - ډراپ ډاون توکي اوس اړتیا لري
.dropdown-item
. - ډراپ ډاون ټګلونه نور روښانه ته اړتیا نلري
<span class="caret"></span>
; دا اوس په اتوماتيک ډول د CSS له لارې چمتو::after
کیږي.dropdown-toggle
.
- د نوي
576px
گرډ بریک پوائنټ په توګه اضافه شویsm
، پدې معنی چې اوس ټول پنځه درجې شتون لري (xs
,sm
,md
,lg
, andxl
). - د ساده گرډ ټولګیو لپاره
.col-{breakpoint}-{modifier}-{size}
د ځواب ویونکي گرډ ترمیم کونکي ټولګیو نوم بدل کړ ..{modifier}-{breakpoint}-{size}
- د نوي فلیکس بکس ځواک لرونکي ټولګیو لپاره د پش او پل موډیفایر
order
ټولګي غورځول شوي. د مثال په توګه، د.col-8.push-4
او پر ځای.col-4.pull-8
، تاسو به کاروئ.col-8.order-2
او.col-4.order-1
. - د گرډ سیسټم او اجزاوو لپاره د فلیکس باکس یوټیلټي ټولګي اضافه شوي.
- د فلیکس باکس سره اجزا بیا لیکل.
a.list-group-item
د یو واضح ټولګي سره بدل شوی.list-group-item-action
، د سټایل کولو لینک او د لیست ګروپ توکو د تڼۍ نسخو لپاره..list-group-flush
د کارتونو سره د کارولو لپاره ټولګي اضافه شوي.
- د فلیکس باکس سره اجزا بیا لیکل.
- فلیکس باکس ته د حرکت په صورت کې، په سرلیک کې د برطرف شوي آئیکونونو سمون ممکن مات شوی وي ځکه چې موږ نور فلوټس نه کاروو. تیر شوي مینځپانګه لومړی راځي ، مګر د فلیکس باکس سره چې نور قضیه نده. خپل د ګوښه کولو عکسونه تازه کړئ ترڅو د موډل سرلیکونو وروسته د سمولو لپاره راشي.
- اختیار (کوم چې په
remote
موډل کې د بهرني مینځپانګې په اتوماتيک ډول بار کولو او انجیکشن کولو لپاره کارول کیدی شي) او اړوندهloaded.bs.modal
پیښه لرې شوې. موږ د دې پرځای وړاندیز کوو چې د پیرودونکي اړخ ټیمپلینګ یا د ډیټا پابند کولو چوکاټ وکاروئ ، یا پخپله jQuery.load زنګ ووهئ .
- د فلیکس باکس سره اجزا بیا لیکل.
- د ساده سټایل کولو لپاره نږدې ټول
>
انتخاب کونکي د غیر منظم ټولګیو له لارې پریښودل. - د HTML ځانګړي انتخاب کونکو پرځای ، موږ د s ، s ، او s
.nav > li > a
لپاره جلا ټولګي کاروو . دا ستاسو HTML ډیر انعطاف وړ کوي پداسې حال کې چې د توسعې زیاتوالي سره راوړي..nav
.nav-item
.nav-link
نوبار په بشپړ ډول په فلیکس باکس کې د سمون، غبرګون، او دودیز کولو لپاره د ښه ملاتړ سره بیا لیکل شوی.
- ځواب ویونکي نوبار چلند اوس په
.navbar
ټولګي کې د اړتیا.navbar-expand-{breakpoint}
له لارې پلي کیږي چیرې چې تاسو غوره کوئ چیرې چې د نوبار سقوط کول. پخوا دا یو لږ متغیر تعدیل و او د بیا تنظیم کولو اړتیا وه. .navbar-default
اوس دی.navbar-light
، که څه.navbar-dark
هم ورته پاتې دی. یو له دې څخه په هر نوبار کې اړین دی. په هرصورت، دا ټولګي نور نه ټاکلbackground-color
کیږي؛ پرځای یې دوی په اصل کې یوازې اغیزه کويcolor
.- نوبارز اوس د یو ډول شالید اعلان ته اړتیا لري. زموږ د شالید اسانتیاو څخه غوره کړئ ( ) یا خپل ځان د لیونۍ تخصیص لپاره
.bg-*
پورته د رڼا / برعکس ټولګیو سره تنظیم کړئ . - د فلیکس باکس سټایلونو په پام کې نیولو سره، نوبارز اوس کولی شي د اسانه سمون انتخابونو لپاره د فلیکس باکس اسانتیاوې وکاروي.
.navbar-toggle
اوس دی.navbar-toggler
او مختلف سټایلونه او داخلي مارک اپ لري (نور درې<span>
s نه)..navbar-form
ټولګي په بشپړه توګه پریښودل . نور اړتیا نشته؛ پرځای یې، یوازې.form-inline
د اړتیا په صورت کې د حاشیې اسانتیاوې وکاروئ او پلي کړئ.- Navbars نور شامل نه دي
margin-bottom
یاborder-radius
په ډیفالټ. د اړتیا په صورت کې اسانتیاوې وکاروئ. - ټولې نمونې چې د نیوبارونو ځانګړتیاوې لري د نوي مارک اپ شاملولو لپاره تازه شوي.
- د فلیکس باکس سره اجزا بیا لیکل.
- واضح ټولګي (
.page-item
,.page-link
) اوس د.pagination
s په اولادونو کې اړین دي - اجزا په بشپړ ډول غورځول
.pager
شوي ځکه چې دا د دودیز شوي خاکه بټونو څخه ډیر لږ و.
- یوه ښکاره طبقه،
.breadcrumb-item
اوس د.breadcrumb
s په اولادونو کې اړینه ده
- د عنصر څخه بې برخې کولو لپاره نوم بدل
.label
شو ..badge
<label>
- اجزا غورځول
.badge
ځکه چې دا نږدې لیبلونو ته ورته و..badge-pill
د دې ګردي لید لپاره د لیبل برخې سره یوځای ترمیم کونکی وکاروئ . - بیجونه نور په اوتومات ډول د لیست ګروپونو او نورو برخو کې نه تیریږي. د دې لپاره اوس د کارموندنې ټولګي اړین دي.
.badge-default
غورځول شوی او.badge-secondary
د اجزاو ترمیم کونکي ټولګیو کې اضافه شوی چې په بل ځای کې کارول کیږي.
د نوي کارت برخې لپاره په بشپړ ډول غورځول شوی.
.panel
ته.card
، اوس د فلیکس بکس سره جوړ شوی..panel-default
لرې شوی او هیڅ بدیل نشته..panel-group
لرې شوی او هیڅ بدیل نشته..card-group
بدیل ندی، دا توپیر لري..panel-heading
ته.card-header
.panel-title
ته.card-title
. د مطلوب لید پورې اړه لري، تاسو ممکن د سرلیک عناصر یا ټولګي (د مثال په توګه<h3>
،.h3
) یا بولډ عناصر یا ټولګي (د مثال په توګه<strong>
،<b>
,.font-weight-bold
) وکاروئ. په یاد ولرئ.card-title
، پداسې حال کې چې ورته ورته نوم ورکړل شوی، په پرتله یو بل نظر تولیدوي.panel-title
..panel-body
ته.card-body
.panel-footer
ته.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, او زموږ د Sass نقشې څخه رامینځته شوي , , او اسانتیاو.panel-danger
لپاره غورځول شوي دي ..bg-
.text-
.border
$theme-colors
- د شرایطو
.progress-bar-*
ټولګي د.bg-*
اسانتیاوو سره بدل کړل. د مثال په توګه،class="progress-bar progress-bar-danger"
کیږيclass="progress-bar bg-danger"
. .active
سره د متحرک پرمختګ بارونو لپاره بدل شوی.progress-bar-animated
.
- د ډیزاین او سټایل ساده کولو لپاره ټوله برخه ترمیم کړه. موږ ستاسو لپاره لږ سټایلونه لرو، نوي شاخصونه، او نوي عکسونه.
- ټول CSS بې ځړول شوي او نوم یې بدل شوی، ډاډ ترلاسه کوي چې هر ټولګي د مخ سره مخ شوی
.carousel-
.- د carousel توکو لپاره،
.next
,.prev
,.left
, او.right
اوس دي.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, and.carousel-item-right
. .item
اوس هم دی.carousel-item
.- د مخکیني / راتلونکي کنټرولونو لپاره ،
.carousel-control.right
او.carousel-control.left
اوس دي.carousel-control-next
او.carousel-control-prev
، پدې معنی چې دوی نور ځانګړي بیس کلاس ته اړتیا نلري.
- د carousel توکو لپاره،
- ټول ځواب ورکوونکي سټایلونه لرې کړل، اسانتیاو ته ځنډول (د بیلګې په توګه، په ځانګړو لید پورټونو کې سرلیکونه ښودل) او د اړتیا سره سم دودیز سټایلونه.
- د کاروسیل توکو کې د عکسونو لپاره لرې شوي عکس العملونه ، اسانتیاو ته ځنډول.
- د نوي مارک اپ او سټایلونو شاملولو لپاره د کاروسیل مثال ټیک کړئ.
- د سټایل شوي نیست شوي میزونو لپاره ملاتړ لرې شوی. د جدول ټول سټایلونه اوس د ساده انتخاب کونکو لپاره په v4 کې په میراث شوي.
- د برعکس جدول ډول اضافه شوی.
- ښکاره کول، پټول، او نور:
- د ښودلو اسانتیاوې ځواب ویونکي کړي (د بیلګې په توګه،
.d-none
اوd-{sm,md,lg,xl}-none
). .hidden-*
د نوي ښودلو اسانتیاو لپاره د اسانتیاو لویه برخه غورځول شوې . د مثال په توګه، د دې پرځای.hidden-sm-up
، وکاروئ.d-sm-none
..hidden-print
د ښودلو یوټیلټي نومولو سکیم کارولو لپاره د اسانتیاو نوم بدل کړ. د دې پاڼې د ځواب ورکوونکي اسانتیاو برخې لاندې نور معلومات.- د ځواب ویونکي فلوټس لپاره ټولګي اضافه
.float-{sm,md,lg,xl}-{left,right,none}
شوي او لیرې شوي.pull-left
او.pull-right
ځکه چې دوی بې ځایه دي.float-left
او.float-right
.
- د ښودلو اسانتیاوې ځواب ویونکي کړي (د بیلګې په توګه،
- ډول:
- زموږ د متن د سمون ټولګیو ته ځواب ورکوونکي تغیرات اضافه کړل
.text-{sm,md,lg,xl}-{left,center,right}
.
- زموږ د متن د سمون ټولګیو ته ځواب ورکوونکي تغیرات اضافه کړل
- سمون او واټن:
- د ټولو اړخونو لپاره نوي ځواب ویونکي حاشیه او پیډینګ اسانتیاوې اضافه شوي، او عمودی او افقی لنډ لاسونه.
- د فلیکس باکس اسانتیاو بوټلوډ اضافه شوی .
.center-block
د نوي.mx-auto
ټولګي لپاره ووتل .
- Clearfix تازه شوی ترڅو د زړو براوزر نسخو لپاره ملاتړ پریږدي.
د Bootstrap 3 د پلورونکي مخکیني مکسینونه، چې په v3.2.0 کې له مینځه وړل شوي وو، په Bootstrap 4 کې لرې شوي دي. ځکه چې موږ Autoprefixer کاروو ، دوی نور اړین ندي.
لاندې مرکبونه لرې کړل : animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
, translate
,translate3d
user-select
زموږ اسنادو هم په بورډ کې یو پرمختګ ترلاسه کړ. دلته ټیټ ټیټ دی:
- موږ لاهم جیکیل کاروو، مګر موږ په مخلوط کې فلګونه لرو:
bugify.rb
زموږ د براوزر بګ پاڼې کې د ننوتلو په مؤثره توګه لیست کولو لپاره کارول کیږي.example.rb
د ډیفالټhighlight.rb
پلگ ان دودیز فورک دی ، د اسانه مثال کوډ اداره کولو ته اجازه ورکوي.callout.rb
د دې ورته ورته دودیز فورک دی، مګر زموږ د ځانګړو اسنادو کال آوټ لپاره ډیزاین شوی.markdown-block.rb
د HTML عناصرو لکه میزونو کې د مارک ډاون ټوټې وړاندې کولو لپاره کارول کیږي.- jekyll-toc زموږ د مینځپانګو جدول رامینځته کولو لپاره کارول کیږي.
- د ټولو اسنادو مینځپانګه په مارک ډاون کې (د HTML پرځای) د اسانه ترمیم لپاره بیا لیکل شوي.
- مخونه د ساده محتوياتو او د لاسرسي وړ درجه بندي لپاره بیا تنظیم شوي.
- موږ له منظم CSS څخه SCSS ته حرکت وکړ ترڅو د بوټسټریپ متغیرونو ، مکسینونو او نورو څخه پوره ګټه واخلو.
ټول @screen-
متغیرونه په v4.0.0 کې لرې شوي. media-breakpoint-up()
پر ځای د , media-breakpoint-down()
, یا media-breakpoint-only()
Sass mixins یا $grid-breakpoints
Sass نقشه وکاروئ .
display
زموږ د ځواب ویونکي کارونې ټولګي په پراخه کچه د واضح اسانتیاو په ګټه لرې شوي .
.hidden
او.show
ټولګي لرې شوي ځکه چې دوی د jQuery او میتودونو سره په ټکر کې$(...).hide()
دي$(...).show()
. پرځای یې، د خاصیت بدلولو هڅه وکړئ[hidden]
یا د انلاین سټایلونه لکهstyle="display: none;"
او وکاروئstyle="display: block;"
.- ټول
.hidden-
ټولګي لرې شوي، د چاپ اسانتیاو لپاره خوندي کړئ چې نوم یې بدل شوی.- له v3 څخه لرې شوی:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- د v4 الفا څخه لرې شوی:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- له v3 څخه لرې شوی:
- د چاپ اسانتیاوې نور د
.hidden-
یا سره نه پیل کیږي.visible-
، مګر د.d-print-
.- زاړه نومونه
.visible-print-block
:.visible-print-inline
,,,,.visible-print-inline-block
.hidden-print
- نوي ټولګي
.d-print-block
:.d-print-inline
,,,,.d-print-inline-block
.d-print-none
- زاړه نومونه
د واضح .visible-*
ټولګیو کارولو پرځای، تاسو یو عنصر ښکاره کوئ چې په ساده ډول یې د دې سکرین اندازې کې پټ نه کړئ. تاسو کولی شئ یو .d-*-none
ټولګي د یوې ټولګي سره یوځای کړئ .d-*-block
ترڅو عنصر یوازې د سکرین اندازې په ټاکل شوي وقفه کې وښیې (د مثال .d-none.d-md-block.d-xl-none
په توګه عنصر یوازې په متوسط او لویو وسیلو کې ښیې).
په یاد ولرئ چې په v4 کې د گرډ بریک پوائنټونو کې بدلون پدې معنی دی چې تاسو به د ورته پایلو ترلاسه کولو لپاره یو بریک پواینټ لوی ته لاړشئ. نوي ځواب ورکوونکي یوټیلټي ټولګي هڅه نه کوي چې لږ عام قضیې ځای په ځای کړي چیرې چې د عنصر لید د لید پورټ اندازې یو واحد متناسب سلسله په توګه څرګند نشي؛ تاسو به د دې پرځای په داسې قضیو کې دودیز CSS کارولو ته اړتیا ولرئ.