Source

قايتا قوزغىتىش

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

يېقىنلىشىش

قايتا قوزغىتىش نورماللاشتۇرۇشنى ئاساس قىلىدۇ ، نۇرغۇن HTML ئېلېمېنتلىرىنى پەقەت ئېلېمېنت تاللىغۇچىلار ئارقىلىق مەلۇم دەرىجىدە ئۇسلۇب بىلەن تەمىنلەيدۇ. قوشۇمچە ئۇسلۇب پەقەت دەرسلەر بىلەنلا ئېلىپ بېرىلىدۇ. مەسىلەن ، بىز <table>تېخىمۇ ئاددىي بولغان ئاساسىي ئۇسلۇب ئۈچۈن بەزى ئۇسلۇبلارنى قايتا قوزغىتىمىز ، كېيىن تەمىنلەيمىز .tableۋە .table-borderedباشقىلار.

Reboot دا نېمىنى بېسىپ ئۆتۈشنى تاللاشتىكى كۆرسەتمىلىرىمىز ۋە سەۋەبلىرىمىز:

  • بەزى توركۆرگۈچنىڭ سۈكۈتتىكى قىممىتىنى يېڭىلاپ ، كېڭەيتىشچان زاپچاس ئارىلىقى ئۈچۈن rems نىڭ ئورنىغا s ئىشلىتىڭ.em
  • ساقلىنىڭ margin-top. تىك گىرۋەكلەر يىمىرىلىپ ، ئويلىمىغان نەتىجىلەرنى بېرىدۇ. تېخىمۇ مۇھىمى ، بىر يۆنىلىش marginئاددىي روھىي مودېل.
  • remئۈسكۈنىنىڭ چوڭ-كىچىكلىكىنى كىچىكلىتىش ئۈچۈن ، بۆلەك ئېلېمېنتلىرى s نى ئىشلىتىشى كېرەك margin.
  • ئىمكانقەدەر fontمۇناسىۋەتلىك مۈلۈكلەرنىڭ بايانلىرىنى ئەڭ تۆۋەن چەكتە ساقلاڭ .inherit

بەت سۈكۈتتىكى ھالەتتە

<html>بەت ۋە ئېلېمېنتلار يېڭىلىنىپ ، بەت يۈزىدىكى <body>سۈكۈتتىكى سۈكۈتنى تەمىنلەيدۇ. تېخىمۇ ئېنىق قىلىپ ئېيتقاندا:

  • دۇنيا box-sizingمىقياسىدا ھەر بىر ئېلېمېنتقا *::beforeئورۇنلاشتۇرۇلغان . بۇ ئېلېمېنتنىڭ ئېلان قىلىنغان كەڭلىكىنىڭ پاتقاق ياكى چېگرا سەۋەبىدىن ھەرگىز ئېشىپ كەتمەسلىكىگە كاپالەتلىك قىلىدۇ. *::afterborder-box
    • ھېچقانداق ئاساسى font-sizeئېلان قىلىنمىغان <html>، ئەمما 16pxپەرەز قىلىنغان (توركۆرگۈ سۈكۈتتىكى). ئابونتلارنىڭ ياقتۇرۇشىغا ھۆرمەت قىلىش ۋە تېخىمۇ قۇلايلىق ئۇسۇلغا كاپالەتلىك قىلىش بىلەن بىر ۋاقىتتا ، مېدىيا سوئاللىرى ئارقىلىق ئاسان ئىنكاس قايتۇرىدىغان تىپنى كېڭەيتىشتە قوللىنىلىدۇ font-size: 1rem.<body>
  • The <body>also also a global font-family, line-heightand text-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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

بۇ پۈتكۈل 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.

  • Lorem ipsum dolor amet
  • Consectetur adipiscing elit
  • ماسسادىكى پۈتۈن گەۋدە لورېمى
  • پرەزيدەنت isسوزدەرى
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • پورتېرنىڭ لورېمىنى ئېلىڭ
  1. Lorem ipsum dolor amet
  2. Consectetur adipiscing elit
  3. ماسسادىكى پۈتۈن گەۋدە لورېمى
  4. پرەزيدەنت isسوزدەرى
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. پورتېرنىڭ لورېمىنى ئېلىڭ

ئاددىي ئۇسلۇب ، ئېنىق قاتلام ۋە تېخىمۇ ياخشى بوشلۇق ئۈچۈن چۈشەندۈرۈش تىزىملىكى s يېڭىلاندى margin. <dd>s نى ئەسلىگە كەلتۈرۈش margin-leftۋە 0قوشۇش margin-bottom: .5rem. <dt>s توم .

چۈشەندۈرۈش تىزىملىكى
چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida eget metus.
Malesuada porta
Etiam porta sem maleuada magna mollis euismod.

ئالدىن تەييارلانغان تېكىست

بۇ <pre>ئېلېمېنت ئۇنى چىقىرىۋېتىش ۋە ئۇنىڭ ئۈچۈن ئورۇن margin-topئىشلىتىش ئۈچۈن ئەسلىگە كەلتۈرۈلدى .remmargin-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).

بۇ ئۆزگىرىشلەر ۋە تېخىمۇ كۆپلىرى تۆۋەندە كۆرسىتىلدى.

مىسال رىۋايىتى

100

ئوخشىمىغان ئېلېمېنتلار

ئادرېس

<address>ئېلېمېنت توركۆرگۈنىڭ سۈكۈتتىكى ھالىتىنى ئەسلىگە font-styleكەلتۈرۈش italicئۈچۈن normalيېڭىلاندى . line-heightئۇمۇ ھازىر ۋارىسلىق قىلىندى ۋە margin-bottom: 1remقوشۇلدى. <address>s ئەڭ يېقىن ئەجداد (ياكى پۈتۈن خىزمەت گەۋدىسى) نىڭ ئالاقىلىشىش ئۇچۇرلىرىنى كۆرسىتىش ئۈچۈندۇر. قۇرلارنى ئاخىرلاشتۇرۇش ئارقىلىق فورماتنى ساقلاڭ <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
تولۇق ئىسمى
[email protected]

Blockquote

بۆلەكتىكى سۈكۈتتىكى marginھالەت 1em 40px، شۇڭا ئۇنى 0 0 1remباشقا ئېلېمېنتلار بىلەن تېخىمۇ ماس كېلىدىغان نەرسىگە قايتۇرىمىز.

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى تالانت. پۈتۈن سان پوستىنى يوقىتىدۇ.

مەنبە ماۋزۇسىدا داڭلىق كىشى

ئېلېمېنتلار

ئېلېمېنت ئاساسىي <abbr>ئۇسلۇبنى قوبۇل قىلىپ ، ئابزاس تېكىستى ئارىسىدا ئالاھىدە گەۋدىلىنىدۇ.

Nulla attr vitae elit libero ، فارېترا ئاۋۇ.

خۇلاسە

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سىنىپنى ئىشلىتىڭ .