دەستی پێکرد
تێڕوانینێکی گشتی بۆ Bootstrap، چۆنیەتی دابەزاندن و بەکارهێنانی، قاڵب و نموونە بنەڕەتییەکان و زۆر شتی تر.
تێڕوانینێکی گشتی بۆ Bootstrap، چۆنیەتی دابەزاندن و بەکارهێنانی، قاڵب و نموونە بنەڕەتییەکان و زۆر شتی تر.
بووتستراپ (لە ئێستادا v3.3.7) چەند ڕێگەیەکی ئاسانی هەیە بۆ دەستپێکردنی خێرا، هەریەکەیان ئاستێکی جیاوازی لێهاتوویی و کەیسی بەکارهێنانی سەرنجڕاکێشە. بخوێنەوە بۆ ئەوەی بزانیت چی لەگەڵ پێداویستییە تایبەتەکانتدا دەگونجێت.
کۆکردنەوە و بچووککردنەوەی CSS و جاڤاسکڕێپت و فۆنتەکان. هیچ دۆکیومێنتێک یان پەڕگەیەکی سەرچاوەی ئەسڵی لەخۆناگرێت.
Source Less و جاڤاسکڕێپت و فایلەکانی فۆنت، لەگەڵ دۆکیومێنتەکانمان. پێویستی بە کۆمپایەری Less و هەندێک ڕێکخستن هەیە.
بووتستراپ لە Less ەوە بۆ Sass گۆڕدرا بۆ ئەوەی بە ئاسانی لە پرۆژەکانی Rails، Compass، یان Sass-only دا جێگیر بکرێت.
خەڵک لە jsDelivr بە میهرەبانیەوە پشتگیری CDN بۆ CSS و JavaScript ی Bootstrap دابین دەکەن. تەنها ئەم بەستەرانەی Bootstrap CDN بەکاربهێنە.
هەروەها دەتوانیت بە بەکارهێنانی Bower : Less و CSS و JavaScript و فۆنتەکانی Bootstrap دابمەزرێنیت و بەڕێوەی بەریت :
هەروەها دەتوانیت Bootstrap دابمەزرێنیت بە بەکارهێنانی npm :
require('bootstrap')
هەموو پێوەکراوەکانی jQuery ی Bootstrap لەسەر ئۆبجێکتی jQuery بار دەکات. مۆدیولەکە bootstrap
خۆی هیچ شتێک هەناردە ناکات. دەتوانیت بە دەستی پێوەکراوەکانی jQuery ی Bootstrap بە تاک بە تاک بار بکەیت بە بارکردنی /js/*.js
فایلەکان لە ژێر بەڕێوەبەرایەتی ئاستی سەرەوەی پاکێجەکەدا.
Bootstrap's package.json
هەندێک میتاداتای زیادەی تێدایە لە ژێر ئەم کلیلانەی خوارەوە:
less
- ڕێڕەوی فایلە سەرچاوەی سەرەکی Less ی Bootstrapstyle
- ڕێڕەوی CSS ی بچووک نەکراوی Bootstrap کە پێشوەختە بە بەکارهێنانی ڕێکخستنە پێشوەختەکان کۆکراوەتەوە (بێ خۆکارکردن)هەروەها دەتوانیت بە بەکارهێنانی Composer فۆنتەکانی Less و CSS و JavaScript و فۆنتەکانی Bootstrap دابمەزرێنیت و بەڕێوەی بەریت :
بووتستراپ Autoprefixer بەکاردەهێنێت بۆ مامەڵەکردن لەگەڵ پێشگرەکانی فرۆشیاری CSS . ئەگەر تۆ Bootstrap لە سەرچاوەی Less/Sass یەوە کۆپی دەکەیت و Gruntfile ی ئێمە بەکارناهێنیت، پێویستە خۆت Autoprefixer لە پرۆسەی دروستکردنەکەتدا یەکبخەیت. ئەگەر تۆ Bootstrap پێش کۆمپایڵکراو بەکاردەهێنیت یان Gruntfile ی ئێمە بەکاردەهێنیت، پێویست ناکات نیگەران بیت لەم بارەیەوە چونکە Autoprefixer پێشتر لە Gruntfile ی ئێمەدا یەکخراوە.
بووتستراپ بە دوو شێوە دەتوانرێت دابەزێنرێت، لەناو ئەودا ئەم بەڕێوەبەرایەتی و فایلانەی خوارەوە دەبینیتەوە، بە شێوەیەکی لۆژیکی سەرچاوە باوەکان گرووپ دەکەن و هەردوو جۆری کۆکراوە و بچووککراو دابین دەکەن.
تکایە ئاگاداربە کە هەموو پێوەکراوەکانی جاڤاسکڕێپت پێویستیان بە jQuery هەیە کە لە قاڵبی دەستپێکەردا نیشان دراوە . راوێژ بە ئێمە بکەbower.json
بۆ ئەوەی بزانیت کام وەشانی jQuery پشتگیری دەکرێت.
کاتێک دابەزێنیت، فۆڵدەری پاڵپێوەنراوەکە بکەرەوە بۆ بینینی پێکهاتەی (کۆمپایلکراو) Bootstrap. شتێکی لەم شێوەیە دەبینیت:
ئەمە بنەڕەتیترین شێوەی Bootstrap ە: فایلە پێشوەختە کۆکراوەکان بۆ بەکارهێنانی خێرا لە نزیکەی هەر پرۆژەیەکی وێبدا. ئێمە CSS و JS ( bootstrap.*
)ی کۆکراوە دابین دەکەین، هەروەها CSS و JS ( )ی کۆکراوە و بچووککراو bootstrap.min.*
. نەخشەی سەرچاوەی CSS ( bootstrap.*.map
) بەردەستە بۆ بەکارهێنان لەگەڵ ئامرازەکانی گەشەپێدەری هەندێک وێبگەڕ. فۆنتەکانی Glyphicons لەخۆدەگرێت، هەروەها تەوەرەی Bootstrap ی ئیختیاری.
دابەزاندنی کۆدی سەرچاوەی Bootstrap سەروەت و سامانی CSS و جاڤاسکڕێپت و فۆنتەکانی پێشوەختە کۆکراوە لەخۆدەگرێت، لەگەڵ سەرچاوەی Less، JavaScript و بەڵگەنامەکان. بە تایبەتیتر ئەمانەی خوارەوە و زۆر شتی تر لەخۆدەگرێت:
, less/
, js/
و fonts/
کۆدی سەرچاوەی فۆنتەکانی CSS و JS و ئایکۆنەکانمانن (بە رێککەوت). فۆڵدەرەکە هەموو ئەو dist/
شتانەی تێدایە کە لە بەشی دابەزاندنی پێشوەختەی سەرەوەدا هاتووە. فۆڵدەرەکە کۆدی docs/
سەرچاوەی بۆ بەڵگەنامەکانمان، و examples/
بەکارهێنانی Bootstrap لەخۆدەگرێت. لەوەش زیاتر، هەر فایلێکی تری لەگەڵدا بێت پشتگیری بۆ پاکێجەکان، زانیاری مۆڵەت و پەرەپێدان دابین دەکات.
Bootstrap بۆ سیستەمی دروستکردنی Grunt بەکاردەهێنێت، لەگەڵ شێوازی گونجاو بۆ کارکردن لەگەڵ چوارچێوەکە. ئەوە چۆن کۆدەکانمان کۆ دەکەینەوە و تاقیکردنەوەکان ئەنجام دەدەین و زۆر شتی تر.
بۆ دامەزراندنی Grunt سەرەتا دەبێت node.js (کە npm لەخۆدەگرێت) دابەزێنیت و دایبمەزرێنیت. npm کورتکراوەی مۆدیولەکانی node packaged و ڕێگایەکە بۆ بەڕێوەبردنی وابەستەییەکانی گەشەپێدان لە ڕێگەی node.js.
پاشان، لە هێڵی فەرمانەوە:grunt-cli
جیهانی بە npm install -g grunt-cli
./bootstrap/
ناوەڕۆکی ڕەگ، پاشان جێبەجێ بکە npm install
. npm سەیری package.json
پەڕگەکە دەکات و بە شێوەیەکی ئۆتۆماتیکی وابەستە ناوخۆییە پێویستەکان دادەمەزرێنێت کە لەوێدا ئاماژەیان پێکراوە.کاتێک تەواو بوویت، دەتوانیت فەرمانە جیاوازەکانی Grunt جێبەجێ بکەیت کە لە هێڵی فەرمانەوە دابینکراون.
grunt dist
(تەنها CSS و JavaScript کۆبکەرەوە)/dist/
بەڕێوەبەرایەتییەکە بە فایلە کۆکراوەکان و بچووککراوەکانی CSS و JavaScript دووبارە دروست دەکاتەوە. وەک بەکارهێنەری Bootstrap بە شێوەیەکی ئاسایی ئەمە ئەو فرمانەیە کە تۆ دەتەوێت.
grunt watch
(سەیرکردن)سەیری فایلە سەرچاوەییەکانی Less دەکات و هەرکاتێک گۆڕانکارییەک هەڵبگریت بە شێوەیەکی ئۆتۆماتیکی کۆیان دەکاتەوە بۆ CSS.
grunt test
(تاقیکردنەوەکان ئەنجام بدە)JSHint جێبەجێ دەکات و تاقیکردنەوەکانی QUnit بەبێ سەر لە PhantomJS جێبەجێ دەکات .
grunt docs
(دروستکردن و تاقیکردنەوەی سەروەت و سامانی docs)CSS، جاڤاسکڕێپت و سەروەت و سامانی تر دروست دەکات و تاقی دەکاتەوە کە بەکاردەهێنرێت لەکاتی بەڕێوەبردنی بەڵگەنامەکان بە شێوەیەکی ناوخۆیی لە ڕێگەی bundle exec jekyll serve
.
grunt
(بە تەواوی هەموو شتێک دروست بکە و تاقیکردنەوەکان ئەنجام بدە)CSS و JavaScript کۆدەکاتەوە و بچووکی دەکاتەوە، ماڵپەڕی بەڵگەنامەکان دروست دەکات، HTML5 validator لە بەرامبەر docs بەڕێوەدەبات، سەروەت و سامانی Customizer دووبارە دروست دەکاتەوە و زۆر شتی تر. پێویستی بە Jekyll هەیە . بەگشتی تەنها پێویستە ئەگەر لەسەر خودی Bootstrap هاک بکەیت.
ئەگەر تووشی کێشە بوویت لە دامەزراندنی وابەستەییەکان یان جێبەجێکردنی فرمانەکانی Grunt، سەرەتا ئەو /node_modules/
بەڕێوەبەرایەتییە بسڕەوە کە لەلایەن npm دروستکراوە. پاشان، دووبارە جێبەجێکردنەوە npm install
.
بەم قاڵبە بنەڕەتییەی HTML دەست پێ بکە، یان ئەم نموونانە دەستکاری بکە . هیوادارین قاڵب و نموونەکانمان بە خواستی خۆت دروست بکەیت، بە گونجاندنی لەگەڵ پێداویستییەکانتان.
HTML ی خوارەوە کۆپی بکە بۆ دەستپێکردنی کارکردن بە کەمترین بەڵگەنامەی Bootstrap.
لەسەر ئەو قاڵبە بنەڕەتییەی سەرەوە دروست بکە بە پێکهاتە زۆرەکانی Bootstrap. هانتان دەدەین کە Bootstrap بە خواستی خۆت و گونجاندنی لەگەڵ پێداویستییەکانی تاکەکەسی پڕۆژەکەتان بگونجێت.
کۆدی سەرچاوە بۆ هەموو نموونەیەکی خوارەوە بەدەستبهێنە بە دابەزاندنی کۆگای Bootstrap . دەتوانرێت نموونە لە docs/examples/
ناوەڕۆکەکەدا بدۆزرێتەوە.
دروستکردنی ناوبارێکی تایبەت بە بەستەری ڕەوا. سەرەکان بەرز دەکەنەوە! زۆر دۆستانەی سەفاری نییە.
Bootlint ئامرازی فەرمی Bootstrap HTML لینتەرە . بە شێوەیەکی ئۆتۆماتیکی چەند هەڵەیەکی HTML باو لە وێبپەڕەکاندا دەپشکنێت کە Bootstrap بەکاردەهێنن بە شێوەیەکی تا ڕادەیەک "ڤانێلا". پێکهاتەکان/ویجتەکانی ڤانێلا بووتستراپ پێویستیان بە بەشەکانی DOM هەیە کە لەگەڵ هەندێک پێکهاتەدا بگونجێت. بووتلینت پشکنین دەکات کە نموونەکانی پێکهاتەکانی بووتستراپ HTML یان بە دروستی پێکهاتووە. بیر لەوە بکەرەوە کە Bootlint زیاد بکەیت بۆ زنجیرە ئامرازەکانی پەرەپێدانی وێبی Bootstrap ـەکەت بۆ ئەوەی هیچ کام لە هەڵە باوەکان گەشەپێدانی پڕۆژەکەت خاو نەکەنەوە.
ئاگاداری پەرەپێدانی بووتستراپ بن و بەم سەرچاوە یارمەتیدەرانە دەستت بگاتە کۆمەڵگا.
irc.freenode.net
سێرڤەرەکەدا، لە کەناڵی ##bootstrap .twitter-bootstrap-3
.bootstrap
لەسەر ئەو پاکێجانە بەکاربهێنن کە دەستکاری یان زیاد دەکەن بۆ کارایی Bootstrap لەکاتی دابەشکردن لە ڕێگەی npm یان میکانیزمەکانی گەیاندنی هاوشێوە بۆ زۆرترین دۆزینەوە.هەروەها دەتوانن لە تویتەر فۆڵۆوی @getbootstrap بکەن بۆ زانینی نوێترین قسە و باس و ڤیدیۆ کلیپە سەرسوڕهێنەرەکان.
Bootstrap بە شێوەیەکی ئۆتۆماتیکی لاپەڕەکانت بۆ قەبارەی شاشە جیاوازەکان دەگونجێنێت. لێرەدا چۆنێتی لەکارخستنی ئەم تایبەتمەندییە دەخەینەڕوو بۆ ئەوەی لاپەڕەکەت وەک ئەم نموونە وەڵامدەرەوەیە کار بکات .
<meta>
باسکراوەwidth
لەسەر لەسەر .container
بۆ هەر قاتێکی تۆڕ بە یەک پانایی بکە، بۆ نموونە width: 970px !important;
دڵنیابە کە ئەمە دوای پێشوەختەی Bootstrap CSS دێت. دەتوانیت بە ئیختیاری خۆت لە !important
پرسیارەکانی میدیا یان هەندێک هەڵبژێرەر-fu بەدوور بگرێت..col-xs-*
پۆلەکان بەکاربهێنە جگە لە، یان لە جیاتی، پۆلەکانی مامناوەند/گەورە. نیگەران مەبە، تۆڕی ئامێرە بچووکە زیادەکان بە هەموو ڕوونییەکان دەگۆڕێت.هێشتا پێویستت بە Respond.js دەبێت بۆ IE8 (بەو پێیەی پرسیارە میدیاییەکانمان هێشتا هەن و پێویستە پرۆسێس بکرێن). ئەمەش لایەنەکانی "ماڵپەڕی مۆبایل"ی Bootstrap لەکاردەخات.
ئێمە ئەم هەنگاوانەمان بۆ نموونەیەک بەکارهێناوە. کۆدی سەرچاوەییەکەی بخوێنەرەوە بۆ بینینی گۆڕانکارییە تایبەتەکانی جێبەجێکراو.
بەدوای کۆچکردندا دەگەڕێیت لە وەشانی کۆنتری Bootstrap بۆ v3.x؟ سەیری ڕێنمایی کۆچکردنمان بکە .
بووتستراپ بۆ ئەوە دروستکراوە کە لە نوێترین وێبگەڕەکانی سەر مێز و مۆبایلدا باشترین کار بکات، واتە وێبگەڕە کۆنەکان ڕەنگە بە شێوازێکی جیاواز پیشان بدەن، هەرچەندە بە تەواوی کارا بن، ڕەندەری هەندێک پێکهاتە.
بە تایبەتی پشتگیری لە نوێترین وەشانی ئەم وێبگەڕ و پلاتفۆرمانە دەکەین.
ئەو وێبگەڕە جێگرەوەیانەی کە نوێترین وەشانی WebKit، Blink، یان Gecko بەکاردەهێنن، جا ڕاستەوخۆ بێت یان لە ڕێگەی API ی بینینی وێبی پلاتفۆرمەکەوە، بە ڕوونی پشتگیری ناکرێت. بەڵام پێویستە Bootstrap (لە زۆربەی حاڵەتەکاندا) لەم وێبگەڕانەشدا بە دروستی پیشان بدات و کار بکات. زانیاری پشتگیری تایبەتتر لە خوارەوە هاتووە.
بەگشتی، Bootstrap پشتگیری لە نوێترین وەشانی وێبگەڕە پێشوەختەکانی هەر پلاتفۆرمی سەرەکی دەکات. تێبینی بکە کە وێبگەڕەکانی پرۆکسی (وەک Opera Mini، دۆخی Turbo ی Opera Mobile، UC Browser Mini، Amazon Silk) پشتگیری ناکرێت.
کرۆم | فایەرفۆکس | سەفاری | |
---|---|---|---|
ئەندرۆید | پشتگیری دەکرێت | پشتگیری دەکرێت | N/A |
ئای ئۆ ئێس | پشتگیری دەکرێت | پشتگیری دەکرێت | پشتگیری دەکرێت |
بە هەمان شێوە نوێترین وەشانی زۆربەی وێبگەڕەکانی سەر مێز پشتگیری دەکرێن.
کرۆم | فایەرفۆکس | ئینتەرنێت ئێکسپلۆرەر | ئۆپێرا | سەفاری | |
---|---|---|---|---|---|
ماک | پشتگیری دەکرێت | پشتگیری دەکرێت | N/A | پشتگیری دەکرێت | پشتگیری دەکرێت |
ویندۆز | پشتگیری دەکرێت | پشتگیری دەکرێت | پشتگیری دەکرێت | پشتگیری دەکرێت | پاڵپشتیی نەکراوە |
لە ویندۆزدا پشتگیری لە ئینتەرنێت ئێکسپلۆرەر 8-11 دەکەین .
بۆ فایەرفۆکس، جگە لە نوێترین وەشانی ئاسایی جێگیر، ئێمە پشتگیری لە نوێترین وەشانی وەشانی پشتگیری درێژکراوە (ESR) ی فایەرفۆکس دەکەین.
بە شێوەیەکی نافەرمی، Bootstrap دەبێت بە باشی دەربکەوێت و ڕەفتار بکات لە کرۆم و کرۆم بۆ لینوکس، فایەرفۆکس بۆ لینوکس و ئینتەرنێت ئێکسپلۆرەر ٧، هەروەها مایکرۆسۆفت ئێج، هەرچەندە بە فەرمی پشتگیری ناکرێت.
بۆ لیستی هەندێک لەو هەڵانەی وێبگەڕ کە Bootstrap دەبێت لەگەڵیاندا ڕووبەڕووی ببێتەوە، سەیری دیواری هەڵەکانی وێبگەڕەکەمان بکە .
هەروەها ئینتەرنێت ئێکسپلۆرەر ٨ و ٩ پشتگیری دەکرێن، بەڵام تکایە ئاگاداربن کە هەندێک لە تایبەتمەندییەکانی CSS3 و توخمەکانی HTML5 بە تەواوی لەلایەن ئەم وێبگەڕانەوە پشتگیری ناکرێت. جگە لەوەش، ئینتەرنێت ئێکسپلۆرەر ٨ پێویستی بە بەکارهێنانی Respond.js هەیە بۆ چالاککردنی پشتگیری پرسیاری میدیا.
تایبەتمەندی | ئینتەرنێت ئێکسپلۆرەر ٨ | ئینتەرنێت ئێکسپلۆرەر ٩ |
---|---|---|
border-radius |
پاڵپشتیی نەکراوە | پشتگیری دەکرێت |
box-shadow |
پاڵپشتیی نەکراوە | پشتگیری دەکرێت |
transform |
پاڵپشتیی نەکراوە | پشتگیری دەکرێت، بە -ms پێشگر |
transition |
پاڵپشتیی نەکراوە | |
placeholder |
پاڵپشتیی نەکراوە |
سەردانی Can I use... بکە بۆ زانیاری زیاتر لەسەر پشتگیری وێبگەڕی تایبەتمەندییەکانی CSS3 و HTML5.
ئاگاداری ئەم ئاگادارکردنەوانەی خوارەوە بە لەکاتی بەکارهێنانی Respond.js لە ژینگەکانی پەرەپێدان و بەرهەمهێنانت بۆ ئینتەرنێت ئێکسپلۆرەر ٨.
بەکارهێنانی Respond.js لەگەڵ CSS کە لەسەر دۆمەینێکی جیاواز (لاوەکی) میوانداری کراوە (بۆ نموونە، لەسەر CDN) پێویستی بە هەندێک ڕێکخستنی زیادە هەیە. بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی Respond.js بکە.
file://
بەهۆی یاساکانی ئاسایشی وێبگەڕەوە، Respond.js لەگەڵ ئەو لاپەڕانەدا کارناکات کە لە ڕێگەی file://
پرۆتۆکۆڵەکەوە سەیر دەکرێن (وەک لە کاتی کردنەوەی فایلێکی HTML ناوخۆیی). بۆ تاقیکردنەوەی تایبەتمەندییە وەڵامدەرەوەکان لە IE8، سەیری لاپەڕەکانت بکە لە ڕێگەی HTTP(S). بۆ زانیاری زیاتر سەیری دۆکیومێنتەکانی Respond.js بکە.
@import
Respond.js لەگەڵ CSS کار ناکات کە لە ڕێگەی @import
. بە تایبەتی، هەندێک لە ڕێکخستنەکانی Drupal ناسراون بە بەکارهێنانی @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 باربکە) ئەوا لاپەڕەکە پێش بارکردنی فۆنتەکە ڕەندەر دەکرێت. ماوسکردن لەسەر لاپەڕەکە (جەستە) هەندێک لە ئایکۆنەکان پیشان دەدات و ماوسکردن بەسەر ئایکۆنەکانی ماوەتەوە ئەوانیش پیشان دەدات. بۆ زانیاری زیاتر سەیری ژمارە #13863 بکە.
لە دۆخە کۆنەکانی گونجاوی ئینتەرنێت ئێکسپلۆرەردا پشتگیری لە بووتستراپ ناکرێت. بۆ ئەوەی دڵنیا بیت کە نوێترین دۆخی ڕەندەرکردن بۆ IE بەکاردەهێنیت، بیر لەوە بکەرەوە کە <meta>
تاگی گونجاو لە لاپەڕەکانتدا دابنێیت:
دۆخی بەڵگەنامەکە پشتڕاست بکەرەوە بە کردنەوەی ئامرازەکانی هەڵەکردن: F12"دۆخی بەڵگەنامە" داگرە و پشکنین بکە.
ئەم تاگە لە هەموو بەڵگەنامە و نموونەکانی Bootstrap دا هاتووە بۆ دڵنیابوون لە باشترین ڕەندەرکردن کە دەتوانرێت لە هەر وەشانی پشتگیریکراوی ئینتەرنێت ئێکسپلۆرەردا.
بۆ زانیاری زیاتر سەیری ئەم پرسیارەی StackOverflow بکە.
ئینتەرنێت ئێکسپلۆرەر ١٠ پانایی ئامێر لە پانایی دەرگای بینین جیا ناکاتەوە، و بەم شێوەیە پرسیارەکانی میدیا بە باشی لە CSS ی بووتستراپدا جێبەجێ ناکات. بە شێوەیەکی ئاسایی تەنها پارچەیەکی خێرا لە CSS زیاد دەکەیت بۆ چارەسەرکردنی ئەمە:
بەڵام ئەمە بۆ ئەو ئامێرانە کارناکات کە وەشانی ویندۆز فۆن ٨ کۆنتر لە نوێکردنەوەی ٣ (بە ناوی GDR3) بەکاردەهێنن ، چونکە دەبێتە هۆی ئەوەی ئەم جۆرە ئامێرانە دیمەنێکی زیاتری سەر مێز پیشان بدەن لەبری دیمەنێکی تەسکی "فۆن". بۆ چارەسەرکردنی ئەمە، پێویستە ئەم CSS و جاڤاسکڕێپانەی خوارەوە لەخۆبگریت بۆ چارەسەرکردنی هەڵەکە .
بۆ زانیاری زیاتر و ڕێنماییەکانی بەکارهێنان، ویندۆز فۆن ٨ و Device-Width بخوێنەرەوە .
وەکو هێدس ئەپ، ئێمە ئەمە لە هەموو بەڵگەنامە و نموونەکانی Bootstrap وەک نمایشێکدا دەخەینە ناوەوە.
بزوێنەری ڕەندەری وەشانی سەفاری پێش v7.1 بۆ OS X و سەفاری بۆ iOS v8.0 هەندێک کێشەی هەبوو لە ژمارەی شوێنی دەهەمی کە لە .col-*-1
پۆلەکانی تۆڕەکەماندا بەکاردەهێنران. کەواتە ئەگەر 12 ستوونی تۆڕی تاکەکەسیت هەبووایە، تێبینی ئەوە دەکەیت کە بە بەراورد بە ڕیزەکانی تری ستوونەکان کورت هاتنە پێشەوە. جگە لە بەرزکردنەوەی سەفاری/ئای ئۆ ئێس، هەندێک بژاردەت هەیە بۆ چارەسەرکردن:
.pull-right
بۆ دوا ستوونی تۆڕەکەت بۆ بەدەستهێنانی ڕێکخستنی ڕەق-ڕاستپشتگیری بۆ overflow: hidden
لەسەر <body>
توخمەکە لە ئای ئۆ ئێس و ئەندرۆیددا تەواو سنووردارە. بۆ ئەو مەبەستە کاتێک بە سەرەوە یان خوارەوەی مۆداڵێک لە هەریەکێک لە وێبگەڕەکانی ئەو ئامێرانەدا تێدەپەڕیت، <body>
ناوەڕۆکەکە دەست دەکات بە ڕۆشتن. سەیری هەڵەی Chrome #175502 بکە (لە Chrome v40 چارەسەر کراوە) و هەڵەی WebKit #153852 بکە .
لە iOS 9.3 ەوە، لە کاتێکدا مۆداڵێک کراوە دەبێت، ئەگەر دەست لێدانی سەرەتایی ئاماژەیەکی سکڕۆڵ لە سنووری دەقێک <input>
یان a بێت <textarea>
، <body>
ناوەڕۆکی ژێر مۆداڵەکە لەبری خودی مۆداڵەکە سکڕۆڵ دەکرێت. سەیری هەڵەی وێبکیت #153856 بکە .
هەروەها تێبینی ئەوە بکە کە ئەگەر ناوبارێکی جێگیر بەکاردەهێنیت یان زانیارییەکانی ناو مۆداڵێک بەکاردەهێنیت، iOS هەڵەیەکی ڕەندەرکردنی هەیە کە شوێنی توخمە جێگیرەکان نوێ ناکاتەوە کاتێک کیبۆردێکی مەجازی دەستپێدەکات. چەند چارەسەرێک بۆ ئەمە بریتین لە گۆڕینی توخمەکانت بۆ position: absolute
یان بانگهێشتکردنی تایمەرێک لەسەر فۆکەس بۆ هەوڵدان بۆ ڕاستکردنەوەی شوێنەکە بە دەست. ئەمە لەلایەن Bootstrap ەوە مامەڵەی لەگەڵ ناکرێت، بۆیە ئەوە ئێوەن کە بڕیار بدەن کام چارەسەر باشترینە بۆ بەرنامەکەتان.
توخمەکە لە .dropdown-backdrop
iOS لە nav بەکارناهێنرێت بەهۆی ئاڵۆزی z-indexing. بەم شێوەیە، بۆ داخستنی درۆپداونەکان لە navbars، پێویستە ڕاستەوخۆ کلیک لەسەر توخمە درۆپداونەکە بکەیت (یان هەر توخمێکی تر کە ڕووداوێکی کلیککردن لە iOSدا تەقێنێت ).
زوومکردنی لاپەڕە بە ناچاری شوێنەوارەکانی ڕەندەرکردن لە هەندێک پێکهاتەدا دەخاتە ڕوو، چ لە Bootstrap و چ لە باقی وێبەکەدا. بەپێی کێشەکە، ڕەنگە بتوانین چارەسەری بکەین (سەرەتا بگەڕێین و دواتر ئەگەر پێویست بوو کێشەیەک بکەینەوە). بەڵام ئێمە مەیلی ئەوەمان هەیە ئەمانە پشتگوێ بخەین چونکە زۆرجار هیچ چارەسەرێکی ڕاستەوخۆیان نییە جگە لە چارەسەرە هاکیەکان.
:hover
/ :focus
لەسەر مۆبایلهەرچەندە هێڵکاری ڕاستەقینە لە زۆربەی شاشەکانی تاچدا ناتوانرێت، بەڵام زۆربەی وێبگەڕەکانی مۆبایل پشتگیری هێڵکاری دەکەن و :hover
"چەسپاو" دەکەن. بە واتایەکی تر، :hover
ستایلەکان دوای لێدانی توخمێک دەست دەکەن بە جێبەجێکردن و تەنها دوای ئەوەی بەکارهێنەر لێدان لە هەندێک توخمێکی تر دەکات، جێبەجێکردن ڕادەگرن. ئەمەش دەتوانێت ببێتە هۆی ئەوەی کە دۆخەکانی Bootstrap :hover
بە شێوەیەکی نەخوازراو "گیر" بن لەسەر ئەم جۆرە وێبگەڕانە. هەروەها هەندێک لە وێبگەڕەکانی مۆبایل بە :focus
هەمان شێوە چەسپاو دروست دەکەن. لە ئێستادا هیچ چارەسەرێکی سادە بۆ ئەم کێشانە نییە جگە لە لابردنی ئەم جۆرە ستایلانە بە تەواوی.
تەنانەت لە هەندێک لە وێبگەڕی مۆدێرنیشدا، چاپکردن دەتوانێت شتێکی نامۆ بێت.
بە تایبەتی، لە کرۆم v32 و بەبێ گوێدانە ڕێکخستنەکانی پەراوێز، کرۆم پانایی دەرچەی بینین بەکاردەهێنێت کە بە شێوەیەکی بەرچاو تەسکترە لە قەبارەی کاغەزی فیزیکی لە کاتی چارەسەرکردنی پرسیارەکانی میدیا لەکاتی چاپکردنی وێبپەڕێکدا. ئەمەش دەتوانێت ببێتە هۆی ئەوەی تۆڕی بچووکی زیادەی Bootstrap لە کاتی چاپکردندا بە شێوەیەکی چاوەڕواننەکراو چالاک بێت. بۆ هەندێک وردەکاری سەیری ژمارە #12078 و هەڵەی کرۆم #273306 بکە. چارەسەرە پێشنیار کراوەکان:
@screen-*
گۆڕاوەکانی Less خۆکارانە بکە بەجۆرێک کە کاغەزی چاپکەرەکەت بە گەورەتر لە بچووکی زیادە هەژمار بکرێت.هەروەها، لە سەفاری v8.0ەوە، .container
s ی پانایی جێگیر دەتوانێت ببێتە هۆی ئەوەی سەفاری قەبارەیەکی فۆنتێکی بچووکی نائاسایی بەکاربهێنێت لە کاتی چاپکردندا. بۆ زانیاری زیاتر سەیری #14868 و هەڵەی WebKit #138192 بکە. یەکێک لە چارەسەرە ئەگەرییەکان بۆ ئەمە زیادکردنی ئەم CSS یەی خوارەوەیە:
لە دەرەوەی سندوقەکە، ئەندرۆید ٤.١ (و تەنانەت هەندێک وەشانی نوێتر بە ڕواڵەت) لەگەڵ ئەپی Browser وەک وێبگەڕی پێشوەختەی هەڵبژاردن دەنێردرێت (بە پێچەوانەی Chrome). بەداخەوە ئەپی Browser هەڵەیەکی زۆری هەیە و ناتەبایی لەگەڵ CSS بەگشتی هەیە.
لەسەر <select>
توخمەکان، وێبگەڕی ستۆکی ئەندرۆید کۆنتڕۆڵە لایەنەکان پیشان نادات ئەگەر هەبێت border-radius
و/یان border
جێبەجێ بکرێت. (بۆ زانیاری زیاتر سەیری ئەم پرسیارەی StackOverflow بکە.) پارچە کۆدی خوارەوە بەکاربهێنە بۆ لابردنی CSS ی توڕەکەر و ڕەندەری <select>
وەک توخمێکی بێ ستایل لەسەر وێبگەڕی ستۆکی ئەندرۆید. بۆنکردنی بریکاری بەکارهێنەر ڕێگری دەکات لە دەستێوەردان لە وێبگەڕەکانی کرۆم و سەفاری و مۆزیلا.
دەتەوێت نموونەیەک ببینیت؟ سەیری ئەم دیمۆیەی JS Bin بکەن.
بۆ ئەوەی باشترین ئەزموون بۆ وێبگەڕە کۆن و هەڵەکان دابین بکات، Bootstrap هاکەکانی وێبگەڕی CSS لە چەند شوێنێک بەکاردەهێنێت بۆ ئامانجکردنی CSS تایبەت بۆ هەندێک وەشانی وێبگەڕ بە مەبەستی کارکردن لە دەوری هەڵە لە خودی وێبگەڕەکاندا. ئەم هاکانە بە شێوەیەکی تێگەیشتوو دەبنە هۆی ئەوەی کە چەسپێنەرانی CSS گلەیی بکەن کە نادروستن. لە یەک دوو شوێن، ئێمە تایبەتمەندی CSSی لێواری خوێناویش بەکاردەهێنین کە هێشتا بە تەواوی ستاندارد نەکراون، بەڵام ئەمانە تەنها بۆ بەرزکردنەوەی پێشکەوتوو بەکاردەهێنرێن.
ئەم هۆشدارانە ڕەچاوکردنانە لە پراکتیکدا گرنگ نین لەبەرئەوەی بەشی ناهاکی CSS ی ئێمە بە تەواوی ڕەچاو دەکات و بەشە هاکییەکان دەستوەردان لە کارکردنی دروستی بەشی ناهاکی ناکەن، هەربۆیە بۆچی ئێمە بە ئەنقەست ئەم هۆشدارییە تایبەتانە پشتگوێ دەخەین.
بە هەمان شێوە دۆکیومێنتەکانی HTML ی ئێمە هەندێک ئاگادارکردنەوەی چەسپاندنی HTML ی بێ بایەخ و بێ ئەنجامیان هەیە بەهۆی خستنەڕووی چارەسەرێکمان بۆ هەڵەیەکی دیاریکراوی فایەرفۆکس .
لە کاتێکدا ئێمە بە فەرمی پشتگیری لە هیچ پێوەکراوێک یان زیادکراوێکی لایەنی سێیەم ناکەین، ئێمە هەندێک ئامۆژگاری بەسوود پێشکەش دەکەین بۆ یارمەتیدان لە دوورکەوتنەوە لە کێشە ئەگەرییەکان لە پڕۆژەکانتدا.
هەندێک لە نەرمەکاڵاکانی لایەنی سێیەم، لەوانە نەخشەکانی گووگڵ و بزوێنەری گەڕانی تایبەت بە گووگڵ، لەگەڵ Bootstrap ناکۆکن بەهۆی * { box-sizing: border-box; }
, یاسایەک کە وا padding
دەکات کاریگەری لەسەر پانایی کۆتایی حیسابکراوی توخمێک نییە. زیاتر بزانە دەربارەی مۆدێلی بۆکس و قەبارەدانان لە CSS Tricks .
بەپێی کۆنتێکستەکە، دەتوانیت بەپێی پێویست سەرپێچی بکەیت (بژاردەی یەکەم) یان قەبارەی سندوقەکە بۆ تەواوی ناوچەکان ڕێست بکەیتەوە (بژاردەی ٢).
بووتستراپ ستانداردە باوەکانی وێب پەیڕەو دەکات و-بە کەمترین هەوڵی زیادە- دەتوانرێت بەکاربهێنرێت بۆ دروستکردنی سایتەکان کە دەستیان پێ بگات بۆ ئەوانەی AT بەکاردەهێنن .
ئەگەر گەشتکردنەکەت چەندین بەستەر لەخۆدەگرێت و پێش ناوەڕۆکی سەرەکی لە DOM دێت، Skip to main content
بەستەرێک پێش گەشتکردنەکە زیاد بکە (بۆ ڕوونکردنەوەیەکی سادە، سەیری ئەم بابەتە بکە لەسەر پڕۆژەی A11Y سەبارەت بە بەستەرەکانی گەشتکردن بەجێبهێڵە ). بەکارهێنانی .sr-only
پۆلەکە بە شێوەیەکی بینراو بەستەری skip دەشارێتەوە، و .sr-only-focusable
پۆلەکە دڵنیا دەبێتەوە لەوەی کە بەستەرەکە دەبینرێت کاتێک فۆکەس دەکرێت (بۆ بەکارهێنەرانی کیبۆرد بینراو).
بەهۆی کەموکوڕی/هەڵە درێژخایەنەکان لە کرۆم (بڕوانە ژمارەی 262171 لە شوێنپێهەڵگری هەڵەی کرۆم ) و ئینتەرنێت ئێکسپلۆرەر (بڕوانە ئەم بابەتە لەسەر بەستەرەکانی ناو لاپەڕە و ڕێکخستنی فۆکەس )، پێویستە دڵنیا بیت لەوەی کە ئامانجی بەستەری پەڕینەوەت لانیکەم لە ڕووی بەرنامەییەوە دەتوانرێت فۆکەس بکرێت بە زیادکردنی tabindex="-1"
.
سەرەڕای ئەوە، لەوانەیە بتەوێت بە ڕوونی ئاماژەیەکی فۆکەسی بینراو لەسەر ئامانجەکە سەرکوت بکەیت (بەتایبەت کە کرۆم لە ئێستادا فۆکەس لەسەر توخمەکان دادەنێت لەگەڵ tabindex="-1"
کاتێک بە ماوس کلیکیان لەسەر دەکرێت) بە #content:focus { outline: none; }
.
تێبینی بکە کە ئەم هەڵەیە کاریگەری لەسەر هەر بەستەرێکی تری ناو لاپەڕەش دەبێت کە ماڵپەڕەکەت بەکاری بهێنێت، ئەمەش بۆ بەکارهێنەرانی کیبۆرد بێسوود دەکات. لەوانەیە بیر لە زیادکردنی چاکسازییەکی هاوشێوەی بۆشایی وەستان بکەیتەوە بۆ هەموو ئەنکرەکانی تری ناودار / ناسێنەری پارچە کە وەک ئامانجی بەستەر کاردەکەن.
لە کاتی هێلانەکردنی سەردێڕەکان ( <h1>
- <h6>
)، سەردێڕی بەڵگەنامەی سەرەکیت دەبێت <h1>
. سەردێڕەکانی دواتر دەبێ بە شێوەیەکی لۆژیکی سوود لە <h2>
- وەربگرن <h6>
بەجۆرێک کە خوێنەرانی شاشە بتوانن خشتەی ناوەڕۆک بۆ لاپەڕەکانتان دروست بکەن.
زیاتر بزانە لە HTML CodeSniffer و AccessAbility ی Penn State .
لە ئێستادا، هەندێک لە پێکەوەگرتنی ڕەنگی پێشوەختە کە لە Bootstrap بەردەستە (وەک پۆلە جیاوازەکانی دوگمەی ستایلدار ، هەندێک لە ڕەنگەکانی تیشک خستنە سەر کۆدەکان کە بۆ بلۆکی کۆدی بنەڕەتی بەکاردەهێنرێن , پۆلی یارمەتیدەری .bg-primary
پاشبنەمای کۆنتێکست ، و ڕەنگی بەستەری پێشوەختە کاتێک لەسەر پاشبنەمای سپی بەکاردەهێنرێت) ڕێژەی کۆنتراستی نزمیان هەیە (لە خوار ڕێژەی پێشنیارکراوی 4.5:1 ). ئەمەش دەبێتە هۆی دروستبوونی کێشە بۆ ئەو بەکارهێنەرانەی کە بینایی کەمیان هەیە یاخود ڕەنگ کوێرن. ئەم ڕەنگە پێشوەختانە لەوانەیە پێویستیان بە دەستکاریکردن بێت بۆ زیادکردنی کۆنتراست و خوێندنەوەیان.
Bootstrap بەپێی مۆڵەتی MIT بڵاوکراوەتەوە و مافی چاپکردنی 2016 Twitter ـە. بە کوڵاوی بۆ پارچە بچووکتر، دەتوانرێت بەم مەرجانەی خوارەوە وەسف بکرێت.
مۆڵەتی تەواوی Bootstrap لە کۆگای پڕۆژەکەدایە بۆ زانیاری زیاتر.
ئەندامانی کۆمەڵگا بەڵگەنامەکانی Bootstrap یان وەرگێڕاوە بۆ زمانە جیاوازەکان. هیچیان بە فەرمی پشتگیری ناکرێت و لەوانەیە هەمیشە لە نوێدا نەبن.
ئێمە یارمەتی ڕێکخستن یان میوانداریکردنی وەرگێڕانەکان نادەین، تەنها لینکیان بۆ دەکەین.
وەرگێڕانێکی نوێ یان باشترت تەواو کردووە؟ داواکاری ڕاکێشان بکەرەوە بۆ زیادکردنی بۆ لیستەکەمان.