يېقىنلىشىش
Bootstrap نى ياساش ۋە ئاسراشتا ئىشلىتىلىدىغان يېتەكچى پرىنسىپلار ، ئىستراتېگىيەلەر ۋە تېخنىكىلارنى ئۆگىنىۋېلىڭ ، ئۇنى ئۆزىڭىز تېخىمۇ ئاسان خاسلاشتۇرالايسىز ۋە كېڭەيتەلەيسىز.
باشلىنىش بېتى بۇ تۈرنىڭ تونۇشتۇرۇش ساياھىتى ۋە ئۇنىڭ نېمىلەرنى تەمىنلەيدىغانلىقى بىلەن تەمىنلەش بىلەن بىر ۋاقىتتا ، بۇ ھۆججەت نېمە ئۈچۈن 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
بارلىق ئورتاق ئۇسلۇبلارغا ئىشلىتىمىز . ئاندىن كېيىن رەڭ ، تەگلىك رەڭگى ، چېگرا رەڭگى قاتارلىقلارنى قوشۇش قاتارلىق ئۆزگەرتكۈچلەرنى ئىشلىتىمىز.display
padding
border-width
.btn-primary
ئۆزگەرتكۈچ سىنىپلىرى پەقەت كۆپ خىل ۋارىيانتلاردا ئۆزگەرتىشكە بولىدىغان نۇرغۇن خاسلىق ياكى قىممەت بولغاندىلا ئىشلىتىلىدۇ. ئۆزگەرتكۈچ ھەمىشە زۆرۈر ئەمەس ، شۇڭا كود قۇرلىرىنى تېجەپ ، ئۇنى قۇرغاندا زۆرۈر بولمىغان قاپلاپ كېتىشنىڭ ئالدىنى ئالىدىغانلىقىڭىزنى جەزملەشتۈرۈڭ. ئۆزگەرتكۈچىلەرنىڭ ياخشى مىسالى بىزنىڭ تېما رەڭ سىنىپىمىز ۋە چوڭ-كىچىكلىكىمىز.
z- كۆرسەتكۈچ تارازىسى
Bootstrap دا ئىككى خىل z-index
تارازا بار - زاپچاس ۋە قوشۇمچە زاپچاس.
زاپچاس ئېلېمېنتلىرى
border
Bootstrap دىكى بەزى زاپچاسلار قاپلانغان ئېلېمېنتلار بىلەن ياسالغان بولۇپ ، مۈلۈكنى ئۆزگەرتمەي قوش چېگرانىڭ ئالدىنى ئالىدۇ . مەسىلەن ، كۇنۇپكا گۇرۇپپىسى ، كىرگۈزۈش گۇرۇپپىسى ۋە كىچىكلىتىش.- بۇ زاپچاسلار ئۆلچەملىك
z-index
كۆلەمدە0
ئورتاقلىشىدۇ3
. 0
سۈكۈتتىكى (دەسلەپكى) ،1
is:hover
,2
is:active
/.active
, and3
is:focus
.- بۇ ئۇسۇل بىزنىڭ ئەڭ يۇقىرى ئىشلەتكۈچى ئەۋزەللىكى توغرىسىدىكى مۆلچەرىمىزگە ماس كېلىدۇ. ئەگەر بىر ئېلېمېنت فوكۇسلانغان بولسا ، ئۇ كۆزدە تۇتۇلىدۇ ۋە ئىشلەتكۈچىنىڭ دىققىتىنى تارتىدۇ. ئاكتىپ ئېلېمېنتلار ئىككىنچى ئورۇندا تۇرىدۇ ، چۈنكى ئۇلار دۆلەتنى كۆرسىتىدۇ. Hover ئۈچىنچى ئورۇندا تۇرىدۇ ، چۈنكى ئۇ ئابونتلارنىڭ مۇددىئاسىنى كۆرسىتىدۇ ، ئەمما ھەر قانداق نەرسىنى دېگۈدەك ئاچقىلى بولىدۇ.
زاپچاسلارنى قاپلاش
Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index
, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index
scale that begins at 1000
. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
Each overlay component increases its z-index
value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.
Learn more about this in our z-index
layout page.
HTML and CSS over JS
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
This principle is our first-class JavaScript API using data
attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn
class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>
s and <a>
s.
The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid
/:invalid
pseudo-elements every browser provides us.
Utilities
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block
represents display: block;
). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
Flexible HTML
While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>
). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
Code conventions
Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.
We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.
بىز vnu-jar ئارقىلىق ئۆلچەملىك ۋە مەنىلىك HTML نى ئىجرا قىلىش ، شۇنداقلا كۆپ ئۇچرايدىغان خاتالىقلارنى بايقاش ئۈچۈن ئىشلىتىمىز.