Source

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

නැවත පණගැන්වීම, තනි ගොනුවක මූලද්‍රව්‍ය-විශේෂිත 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, 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. බූට්ස්ට්‍රැප් ශීර්ෂය
`<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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa සහ integer molestie lorem
pretium nisl aliquet හි පහසුකම
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 nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa සහ integer molestie lorem
pretium nisl aliquet හි පහසුකම
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet nunc
Eget porttitor lorem

සරල මෝස්තරයක්, පැහැදිලි ධුරාවලියක් සහ වඩා හොඳ පරතරයක් සඳහා, විස්තර ලැයිස්තු යාවත්කාලීන කර ඇත margin. <dd>වෙත නැවත සකස් 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 at eget metus.
Malesuada porta: Etiam porta sem malesuada Magna mollis euismod.

පෙර සැකසූ පෙළ

මූලද්‍රව්‍යය එහි ඉවත් කිරීමට සහ ඒ සඳහා ඒකක භාවිතා <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

වෙනත් මූලද්රව්ය

ලිපිනය

සිට <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වෙනත් මූලද්‍රව්‍ය සමඟ වඩාත් අනුකූල දෙයක් සඳහා යළි පිහිටුවන්නෙමු.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.

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

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

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