මුද්රණ ශිල්පය
ගෝලීය සැකසුම්, මාතෘකා, ශරීර පෙළ, ලැයිස්තු, සහ තවත් දේ ඇතුළුව, Bootstrap යතුරු ලියනය සඳහා ලේඛනගත කිරීම සහ උදාහරණ.
ගෝලීය සැකසුම්
Bootstrap මූලික ගෝලීය සංදර්ශකය, මුද්රණ ශිල්පය සහ සබැඳි විලාසයන් සකසයි. වැඩි පාලනයක් අවශ්ය වූ විට, පාඨමය උපයෝගිතා පන්ති බලන්න .
- එක් එක් OS සහ උපාංගය සඳහා හොඳම දේ තෝරන දේශීය අකුරු තොගයක් භාවිතා කරන්න .
font-family
- වඩාත් ඇතුළත් සහ ප්රවේශ විය හැකි ආකාරයේ පරිමාණයක් සඳහා, අපි බ්රවුසර පෙරනිමි මූල
font-size
(සාමාන්යයෙන් 16px) උපකල්පනය කරමු, එවිට අමුත්තන්ට අවශ්ය පරිදි ඔවුන්ගේ බ්රවුසර පෙරනිමි අභිරුචිකරණය කළ හැකිය. - සඳහා යොදන අපගේ මුද්රණ පදනම ලෙස
$font-family-base
,$font-size-base
, සහ ගුණාංග භාවිතා කරන්න .$line-height-base
<body>
- හරහා ගෝලීය සබැඳි වර්ණය සකසා
$link-color
සබැඳි යටි ඉරි මත පමණක් යොදන්න:hover
. - ( පෙරනිමියෙන්) මත
$body-bg
පිහිටුවීමට භාවිතා කරන්න .background-color
<body>
#fff
මෙම විලාසයන් තුළ සොයා ගත හැකි _reboot.scss
අතර ගෝලීය විචල්යයන් අර්ථ දක්වා ඇත _variables.scss
. සැකසීමට වග බලා $font-size-base
ගන්න rem
.
මාතෘකා
<h1>
හරහා සියලුම HTML මාතෘකා <h6>
තිබේ.
ශීර්ෂය | උදාහරණයක් |
---|---|
|
h1. බූට්ස්ට්රැප් ශීර්ෂය |
|
h2. බූට්ස්ට්රැප් ශීර්ෂය |
|
h3. බූට්ස්ට්රැප් ශීර්ෂය |
|
h4. බූට්ස්ට්රැප් ශීර්ෂය |
|
h5. බූට්ස්ට්රැප් ශීර්ෂය |
|
h6. බූට්ස්ට්රැප් ශීර්ෂය |
.h1
.h6
ඔබට ශීර්ෂයක අකුරු මෝස්තරයට ගැළපීමට අවශ්ය නමුත් ආශ්රිත HTML මූලද්රව්යය භාවිතා කළ නොහැකි විට පන්ති හරහා ද ඇත.
h1. බූට්ස්ට්රැප් ශීර්ෂය
h2. බූට්ස්ට්රැප් ශීර්ෂය
h3. බූට්ස්ට්රැප් ශීර්ෂය
h4. බූට්ස්ට්රැප් ශීර්ෂය
h5. බූට්ස්ට්රැප් ශීර්ෂය
h6. බූට්ස්ට්රැප් ශීර්ෂය
මාතෘකා අභිරුචිකරණය කිරීම
Bootstrap 3 වෙතින් කුඩා ද්විතියික ශීර්ෂ පාඨය ප්රතිනිර්මාණය කිරීමට ඇතුළත් කර ඇති උපයෝගිතා පන්ති භාවිතා කරන්න.
වියැකී ගිය ද්විතියික පෙළ සමඟ විසිතුරු සංදර්ශක ශීර්ෂය
දර්ශන ශීර්ෂ
සාම්ප්රදායික ශීර්ෂ මූලද්රව්ය නිර්මාණය කර ඇත්තේ ඔබේ පිටු අන්තර්ගතයේ මස්වල හොඳින් ක්රියා කිරීමටය. ඔබට කැපී පෙනෙන ලෙස ශීර්ෂයක් අවශ්ය වූ විට, දර්ශන ශීර්ෂයක් භාවිතා කිරීම සලකා බලන්න - විශාල, තරමක් වැඩි මතධාරී ශීර්ෂ විලාසයක්. මෙම ශීර්ෂයන් පෙරනිමියෙන් ප්රතිචාර නොදක්වන බව මතක තබා ගන්න, නමුත් ප්රතිචාරාත්මක අකුරු ප්රමාණයන් සක්රීය කිරීමට හැකි වේ.
සංදර්ශකය 1 |
සංදර්ශකය 2 |
සංදර්ශකය 3 |
සංදර්ශකය 4 |
නායකත්වය
එකතු කිරීමෙන් ඡේදයක් කැපී පෙනෙන ලෙස සකස් කරන්න .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
පේළිගත පෙළ අංග
පොදු පේළිගත HTML5 මූලද්රව්ය සඳහා හැඩගැන්වීම.
ඔබට සලකුණු ටැගය භාවිතා කළ හැකියඉස්මතු කරන්නපෙළ.
මෙම පෙළ පේළිය මකා දැමූ පෙළ ලෙස සැලකීමට අදහස් කෙරේ.
මෙම පෙළ පේළිය තවදුරටත් නිවැරදි නොවන ලෙස සැලකීමට අදහස් කෙරේ.
මෙම පෙළ පේළිය ලේඛනයට එකතු කිරීමක් ලෙස සැලකීමට අදහස් කෙරේ.
මෙම පෙළ රේඛාව යටින් ඉරි ඇඳ ඇති පරිදි විදැහුම් කරනු ඇත
මෙම පෙළ පේළිය සියුම් මුද්රණයක් ලෙස සැලකීමට අදහස් කෙරේ.
මෙම පේළිය තද අකුරු ලෙස විදහා දක්වයි.
මෙම පේළිය ඇල අකුරු ලෙස විදහා දක්වයි.
.mark
සහ ටැග් ගෙන එන අනවශ්ය අර්ථකථන ඇඟවීම් වලක්වා ගන්නා අතරම .small
එම විලාසයන් යෙදීමට පන්ති ද ඇත .<mark>
<small>
ඉහත පෙන්වා නැති අතර, HTML5 භාවිතා කිරීමට නිදහස් <b>
වන්න <i>
. වැඩි වශයෙන් කටහඬ, තාක්ෂණික පද ආදිය සඳහා වන <b>
අතර අමතර වැදගත්කමක් නොදක්වා වචන හෝ වාක්ය ඛණ්ඩ ඉස්මතු කිරීමට අදහස් කෙරේ .<i>
පෙළ උපයෝගිතා
අපගේ පාඨ උපයෝගිතා සහ වර්ණ උපයෝගිතා සමඟ පෙළ පෙළගැස්ම, පරිවර්තනය, විලාසය, බර සහ වර්ණය වෙනස් කරන්න .
කෙටි යෙදුම්
සංක්ෂිප්ත සහ කෙටි යෙදුම් සඳහා HTML හි <abbr>
මූලද්රව්යයේ ශෛලීගත ක්රියාවට නැංවීම, ප්රසාරණය වූ අනුවාදය hover මත පෙන්වීමට. කෙටි යෙදුම්වල පෙරනිමි යටි ඉරක් ඇති අතර, අමතර සන්දර්භයක් ලබා දීමට සහ සහායක තාක්ෂණයන් භාවිතා කරන්නන්ට උපකාර කර්සරයක් ලබා ගනී.
.initialism
තරමක් කුඩා අකුරු ප්රමාණය සඳහා කෙටි යෙදුමකට එක් කරන්න .
atr
HTML
අවහිර කිරීම්
ඔබේ ලේඛනය තුළ වෙනත් මූලාශ්රයකින් අන්තර්ගත කොටස් උපුටා දැක්වීම සඳහා. උපුටා ගැනීම ලෙස <blockquote class="blockquote">
ඕනෑම HTML වටා ඔතා .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
මූලාශ්රයක් නම් කිරීම
<footer class="blockquote-footer">
මූලාශ්රය හඳුනා ගැනීම සඳහා එක් කරන්න . මූලාශ්ර කාර්යයේ නම ඔතා <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
පෙළගැස්වීම
ඔබගේ වාරණ උද්ධෘතයේ පෙළගැස්ම වෙනස් කිරීමට අවශ්ය පරිදි පෙළ උපයෝගිතා භාවිතා කරන්න.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
ලැයිස්තු
මෝස්තර නොකළ
ලැයිස්තු අයිතමවල පෙරනිමි list-style
සහ වම් මායිම ඉවත් කරන්න (ක්ෂණික දරුවන් පමණි). මෙය අදාළ වන්නේ ක්ෂණික ළමා ලැයිස්තු අයිතම සඳහා පමණි , එනම් ඔබට ඕනෑම කැදලි ලැයිස්තු සඳහාද පන්තිය එක් කිරීමට අවශ්ය වනු ඇත.
- 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
පෙළට
ලැයිස්තුවේ උණ්ඩ ඉවත් කර margin
පන්ති දෙකක එකතුවක් සමඟ ආලෝකය යොදන්න, .list-inline
සහ .list-inline-item
.
- ලෝරම් ඉප්සම්
- Phasellus iaculis
- Nulla volutpat
විස්තර ලැයිස්තු පෙළගැස්ම
අපගේ ජාල පද්ධතියේ පූර්ව නිර්වචනය කළ පන්ති (හෝ අර්ථකථන මික්සින්) භාවිතයෙන් නියමයන් සහ විස්තර තිරස් අතට පෙළගස්වන්න. දිගු කොන්දේසි සඳහා, ඔබට .text-truncate
ඉලිප්සිස් සමඟ පෙළ කප්පාදු කිරීමට පන්තියක් එකතු කළ හැකිය.
- විස්තර ලැයිස්තු
- නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada Magna mollis euismod.
- කප්පාදු කරන ලද පදය කපා ඇත
- Fusce dapibus, Telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa just sit amet risus.
- කූඩු කිරීම
-
- කැදලි නිර්වචන ලැයිස්තුව
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
ප්රතිචාර දක්වන අකුරු ප්රමාණය
Bootstrap v4.3 ප්රතිචාරාත්මක අකුරු ප්රමාණ සක්රීය කිරීමේ විකල්පය සමඟ නැව්ගත කරයි, උපාංගය සහ දර්ශන ප්රමාණයන් හරහා පෙළ වඩාත් ස්වභාවිකව පරිමාණය කිරීමට ඉඩ සලසයි. Sass විචල්යය Bootstrap වෙත වෙනස් කිරීමෙන් සහ නැවත සම්පාදනය කිරීමෙන් RFS සක්රීය කළ හැක .$enable-responsive-font-sizes
true
RFS සඳහා සහය දැක්වීම සඳහා , අපි අපගේ සාමාන්ය font-size
ගුණාංග ප්රතිස්ථාපනය කිරීමට Sass mixin භාවිතා කරමු. ප්රතිචාරාත්මක පරිමාණ හැසිරීම් සක්රීය කිරීම සඳහා ප්රතිචාරාත්මක අකුරු ප්රමාණයන් calc()
මිශ්රණයක් සහ දර්ශන ඒකක සමඟ ශ්රිතවලට සම්පාදනය කෙරේ. RFSrem
සහ එහි වින්යාසය පිළිබඳ වැඩි විස්තර එහි GitHub ගබඩාවෙන් සොයාගත හැකිය .