ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

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

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

මෙම පිටුවේ

ප්රවේශය

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

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

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

CSS විචල්යයන්

v5.1.1 හි එකතු කරන ලදී

v5.1.1 සමඟින්, අපි අපගේ @importසියලුම CSS මිටි හරහා අපට අවශ්‍ය s ප්‍රමිතිගත කළෙමු (ඇතුළු bootstrap.css, bootstrap-reboot.css, සහ bootstrap-grid.cssඇතුළත් කිරීමට _root.scss. මෙමඟින් :rootඑම බණ්ඩලයේ ඒවායින් කීයක් භාවිතා කළත්, සියලු මිටි සඳහා මට්ටමේ CSS විචල්‍ය එක් කරයි. අවසානයේ Bootstrap 5 දිගටම පවතිනු ඇත. කාලයත් සමඟ එකතු කරන ලද තවත් CSS විචල්‍යයන් බලන්න.

පිටු පෙරනිමි

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

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

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

Bootstrap සෑම උපාංගයකම සහ OS එකකම ප්‍රශස්ත පෙළ විදැහුම්කරණය සඳහා “ස්වදේශීය අකුරු තොගයක්” හෝ “පද්ධති අකුරු තොගයක්” භාවිතා කරයි. මෙම පද්ධති අකුරු විශේෂයෙන් නිර්මාණය කර ඇත්තේ වර්තමාන උපාංග මනසේ තබාගෙන, තිර මත වැඩි දියුණු කළ විදැහුම්කරණය, විචල්‍ය අකුරු සහය සහ තවත් බොහෝ දේ සමඟින්. මෙම Smashing සඟරා ලිපියේ ස්වදේශීය අකුරු තොග ගැන වැඩිදුර කියවන්න .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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

CSS විචල්යයන්

Bootstrap 5 පරිණත වන විට, සෑම විටම Sass නැවත සම්පාදනය කිරීමේ අවශ්‍යතාවයකින් තොරව වඩාත් තත්‍ය කාලීන අභිරුචිකරණයක් සැපයීමේ මාධ්‍යයක් ලෙස CSS විචල්‍යයන් සමඟ වැඩි වැඩියෙන් මෝස්තර ගොඩනගනු ඇත . අපගේ ප්‍රවේශය වන්නේ අපගේ මූලාශ්‍ර Sass විචල්‍යයන් ගෙන ඒවා CSS විචල්‍ය බවට පරිවර්තනය කිරීමයි. එමගින් ඔබ CSS විචල්‍ය භාවිතා නොකළත් Sass හි සියලු බලය ඔබ සතුව ඇත. මෙය තවමත් සිදුවෙමින් පවතින අතර සම්පූර්ණයෙන්ම ක්‍රියාත්මක කිරීමට කාලය ගතවනු ඇත.

උදාහරණයක් ලෙස, පොදු මෝස්තර :rootසඳහා මෙම CSS විචල්‍යයන් සලකා බලන්න:<body>

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

ප්‍රායෝගිකව, එම විචල්‍යයන් නැවත පණගැන්වීමේදී මෙලෙස යොදනු ලැබේ:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

ඔබ කැමති ආකාරයට තත්‍ය කාලීන අභිරුචිකරණයන් කිරීමට ඔබට ඉඩ සලසයි:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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

සියලුම ශීර්ෂ මූලද්‍රව්‍ය-උදා, <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. අපි සක්‍රිය සහ මූලද්‍රව්‍ය padding-leftද යළි පිහිටුවමු.<ul><ol>

  • සියලුම ලැයිස්තු ඒවායේ ඉහළ මායිම ඉවත් කර ඇත
  • ඔවුන්ගේ පහළ ආන්තිකය සාමාන්‍යකරණය විය
  • කැදලි ලැයිස්තුවලට පහළ මායිමක් නැත
    • මේ ආකාරයෙන් ඔවුන් වඩාත් ඒකාකාර පෙනුමක් ඇත
    • විශේෂයෙන් වැඩි ලැයිස්තු අයිතම අනුගමනය කරන විට
  • වම් පැඩිං එකද නැවත සකස් කර ඇත
  1. මෙන්න ඇණවුම් ලැයිස්තුවක්
  2. ලැයිස්තු අයිතම කිහිපයක් සමඟ
  3. එය එකම සමස්ත පෙනුම ඇත
  4. කලින් ඇණවුම් නොකළ ලැයිස්තුව ලෙස

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

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

පේළිගත කේතය

සමඟින් පේළිගත කේත කොටස් ඔතා <code>. HTML කෝණ වරහන් වලින් ගැලවීමට වග බලා ගන්න.

උදාහරණයක් ලෙස, <section>පේළිගත ලෙස ඔතා තිබිය යුතුය. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

කේත අවහිර කිරීම්

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

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

විචල්යයන්

විචල්‍යයන් දැක්වීම සඳහා <var>ටැගය භාවිතා කරන්න.

y = m x + b 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

පරිශීලක ආදානය

<kbd>සාමාන්‍යයෙන් යතුරුපුවරුව හරහා ඇතුලත් කරන ආදානය දැක්වීමට භාවිතා කරන්න .

නාමාවලි මාරු කිරීමට, නාමාවලියේ cdනම ටයිප් කරන්න.
සැකසීම් සංස්කරණය කිරීමට, ඔබන්න ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

නියැදි ප්රතිදානය

වැඩසටහනකින් නියැදි ප්‍රතිදානය දැක්වීම සඳහා <samp>ටැගය භාවිතා කරන්න.

මෙම පාඨය පරිගණක වැඩසටහනකින් නියැදි ප්‍රතිදානයක් ලෙස සැලකීමට අදහස් කෙරේ. 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

මේස

වගු විලාසයට මඳක් සකසනු ලැබේ <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).

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

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

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

HTML සංක්ෂිප්ත අංගය .

සාරාංශය

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

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

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

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

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

HTML5 [hidden]ගුණාංගය

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

<input type="text" hidden>
jQuery නොගැලපීම

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

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