پیل کول
د بوټسټریپ یوه عمومي کتنه ، د ډاونلوډ او کارولو څرنګوالی ، لومړني ټیمپلیټونه او مثالونه ، او نور ډیر څه.
د بوټسټریپ یوه عمومي کتنه ، د ډاونلوډ او کارولو څرنګوالی ، لومړني ټیمپلیټونه او مثالونه ، او نور ډیر څه.
بوټسټریپ (اوس مهال v3.3.7) د ګړندي پیل کولو لپاره یو څو اسانه لارې لري ، هر یو د مختلف مهارت کچې ته اپیل کوي او قضیه کاروي. د دې لپاره ولولئ چې وګورئ چې ستاسو ځانګړي اړتیاوې څه دي.
سی ایس ایس، جاواسکریپټ، او فونټونه تالیف شوي او کوچني شوي. هیڅ اسناد یا اصلي سرچینې فایلونه شامل ندي.
سرچینه کم، جاوا سکریپټ، او فونټ فایلونه، زموږ د اسنادو سره. لږ کمپیلر او یو څه ترتیب ته اړتیا لري.
بوټسټریپ په ریلونو ، کمپاس ، یا یوازې ساس پروژو کې د اسانه شاملولو لپاره له لږ څخه ساس ته پورټ شوی.
په jsDelivr کې خلک په مهربانۍ سره د Bootstrap CSS او JavaScript لپاره د CDN ملاتړ چمتو کوي. یوازې دا د بوټسټراپ CDN لینکونه وکاروئ.
تاسو کولی شئ د Bower په کارولو سره د Bootstrap Less، CSS، JavaScript، او فونټونه هم نصب او اداره کړئ :
تاسو کولی شئ د npm په کارولو سره بوټسټریپ هم نصب کړئ :
require('bootstrap')
د بوټسټریپ ټول jQuery پلگ ان به په jQuery څیز کې بار کړي. ماډل پخپله bootstrap
هیڅ شی نه صادروي. تاسو کولی شئ په لاسي ډول د بوټسټریپ jQuery پلگ انونه په انفرادي ډول /js/*.js
د کڅوړې د لوړې کچې لارښود لاندې فایلونو په پورته کولو سره پورته کړئ.
Bootstrap's package.json
د لاندې کیلي لاندې ځینې اضافي میټاډاټا لري:
less
- د بوټسټریپ اصلي لږ سرچینې فایل ته لارهstyle
- د بوټسټریپ غیر کم شوي CSS ته لاره چې د ډیفالټ تنظیماتو په کارولو سره دمخه جوړه شوې (هیڅ تخصیص نشته)تاسو کولی شئ د کمپوزر په کارولو سره د بوټسټریپ لیس ، سی ایس ایس ، جاواسکریپټ او فونټونه هم نصب او اداره کړئ :
بوټسټریپ د CSS پلورونکي مخکینو سره معامله کولو لپاره Autoprefixer کاروي . که تاسو بوټسټریپ د دې لږ / ساس سرچینې څخه تالیف کوئ او زموږ د ګرنټ فایل نه کاروئ ، نو تاسو به اړتیا ولرئ پخپله د جوړونې پروسې کې Autoprefixer مدغم کړئ. که تاسو مخکې له مخکې جوړ شوی بوټسټریپ کاروئ یا زموږ د ګرنټ فایل کاروئ ، تاسو اړتیا نلرئ پدې اړه اندیښنه ولرئ ځکه چې آټوپریفکسر دمخه زموږ په ګرنټ فایل کې مدغم شوی.
بوټسټریپ په دوه بڼو کې د ډاونلوډ وړ دی، په کوم کې چې تاسو به لاندې لارښودونه او فایلونه ومومئ، په منطقي توګه د عامو سرچینو ګروپ کول او دواړه تالیف شوي او کوچني تغیرات چمتو کول.
مهرباني وکړئ په یاد ولرئ چې ټول جاواسکریپټ پلگ ان د jQuery شاملولو ته اړتیا لري، لکه څنګه چې د سټارټر ټیمپلیټ کې ښودل شوي . زموږ سره مشوره وکړئbower.json
ترڅو وګورئ چې د jQuery کومې نسخې ملاتړ کیږي.
یوځل ډاونلوډ کړئ ، د (کمپل شوي) بوټسټریپ جوړښت لیدلو لپاره کمپریس شوی فولډر خلاص کړئ. تاسو به د دې په څیر یو څه وګورئ:
دا د بوټسټریپ ترټولو بنسټیز شکل دی: په نږدې هره ویب پروژه کې د ګړندي ډراپ ان کارولو لپاره دمخه جوړ شوي فایلونه. موږ تالیف شوی CSS او JS ( bootstrap.*
) چمتو کوو، په بیله بیا تالیف شوی او کوچنی شوی CSS او JS ( bootstrap.min.*
). د CSS سرچینې نقشې ( bootstrap.*.map
) د ځانګړو براوزرونو پراختیا کونکي وسیلو سره د کارولو لپاره شتون لري. د ګلیفیکون فونټونه شامل دي، لکه څنګه چې اختیاري بوټسټریپ موضوع ده.
د بوټسټریپ سرچینې کوډ ډاونلوډ کې دمخه جوړ شوی CSS ، جاواسکریپټ ، او فونټ اثاثې شامل دي ، د سرچینې کم ، جاوا سکریپټ ، او اسنادو سره. په ځانګړې توګه، پدې کې لاندې او نور شامل دي:
less/
،، او زموږ د CSS، JS، js/
او fonts/
آئیکون فونټونو لپاره د سرچینې کوډ دی (په ترتیب سره). په dist/
فولډر کې ټول هغه څه شامل دي چې پورته د مخکې جوړ شوي ډاونلوډ برخه کې لیست شوي. په docs/
فولډر کې زموږ د اسنادو لپاره د سرچینې کوډ، او examples/
د بوټسټراپ کارونې شامل دي. له دې هاخوا ، کوم بل شامل فایل د کڅوړو ، جواز معلوماتو ، او پراختیا لپاره ملاتړ چمتو کوي.
بوټسټراپ د خپل جوړ شوي سیسټم لپاره ګرنټ کاروي ، د چوکاټ سره کار کولو لپاره د مناسبو میتودونو سره. دا څنګه موږ خپل کوډ تالیف کوو، ازموینې چلوو، او نور.
د ګرنټ نصبولو لپاره، تاسو باید لومړی د node.js ډاونلوډ او نصب کړئ (کوم چې npm پکې شامل دي). npm د نوډ بسته شوي ماډلونو لپاره ولاړ دی او د node.js له لارې د پراختیا انحصار اداره کولو یوه لاره ده.
بیا، د کمانډ لاین څخه:grunt-cli
سره په نړیواله کچه نصب کړئ npm install -g grunt-cli
./bootstrap/
ډایرکټر ته لاړشئ، بیا یې چلوئ npm install
. npm به package.json
فایل وګوري او په اتوماتيک ډول به هلته لیست شوي اړین محلي انحصارونه نصب کړي.کله چې بشپړ شي ، تاسو به وکولی شئ د کمانډ لاین څخه چمتو شوي مختلف ګرنټ کمانډونه پرمخ وړئ.
grunt dist
(یوازې CSS او جاواسکریپټ تالیف کړئ)/dist/
د تالیف شوي او کوچني شوي CSS او JavaScript فایلونو سره لارښود بیا رامینځته کوي. د بوټسټریپ کارونکي په توګه ، دا معمولا هغه قومانده ده چې تاسو یې غواړئ.
grunt watch
(وګوره)د لږې سرچینې فایلونه ګوري او کله چې تاسو بدلون خوندي کړئ په اتوماتيک ډول یې CSS ته بیا تنظیموي.
grunt test
(ازموینې ترسره کول)JSHint چلوي او په PhantomJS کې د QUnit ازموینې په سر کې پرمخ وړي .
grunt docs
(د اسنادو اثاثې جوړول او ازموینه کول)CSS، JavaScript، او نورې شتمنۍ جوړوي او ازمويي کوم چې په محلي توګه د اسنادو چلولو په وخت کې کارول کیږي bundle exec jekyll serve
.
grunt
(په بشپړ ډول هرڅه جوړ کړئ او ازموینې پرمخ وړئ)CSS او JavaScript تالیف او کموي، د اسنادو ویب پاڼه جوړوي، د اسنادو په وړاندې د HTML5 تایید کونکی چلوي، د Customizer شتمنۍ بیا تولیدوي، او نور ډیر څه. جیکیل ته اړتیا لري . معمولا یوازې اړین دی که تاسو پخپله په بوټسټریپ کې هیک کوئ.
که تاسو د انحصارونو نصبولو یا د ګرنټ کمانډونو چلولو کې ستونزې سره مخ شئ ، لومړی /node_modules/
د npm لخوا رامینځته شوی لارښود حذف کړئ. بیا، بیا چلول npm install
.
د دې بنسټیز HTML ټیمپلیټ سره پیل کړئ، یا دا مثالونه تعدیل کړئ . موږ امید لرو چې تاسو به زموږ ټیمپلیټونه او مثالونه تنظیم کړئ ، ستاسو د اړتیاو سره سم به یې تنظیم کړئ.
د لږترلږه بوټسټریپ سند سره کار پیل کولو لپاره لاندې HTML کاپي کړئ.
د بوټسټریپ ډیری اجزاوو سره په پورتنۍ لومړني ټیمپلیټ کې جوړ کړئ. موږ تاسو هڅوو چې ستاسو د انفرادي پروژې اړتیاو سره سم بوټسټریپ تنظیم او تطبیق کړئ.
د بوټسټریپ ذخیره ډاونلوډ کولو سره لاندې د هرې بیلګې لپاره د سرچینې کوډ ترلاسه کړئ . مثالونه په لارښود کې موندل کیدی شي docs/examples/
.
Bootlint د بوټسټریپ HTML لینټر رسميوسیله ده. دا په اوتومات ډول په ویب پاڼو کې د ډیری عام HTML غلطیو لپاره چک کوي کوم چې بوټسټریپ په مناسب ډول "ونیلا" کاروي. د وینیلا بوټسټریپ اجزا/ویجټونه د DOM برخې ته اړتیا لري ترڅو د ځانګړي جوړښتونو سره مطابقت ولري. بوټلینټ ګوري چې د بوټسټریپ اجزاو مثالونه په سمه توګه جوړ شوي HTML لري. ستاسو د بوټسټریپ ویب پرمختیا وسیلې چین ته د بوټلینټ اضافه کولو په اړه غور وکړئ ترڅو هیڅ یو عام غلطی ستاسو د پروژې پراختیا ورو نه کړي.
د بوټسټراپ پراختیا په اړه تازه اوسئ او د دې ګټورو سرچینو سره ټولنې ته ورسیږئ.
irc.freenode.net
په سرور کې د IRC په کارولو سره د ملګرو بوټسټریپرانو سره خبرې وکړئ ، په ## بوټسټریپ چینل کې.twitter-bootstrap-3
پوښتنه وکړئ .bootstrap
په پیکجونو کې کلیدي کلمه وکاروي کوم چې د بوټسټریپ فعالیت کې بدلون یا اضافه کوي کله چې د اعظمي کشف لپاره د npm یا ورته تحویلي میکانیزمونو له لارې توزیع کیږي.تاسو کولی شئ د وروستي ګپ شپ او په زړه پوري میوزیک ویډیوګانو لپاره په ټویټر کې @getbootstrap هم تعقیب کړئ.
بوټسټریپ په اتوماتيک ډول ستاسو پاڼې د مختلف سکرین اندازو لپاره تطبیقوي. دلته د دې خصوصیت غیر فعالولو څرنګوالی دی نو ستاسو پاڼه د دې غیر ځواب ویونکي مثال په څیر کار کوي .
<meta>
سندونو کې ذکر شوي لید پورټ پریږدئwidth
توګه ډاډ ترلاسه کړئ چې دا د ډیفالټ بوټسټریپ CSS وروسته راځي. تاسو کولی شئ په اختیاري توګه د میډیا پوښتنو یا ځینې انتخاب کونکي څخه مخنیوی وکړئ ..container
width: 970px !important;
!important
.col-xs-*
، د منځنیو/لویو په څنګ کې، یا په ځای کې ټولګي وکاروئ. اندیښنه مه کوئ ، د اضافي کوچني وسیلې گرډ ټولو حلونو ته اندازه کوي.تاسو به لاهم د IE8 لپاره Respond.js ته اړتیا ولرئ (ځکه چې زموږ د رسنیو پوښتنې لاهم شتون لري او پروسس کولو ته اړتیا لري). دا د Bootstrap "ګرځنده سایټ" اړخونه غیر فعالوي.
موږ دا مرحلې په مثال کې پلي کړې. د دې سرچینې کوډ ولولئ ترڅو وګورئ چې ځانګړي بدلونونه پلي شوي.
په لټه کې د يو زوړ نسخه د Bootstrap v3.x ته مهاجرت؟ زموږ د مهاجرت لارښود وګورئ .
بوټسټریپ په وروستي ډیسټاپ او ګرځنده براوزرونو کې د غوره کار کولو لپاره رامینځته شوی ، پدې معنی چې زاړه براوزرونه ممکن په مختلف سټایل شوي ، که څه هم په بشپړ ډول فعال وي ، د ځینې برخو رینډرینګ ښکاره کړي.
په ځانګړې توګه، موږ د لاندې براوزرونو او پلیټ فارمونو وروستي نسخې ملاتړ کوو.
بدیل براوزرونه چې د WebKit، Blink، یا Gecko وروستۍ نسخه کاروي، که مستقیم یا د پلیټ فارم ویب لید API له لارې وي، په ښکاره توګه ملاتړ نه کوي. په هرصورت، بوټسټریپ باید (په ډیرو مواردو کې) په دې براوزرونو کې هم په سمه توګه ښکاره او فعالیت وکړي. نور مشخص ملاتړ معلومات لاندې چمتو شوي.
په عموم کې ، بوټسټراپ د هر لوی پلیټ فارم ډیفالټ براوزرونو وروستي نسخې ملاتړ کوي. په یاد ولرئ چې پراکسي براوزرونه (لکه د اوپیرا مینی، د اوپیرا موبایل ټربو موډ، UC براوزر مینی، ایمیزون سلک) ملاتړ نه کوي.
کروم | فایرفوکس | سفاري | |
---|---|---|---|
Android | ملاتړ شوی | ملاتړ شوی | N/A |
iOS | ملاتړ شوی | ملاتړ شوی | ملاتړ شوی |
په ورته ډول، د ډیری ډیسټاپ براوزرونو وروستي نسخې ملاتړ کیږي.
کروم | فایرفوکس | د انټرنیټ اکسپلورر | اوپرا | سفاري | |
---|---|---|---|---|---|
مېک | ملاتړ شوی | ملاتړ شوی | N/A | ملاتړ شوی | ملاتړ شوی |
وینډوز | ملاتړ شوی | ملاتړ شوی | ملاتړ شوی | ملاتړ شوی | نه ملاتړ شوی |
په وینډوز کې، موږ د انټرنیټ اکسپلورر 8-11 ملاتړ کوو .
د فایرفوکس لپاره، د وروستي نورمال مستحکم ریلیز سربیره، موږ د فایرفاکس وروستي پراخ شوي ملاتړ ریلیز (ESR) نسخه هم ملاتړ کوو.
په غیر رسمي توګه، بوټسټریپ باید د لینکس لپاره کرومیم او کروم، د لینکس لپاره فایرفوکس، او انټرنیټ اکسپلورر 7، او همدارنګه د مایکروسافټ ایج کې ښه وګوري او چلند وکړي، که څه هم دوی په رسمي توګه نه ملاتړ کیږي.
د ځینې براوزر بګونو لیست لپاره چې بوټسټریپ ورسره لاس او ګریوان دي ، زموږ د براوزر بګ دیوال وګورئ .
د انټرنیټ اکسپلورر 8 او 9 هم ملاتړ کیږي، په هرصورت، مهرباني وکړئ په یاد ولرئ چې ځینې CSS3 ملکیتونه او HTML5 عناصر د دې براوزرونو لخوا په بشپړ ډول نه ملاتړ کیږي. برسېره پردې، د انټرنیټ اکسپلورر 8 د رسنیو پوښتنو مالتړ فعالولو لپاره د Respond.js کارولو ته اړتیا لري.
فیچر | انټرنیټ اکسپلورر 8 | انټرنیټ اکسپلورر 9 |
---|---|---|
border-radius |
نه ملاتړ شوی | ملاتړ شوی |
box-shadow |
نه ملاتړ شوی | ملاتړ شوی |
transform |
نه ملاتړ شوی | ملاتړ شوی، د -ms مخکینۍ سره |
transition |
نه ملاتړ شوی | |
placeholder |
نه ملاتړ شوی |
د CSS3 او HTML5 ځانګړتیاو د براوزر مالتړ په اړه د جزیاتو لپاره ایا زه کولی شم استعمال کړم .
د انټرنیټ اکسپلورر 8 لپاره ستاسو په پراختیا او تولید چاپیریال کې د Respond.js کارولو پرمهال د لاندې احتیاطونو څخه خبر اوسئ.
د CSS سره د Respond.js کارول په مختلف (فرعي) ډومین کې کوربه شوي (د مثال په توګه په CDN کې) یو څه اضافي تنظیم ته اړتیا لري. د جزیاتو لپاره د Respond.js اسناد وګورئ.
file://
د براوزر د امنیت قواعدو له امله، Respond.js د پروتوکول له لارې لیدل شوي پاڼو سره کار نه کوي file://
(لکه کله چې د محلي HTML فایل پرانیستل). په IE8 کې د ځواب ویونکو ځانګړتیاو آزموینې لپاره، خپل پاڼې د HTTP(S) له لارې وګورئ. د جزیاتو لپاره د Respond.js اسناد وګورئ.
@import
Respond.js د CSS سره کار نه کوي چې له لارې راجع کیږي @import
. په ځانګړې توګه، ځینې ډروپل تشکیلات د کارولو لپاره پیژندل شوي @import
. د جزیاتو لپاره د Respond.js اسناد وګورئ.
IE8 په بشپړ ډول ملاتړ نه کوي box-sizing: border-box;
کله چې د min-width
, max-width
, min-height
, یا سره یوځای شي max-height
. د همدې دلیل لپاره، د v3.0.1 په څیر، موږ نور max-width
په .container
s کې کار نه کوو.
IE8 ځینې مسلې لري @font-face
کله چې سره یوځای شي :before
. بوټسټریپ دا ترکیب د خپل ګلیفیکون سره کاروي. که یوه پاڼه کیش شوې وي، او د کړکۍ په اوږدو کې د موږک پرته پورته کیږي (د بیلګې په توګه د ریفریش تڼۍ کېکاږئ یا په iframe کې یو څه پورته کړئ) نو پاڼه د فونټ پورته کیدو دمخه وړاندې کیږي. د پاڼې (باډي) باندې ځړول به ځینې عکسونه وښیې او په پاتې شبیانو باندې ځړول به هغه هم وښیې. ۱۳۸۶۳ ګڼه وګورئ وګورئ.
بوټسټریپ د زاړه انټرنیټ اکسپلورر مطابقت حالتونو کې ملاتړ نه کوي. د دې لپاره چې ډاډ ترلاسه کړئ چې تاسو د IE لپاره وروستي رینډرینګ حالت کاروئ، <meta>
په خپلو پاڼو کې د مناسب ټاګ په شمول په پام کې ونیسئ:
د ډیبګ کولو وسیلو په خلاصولو سره د سند حالت تایید کړئ: فشار ورکړئF12 د "د سند حالت" فشار ورکړئ او چیک کړئ.
دا ټګ د بوټسټریپ په ټولو اسنادو او مثالونو کې شامل شوی ترڅو ډاډ ترلاسه کړي چې د انټرنیټ اکسپلورر په هر ملاتړ شوي نسخه کې غوره رینډرینګ ممکن دی.
دا StackOverflow پوښتنه وګورئ .
د انټرنیټ اکسپلورر 10 د وسیلې پلنوالی د لید پورټ چوکۍ څخه توپیر نه کوي ، او پدې توګه د بوټسټریپ CSS کې د میډیا پوښتنې په سمه توګه نه پلي کوي. په نورمال ډول تاسو به د دې د حل کولو لپاره د CSS ګړندۍ ټوټه اضافه کړئ:
په هرصورت، دا د هغو وسیلو لپاره کار نه کوي چې د وینډوز تلیفون 8 نسخه د Update 3 (aka GDR3) څخه زاړه چلوي ، ځکه چې دا د دې لامل کیږي چې دا ډول وسایل د "تلیفون" لید پر ځای ډیری ډیسټاپ لید وښيي. د دې په نښه کولو لپاره، تاسو اړتیا لرئ چې لاندې CSS او JavaScript شامل کړئ ترڅو د بګ شاوخوا کار وکړي .
د لا زیاتو معلوماتو او کارونې لارښوونو لپاره، د وینډوز تلیفون 8 او د وسیلې پراخوالی ولولئ ولولئ .
د سر پورته کولو په توګه، موږ دا د بوټسټراپ په ټولو اسنادو او مثالونو کې د مظاهرې په توګه شاملوو.
د OS X لپاره د v7.1 څخه دمخه د سفاري د نسخو رینډینګ انجن او د iOS v8.0 لپاره سفاري زموږ د .col-*-1
ګریډ ټولګیو کې کارول شوي د لسیزو ځایونو شمیر سره یو څه ستونزه درلوده. نو که تاسو د 12 انفرادي گرډ کالمونه درلودل، نو تاسو به وګورئ چې دوی د کالمونو د نورو قطارونو په پرتله لنډ دي. د سفاري/iOS د لوړولو سربیره، تاسو د کار کولو لپاره ځینې اختیارونه لرئ:
.pull-right
ترڅو د سخت ښي اړخ سمون ترلاسه کړئoverflow: hidden
د عنصر لپاره ملاتړ <body>
په iOS او Android کې خورا محدود دی. دې پای ته رسیدو لپاره ، کله چې تاسو د دې وسیلو په براوزرونو کې د ماډل پورتنۍ یا ښکته څخه تیر کړئ ، <body>
مینځپانګه به سکرول پیل کړي. د کروم بګ #175502 (په کروم v40 کې ټاکل شوی) او د ویب کیټ بګ #153852 وګورئ .
<input>
د iOS 9.3 په څیر، پداسې حال کې چې یو موډل خلاص وي، که چیرې د سکرول اشارې لومړنۍ لمس د متن یا a په حد کې وي <textarea>
، <body>
د موډل لاندې مینځپانګه به پخپله د موډل پرځای سکرول شي. د WebKit بګ #153856 وګورئ .
همچنان ، په یاد ولرئ چې که تاسو یو ثابت نوبار کاروئ یا په موډل کې دننه معلومات وکاروئ ، iOS یو رینډرینګ بګ لري چې د ثابت عناصرو موقعیت نه تازه کوي کله چې مجازی کیبورډ پیل شي. د دې لپاره یو څو کاري حلونه ستاسو د عناصرو بدلول position: absolute
یا په تمرکز کې د ټایمر غوښتنه کول شامل دي ترڅو په لاسي ډول د موقعیت سمولو هڅه وکړي. دا د بوټسټریپ لخوا نه اداره کیږي ، نو دا تاسو پورې اړه لري چې پریکړه وکړئ کوم حل ستاسو د غوښتنلیک لپاره غوره دی.
عنصر د .dropdown-backdrop
z-indexing پیچلتیا له امله په nav کې په iOS کې نه کارول کیږي. په دې توګه، په نیوبارز کې د ډراپ ډاون بندولو لپاره، تاسو باید په مستقیم ډول د ډراپون عنصر کلیک وکړئ (یا کوم بل عنصر چې په iOS کې د کلیک پیښه به سوځوي ).
د پاڼې زوم کول په ناببره توګه په ځینو برخو کې د رینډینګ آثار وړاندې کوي، دواړه په بوټسټریپ او پاتې ویب کې. د مسلې پورې اړه لري، موږ ممکن د دې د حل کولو توان ولرو (لومړی وپلټئ او بیا د اړتیا په صورت کې یوه مسله پرانیزئ). په هرصورت، موږ دا له پامه غورځوو ځکه چې دوی ډیری وختونه د هیک کاري حل پرته بل مستقیم حل نلري.
:hover
/ :focus
په موبایل کېکه څه هم په ډیری ټچ سکرینونو کې ریښتیني ځړول ممکن ندي ، ډیری ګرځنده براوزرونه د هوور کولو ملاتړ تقلید کوي او :hover
"چپچکی" کوي. په بل عبارت، :hover
سټایلونه د عنصر ټایپ کولو وروسته پلي کول پیل کوي او یوازې وروسته له هغه پلي کول ودروي کله چې کارونکي یو بل عنصر ټاپ کړي. دا کولی شي د بوټسټریپ :hover
ایالتونو لامل شي چې په ورته براوزرونو کې په غیر مطلوب ډول "بند" شي. ځینې ګرځنده براوزرونه هم جوړوي:focus
ورته چپکشي جوړوي. اوس مهال د دې مسلو لپاره کوم ساده حل شتون نلري پرته له دې چې دا ډول سټایلونه په بشپړ ډول لرې کړي.
حتی په ځینو عصري براوزرونو کې ، چاپ کول عجیب کیدی شي.
په ځانګړې توګه، د کروم v32 په څیر او د حاشیې ترتیباتو په پام کې نیولو پرته، کروم د ویب پاڼې د چاپ کولو په وخت کې د رسنیو پوښتنو حل کولو په وخت کې د فزیکي کاغذ اندازې په پرتله د پام وړ لنډ ویوپورټ چوکۍ کاروي. دا کیدی شي د بوټسټریپ اضافي کوچني گرډ په غیر متوقع ډول د چاپ کولو په وخت کې فعال شي. د ځینو جزیاتو لپاره مسله #12078 او د کروم بګ #273306 وګورئ. وړاندیز شوي حل لارې:
@screen-*
کړئ ترڅو ستاسو د چاپګر کاغذ د اضافي کوچني څخه لوی وګڼل شي.همچنان ، د سفاري v8.0 په څیر ، د ثابت چوکۍ .container
s کولی شي سفاري د دې لامل شي چې د چاپ کولو پرمهال غیر معمولي کوچني فونټ اندازه وکاروي. د نورو جزیاتو لپاره #14868 او د ویب کیټ بګ #138192 وګورئ . د دې لپاره یو احتمالي کار د لاندې CSS اضافه کول دي:
د بکس څخه بهر، Android 4.1 (او حتی ځینې نوي ریلیزونه په ښکاره ډول) د براوزر ایپ سره د انتخاب ډیفالټ ویب براوزر په توګه لیږل کیږي (لکه څنګه چې د کروم سره مخالف). له بده مرغه، د براوزر ایپ په عمومي توګه د CSS سره ډیری بګونه او متضادات لري.
په <select>
عناصرو کې ، د Android سټاک براوزر به د اړخ کنټرولونه ونه ښیې که چیرې شتون ولري border-radius
او / یا border
پلي شي. ( د جزیاتو لپاره دا StackOverflow پوښتنه وګورئ.) د سرغړونکي CSS لرې کولو لپاره د لاندې کوډ ټوټه وکاروئ او <select>
د Android سټاک براوزر کې د غیر سټایل شوي عنصر په توګه وړاندې کړئ. د کارونکي اجنټ سنیفنګ د کروم ، سفاري او موزیلا براوزرونو سره د مداخلې مخه نیسي.
غواړئ یو مثال وګورئ؟ دا JS بن ډیمو وګورئ.
زړو او بګی براوزرونو ته د غوره ممکنه تجربې چمتو کولو لپاره ، بوټسټراپ په څو ځایونو کې د CSS براوزر هیکونه کاروي ترڅو ځانګړي براوزر نسخو ته ځانګړي CSS په نښه کړي ترڅو پخپله براوزر کې د بګ شاوخوا کار وکړي. دا هیکونه په پوهیدو سره د CSS تصدیق کونکي شکایت کوي چې دوی غلط دي. په یو څو ځایونو کې، موږ د خونریزي څنډې CSS ځانګړتیاوې هم کاروو چې لا تر اوسه په بشپړ ډول معیاري شوي ندي، مګر دا په خالص ډول د پرمختللو ودې لپاره کارول کیږي.
دا د اعتبار وړ اخطارونه په عمل کې مهم ندي ځکه چې زموږ د CSS غیر هیک برخه په بشپړ ډول اعتبار کوي او هیکي برخې د غیر هیک شوي برخې په سم فعالیت کې مداخله نه کوي، له همدې امله موږ په قصدي توګه دا ځانګړي اخطارونه له پامه غورځوو.
زموږ د HTML سندونه هم په ورته ډول د فایرفوکس بګ لپاره زموږ د کار ځای شاملولو له امله ځینې کوچني او غیر ضروري HTML تایید اخطارونه لري .
پداسې حال کې چې موږ په رسمي ډول د دریمې ډلې پلگ ان یا اضافو ملاتړ نه کوو، موږ ستاسو په پروژو کې د احتمالي مسلو مخنیوي کې د مرستې لپاره ځینې ګټورې مشورې وړاندیز کوو.
د دریمې ډلې ځینې سافټویرونه، په شمول د ګوګل نقشې او د ګوګل ګمرک لټون انجنی، د بوټسټریپ سره * { box-sizing: border-box; }
د قاعدې له امله شخړه کوي، کوم چې دا padding
د یو عنصر په وروستي محاسبه شوي چوکۍ اغیزه نه کوي. د بکس ماډل او اندازه کولو په اړه نور معلومات په CSS Tricks کې زده کړئ .
په شرایطو پورې اړه لري، تاسو کولی شئ د اړتیا سره سم (اختیار 1) پورته کړئ یا د ټولو سیمو لپاره د بکس اندازه کول بیا تنظیم کړئ (اختیار 2).
بوټسټریپ د عام ویب معیارونو پیروي کوي او - د لږترلږه اضافي هڅو سره - د سایټونو رامینځته کولو لپاره کارول کیدی شي چې د AT کارولو لپاره د لاسرسي وړ وي .
که ستاسو نیویګیشن ډیری لینکونه ولري او په DOM کې د اصلي مینځپانګې څخه مخکې راځي ، Skip to main content
نو د نیویګیشن دمخه یو لینک اضافه کړئ (د ساده توضیح لپاره ، د نیویګیشن لینکونو پریښودو کې د A11Y پروژې مقاله وګورئ ). د .sr-only
ټولګي کارول به په ښکاره ډول د سکایپ لینک پټ کړي، او .sr-only-focusable
ټولګی به ډاډ ترلاسه کړي چې لینک یو ځل متمرکز شي (د لیدل شوي کیبورډ کاروونکو لپاره).
په کروم کې د اوږدې مودې نیمګړتیاو/بګونو له امله ( د کرومیم بګ ټریکر کې 262171 مسله وګورئ ) او انټرنیټ اکسپلورر (دا مقاله په پا pageه لینکونو کې وګورئ او د تمرکز ترتیب ) ، تاسو اړتیا لرئ ډاډ ترلاسه کړئ چې ستاسو د سکایپ لینک هدف لږ تر لږه د پروګرام له مخې د تمرکز وړ دی tabindex="-1"
.
برسېره پردې، تاسو کولی شئ په ښکاره توګه په هدف کې د لیدلو تمرکز نښه فشار کړئ (په ځانګړې توګه لکه څنګه چې کروم اوس مهال هم په عناصرو تمرکز کوي tabindex="-1"
کله چې دوی د موږک سره کلیک کوي) #content:focus { outline: none; }
.
په یاد ولرئ چې دا بګ به د پاڼې په نورو لینکونو باندې هم اغیزه وکړي چې ستاسو سایټ یې کارولی شي، د کیبورډ کاروونکو لپاره یې بې ګټې وړاندې کوي. تاسو ممکن د نورو ټولو نومول شوي لنگرونو / ټوټې پیژندونکو لپاره ورته سټاپ - ګپ فکس اضافه کولو په اړه فکر وکړئ چې د لینک اهدافو په توګه عمل کوي.
کله چې د nesting سرلیکونه ( <h1>
- <h6>
) وي، ستاسو د لومړني سند سرلیک باید یو وي <h1>
. ورپسې سرلیکونه باید منطقي ګټه پورته کړي <h2>
- <h6>
داسې چې د سکرین لوستونکي کولی شي ستاسو د پاڼو لپاره د مینځپانګو جدول جوړ کړي.
په HTML CodeSniffer او Penn State's AccessAbility کې نور معلومات زده کړئ .
اوس مهال، په بوټسټریپ کې د ډیفالټ رنګ ترکیبونه شتون لري (لکه د مختلف سټایل شوي بټن ټولګي، د کوډ روښانه کولو ځینې رنګونه چې د بنسټیز کوډ بلاکونو لپاره کارول کیږي ، د .bg-primary
اړونده شالید مرستندویه ټولګي، او د ډیفالټ لینک رنګ کله چې په سپینه پس منظر کې کارول کیږي) د ټیټ برعکس تناسب ولري ( د 4.5:1 وړاندیز شوي تناسب څخه ښکته ). دا کولی شي هغه کاروونکو ته ستونزې رامینځته کړي چې ټیټ لید لري یا څوک چې رنګ ړوند وي. دا ډیفالټ رنګونه ممکن د دوی برعکس او قانونيت زیاتولو لپاره تعدیل ته اړتیا ولري.
بوټسټریپ د MIT جواز لاندې خپور شوی او د 2016 ټویټر کاپي حق دی. په کوچنیو برخو کې جوش شوي، دا د لاندې شرایطو سره بیان کیدی شي.
د بوټسټراپ بشپړ جواز د نورو معلوماتو لپاره د پروژې ذخیره کې موقعیت لري .
د ټولنې غړو د بوټسټریپ اسناد په مختلفو ژبو ژباړلي دي. هیڅ یو په رسمي ډول نه ملاتړ کیږي او دوی ممکن تل تازه نه وي.
موږ د ژباړو په تنظیم یا کوربه توب کې مرسته نه کوو، موږ یوازې دوی سره اړیکه نیسو.
نوې یا غوره ژباړه پای ته ورسیده؟ زموږ په لیست کې د اضافه کولو لپاره د پل غوښتنه خلاص کړئ.