නැවත ආරම්භ කරන්න

නැවත පණගැන්වීම, තනි ගොනුවක් තුළ මූලද්‍රව්‍ය-විශේෂිත CSS වෙනස්කම් එකතුවක්, ගොඩනගා ගැනීමට අලංකාර, ස්ථාවර සහ සරල මූලික පදනමක් සැපයීමට kickstart Bootstrap.

ප්රවේශය

නැවත පණගැන්වීම සාමාන්‍යකරණය මත ගොඩනැගෙයි, මූලද්‍රව්‍ය තේරීම් පමණක් භාවිතා කරමින් බොහෝ HTML මූලද්‍රව්‍ය තරමක් මතිමතාන්තර විලාසයන් සපයයි. අමතර හැඩගැන්වීම සිදු කරනු ලබන්නේ පන්ති සමඟ පමණි. උදාහරණයක් ලෙස, අපි <table>සරල මූලික පදනමක් සඳහා සමහර මෝස්තර නැවත ආරම්භ කර පසුව .table, .table-bordered, සහ තවත් දේ සපයන්නෙමු.

නැවත පණගැන්වීමේදී ප්‍රතික්ෂේප කළ යුතු දේ තෝරා ගැනීමට අපගේ මාර්ගෝපදේශ සහ හේතු මෙන්න:

පරිමාණය කළ හැකි සංරචක පරතරය සඳහා rems වෙනුවට s භාවිතා කිරීමට සමහර බ්‍රවුසර පෙරනිමි අගයන් යාවත්කාලීන කරන්න .em
වළකින්න margin-top. අනපේක්ෂිත ප්රතිඵල ලබා දෙමින් සිරස් මායිම් කඩා වැටිය හැක. කෙසේ වෙතත් වඩාත් වැදගත් වන්නේ තනි දිශාවක් marginසරල මානසික ආකෘතියකි.
උපාංග ප්‍රමාණයන් හරහා පහසුවෙන් පරිමාණය කිරීම සඳහා, බ්ලොක් මූලද්‍රව්‍ය rems සඳහා margins භාවිත කළ යුතුය.
හැකි සෑම විටම fontභාවිතා කරමින් - ආශ්‍රිත දේපල ප්‍රකාශ අවම වශයෙන් තබා ගන්න .inherit

පිටු පෙරනිමි

වඩා හොඳ පිටු පුරා පෙරනිමි සැපයීමට <html>සහ මූලද්‍රව්‍ය යාවත්කාලීන කර ඇත. <body>වඩාත් විශේෂිතව:

ගෝලීය box-sizingවශයෙන් සෑම මූලද්‍රව්‍යයක්ම මත පිහිටුවා ඇත - ඇතුළුව *::beforeසහ *::after. border-boxපිරවුම් හෝ මායිම හේතුවෙන් මූලද්‍රව්‍යයේ ප්‍රකාශිත පළල කිසි විටෙකත් නොඉක්මවන බව මෙය සහතික කරයි.
මත පදනමක් font-sizeප්‍රකාශ කර නැත <html>, නමුත් 16pxඋපකල්පනය කරනු ලැබේ (බ්‍රවුසරයේ පෙරනිමිය). පරිශීලක මනාපයන්ට ගරු කරමින් සහ වඩාත් ප්‍රවේශ විය හැකි ප්‍රවේශයක් සහතික කරන අතරම මාධ්‍ය විමසුම් හරහා පහසු ප්‍රතිචාර දක්වන ආකාරයේ පරිමාණය සඳහා font-size: 1remයොදනු ලැබේ .<body>
<body>ගෝලීය font-family, line-heightසහ text-align. _ අකුරු නොගැලපීම් වලක්වා ගැනීම සඳහා සමහර ආකෘති මූලද්‍රව්‍ය මගින් මෙය පසුව උරුම වේ.
ආරක්ෂාව සඳහා, <body>ප්‍රකාශිත background-color, පෙරනිමියෙන් #fff.

ස්වදේශීය අකුරු තොගය

පෙරනිමි වෙබ් අකුරු (Helvetica Neue, Helvetica, සහ Arial) Bootstrap 4 හි අතහැර දමා සෑම උපාංගයකම සහ OS එකකම ප්‍රශස්ත පෙළ විදැහුම්කරණය සඳහා “ස්වදේශීය අකුරු තොගයක්” සමඟ ප්‍රතිස්ථාපනය කර ඇත. මෙම 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;

අකුරු තොගයේ ඉමොජි අකුරු ඇතුළත් වන බැවින්, බොහෝ පොදු සංකේත/ඩිංබැට් යුනිකෝඩ් අක්ෂර බහු-වර්ණ රූප සටහන් ලෙස විදැහුම් කරන බව සලකන්න. බ්‍රවුසරයේ/වේදිකාවේ ස්වදේශීය ඉමොජි අකුරුවල භාවිත කරන විලාසය මත පදනම්ව ඔවුන්ගේ පෙනුම වෙනස් වනු ඇති අතර, ඒවාට කිසිදු CSS colorවිලාසිතාවක් බලපාන්නේ නැත.

මෙය Bootstrap පුරාවට ගෝලීය වශයෙන් ස්වයංක්‍රීයව උරුම font-familyවන සහ අදාළ වේ . <body>ගෝලීය මාරු කිරීමට , Bootstrap font-familyයාවත්කාලීන කර නැවත සම්පාදනය කරන්න.$font-family-base

ශීර්ෂයන් සහ ඡේද

සියලුම ශීර්ෂ මූලද්‍රව්‍ය-උදා, <h1>-සහ <p>ඒවා margin-topඉවත් කිරීමට යළි සකසා ඇත. පහසු පරතරය සඳහා ශීර්ෂයන් margin-bottom: .5remසහ ඡේද එකතු කර ඇත.margin-bottom: 1rem

ශීර්ෂය	උදාහරණයක්
`<h1></h1>`	h1. බූට්ස්ට්‍රැප් ශීර්ෂය
`<h2></h2>`	h2. බූට්ස්ට්‍රැප් ශීර්ෂය
`<h3></h3>`	h3. බූට්ස්ට්‍රැප් ශීර්ෂය
`<h4></h4>`	h4. බූට්ස්ට්‍රැප් ශීර්ෂය
`<h5></h5>`	h5. බූට්ස්ට්‍රැප් ශීර්ෂය
`<h6></h6>`	h6. බූට්ස්ට්‍රැප් ශීර්ෂය

ලැයිස්තු

සියලුම ලැයිස්තු- <ul>, <ol>, සහ <dl>- margin-topඉවත් කර ඇත සහ a margin-bottom: 1rem. කැදලි ලැයිස්තු වල නැත margin-bottom.

සියලුම ලැයිස්තු ඒවායේ ඉහළ මායිම ඉවත් කර ඇත
ඔවුන්ගේ පහළ ආන්තිකය සාමාන්‍යකරණය විය
කැදලි ලැයිස්තුවලට පහළ මායිමක් නැත
- මේ ආකාරයෙන් ඔවුන් වඩාත් ඒකාකාර පෙනුමක් ඇත
- විශේෂයෙන් වැඩි ලැයිස්තු අයිතම අනුගමනය කරන විට
වම් පැඩිං එකද නැවත සකස් කර ඇත

මෙන්න ඇණවුම් ලැයිස්තුවක්
ලැයිස්තු අයිතම කිහිපයක් සමඟ
එය එකම සමස්ත පෙනුම ඇත
කලින් ඇණවුම් නොකළ ලැයිස්තුව ලෙස

සරල මෝස්තරයක්, පැහැදිලි ධුරාවලියක් සහ වඩා හොඳ පරතරයක් සඳහා, විස්තර ලැයිස්තු යාවත්කාලීන කර ඇත margin. <dd>වෙත නැවත සකස් margin-leftකර 0එකතු කරන්න margin-bottom: .5rem. <dt>s තද කර ඇත .

විස්තර ලැයිස්තු: නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.
වාරය: පදය සඳහා අර්ථ දැක්වීම.; එකම පදය සඳහා දෙවන අර්ථ දැක්වීම.
තවත් පදයක්: මෙම වෙනත් පදය සඳහා අර්ථ දැක්වීම.

පෙර සැකසූ පෙළ

මූලද්‍රව්‍යය එහි ඉවත් කිරීමට සහ ඒ සඳහා ඒකක භාවිතා <pre>කිරීමට යළි පිහිටුවනු ලැබේ .margin-topremmargin-bottom

.උදාහරණ-මූලද්‍රව්‍යය {
  ආන්තිකය-පහළ: 1rem;
}

මේස

වගු විලාසයට මඳක් සකසනු ලැබේ <caption>, මායිම් කඩා වැටේ, සහ text-alignපුරාවට ස්ථාවර බව සහතික කරයි. මායිම්, පිරවුම්, සහ තවත් දේ සඳහා අමතර වෙනස්කම් පන්තිය සමඟ පැමිණේ.table .

මෙය උදාහරණ වගුවක් වන අතර, අන්තර්ගතය විස්තර කිරීමට එහි ශීර්ෂ පාඨය මෙයයි.
වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය	වගු ශීර්ෂය
මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව
මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව
මේස කොටුව	මේස කොටුව	මේස කොටුව	මේස කොටුව

ආකෘති පත්ර

සරල මූලික මෝස්තර සඳහා විවිධ ආකෘති අංග නැවත ආරම්භ කර ඇත. වඩාත්ම කැපී පෙනෙන වෙනස්කම් කිහිපයක් මෙන්න:

<fieldset>s හි මායිම්, පිරවුම් හෝ ආන්තිකය නොමැති බැවින් ඒවා තනි යෙදවුම් හෝ යෙදවුම් කණ්ඩායම් සඳහා දවටන ලෙස පහසුවෙන් භාවිතා කළ හැක.
<legend>s, ක්ෂේත්‍ර කට්ටල වැනි, වර්ගවල ශීර්ෂයක් ලෙස පෙන්වීමට නැවත සකස් කර ඇත.
<label>s display: inline-blockයෙදීමට ඉඩ දෙන ලෙස සකසා marginඇත.
<input>s, <select>s, <textarea>s, සහ <button>s බොහෝ දුරට සාමාන්‍යකරණය මගින් ආමන්ත්‍රණය කරනු ලැබේ, නමුත් නැවත පණගැන්වීම ඔවුන්ගේ marginසහ කට්ටල line-height: inheritද ඉවත් කරයි.
<textarea>තිරස් ප්‍රමාණය වෙනස් කිරීම බොහෝ විට පිටු සැකැස්ම "බිඳ" කරන බැවින් s සිරස් අතට පමණක් ප්‍රතිප්‍රමාණ කළ හැකි ලෙස වෙනස් කර ඇත.
<button>s සහ <input>බොත්තම් මූලද්‍රව්‍ය ඇති cursor: pointerවිට :not(:disabled).

මෙම වෙනස්කම් සහ තවත් බොහෝ දේ පහත දැක්වේ.

උදාහරණ පුරාවෘත්තය

ආදර්ශ ආදානය

උදාහරණයක් තෝරන්න

මෙම සලකුණු කොටුව සලකුණු කරන්න

විකල්පය එක මේකයි ඒකයි විකල්ප දෙක යනු මෙම විසිතුරු ආකෘති පාලනයන් එතීම නිරූපණය කිරීමට ඉතා දිගු වන වෙනත් දෙයකි. තුන්වන විකල්පය අබල කර ඇත

උදාහරණ textarea

උදාහරණ දිනය

උදාහරණ කාලය

උදාහරණ ප්රතිදානය 100

බොත්තම් මත පොයින්ටර්

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>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

සම්පූර්ණ නම
[email protected]

බ්ලොක්කෝට්

බ්ලොක්කෝට් වල පෙරනිමිය marginවන්නේ 1em 40px, එබැවින් අපි එය 0 0 1remවෙනත් මූලද්‍රව්‍ය සමඟ වඩාත් අනුකූල දෙයක් සඳහා යළි පිහිටුවන්නෙමු.

බ්ලොක්කෝට් මූලද්‍රව්‍යයක අඩංගු සුප්‍රසිද්ධ උපුටා දැක්වීමකි.

මූලාශ්‍ර මාතෘකාවේ ප්‍රසිද්ධ කෙනෙක්

පේළිගත මූලද්රව්ය

<abbr>මූලද්‍රව්‍යයට ඡේද පෙළ අතර කැපී පෙනෙන ලෙස මූලික මෝස්තරය ලැබේ .

Nulla attr vitae elit libero, a pharetra augu.

සාරාංශය

සාරාංශයේ පෙරනිමිය cursorවන්නේ , එම මූලද්‍රව්‍යය මත ක්ලික් කිරීමෙන් අන්තර්ක්‍රියා කළ හැකි බව ප්‍රකාශ textකිරීමට අපි එය යළි පිහිටුවන්නෙමු .pointer

සමහරක් තොරතුරු

විස්තර ගැන වැඩි විස්තර.

ඊටත් වඩා විස්තර

මෙන්න විස්තර ගැන ඊටත් වඩා විස්තර.

HTML5 `[hidden]`ගුණාංගය

HTML5 නව ගෝලීය ගුණාංගයක්[hidden]display: none එක් කරයි, එය පෙරනිමියෙන් හැඩගස්වා ඇත . PureCSS වෙතින් අදහසක් ණයට ගනිමින්, එය අහම්බෙන් යටපත් [hidden] { display: none !important; }වීම වැළැක්වීමට උදවු කිරීම මගින් අපි මෙම පෙරනිමිය වැඩිදියුණු කරමු . IE10 විසින් ස්වදේශිකව සහාය නොදක්වන අතර, අපගේ CSS හි පැහැදිලි ප්‍රකාශය එම ගැටලුව මඟ හැරේ display.[hidden]

<input type="text" hidden>

jQuery නොගැලපීම

[hidden]$(...).hide()jQuery සහ $(...).show()ක්‍රම සමඟ නොගැළපේ . එබැවින්, මූලද්රව්ය [hidden]කළමනාකරණය කිරීම සඳහා අපි දැනට විශේෂයෙන් වෙනත් තාක්ෂණික ක්රම අනුමත නොකරමු .display

මූලද්‍රව්‍යයක දෘශ්‍යතාව ටොගල් කිරීමට, එනම් එය displayවෙනස් කර නැති බවත්, එම මූලද්‍රව්‍යය තවමත් ලේඛනයේ ප්‍රවාහයට බලපෑම් කළ හැකි බවත්, ඒ වෙනුවට පන්තිය භාවිතා කරන්න.invisible .