يېقىنلىشىش

باشلىنىش بېتى بۇ تۈرنىڭ تونۇشتۇرۇش ساياھىتى ۋە ئۇنىڭ نېمىلەرنى تەمىنلەيدىغانلىقى بىلەن تەمىنلەش بىلەن بىر ۋاقىتتا ، بۇ ھۆججەت نېمە ئۈچۈن Bootstrap دا قىلىدىغان ئىشلىرىمىزنى ئاساس قىلىدۇ. ئۇ بىزنىڭ پەلسەپەمىزنى تورغا سېلىشنى چۈشەندۈرۈپ بېرىدۇ ، شۇنداق بولغاندا باشقىلار بىزدىن ئۆگىنىدۇ ، بىز بىلەن تۆھپە قوشالايدۇ ۋە بىزنىڭ ياخشىلىنىشىمىزغا ياردەم بېرىدۇ.

توغرا بولمىغان نەرسىنى كۆرۈڭ ، ياكى تېخىمۇ ياخشى قىلالىشىڭىز مۇمكىن؟ بىر مەسىلىنى ئېچىڭ - بىز سىز بىلەن مۇنازىرە قىلىشنى خالايمىز.

خۇلاسە

بىز بۇلارنىڭ ھەر بىرىگە تېخىمۇ كۆپ شۇڭغۇپ كىرىمىز ، ئەمما يۇقىرى سەۋىيىدە ، بۇ بىزنىڭ ئۇسۇلىمىزنى يېتەكلەيدىغان نەرسە.

• زاپچاسلار ئالدى بىلەن ئىنكاسچان ۋە كۆچمە بولۇشى كېرەك
• زاپچاسلار ئاساسى سىنىپ بىلەن قۇرۇلۇپ ، ئۆزگەرتكۈچ دەرسلىكى ئارقىلىق كېڭەيتىلىشى كېرەك
• زاپچاسلار ئورتاق z- كۆرسەتكۈچ ئۆلچىمىگە بويسۇنۇشى كېرەك
• مۇمكىنقەدەر JavaScript دىن HTML ۋە CSS ئىجرا قىلىشنى ياخشى كۆرۈڭ
• ئىمكانقەدەر خاس ئۇسلۇبلارنى ئىشلىتىش
• مۇمكىنقەدەر قاتتىق HTML تەلەپلىرىنى ئىجرا قىلىشتىن ساقلىنىڭ (بالىلار تاللىغۇچىلار)

Responsive

Bootstrap نىڭ ئىنكاس قايتۇرۇش ئۇسلۇبى ئىنكاس قايتۇرۇش ئۈچۈن ياسالغان ، بۇ ئۇسۇل كۆپىنچە كۆچمە تېلېفون دەپ ئاتىلىدۇ . بىز بۇ ئاتالغۇنى ھۆججەتلىرىمىزدە ئىشلىتىمىز ۋە ئاساسەن ئۇنىڭغا قوشۇلىمىز ، ئەمما بەزى ۋاقىتلاردا بەك كەڭ بولۇپ كېتىشى مۇمكىن. گەرچە Bootstrap دا ھەر بىر زاپچاسلار پۈتۈنلەي ئىنكاس قايتۇرمىسىمۇ ، ئەمما بۇ ئىنكاس قايتۇرۇش ئۇسۇلى كۆرۈنۈشنىڭ چوڭىيىشىغا ئەگىشىپ سىزنى ئۇسلۇب قوشۇشقا ئىتتىرىش ئارقىلىق CSS قاپلاشنى ئازايتىشنى كۆرسىتىدۇ.

Bootstrap نىڭ ئۇدۇلىدا ، بۇنى بىزنىڭ ئاخبارات سوئاللىرىمىزدا ئەڭ ئېنىق كۆرىسىز. كۆپىنچە ئەھۋاللاردا ، بىز min-widthمەلۇم بىر نۇقتىدا قوللىنىلىشقا باشلايدىغان ۋە تېخىمۇ يۇقىرى ئۆتكەلدىن ئۆتىدىغان سوئاللارنى ئىشلىتىمىز. مەسىلەن ، چەكسىزلىككە .d-noneماس كېلىدۇ . min-width: 0يەنە بىر تەرەپتىن ، .d-md-noneئوتتۇرا ھال ۋە يۇقىرى نۇقتىدىن قوللىنىلىدۇ.

بەزى ۋاقىتلاردا max-widthزاپچاسنىڭ ئۆزىگە خاس مۇرەككەپلىكى تەلەپ قىلىنغاندا ئىشلىتىمىز. بەزى ۋاقىتلاردا ، بۇ چەكلىمىلەر بىزنىڭ زاپچاسلىرىمىزدىن يادرولۇق ئىقتىدارلارنى قايتا يېزىشقا قارىغاندا ، ئەمەلىيلەشتۈرۈش ۋە قوللاش جەھەتتە تېخىمۇ ئېنىق بولىدۇ. بىز بۇ ئۇسۇلنى چەكلەشكە تىرىشىمىز ، ئەمما ئۇنى پات-پات ئىشلىتىمىز.

دەرسلەر

Reboot دىن باشقا ، تور كۆرگۈچنىڭ نورماللاشتۇرۇش ئۇسلۇبى جەدۋىلىدىن باشقا ، بىزنىڭ بارلىق ئۇسلۇبلىرىمىز دەرسلەرنى تاللىغۇچ قىلىپ ئىشلىتىشنى مەقسەت قىلىدۇ. بۇ دېگەنلىك ، ئۇسلۇب تاللىغۇچىلارنى (مەسىلەن ، input[type="text"]) ۋە ئادەتتىن تاشقىرى ئاتا-ئانىلار سىنىپى (مەسىلەن ، .parent .child) ئۇسلۇبنى ئاسانلا بېسىپ چۈشىدىغان ھالەتكە كەلتۈرۈشنى كۆرسىتىدۇ.

بۇنداق بولغاندا ، زاپچاسلار ئورتاق ئۆينى ئاساس قىلغان ، ھەددىدىن زىيادە ئېشىپ كەتمەيدىغان مۈلۈك-قىممەت جۈپلىرى بولۇشى كېرەك. مەسىلەن ، .btnۋە .btn-primary. بىز ۋە ، قاتارلىق .btnبارلىق ئورتاق ئۇسلۇبلارغا ئىشلىتىمىز . ئاندىن كېيىن رەڭ ، تەگلىك رەڭگى ، چېگرا رەڭگى قاتارلىقلارنى قوشۇش قاتارلىق ئۆزگەرتكۈچلەرنى ئىشلىتىمىز.displaypaddingborder-width.btn-primary

ئۆزگەرتكۈچ سىنىپلىرى پەقەت كۆپ خىل ۋارىيانتلاردا ئۆزگەرتىلىدىغان كۆپ خىل خاسلىق ياكى قىممەت بولغاندىلا ئىشلىتىلىشى كېرەك. ئۆزگەرتكۈچلەر ھەمىشە لازىم ئەمەس ، شۇڭا كود قۇرلىرىنى تېجەپ ، ئۇلارنى قۇرغاندا زۆرۈر بولمىغان قاپلاپ كېتىشنىڭ ئالدىنى ئالىدىغانلىقىڭىزنى جەزملەشتۈرۈڭ. ئۆزگەرتكۈچىلەرنىڭ ياخشى مىسالى بىزنىڭ تېما رەڭ سىنىپىمىز ۋە چوڭ-كىچىكلىكىمىز.

z- كۆرسەتكۈچ تارازىسى

Bootstrap دە ئىككى خىل z-indexتارازا بار - زاپچاس ئىچىدىكى ئېلېمېنت ۋە قاپلىما زاپچاس.

زاپچاس ئېلېمېنتلىرى

• borderBootstrap دىكى بەزى زاپچاسلار قاپلانغان ئېلېمېنتلار بىلەن ياسالغان بولۇپ ، مۈلۈكنى ئۆزگەرتمەي قوش چېگرانىڭ ئالدىنى ئالىدۇ . مەسىلەن ، كۇنۇپكا گۇرۇپپىسى ، كىرگۈزۈش گۇرۇپپىسى ۋە كىچىكلىتىش.
• بۇ زاپچاسلار ئۆلچەملىك z-indexكۆلەمدە 0ئورتاقلىشىدۇ 3.
• 0سۈكۈتتىكى (دەسلەپكى) ، 1is :hover, 2is :active/ .active, and 3is :focus.
• بۇ ئۇسۇل بىزنىڭ ئەڭ يۇقىرى ئىشلەتكۈچى ئەۋزەللىكى توغرىسىدىكى مۆلچەرىمىزگە ماس كېلىدۇ. ئەگەر بىر ئېلېمېنت فوكۇسلانغان بولسا ، ئۇ كۆزدە تۇتۇلىدۇ ۋە ئىشلەتكۈچىنىڭ دىققىتىنى تارتىدۇ. ئاكتىپ ئېلېمېنتلار ئىككىنچى ئورۇندا تۇرىدۇ ، چۈنكى ئۇلار دۆلەتنى كۆرسىتىدۇ. Hover ئۈچىنچى ئورۇندا تۇرىدۇ ، چۈنكى ئۇ ئابونتلارنىڭ مۇددىئاسىنى كۆرسىتىدۇ ، ئەمما ھەر قانداق نەرسىنى دېگۈدەك ئاچقىلى بولىدۇ.

زاپچاسلارنى قاپلاش

Bootstrap بىر خىل زاپچاسلارنى ئۆز ئىچىگە ئالىدۇ. بۇ ئەڭ يۇقىرى z-index، تۆۋەنگە چۈشۈش ، مۇقىم ۋە يېپىشقاق يولباشچى ، مودېل ، قورال كۆرسەتكۈچى ۋە پوپايكىلارنى ئۆز ئىچىگە ئالىدۇ. بۇ زاپچاسلارنىڭ z-indexباشلىنىش ئۆلچىمى بار 1000. بۇ باشلىنىش نومۇرى خالىغانچە تاللانغان بولۇپ ، بىزنىڭ ئۇسلۇبىمىز بىلەن تۈرىڭىزنىڭ ئىختىيارى ئۇسلۇبلىرى ئارىسىدا كىچىك بۇففېر رولىنى ئوينايدۇ.

ھەر بىر قاپلانغان زاپچاس ئۇنىڭ z-indexقىممىتىنى ئازراق ئۆستۈرىدۇ ، بۇنداق بولغاندا ئادەتتىكى UI پرىنسىپلىرى ئابونتلارنىڭ فوكۇسلانغان ياكى يانتۇ ئېلېمېنتلارنى ھەر ۋاقىت نەزەردە تۇتۇپ تۇرالايدۇ. مەسىلەن ، بىر مودېل ھۆججەتنى چەكلەش (مەسىلەن ، مودېلنىڭ ھەرىكىتى ئۈچۈن باشقا ھەرىكەت قوللانمايسىز) ، شۇڭا ئۇنى دېڭىز ئارمىيىمىزنىڭ ئۈستىگە قويدۇق.

z-indexبۇ توغرىلىق تېخىمۇ كۆپ ئورۇنلاشتۇرۇش بېتىمىزدىن ئۆگۈنۈڭ .

HTML ۋە CSS

مۇمكىنقەدەر HTML ۋە CSS نى JavaScript دىن يېزىشنى ياخشى كۆرىمىز. ئادەتتە ، HTML ۋە CSS تېخىمۇ مول ۋە ئوخشىمىغان تەجرىبە سەۋىيىسىدىكى تېخىمۇ كۆپ كىشىلەرگە ئېرىشەلەيدۇ. HTML ۋە CSS توركۆرگۈڭىزدە JavaScript غا قارىغاندا تېز ، توركۆرگۈڭىز ئادەتتە سىزگە نۇرغۇن ئىقتىدارلارنى تەمىنلەيدۇ.

بۇ پرىنسىپ خاسلىق ئارقىلىق بىزنىڭ بىرىنچى دەرىجىلىك JavaScript API data. بىزنىڭ JavaScript قىستۇرمىلىرىمىزنى ئىشلىتىش ئۈچۈن ئاساسەن JavaScript يېزىشىڭىزنى�� ھاجىتى يوق. ئۇنىڭ ئورنىغا HTML يېزىڭ. بۇ توغرىلىق تېخىمۇ كۆپ JavaScript ئومۇمىي بېتىمىزدىن ئوقۇڭ .

ئاخىرىدا ، بىزنىڭ ئۇسلۇبلىرىمىز ئورتاق تور ئېلېمېنتلىرىنىڭ ئاساسىي ھەرىكىتىنى ئاساس قىلىدۇ. مۇمكىنقەدەر توركۆرگۈچ تەمىنلىگەننى ئىشلىتىشنى خالايمىز. مەسىلەن ، سىز .btnھەر قانداق ئېلېمېنتقا دېگۈدەك دەرس قويالايسىز ، ئەمما كۆپىنچە ئېلېمېنتلار ھېچقانداق مەنىلىك قىممەت ياكى توركۆرگۈچ ئىقتىدارىنى تەمىنلىمەيدۇ. <button>شۇڭا ئۇنىڭ ئورنىغا s ۋە s نى ئىشلىتىمىز <a>.

تېخىمۇ مۇرەككەپ زاپچاسلار ئۈچۈنمۇ ئوخشاش. بىز ئۆزىمىزنىڭ جەدۋەل دەلىللەش قىستۇرمىسىنى يېزىپ ، كىرگۈزۈش ھالىتىگە ئاساسەن ئانا ئېلېمېنتقا دەرس قوشالايمىز ، بۇ ئارقىلىق بىزگە تېكىستنى قىزىل دېيىشكە بولىدۇ ، بىز ھەر بىر توركۆرگۈچ تەمىنلىگەن :valid/ :invalidساختا ئېلېمېنتلارنى ئىشلىتىشنى ياخشى كۆرىمىز.

Utilities

پايدىلىق دەرسلەر - ئىلگىرى Bootstrap 3 نىڭ ياردەمچىلىرى - CSS قورساق كۆپۈش ۋە بەت ئىقتىدارىنىڭ ناچار بولۇشىغا قارشى تۇرۇشتىكى كۈچلۈك ئىتتىپاقداش. پايدىلىق دەرسلىك ئادەتتە يەككە ، ئۆزگەرمەس مۈلۈك-قىممەت جۈپلىكى سۈپىتىدە ئىپادىلىنىدۇ (مەسىلەن ، .d-blockۋەكىللىك قىلىدۇ display: block;). ئۇلارنىڭ ئاساسلىق جەلپ قىلىش كۈچى HTML يازغاندا ئىشلىتىش سۈرئىتى ۋە سىز يازماقچى بولغان CSS مىقدارىنى چەكلەش.

كونكېرت CSS غا قارىتا ، ئاممىۋى مۇلازىمەتلەر كۆپىنچە تەكرارلىنىدىغان مۈلۈك قىممىتى جۈپلىرىڭىزنى يەككە سىنىپقا قىسقارتىش ئارقىلىق ھۆججەتنىڭ چوڭ-كىچىكلىكىنى ئاشۇرۇشقا قارشى تۇرالايدۇ. بۇ سىزنىڭ تۈرلىرىڭىزدە زور تەسىر پەيدا قىلالايدۇ.

جانلىق HTML

ھەمىشە مۇمكىن بولمىسىمۇ ، بىزنىڭ HTML زاپچاسلىرىغا بولغان تەلىپىمىزدە ھەددىدىن زىيادە دوگما بولۇپ قېلىشتىن ساقلىنىشقا تىرىشىمىز. شۇڭا ، بىز CSS تاللىغۇچىلىرىمىزدىكى يەككە دەرسلەرگە ئەھمىيەت بېرىپ ، دەرھال بالىلار تاللىغۇچىلاردىن ساقلىنىشقا تىرىشىمىز >. بۇ سىزنىڭ ئەمەلىيلەشتۈرۈشىڭىزدە تېخىمۇ جانلىق بولۇپ ، بىزنىڭ CSS نى تېخىمۇ ئاددىي ۋە كونكرېتلاشتۇرۇشىمىزغا ياردەم بېرىدۇ.

كود ئەھدىنامىسى

كود يېتەكچىسى (Bootstrap نىڭ قۇرغۇچىسى ، @mdo دىن) بىزنىڭ HTML ۋە CSS نى Bootstrap ئارقىلىق قانداق يازىدىغانلىقىمىزنى خاتىرىلەيدۇ. ئۇ ئومۇمىي فورماتلاش ، ئورتاق ئەقىلگە خىلاپلىق قىلىش ، مۈلۈك ۋە خاسلىق زاكازلىرى قاتارلىق كۆرسەتمىلەرنى بەلگىلەيدۇ.

بىز بۇ ئۆلچەملەرنى Sass / CSS دا ئىجرا قىلىش ئۈچۈن Stylelint نى ئىشلىتىمىز. بىزنىڭ خاسلاشتۇرۇلغان Stylelint سەپلىمىسى ئوچۇق كودلۇق بولۇپ ، باشقىلار ئىشلىتەلەيدۇ ۋە كېڭەيتەلەيدۇ.

بىز vnu-jar ئارقىلىق ئۆلچەملىك ۋە مەنىلىك HTML نى ئىجرا قىلىش ، شۇنداقلا كۆپ ئۇچرايدىغان خاتالىقلارنى بايقاش ئۈچۈن ئىشلىتىمىز.