يېقىنلىشىش

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