නැවත ආරම්භ කරන්න
නැවත පණගැන්වීම, තනි ගොනුවක මූලද්රව්ය-විශේෂිත CSS වෙනස්කම් එකතුවක්, ගොඩනැංවීම සඳහා අලංකාර, ස්ථාවර සහ සරල මූලික පදනමක් සැපයීමට kickstart Bootstrap.
ප්රවේශය
නැවත පණගැන්වීම සාමාන්යකරණය මත ගොඩනැගෙයි, මූලද්රව්ය තේරීම් පමණක් භාවිතා කරමින් බොහෝ HTML මූලද්රව්ය තරමක් මතිමතාන්තර විලාසයන් සපයයි. අමතර හැඩගැන්වීම සිදු කරනු ලබන්නේ පන්ති සමඟ පමණි. උදාහරණයක් ලෙස, අපි <table>
සරල මූලික පදනමක් සඳහා සමහර මෝස්තර නැවත ආරම්භ කර පසුව .table
, .table-bordered
, සහ තවත් දේ සපයන්නෙමු.
නැවත පණගැන්වීමේදී ප්රතික්ෂේප කළ යුතු දේ තෝරා ගැනීමට අපගේ මාර්ගෝපදේශ සහ හේතු මෙන්න:
- පරිමාණය කළ හැකි සංරචක පරතරය සඳහා
rem
s වෙනුවට s භාවිතා කිරීමට සමහර බ්රවුසර පෙරනිමි අගයන් යාවත්කාලීන කරන්න .em
- වළකින්න
margin-top
. අනපේක්ෂිත ප්රතිඵල ලබා දෙමින් සිරස් මායිම් කඩා වැටිය හැක. කෙසේ වෙතත් වඩාත් වැදගත් වන්නේ තනි දිශාවක්margin
සරල මානසික ආකෘතියකි. - උපාංග ප්රමාණයන් හරහා පහසුවෙන් පරිමාණය කිරීම සඳහා, බ්ලොක් මූලද්රව්ය
rem
s සඳහාmargin
s භාවිත කළ යුතුය. - හැකි සෑම විටම
font
භාවිතා කරමින් - ආශ්රිත දේපල ප්රකාශ අවම වශයෙන් තබා ගන්න .inherit
CSS විචල්යයන්
v5.2.0 හි එකතු කරන ලදීv5.1.1 සමඟින්, අපි අපගේ @import
සියලුම CSS මිටි ( bootstrap.css
, bootstrap-reboot.css
, සහ ඇතුළුව bootstrap-grid.css
) හරහා අපට අවශ්ය s ඇතුළත් කිරීමට ප්රමිතිගත කළෙමු _root.scss
. මෙමගින් :root
එම බණ්ඩලයේ කොපමණ ප්රමාණයක් භාවිතා කළත්, සියලුම මිටි වලට මට්ටමේ CSS විචල්ය එක් කරයි. අවසානයේ Bootstrap 5 සෑම විටම Sass නැවත සම්පාදනය කිරීමේ අවශ්යතාවයකින් තොරව වඩාත් තත්ය කාලීන අභිරුචිකරණයක් සැපයීම සඳහා කාලයත් සමඟ එකතු කරන ලද CSS විචල්යයන් දිගටම දකිනු ඇත. අපගේ ප්රවේශය වන්නේ අපගේ මූලාශ්ර Sass විචල්යයන් ගෙන ඒවා CSS විචල්ය බවට පරිවර්තනය කිරීමයි. එමගින් ඔබ CSS විචල්ය භාවිතා නොකළත් Sass හි සියලු බලය ඔබ සතුව ඇත. මෙය තවමත් සිදුවෙමින් පවතින අතර සම්පූර්ණයෙන්ම ක්රියාත්මක කිරීමට කාලය ගතවනු ඇත.
උදාහරණයක් ලෙස, පොදු මෝස්තර :root
සඳහා මෙම CSS විචල්යයන් සලකා බලන්න:<body>
@if $font-size-root != null {
--#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{$font-family-base};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-bg: #{$body-bg};
ප්රායෝගිකව, එම විචල්යයන් නැවත පණගැන්වීමේදී මෙලෙස යොදනු ලැබේ:
body {
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
@include font-size(var(--#{$prefix}body-font-size));
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}body-color);
text-align: var(--#{$prefix}body-text-align);
background-color: var(--#{$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>
පිටු පෙරනිමි
වඩා හොඳ පිටු පුරා පෙරනිමි සැපයීමට <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,
// older macOS and iOS
"Helvetica Neue"
// Linux
"Noto Sans",
"Liberation Sans",
// Basic web fallback
Arial,
// 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. බූට්ස්ට්රැප් ශීර්ෂය |
තිරස් නීති
මූලද්රව්යය <hr>
සරල කර ඇත. බ්රවුසර පෙරනිමි වලට සමානව, <hr>
s මගින් හැඩගස්වා border-top
ඇත, පෙරනිමියක් ඇත , සහ මව්පියන් හරහා සකසන විට ඇතුළුව ඔවුන්ගේ හරහා opacity: .25
ස්වයංක්රීයව උරුම වේ. ඒවා පෙළ, මායිම් සහ පාරාන්ධතා උපයෝගිතා සමඟ වෙනස් කළ හැක.border-color
color
color
<hr>
<div class="text-success">
<hr>
</div>
<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">
ලැයිස්තු
සියලුම ලැයිස්තු- <ul>
, <ol>
, සහ <dl>
- margin-top
ඉවත් කර ඇත සහ a margin-bottom: 1rem
. කැදලි ලැයිස්තු වල නැත margin-bottom
. අපි සක්රිය සහ මූලද්රව්ය padding-left
ද යළි පිහිටුවමු.<ul>
<ol>
- සියලුම ලැයිස්තු ඒවායේ ඉහළ මායිම ඉවත් කර ඇත
- ඔවුන්ගේ පහළ ආන්තිකය සාමාන්යකරණය විය
- කැදලි ලැයිස්තුවලට පහළ මායිමක් නැත
- මේ ආකාරයෙන් ඔවුන් වඩාත් ඒකාකාර පෙනුමක් ඇත
- විශේෂයෙන් වැඩි ලැයිස්තු අයිතම අනුගමනය කරන විට
- වම් පැඩිං එකද නැවත සකස් කර ඇත
- මෙන්න ඇණවුම් ලැයිස්තුවක්
- ලැයිස්තු අයිතම කිහිපයක් සමඟ
- එය එකම සමස්ත පෙනුම ඇත
- කලින් ඇණවුම් නොකළ ලැයිස්තුව ලෙස
සරල මෝස්තරයක්, පැහැදිලි ධුරාවලියක් සහ වඩා හොඳ පරතරයක් සඳහා, විස්තර ලැයිස්තු යාවත්කාලීන කර ඇත margin
. <dd>
වෙත නැවත සකස් margin-left
කර 0
එකතු කරන්න margin-bottom: .5rem
. <dt>
s තද කර ඇත .
- විස්තර ලැයිස්තු
- නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.
- වාරය
- පදය සඳහා අර්ථ දැක්වීම.
- එකම පදය සඳහා දෙවන අර්ථ දැක්වීම.
- තවත් පදයක්
- මෙම වෙනත් පදය සඳහා අර්ථ දැක්වීම.
පේළිගත කේතය
සමඟින් පේළිගත කේත කොටස් ඔතා <code>
. HTML කෝණ වරහන් වලින් ගැලවීමට වග බලා ගන්න.
<section>
පේළිගත ලෙස ඔතා තිබිය යුතුය.
For example, <code><section></code> should be wrapped as inline.
කේත අවහිර කිරීම්
<pre>
කේත රේඛා කිහිපයක් සඳහා s භාවිතා කරන්න . නැවත වරක්, නිසි විදැහුම්කරණය සඳහා කේතයේ ඇති ඕනෑම කෝණ වරහනකින් ගැලවීමට වග බලා ගන්න. මූලද්රව්යය එහි ඉවත් කිරීමට සහ ඒ සඳහා ඒකක භාවිතා <pre>
කිරීමට යළි පිහිටුවනු ලැබේ .margin-top
rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
විචල්යයන්
විචල්යයන් දැක්වීම සඳහා <var>
ටැගය භාවිතා කරන්න.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
පරිශීලක ආදානය
<kbd>
සාමාන්යයෙන් යතුරුපුවරුව හරහා ඇතුලත් කරන ආදානය දැක්වීමට භාවිතා කරන්න .
සැකසීම් සංස්කරණය කිරීමට, ඔබන්න 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
.
වගු ශීර්ෂය | වගු ශීර්ෂය | වගු ශීර්ෂය | වගු ශීර්ෂය |
---|---|---|---|
මේස කොටුව | මේස කොටුව | මේස කොටුව | මේස කොටුව |
මේස කොටුව | මේස කොටුව | මේස කොටුව | මේස කොටුව |
මේස කොටුව | මේස කොටුව | මේස කොටුව | මේස කොටුව |
<table>
<caption>
This is an example table, and this is its caption to describe the contents.
</caption>
<thead>
<tr>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
ආකෘති පත්ර
සරල මූලික මෝස්තර සඳහා විවිධ ආකෘති අංග නැවත ආරම්භ කර ඇත. වඩාත්ම කැපී පෙනෙන වෙනස්කම් කිහිපයක් මෙන්න:
<fieldset>
s හි මායිම්, පිරවුම් හෝ ආන්තිකය නොමැති බැවින් ඒවා තනි යෙදවුම් හෝ යෙදවුම් කණ්ඩායම් සඳහා දවටන ලෙස පහසුවෙන් භාවිතා කළ හැක.<legend>
s, ක්ෂේත්ර කට්ටල වැනි, වර්ගවල ශීර්ෂයක් ලෙස පෙන්වීමට නැවත සකස් කර ඇත.<label>
sdisplay: inline-block
යෙදීමට ඉඩ දෙන ලෙස සකසාmargin
ඇත.<input>
s,<select>
s,<textarea>
s, සහ<button>
s බොහෝ දුරට සාමාන්යකරණය මගින් ආමන්ත්රණය කරනු ලැබේ, නමුත් නැවත පණගැන්වීම ඔවුන්ගේ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]
බ්ලොක්කෝට්
බ්ලොක්කෝට් වල පෙරනිමිය margin
වන්නේ 1em 40px
, එබැවින් අපි එය 0 0 1rem
වෙනත් මූලද්රව්ය සමඟ වඩාත් අනුකූල දෙයක් සඳහා යළි පිහිටුවන්නෙමු.
බ්ලොක්කෝට් මූලද්රව්යයක අඩංගු සුප්රසිද්ධ උපුටා දැක්වීමකි.
මූලාශ්ර මාතෘකාවේ ප්රසිද්ධ කෙනෙක්
පේළිගත මූලද්රව්ය
<abbr>
මූලද්රව්යයට ඡේද පෙළ අතර කැපී පෙනෙන ලෙස මූලික මෝස්තරය ලැබේ .
සාරාංශය
සාරාංශයේ පෙරනිමිය 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
.