قايتا قوزغىتىش
قايتا قوزغىتىش ، بىر ھۆججەتتىكى ئېلېمېنتقا خاس CSS ئۆزگىرىشلىرى توپلىمى ، kickstart Bootstrap نەپىس ، ئىزچىل ۋە ئاددىي ئاساس بىلەن تەمىنلەيدۇ.
يېقىنلىشىش
قايتا قوزغىتىش نورماللاشتۇرۇشنى ئاساس قىلىدۇ ، نۇرغۇن HTML ئېلېمېنتلىرىنى پەقەت ئېلېمېنت تاللىغۇچىلار ئارقىلىق مەلۇم دەرىجىدە ئۇسلۇب بىلەن تەمىنلەيدۇ. قوشۇمچە ئۇسلۇب پەقەت دەرسلەر بىلەنلا ئېلىپ بېرىلىدۇ. مەسىلەن ، بىز <table>
تېخىمۇ ئاددىي بولغان ئاساسىي ئۇسلۇب ئۈچۈن بەزى ئۇسلۇبلارنى قايتا قوزغىتىمىز ، كېيىن تەمىنلەيمىز .table
ۋە .table-bordered
تېخىمۇ كۆپ.
Reboot دا نېمىنى بېسىپ ئۆتۈشنى تاللاشتىكى كۆرسەتمىلىرىمىز ۋە سەۋەبلىرىمىز:
- بەزى توركۆرگۈچنىڭ سۈكۈتتىكى قىممىتىنى يېڭىلاپ ، كېڭەيتىشچان زاپچاس ئارىلىقى ئۈچۈن
rem
s ئورنىدا ئىشلىتىڭ.em
- ساقلىنىڭ
margin-top
. ۋېرتىكال گىرۋەكلەر يىمىرىلىپ ، ئويلىمىغان نەتىجىلەرنى بېرىدۇ. تېخىمۇ مۇھىمى ، بىر يۆنىلىشmargin
تېخىمۇ ئاددىي روھىي مودېل. rem
ئۈسكۈنىنىڭ چوڭ-كىچىكلىكىنى كىچىكلىتىش ئۈچۈن ، بۆلەك ئېلېمېنتلىرى s نى ئىشلىتىشى كېرەكmargin
.- ئىمكانقەدەر
font
مۇناسىۋەتلىك مۈلۈكلەرنىڭ بايانلىرىنى ئەڭ تۆۋەن چەكتە ساقلاڭ .inherit
بەت سۈكۈتتىكى ھالەتتە
<html>
بەت ۋە ئېلېمېنتلار يېڭىلىنىپ ، بەت يۈزىدىكى <body>
سۈكۈتتىكى سۈكۈتنى تەمىنلەيدۇ. تېخىمۇ ئېنىق قىلىپ ئېيتقاندا:
- دۇنيا
box-sizing
مىقياسىدا ھەر بىر ئېلېمېنتقا*::before
ئورۇنلاشتۇرۇلغان . بۇ ئېلېمېنتنىڭ ئېلان قىلىنغان كەڭلىكىنىڭ پاتقاق ياكى چېگرا سەۋەبىدىن ھەرگىز ئېشىپ كەتمەسلىكىگە كاپالەتلىك قىلىدۇ.*::after
border-box
- ھېچقانداق ئاساسى
font-size
ئېلان قىلىنمىغان<html>
، ئەمما16px
پەرەز قىلىنغان (توركۆرگۈ سۈكۈتتىكى). ئابونتلارنىڭ ياقتۇرۇشىغا ھۆرمەت قىلىش ۋە تېخىمۇ قۇلايلىق ئۇسۇلغا كاپالەتلىك قىلىش بىلەن بىر ۋاقىتتا ، مېدىيا سوئاللىرى ئارقىلىق ئاسان ئىنكاس قايتۇرىدىغان تىپنى كېڭەيتىشتە قوللىنىلىدۇfont-size: 1rem
.<body>
- The
<body>
also also a globalfont-family
,line-height
andtext-align
. بۇ كېيىن بىر قىسىم شەكىل ئېلېمېنتلىرىغا ۋارىسلىق قىلىپ ، خەت ماسلاشماسلىقنىڭ ئالدىنى ئالىدۇ. - بىخەتەرلىك ئۈچۈن ،
<body>
ئېلان قىلىنغانbackground-color
، سۈكۈتتىكى ھالەتتە#fff
.
يەرلىك خەت نۇسخىسى
سۈكۈتتىكى تور خەت نۇسخىسى (Helvetica Neue, Helvetica ۋە Arial) Bootstrap 4 دە تاشلىنىپ ، ھەر بىر ئۈسكۈنىدە ۋە مەشغۇلات سىستېمىسىدا ئەڭ ياخشى تېكىستنى كۆرسىتىش ئۈچۈن «يەرلىك خەت نۇسخىسى» غا ئالماشتۇرۇلدى. بۇ «Smashing» ژۇرنىلى ماقالىسىدىكى يەرلىك خەت نۇسخىسى توغرىسىدىكى تەپسىلاتلارنى ئوقۇڭ .
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
شۇنىڭغا دىققەت قىلىڭكى ، خەت ساندۇقى emoji خەت نۇسخىسىنى ئۆز ئىچىگە ئالغان بولغاچقا ، نۇرغۇنلىغان ئورتاق بەلگە / دىڭبات يۇنىكود ھەرپلىرى كۆپ خىل رەڭلىك رەسىم شەكلىدە كۆرسىتىلىدۇ. color
ئۇلارنىڭ سىرتقى كۆرۈنۈشى ئوخشىمايدۇ ، توركۆرگۈچ / سۇپىنىڭ يەرلىك emoji خەت شەكلىدە ئىشلىتىلگەن ئۇسلۇبقا ئاساسەن ، ئۇلار ھېچقانداق CSS ئۇسلۇبىنىڭ تەسىرىگە ئۇچرىمايدۇ .
بۇ پۈتكۈل Bootstrap دا پۈتۈن دۇنيا مىقياسىدا ئاپتوماتىك ۋارىسلىق قىلىنغان font-family
. <body>
يەرشارىنى ئۆزگەرتىش ئۈچۈن Bootstrap font-family
نى يېڭىلاش ۋە قايتا قۇرۇش.$font-family-base
ماۋزۇ ۋە ئابزاس
<h1>
بارلىق ماۋزۇ ئېلېمېنتلىرى ، مەسىلەن <p>
ئۆچۈرۈۋېتىلىدۇ margin-top
. ماۋزۇلار ئاسان بوشلۇق ئۈچۈن margin-bottom: .5rem
ئابزاس قوشتى .margin-bottom: 1rem
ماۋزۇ | مىسال |
---|---|
<h1></h1> |
h1. Bootstrap ماۋزۇسى |
<h2></h2> |
h2. Bootstrap ماۋزۇسى |
<h3></h3> |
h3. Bootstrap ماۋزۇسى |
<h4></h4> |
h4. Bootstrap ماۋزۇسى |
<h5></h5> |
h5. Bootstrap ماۋزۇسى |
<h6></h6> |
h6. Bootstrap ماۋزۇسى |
تىزىملىك
بارلىق تىزىملىكلەر <ul>
- ، <ol>
ۋە - <dl>
ئۆچۈرۈلگەن margin-top
ۋە a margin-bottom: 1rem
. تىزىملىك تىزىملىكى يوق margin-bottom
.
- بارلىق تىزىملىكلەرنىڭ ئۈستى گىرۋىكى چىقىرىۋېتىلدى
- ھەمدە ئۇلارنىڭ تۆۋەن چېكى نورماللاشتى
- ئۇلانغان تىزىملىكلەرنىڭ تۆۋەن چېكى يوق
- بۇنداق بولغاندا ئۇلارنىڭ تېخىمۇ تاشقى كۆرۈنۈشى بار
- بولۇپمۇ تېخىمۇ كۆپ تىزىملىك تۈرلىرى ئەگەشكەندە
- سول تاختايمۇ ئەسلىگە كەلتۈرۈلدى
- بۇ يەردە زاكاز قىلىنغان تىزىملىك بار
- بىر قانچە تىزىملىك تۈرلىرى بىلەن
- ئۇنىڭ ئومۇمىي كۆرۈنۈشى ئوخشاش
- ئالدىنقى تەرتىپسىز تىزىملىك سۈپىتىدە
ئاددىي ئۇسلۇب ، ئېنىق قاتلام ۋە تېخىمۇ ياخشى بوشلۇق ئۈچۈن چۈشەندۈرۈش تىزىملىكى s يېڭىلاندى margin
. <dd>
s نى ئەسلىگە كەلتۈرۈش margin-left
ۋە 0
قوشۇش margin-bottom: .5rem
. <dt>
s توم .
- چۈشەندۈرۈش تىزىملىكى
- چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
- مۇددىتى
- بۇ ئاتالغۇنىڭ ئېنىقلىمىسى.
- ئوخشاش ئاتالغۇنىڭ ئىككىنچى ئېنىقلىمىسى.
- يەنە بىر ئاتالغۇ
- بۇ باشقا ئاتالغۇنىڭ ئېنىقلىمىسى.
ئالدىن تەييارلانغان تېكىست
بۇ <pre>
ئېلېمېنت ئۇنى چىقىرىۋېتىش ۋە ئۇنىڭ ئۈچۈن ئورۇن margin-top
ئىشلىتىش ئۈچۈن ئەسلىگە كەلتۈرۈلدى .rem
margin-bottom
.example-element { margin-bottom: 1rem; }
جەدۋەل
جەدۋەل ئۇسلۇب <caption>
s غا ئازراق تەڭشەلگەن ، چېگرىلار يىمىرىلىپ ، ئىزچىل بىردەكلىككە كاپالەتلىك قىلىنغان text-align
. چېگرا ، پەلەمپەي ۋە باشقا قوشۇمچە ئۆزگەرتىشلەر دەرس بىلەن.table
بىللە كېلىدۇ .
جەدۋەل ماۋزۇسى | جەدۋەل ماۋزۇسى | جەدۋەل ماۋزۇسى | جەدۋەل ماۋزۇسى |
---|---|---|---|
جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى |
جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى |
جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى | جەدۋەل كاتەكچىسى |
جەدۋەل
ئاددىي شەكىل ئۇسلۇبى ئۈچۈن ھەر خىل شەكىل ئېلېمېنتلىرى قايتا قوزغىتىلدى. بۇ يەردە ئەڭ كۆرۈنەرلىك ئۆزگىرىشلەر بار:
<fieldset>
s نىڭ چېگرىسى ، تاختا ياكى گىرۋەكلىرى يوق ، شۇڭا ئۇلارنى ئايرىم كىرگۈزۈش ياكى كىرگۈزۈش گۇرۇپپىسىنىڭ ئورالمىسى قىلىپ ئىشلىتىشكە بولىدۇ.<legend>
s ، مەيدان مەيدانىغا ئوخشاش ، قايتا رەتلىنىپ ، ھەر خىل ماۋزۇ سۈپىتىدە كۆرسىتىلىدۇ.<label>
s ئىشلىتىشكەdisplay: inline-block
رۇخسەتmargin
قىلىنغان.<input>
s,<select>
s,<textarea>
s ۋە<button>
s كۆپىنچە Normalize تەرىپىدىن ھەل قىلىنغان ، ئەمما Reboot ئۇلارنىڭmargin
ۋە يۈرۈشلۈكلىرىنىمۇ چىقىرىپ تاشلايدۇline-height: inherit
.<textarea>
s گورىزونتالنىڭ چوڭ-كىچىكلىكى ھەمىشە بەت يۈزى ئورۇنلاشتۇرۇلىدۇ.<button>
s ۋە<input>
كۇنۇپكا ئېلېمېنتلىرىcursor: pointer
قاچان بولىدۇ:not(:disabled)
.
بۇ ئۆزگىرىشلەر ۋە تېخىمۇ كۆپلىرى تۆۋەندە كۆرسىتىلدى.
كۇنۇپكىلاردىكى كۆرسەتمىلەر
role="button"
قايتا قوزغىتىش سۈكۈتتىكى نۇر بەلگىنى ئۆزگەرتىش ئۈچۈن كۈچەيتىشنى ئۆز ئىچىگە ئالىدۇ pointer
. بۇ خاسلىقنى ئېلېمېنتلارغا قوشۇڭ ، ئېلېمېنتلارنىڭ ئۆز-ئارا تەسىر كۆرسىتىدىغانلىقىنى كۆرسىتىپ بېرىدۇ. <button>
بۇ رول ئېلېمېنتلارغا ئېھتىياجلىق ئەمەس cursor
.
<span role="button" tabindex="0">Non-button element button</span>
ئوخشىمىغان ئېلېمېنتلار
ئادرېس
<address>
ئېلېمېنت توركۆرگۈنىڭ سۈكۈتتىكى ھالىتىنى ئەسلىگە font-style
كەلتۈرۈش italic
ئۈچۈن normal
يېڭىلاندى . line-height
ئۇمۇ ھازىر ۋارىسلىق قىلىندى ۋە margin-bottom: 1rem
قوشۇلدى. <address>
s ئەڭ يېقىن ئەجداد (ياكى پۈتۈن خىزمەت گەۋدىسى) نىڭ ئالاقىلىشىش ئۇچۇرلىرىنى كۆرسىتىش ئۈچۈندۇر. قۇرلارنى ئاخىرلاشتۇرۇش ئارقىلىق فورماتنى ساقلاڭ <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 تولۇق ئىسمى
[email protected]
Blockquote
بۆلەكتىكى سۈكۈتتىكى margin
ھالەت 1em 40px
، شۇڭا ئۇنى 0 0 1rem
باشقا ئېلېمېنتلار بىلەن تېخىمۇ ماس كېلىدىغان نەرسىگە قايتۇرىمىز.
ھەممىگە تونۇشلۇق نەقىل ، چەكلەش ئېلېمېنتى بار.
ئېلېمېنتلار
ئېلېمېنت ئاساسىي <abbr>
ئۇسلۇبنى قوبۇل قىلىپ ، ئابزاس تېكىستى ئارىسىدا ئالاھىدە گەۋدىلىنىدۇ.
خۇلاسە
cursor
خۇلاسەدىكى سۈكۈتتىكى ھالەت text
، شۇڭا ئۇنى قايتا pointer
چېكىپ ، ئۇنى چېكىش ئارقىلىق ئېلېمېنتنىڭ ئۆز-ئارا تەسىر كۆرسىتەلەيدىغانلىقىنى يەتكۈزىمىز.
بەزى تەپسىلاتلار
تەپسىلاتلار ھەققىدە تېخىمۇ كۆپ ئۇچۇرلار.
تېخىمۇ كۆپ تەپسىلاتلار
بۇ يەردە تېخىمۇ كۆپ تەپسىلاتلار بار.
HTML5 [hidden]
خاسلىقى
HTML5 ئىسىم قويۇلغان يېڭى يەرشارى خاسلىقى[hidden]
display: none
قوشۇلغان بولۇپ ، سۈكۈتتىكى ھالەتتە ئۇسلۇب قىلىنغان. PureCSS دىن بىر پىكىرنى ئارىيەتكە ئالساق ، [hidden] { display: none !important; }
ئۇنىڭ تاسادىپىي ئېشىپ كېتىشىنىڭ ئالدىنى ئېلىش ئۈچۈن ، بۇ سۈكۈتتىكى ھالەتنى ياخشىلايمىز display
. گەرچە [hidden]
IE10 تەرىپىدىن يەرلىك جەھەتتىن قوللىمىسىمۇ ، CSS دىكى ئېنىق خىتاب بۇ مەسىلىنى ھەل قىلىدۇ.
<input type="text" hidden>
jQuery ماس كەلمەيدۇ
[hidden]
$(...).hide()
jQuery نىڭ ئۇسۇلى ۋە ئۇسۇلىغا ماس كەلمەيدۇ $(...).show()
. شۇڭلاشقا ، بىز ھازىر ئېلېمېنتلارنىڭ ئېلېمېنتلىرىنى [hidden]
باشقۇرۇشتىكى باشقا تېخنىكىلارنى قوللىمايمىز display
.
پەقەت ئېلېمېنتنىڭ كۆرۈنۈشچانلىقىنى display
ئۆزگەرتىش ئۈچۈن ، ئۇ ئۆزگەرتىلمىگەن ، ئېلېمېنت يەنىلا ھۆججەتنىڭ ئېقىمىغا تەسىر كۆرسىتەلەيدۇ ، ئۇنىڭ ئورنىغا .invisible
سىنىپنى ئىشلىتىڭ .