නැවත ආරම්භ කරන්න
නැවත පණගැන්වීම, තනි ගොනුවක් තුළ මූලද්රව්ය-විශේෂිත CSS වෙනස්කම් එකතුවක්, ගොඩනගා ගැනීමට අලංකාර, ස්ථාවර සහ සරල මූලික පදනමක් සැපයීමට kickstart Bootstrap.
ප්රවේශය
නැවත පණගැන්වීම සාමාන්යකරණය මත ගොඩනැගෙයි, මූලද්රව්ය තේරීම් පමණක් භාවිතා කරමින් බොහෝ HTML මූලද්රව්ය තරමක් මතිමතාන්තර විලාසයන් සපයයි. අමතර හැඩගැන්වීම සිදු කරනු ලබන්නේ පන්ති සමඟ පමණි. උදාහරණයක් ලෙස, අපි <table>
සරල මූලික පදනමක් සඳහා සමහර මෝස්තර නැවත ආරම්භ කර පසුව .table
, .table-bordered
, සහ තවත් දේ සපයන්නෙමු.
නැවත පණගැන්වීමේදී ප්රතික්ෂේප කළ යුතු දේ තෝරා ගැනීමට අපගේ මාර්ගෝපදේශ සහ හේතු මෙන්න:
- පරිමාණය කළ හැකි සංරචක පරතරය සඳහා
rem
s වෙනුවට s භාවිතා කිරීමට සමහර බ්රවුසර පෙරනිමි අගයන් යාවත්කාලීන කරන්න .em
- වළකින්න
margin-top
. අනපේක්ෂිත ප්රතිඵල ලබා දෙමින් සිරස් මායිම් කඩා වැටිය හැක. කෙසේ වෙතත් වඩාත් වැදගත් වන්නේ තනි දිශාවක්margin
සරල මානසික ආකෘතියකි. - උපාංග ප්රමාණයන් හරහා පහසුවෙන් පරිමාණය කිරීම සඳහා, බ්ලොක් මූලද්රව්ය
rem
s සඳහාmargin
s භාවිත කළ යුතුය. - හැකි සෑම විටම
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-top
rem
margin-bottom
.උදාහරණ-මූලද්රව්යය { ආන්තිකය-පහළ: 1rem; }
මේස
වගු විලාසයට මඳක් සකසනු ලැබේ <caption>
, මායිම් කඩා වැටේ, සහ text-align
පුරාවට ස්ථාවර බව සහතික කරයි. මායිම්, පිරවුම්, සහ තවත් දේ සඳහා අමතර වෙනස්කම් පන්තිය සමඟ පැමිණේ.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; }
වීම වැළැක්වීමට උදවු කිරීම මගින් අපි මෙම පෙරනිමිය වැඩිදියුණු කරමු . IE10 විසින් ස්වදේශිකව සහාය නොදක්වන අතර, අපගේ CSS හි පැහැදිලි ප්රකාශය එම ගැටලුව මඟ හැරේ display
.[hidden]
<input type="text" hidden>
jQuery නොගැලපීම
[hidden]
$(...).hide()
jQuery සහ $(...).show()
ක්රම සමඟ නොගැළපේ . එබැවින්, මූලද්රව්ය [hidden]
කළමනාකරණය කිරීම සඳහා අපි දැනට විශේෂයෙන් වෙනත් තාක්ෂණික ක්රම අනුමත නොකරමු .display
මූලද්රව්යයක දෘශ්යතාව ටොගල් කිරීමට, එනම් එය display
වෙනස් කර නැති බවත්, එම මූලද්රව්යය තවමත් ලේඛනයේ ප්රවාහයට බලපෑම් කළ හැකි බවත්, ඒ වෙනුවට පන්තිය භාවිතා කරන්න.invisible
.