මූලික CSS

පලංචිය මත, මූලික HTML මූලද්‍රව්‍ය නැවුම්, ස්ථාවර පෙනුමක් සහ හැඟීමක් ලබා දීම සඳහා විස්තීරණ පන්ති සමඟ හැඩගස්වා වැඩි දියුණු කර ඇත.

ශීර්ෂ සහ ශරීර පිටපත

මුද්‍රණ පරිමාණය

සම්පූර්ණ මුද්‍රණ ජාලකය පදනම් වී ඇත්තේ අපගේ variables.less ගොනුවේ අඩු විචල්‍ය දෙකක් මත ය: @baseFontSizeසහ @baseLineHeight. පළමුවැන්න පුරාවට භාවිතා කරන මූලික අකුරු ප්‍රමාණය වන අතර දෙවැන්න මූලික රේඛා-උස වේ.

අපගේ සියලු වර්ගවල මායිම්, පිරවුම් සහ රේඛා-උස සහ තවත් බොහෝ දේ නිර්මාණය කිරීමට අපි එම විචල්‍යයන් සහ සමහර ගණිතය භාවිතා කරමු.

ආදර්ශ පාඨය

Nullam quis risus eget urna mollis ornare vel eu leo. සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචූරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්. Nullam id dolor id nibh ultricies Vehicula.

ඊයම් ශරීර පිටපත

එකතු කිරීමෙන් ඡේදයක් කැපී පෙනෙන ලෙස සකස් කරන්න .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. ශීර්ෂය 1

h2. ශීර්ෂය 2

h3. ශීර්ෂය 3

h4. ශීර්ෂය 4

h5. ශීර්ෂය 5
h6. ශීර්ෂය 6

අවධාරණය, ලිපිනය සහ කෙටි යෙදුම

මූලද්රව්යය භාවිතය විකල්ප
<strong> වැදගත් සමග පෙළ කොටසක් අවධාරණය කිරීම සඳහා කිසිවක් නැත
<em> ආතතිය සමඟ පෙළ කොටස අවධාරණය කිරීම සඳහා කිසිවක් නැත
<abbr> සංක්ෂිප්ත සහ කෙටි යෙදුම් දවටන ලද ප්‍රසාරණය කළ අනුවාදය hover මත පෙන්වීමට

titleපුළුල් කළ පෙළ සඳහා විකල්ප ගුණාංග ඇතුළත් කරන්න

.initialismලොකු අකුරු කෙටි යෙදුම් සඳහා පන්තිය භාවිතා කරන්න .
<address> එහි ආසන්නතම මුතුන්මිත්තන් හෝ සමස්ත කාර්ය මණ්ඩලය සඳහා සම්බන්ධතා තොරතුරු සඳහා සියලුම රේඛා අවසන් කිරීමෙන් හැඩතල ගැන්වීම ආරක්ෂා කරන්න<br>

අවධාරණය භාවිතා කිරීම

Fusce dapibus , Telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra ague.

සටහන:<b> HTML5 භාවිතා කිරීමට නිදහස් <i>වන්න, නමුත් ඔවුන්ගේ භාවිතය ටිකක් වෙනස් වී ඇත. වැඩි වශයෙන් කටහඬ, තාක්ෂණික පද ආදිය සඳහා වන <b>අතර අමතර වැදගත්කමක් නොදක්වා වචන හෝ වාක්‍ය ඛණ්ඩ ඉස්මතු කිරීමට අදහස් කෙරේ .<i>

උදාහරණ ලිපින

<address>ටැගය භාවිතා කළ හැකි ආකාරය පිළිබඳ උදාහරණ දෙකක් මෙන්න :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
සම්පූර්ණ නම
[email protected]

උදාහරණ කෙටි යෙදුම්

උපලක්ෂණයක් සහිත කෙටි යෙදුම් වලට titleසැහැල්ලු තිත් සහිත පහළ මායිමක් සහ ආධාරක කර්සරයක් ඇත. මෙමගින් පරිශීලකයින්ට hover මත යමක් පෙන්වනු ඇති බවට අමතර ඇඟවීමක් ලබා දේ.

initialismපන්තියට තරමක් කුඩා පෙළ ප්‍රමාණයක් ලබා දීමෙන් මුද්‍රණ සංහිඳියාව වැඩි කිරීමට කෙටි යෙදුමකට එක් කරන්න .

HTML යනු පෙති කපන ලද පාන් වලින් හොඳම දෙයයි.

attribute යන වචනයේ කෙටි යෙදුම attr වේ.

අවහිර කිරීම්

මූලද්රව්යය භාවිතය විකල්ප
<blockquote> වෙනත් මූලාශ්‍රයකින් අන්තර්ගතය උපුටා දැක්වීම සඳහා වාරණ මට්ටමේ මූලද්‍රව්‍යය

citeමූලාශ්‍ර URL සඳහා උපලක්ෂණ එක් කරන්න

පාවෙන විකල්ප සඳහා භාවිතා කිරීම .pull-leftසහ පන්ති.pull-right
<small> පරිශීලක-මුහුණු උපුටා දැක්වීමක් එකතු කිරීම සඳහා විකල්ප මූලාංගය, සාමාන්‍යයෙන් කෘතියේ මාතෘකාව සහිත කර්තෘ <cite>මූලාශ්‍රයේ මාතෘකාව හෝ නම වටා තබන්න

වාරණ උපුටා දැක්වීමක් ඇතුළත් කිරීමට, <blockquote>ඕනෑම HTML එකක් උද්ධෘතය ලෙස ඔතා ගන්න . සෘජු උපුටා දැක්වීම් සඳහා අපි නිර්දේශ කරමු a <p>.

ඔබේ මූලාශ්‍රය උපුටා දැක්වීමට විකල්ප අංගයක් ඇතුළත් කරන්න, එවිට ඔබට මෝස්තර කිරීමේ අරමුණු සඳහා එයට පෙර <small>em dash එකක් ලැබෙනු ඇත .&mdash;

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. පූර්ව වෙනිනාටිස් සමඟ පූර්ණ සංඛ්යා. </p>
  3. <small> ප්‍රසිද්ධ කෙනෙක් </small>
  4. </blockquote>

උදාහරණ blockquotes

පෙරනිමි වාරණ උපුටා දැක්වීම් මෙලෙස හැඩගස්වා ඇත:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. පූර්ව වෙනිනාටිස් සමඟ පූර්ණ සංඛ්යා.

බොඩි ඔෆ් වර්ක් එකේ ප්‍රසිද්ධ කෙනෙක්

ඔබගේ වාරණ උද්ධෘතය දකුණට පාවීමට, එක් කරන්න class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. පූර්ව වෙනිනාටිස් සමඟ පූර්ණ සංඛ්යා.

බොඩි ඔෆ් වර්ක් එකේ ප්‍රසිද්ධ කෙනෙක්

ලැයිස්තු

ඇණවුම් නොකළ

<ul>

  • 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

මෝස්තර නොකළ

<ul class="unstyled">

  • 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

ඇණවුම් කළා

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Massa සහ integer molestie lorem
  4. pretium nisl aliquet හි පහසුකම
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet nunc
  8. Eget porttitor lorem

විස්තර

<dl>

විස්තර ලැයිස්තු
නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.
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.

තිරස් විස්තරය

<dl class="dl-horizontal">

විස්තර ලැයිස්තු
නියමයන් නිර්වචනය කිරීම සඳහා විස්තර ලැයිස්තුවක් පරිපූර්ණයි.
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.
Felis euismod semper eget lacinia
Fusce dapibus, Telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

දැනුම්දීම! තිරස් විස්තර ලැයිස්තු වම් තීරුවේ සවි කිරීමෙහි ගැළපිය නොහැකි තරම් දිගු පද කප්පාදු කරයි text-overflow. පටු දර්ශන තොටුපලවල, ඒවා පෙරනිමි ගොඩගැසූ පිරිසැලසුම වෙත වෙනස් වනු ඇත.

පෙළට

සමඟින් පේළිගත කේත කොටස් ඔතා <code>.

  1. උදාහරණයක් ලෙස , <code> කොටස </ code > පේළිගත ලෙස ඔතා තිබිය යුතුය .

මූලික බ්ලොක්

<pre>කේත පේළි කිහිපයක් සඳහා භාවිතා කරන්න . නිසි විදැහුම්කරණය සඳහා කේතයේ ඇති ඕනෑම කෝණ වරහනකින් ගැලවීමට වග බලා ගන්න.

<p>සාම්පල පෙළ මෙතැනින්...</p>
  1. <පෙර>
  2. <p>සාම්පල පෙළ මෙතනින්...</p>
  3. </pre>

සටහන: ටැග් තුළ කේතය <pre>හැකිතාක් වමට සමීපව තබා ගැනීමට වග බලා ගන්න; එය සියලු ටැබ් ලබා දෙනු ඇත.

ඔබට විකල්ප .pre-scrollableවශයෙන් 350px උපරිම උස සකසන සහ y-අක්ෂ අනුචලන තීරුවක් සපයන පන්තිය එක් කළ හැක.

Google Prettify

එකම <pre>මූලද්‍රව්‍යය ගෙන වැඩි දියුණු කළ විදැහුම්කරණය සඳහා විකල්ප පන්ති දෙකක් එක් කරන්න.

  1. <p> නියැදි පෙළ මෙතනින්... </p>
  1. <pre class = "pretyprint
  2. linenums" >
  3. <p>සාම්පල පෙළ මෙතනින්...</p>
  4. </pre>

google-code-prettify බාගත කර භාවිතා කරන ආකාරය සඳහා readme බලන්න.

වගු සලකුණු කිරීම

ටැග් කරන්න විස්තර
<table> වගු ආකෘතියකින් දත්ත සංදර්ශනය කිරීම සඳහා එතීමේ මූලද්‍රව්‍යය
<thead> <tr>වගු තීරු ලේබල් කිරීමට වගු ශීර්ෂ පේළි ( ) සඳහා බහාලුම් මූලද්‍රව්‍යය
<tbody> <tr>මේසයේ සිරුරේ වගු පේළි () සඳහා බහාලුම් මූලද්රව්යය
<tr> තනි පේළියක දිස්වන වගු සෛල ( <td>හෝ ) කට්ටලයක් සඳහා බහාලුම් මූලද්‍රව්‍යය<th>
<td> පෙරනිමි වගු කොටුව
<th> තීරු (හෝ පේළිය, විෂය පථය සහ ස්ථානගත කිරීම මත පදනම්ව) සඳහා විශේෂ වගු කොටුවක්
a තුළ භාවිතා කළ යුතුය<thead>
<caption> වගුවේ ඇති දේ පිළිබඳ විස්තරය හෝ සාරාංශය, විශේෂයෙන් තිර කියවන්නන් සඳහා ප්‍රයෝජනවත් වේ
  1. <වගුව>
  2. <thead>
  3. <tr>
  4. <th> ... </th>
  5. <th> ... </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </ වගුව>

වගු විකල්ප

නම පන්තිය විස්තර
පෙරනිමිය කිසිවක් නැත මෝස්තර නැත, තීරු සහ පේළි පමණි
මූලික .table පේළි අතර තිරස් රේඛා පමණි
මායිම් කර ඇත .table-bordered කොන් වට කර පිටත මායිම එකතු කරයි
සීබ්රා-ඉරි .table-striped ඔත්තේ පේළි (1, 3, 5, ආදිය) වෙත ලා අළු පසුබිම් වර්ණය එක් කරයි
ඝනීභවනය .table-condensed tdසියලු සහ thමූලද්‍රව්‍ය තුළ සිරස් පිරවුම අඩකින්, 8px සිට 4px දක්වා කපා දමයි

උදාහරණ වගු

1. පෙරනිමි වගු මෝස්තර

කියවීමේ හැකියාව සහතික කිරීමට සහ ව්‍යුහය පවත්වා ගැනීමට වගු ස්වයංක්‍රීයව මායිම් කිහිපයකින් පමණක් හැඩගස්වා ඇත. 2.0 සමඟ, .tableපන්තිය අවශ්ය වේ.

  1. <මේස පන්තිය = "වගුව" >
  2. </ වගුව>
# මුල් නම අවසන් නම පරිශීලක නාමය
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්

2. ඉරි සහිත වගුව

සීබ්‍රා-ඉරි එකතු කිරීමෙන් ඔබේ වගු සමඟ ටිකක් අලංකාර වන්න- .table-stripedපංතිය එක් කරන්න.

සටහන: ඉරි සහිත වගු :nth-childCSS තේරීම්කාරකය භාවිතා කරන අතර IE7-IE8 හි නොමැත.

  1. <table class = "මේස ඉරි සහිත" >
  2. </ වගුව>
# මුල් නම අවසන් නම පරිශීලක නාමය
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්

3. මායිම් වගුව

සෞන්දර්යාත්මක අරමුණු සඳහා සම්පූර්ණ මේසය වටා මායිම් සහ වටකුරු කොන් එකතු කරන්න.

  1. <table class = "table-bordered" >
  2. </ වගුව>
# මුල් නම අවසන් නම පරිශීලක නාමය
1 ලකුණ ඔටෝ @mdo
ලකුණ ඔටෝ @getbootstrap
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්

4. උකු වගුව

.table-condensedමේස සෛල පිරවුම අඩකින් (8px සිට 4px දක්වා) කැපීමට පන්තිය එක් කිරීමෙන් ඔබේ වගු වඩාත් සංයුක්ත කරන්න .

  1. <table class = "table-condensed" >
  2. </ වගුව>
# මුල් නම අවසන් නම පරිශීලක නාමය
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්

5. ඒවා සියල්ලම ඒකාබද්ධ කරන්න!

පවතින ඕනෑම පන්තියක් භාවිතා කිරීමෙන් විවිධ පෙනුමක් ලබා ගැනීම සඳහා ඕනෑම වගු පන්ති ඒකාබද්ධ කිරීමට නිදහස් වන්න.

  1. <table class = "මේස-ඉරි සහිත වගු-මායිම් සහිත වගුව-ඝණීකෘත" >
  2. ...
  3. </ වගුව>
සම්පූර්ණ නම
# මුල් නම අවසන් නම පරිශීලක නාමය
1 ලකුණ ඔටෝ @mdo
2 යාකොබ් තෝන්ටන් @මේදය
3 ලැරී කුරුල්ලා @ට්විටර්

නම්‍යශීලී HTML සහ CSS

Bootstrap හි ඇති පෝරම පිළිබඳ හොඳම කොටස නම්, ඔබ ඔබේ සලකුණු කිරීමේදී ඒවා ගොඩනඟන ආකාරය කුමක් වුවත්, ඔබගේ සියලු යෙදවුම් සහ පාලනයන් විශිෂ්ට ලෙස පෙනෙනු ඇත. අනවශ්‍ය HTML අවශ්‍ය නොවේ, නමුත් අවශ්‍ය අය සඳහා අපි රටා සපයන්නෙමු.

වඩාත් සංකීර්ණ පිරිසැලසුම් පහසු හැඩගැන්වීම් සහ සිදුවීම් බන්ධනය සඳහා සංක්ෂිප්ත සහ පරිමාණය කළ හැකි පන්ති සමඟ පැමිණේ, එබැවින් ඔබ සෑම පියවරකදීම ආවරණය වේ.

පිරිසැලසුම් හතරක් ඇතුළත් වේ

Bootstrap ආකෘති පිරිසැලසුම් වර්ග හතරක් සඳහා සහය දක්වයි:

  • සිරස් (පෙරනිමි)
  • සොයන්න
  • පෙළට
  • තිරස්

විවිධ ආකාරයේ ආකෘති පිරිසැලසුම් සලකුණු කිරීම සඳහා යම් යම් වෙනස්කම් අවශ්‍ය වේ, නමුත් පාලනයන්ම පවතින අතර එලෙසම හැසිරේ.

පාලන තත්වයන් සහ තවත් දේ

Bootstrap හි ආකෘති වලට ආදානය, textarea, සහ ඔබ අපේක්ෂා කරන තේරීම වැනි සියලුම මූලික ආකෘති පාලන සඳහා මෝස්තර ඇතුළත් වේ. නමුත් එය ඇමුණුම් සහ පෙර සැකසූ ආදාන සහ පිරික්සුම් කොටු ලැයිස්තු සඳහා සහය වැනි අභිරුචි සංරචක ගණනාවක් සමඟ ද පැමිණේ.

එක් එක් ආකාරයේ පෝරම පාලනය සඳහා දෝෂ, අනතුරු ඇඟවීම සහ සාර්ථකත්වය වැනි රාජ්‍යයන් ඇතුළත් වේ. ආබාධිත පාලන සඳහා මෝස්තර ද ඇතුළත් වේ.

ආකෘති වර්ග හතරක්

Bootstrap පොදු වෙබ් ආකෘති හතරක් සඳහා සරල සලකුණු සහ මෝස්තර සපයයි.

නම පන්තිය විස්තර
සිරස් (පෙරනිමි) .form-vertical (අවශ්ය නෑ) පාලනයන් මත අසුරන ලද, වමට පෙළගස්වන ලද ලේබල
පෙළට .form-inline සංයුක්ත විලාසය සඳහා වමට පෙළගස්වන ලද ලේබලය සහ පේළිගත අවහිර පාලන
සොයන්න .form-search සාමාන්‍ය සෙවුම් සෞන්දර්යය සඳහා අමතර වටකුරු පෙළ ආදානය
තිරස් .form-horizontal පාලක ලෙස එකම පේළියක වමට, දකුණට පෙළගස්වන ලද ලේබල පා කරන්න

ආකෘති පාලන පමණක් භාවිතා කරන උදාහරණ පෝරම , අමතර සලකුණු නොමැත

මූලික ආකෘතිය

අමතර සලකුණු නොමැතිව ස්මාර්ට් සහ සැහැල්ලු පෙරනිමි.

උදාහරණ වාරණ මට්ටමේ උපකාරක පෙළ මෙහි.

  1. <form class = "හොඳින්" >
  2. <label> ලේබල් නම </label>
  3. <input type = "text" class = "span3" placeholder = "යමක් ටයිප් කරන්න..." >
  4. <span class = "help-block" > මෙහි උදාහරණ වාරණ මට්ටමේ උපකාරක පෙළ. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > මාව පරීක්ෂා කරන්න
  7. </label>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </form>

සෙවුම් පෝරමය

.form-searchපෝරමයට සහ .search-queryට එකතු කරන්න input.

  1. <form class = "හොඳින් form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Search </button>
  4. </form>

පේළිගත පෝරමය

.form-inlineපෝරම පාලනවල සිරස් පෙළගැස්ම සහ පරතරය සියුම් ලෙස එක් කරන්න .

  1. <form class = "හොඳින් form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "මුරපදය" class = "input-small" placeholder = "මුරපදය" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > මාව මතක තියාගන්න
  6. </label>
  7. <button type = "submit" class = "btn" > Sign in </button>
  8. </form>

තිරස් ආකෘති

අපි සහාය දක්වන සියලුම පෙරනිමි පෝරම පාලන දකුණු පසින් පෙන්වා ඇත. මෙන්න බුලටිත ලැයිස්තුව:

  • පෙළ ආදාන (පෙළ, මුරපදය, ඊමේල්, ආදිය)
  • පිරික්සුම් කොටුව
  • ගුවන් විදුලි
  • තෝරන්න
  • බහු තේරීම
  • ගොනු ආදානය
  • textarea

freeform text වලට අමතරව, ඕනෑම HTML5 text-based input එකක් එලෙස දිස්වේ.

උදාහරණ සලකුණු කිරීම

ඉහත උදාහරණ පෝරමය පිරිසැලසුම ලබා දී, පළමු ආදාන සහ පාලන කණ්ඩායම හා සම්බන්ධ සලකුණු කිරීම මෙන්න. , .control-group, .control-labelසහ .controlsපන්ති සියල්ල මෝස්තර කිරීම සඳහා අවශ්‍ය වේ.

  1. <form class = "form-horizontal" >
  2. <fieldset>
  3. <legend> Legend text </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Text input </label>
  6. <div class = "පාලන" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > උපකාරක උපකාරක පෙළ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

ආකෘති පාලන තත්වයන්

disabledබූට්ස්ට්‍රැප් බ්‍රවුසරයට සහය දක්වන නාභිගත සහ ප්‍රාන්ත සඳහා විලාස දක්වයි . අපි පෙරනිමි Webkit ඉවත් කර එහි ස්ථානයේ සඳහා outlineයොදන්නෙමු .box-shadow:focus


පෝරමය වලංගු කිරීම

දෝෂ, අනතුරු ඇඟවීම් සහ සාර්ථකත්වය සඳහා වලංගුකරණ විලාස ද එයට ඇතුළත් ය. භාවිතා කිරීමට, වටපිටාවට දෝෂ පන්තිය එක් කරන්න .control-group.

  1. <ෆීල්ඩ්සෙට්
  2. class = "පාලක කණ්ඩායම් දෝෂය" >
  3. </fieldset>
මෙහි යම් වටිනාකමක් ඇත
මොකක් හරි වැරදීමක් වෙන්න ඇති
කරුණාකර දෝෂය නිවැරදි කරන්න
Woohoo!
Woohoo!

ආකෘති පාලන දිගු කිරීම

ආදාන පෙර සහ එකතු කරන්න

ආදාන කණ්ඩායම්-ඇමිණූ හෝ පෙර පෙළ සහිත-ඔබගේ යෙදවුම් සඳහා වැඩි සන්දර්භයක් ලබා දීමට පහසු ක්‍රමයක් සපයයි. ට්විටර් පරිශීලක නාමයන් සඳහා @ ලකුණ හෝ මූල්‍ය සඳහා $ වැනි විශිෂ්ට උදාහරණ ඇතුළත් වේ.


පිරික්සුම් පෙට්ටි සහ ගුවන් විදුලි

v1.4 දක්වා, Bootstrap ඒවා ගොඩගැසීමට පිරික්සුම් කොටු සහ රේඩියෝ වටා අමතර සලකුණු කිරීම අවශ්‍ය විය. දැන්, එය ආවරණය කරන දේ නැවත නැවත කිරීම සරල <label class="checkbox">කාරණයකි <input type="checkbox">.

පේළිගත පිරික්සුම් කොටු සහ රේඩියෝ ද සහාය දක්වයි. .inlineඕනෑම දෙයකට එකතු කරන්න .checkboxහෝ .radioඔබ ඉවරයි.


පේළිගත පෝරම සහ ඇමුණුම්/පෙර කරන්න

පේළිගත පෝරමයක පෙරනිමිති හෝ එකතු කිරීමේ යෙදවුම් භාවිතා කිරීමට , හිස්තැන් නොමැතිව එකම පේළියක තැබීමට වග .add-onබලා ගන්න.input


පෝරමය උපකාරක පෙළ

ඔබේ පෝරම ආදාන සඳහා උදවු පෙළ එක් කිරීමට , ආදාන මූලද්‍රව්‍යයට පසුව සමඟින් පේළිගත උදවු පෙළ <span class="help-inline">හෝ උදවු පෙළ අවහිර කිරීමක් ඇතුළත් කරන්න.<p class="help-block">

.span*ආදාන ප්‍රමාණ සඳහා ජාල පද්ධතියෙන් එකම පන්ති භාවිතා කරන්න .

ඔබට ජාලයට සිතියම් නොකරන, ප්‍රතිචාරාත්මක CSS විලාසයන්ට අනුගත නොවන හෝ විවිධ පාලන වර්ග සඳහා ගිණුම් (උදා, inputඑදිරිව select) ස්ථිතික පන්ති භාවිතා කළ හැකිය.

@

මෙන්න උපකාරක පෙළ කිහිපයක්

.00
මෙන්න තවත් උපකාරක පෙළ
$ .00

සටහන: ලේබල් විශාල ක්ලික් ප්‍රදේශ සහ වඩාත් භාවිත කළ හැකි පෝරමයක් සඳහා සියලු විකල්ප වට කර ඇත.

බොත්තම class="" විස්තර
btn අනුක්‍රමණය සහිත සම්මත අළු බොත්තම
btn btn-primary අමතර දෘශ්‍ය බරක් ලබා දෙන අතර බොත්තම් කට්ටලයක ප්‍රාථමික ක්‍රියාව හඳුනා ගනී
btn btn-info පෙරනිමි මෝස්තර සඳහා විකල්පයක් ලෙස භාවිතා කරයි
btn btn-success සාර්ථක හෝ ධනාත්මක ක්‍රියාවක් පෙන්නුම් කරයි
btn btn-warning මෙම ක්‍රියාවේදී ප්‍රවේශම් විය යුතු බව පෙන්වා දෙයි
btn btn-danger භයානක හෝ සෘණාත්මක ක්‍රියාවක් පෙන්නුම් කරයි
btn btn-inverse විකල්ප තද අළු බොත්තම, අර්ථ ක්‍රියාවකට හෝ භාවිතයකට බැඳී නැත

ක්රියා සඳහා බොත්තම්

සම්මුතියක් ලෙස, බොත්තම් භාවිතා කළ යුත්තේ ක්‍රියා සඳහා පමණක් වන අතර වස්තු සඳහා අධි සබැඳි භාවිතා කළ යුතුය. උදාහරණයක් ලෙස, "බාගැනීම" බොත්තමක් විය යුතු අතර "මෑතකාලීන ක්‍රියාකාරකම්" සබැඳියක් විය යුතුය.

.btnබොත්තම් මෝස්තර පන්තිය යෙදූ ඕනෑම දෙයකට යෙදිය හැක. කෙසේ වෙතත්, සාමාන්‍යයෙන් ඔබට මේවා පමණක් <a>සහ <button>මූලද්‍රව්‍ය සඳහා යෙදීමට අවශ්‍ය වනු ඇත.

හරස් බ්‍රවුසර ගැළපුම

IE9 වටකුරු කොන් වල පසුබිම් අනුක්‍රමණයන් කප්පාදු නොකරයි, එබැවින් අපි එය ඉවත් කරමු. ආශ්‍රිත, IE9 ආබාධිත buttonමූලද්‍රව්‍ය jankifis කරයි, අපට නිවැරදි කළ නොහැකි අශෝභන අකුරු-සෙවණැල්ලක් සහිත අකුරු අළු පැහැයක් ලබා දෙයි.

බහු ප්රමාණ

විශාල හෝ කුඩා බොත්තම් කැමතිද? එකතු කරන්න .btn-large, .btn-smallහෝ .btn-miniඅමතර ප්‍රමාණ දෙකක් සඳහා.


ආබාධිත තත්ත්වය

ආබාධිත බොත්තම් සඳහා, .disabledසබැඳි වෙත පන්තිය සහ මූලද්‍රව්‍ය disabledසඳහා ගුණාංගය එක් කරන්න.<button>

මූලික සබැඳිය සබැඳිය

දැනුම්දීම! අපි .disabledමෙහි සාමාන්‍ය පන්තියට සමාන උපයෝගිතා පන්තියක් ලෙස භාවිතා කරමු .active, එබැවින් උපසර්ගයක් අවශ්‍ය නොවේ.

එක් පන්තියක්, ටැග් කිහිපයක්

, , හෝ මූලද්‍රව්‍ය .btnමත පන්තිය භාවිතා කරන්න .<a><button><input>

සබැඳිය
  1. <a class = "btn" href = "" > Link </a>
  2. <button class = "btn" type = "submit" >
  3. බොත්තම
  4. </button>
  5. <ආදාන පන්තිය = "btn" වර්ගය = "බොත්තම"
  6. අගය = "ආදානය" >
  7. <ආදාන පන්තිය = "btn" වර්ගය = "ඉදිරිපත් කරන්න"
  8. අගය = "ඉදිරිපත් කරන්න" >

හොඳම පරිචයක් ලෙස, හරස් බ්‍රවුසර විදැහුම්කරණය ගැළපීම සහතික කිරීම සඳහා ඔබේ සන්දර්භය සඳහා මූලද්‍රව්‍යය ගැළපීමට උත්සාහ කරන්න. ඔබට තිබේ නම් , ඔබේ බොත්තම සඳහා inputභාවිතා කරන්න.<input type="submit">

  • අයිකන-වීදුරු
  • අයිකනය-සංගීතය
  • icon-search
  • icon-ලියුම් කවරය
  • icon-හදවත
  • නිරූපක තරුව
  • icon-star-හිස්
  • icon-user
  • අයිකන-චිත්‍රපටය
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • අයිකනය-ඉවත් කරන්න
  • icon-zoom-in
  • icon-zoom-out
  • නිරූපකය අක්රිය
  • icon-signal
  • icon-cog
  • අයිකනය-කුණු කූඩය
  • නිරූපකය-නිවස
  • icon-file
  • නිරූපක කාලය
  • icon-road
  • icon-download-alt
  • අයිකනය-බාගැනීම
  • නිරූපකය-උඩුගත කිරීම
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • අයිකන-කොඩිය
  • අයිකන-හෙඩ්ෆෝන්
  • icon-volume-off
  • අයිකනය-පරිමාව-පහළ
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • අයිකන-ටැග්
  • නිරූපක පොත
  • icon-bookmark
  • අයිකන-මුද්රණය
  • අයිකන-කැමරාව
  • icon-font
  • icon-bold
  • අයිකන-ඇලකුරු
  • icon-text-height
  • අයිකනය-පෙළ-පළල
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • අයිකන ලැයිස්තුව
  • icon-indent-වමේ
  • අයිකනය-ඉන්ඩන්ට්-දකුණ
  • icon-facetime-video
  • අයිකනය-පින්තූරය
  • අයිකනය-පැන්සල
  • icon-map-marker
  • අයිකනය-ගැලපීම
  • icon-tint
  • icon-edit
  • අයිකන-බෙදාගැනීම
  • අයිකනය පරීක්ෂා කරන්න
  • icon-move
  • අයිකනය-පියවර-ආපසු
  • අයිකනය-වේගවත්-පසුගාමී
  • නිරූපකය-පසුගාමී
  • icon-play
  • අයිකනය-විරාමය
  • icon-stop
  • icon-ඉදිරියට
  • අයිකනය-වේගවත්-ඉදිරිය
  • අයිකනය-පියවර-ඉදිරියට
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • අයිකනය-ඉවත් කිරීම-ලකුණ
  • icon-ok-sign
  • අයිකනය-ප්‍රශ්නය-ලකුණ
  • icon-info-sign
  • icon-screenshot
  • අයිකනය-ඉවත් කිරීම-කවය
  • icon-ok-කවය
  • icon-ban-circle
  • අයිකනය-ඊතලය-වම
  • අයිකනය-ඊතලය-දකුණ
  • icon-arrow-up
  • අයිකනය-ඊතලය-පහළ
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • නිරූපකය-අඩු කිරීම
  • icon-asterisk
  • අයිකනය-විස්මිත ලකුණ
  • icon-තෑගි
  • icon-leaf
  • නිරූපකය-ගිනි
  • අයිකනය-ඇස්-විවෘත
  • අයිකනය-ඇස් සමීප
  • නිරූපකය-අනතුරු ඇඟවීමේ ලකුණ
  • අයිකන-තලය
  • icon-කැලැන්ඩරය
  • අයිකනය-අහඹු
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • අයිකන-ෆෝල්ඩරය-විවෘත
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • අයිකනය-සීනුව
  • අයිකන-සහතිකය
  • icon-thumbs-up
  • icon-thumbs-down
  • අයිකනය-අත-දකුණ
  • අයිකනය-අත-වම
  • අයිකනය-අත්-අප්
  • අයිකනය-අත-පහළ
  • අයිකනය-රවුම-ඊතලය-දකුණ
  • අයිකනය-රවුම-ඊතලය-වම
  • අයිකනය-රවුම්-ඊතලය-ඉහළ
  • අයිකනය-රවුම-ඊතලය-පහළ
  • icon-globe
  • අයිකන-යතුර
  • අයිකන-කාර්යයන්
  • අයිකන-පෙරහන
  • icon-briefcase
  • නිරූපකය-පූර්ණ තිරය

ස්ප්‍රයිට් එකක් ලෙස ගොඩනගා ඇත

සෑම අයිකනයක්ම අමතර ඉල්ලීමක් කරනවා වෙනුවට, අපි ඒවා ස්ප්‍රයිට් එකක් බවට සම්පාදනය කර ඇත—එක් ගොනුවක් තුළ පින්තූර ස්ථානගත කිරීම සඳහා CSS භාවිතා කරන පින්තූර පොකුරක් background-position. අපි Twitter.com හි භාවිතා කරන ක්‍රමයම වන අතර එය අපට හොඳින් ක්‍රියා කර ඇත.

සියලුම අයිකන පන්ති .icon-අපගේ අනෙකුත් සංරචක මෙන්, නිසි නාම පරතරය සහ විෂය පථය සඳහා උපසර්ග කර ඇත. මෙය වෙනත් මෙවලම් සමඟ ගැටුම් වළක්වා ගැනීමට උපකාරී වේ.

Glyphicons අපට අපගේ විවෘත මූලාශ්‍ර මෙවලම් කට්ටලයේ ඇති Halflings භාවිතා කිරීමට අවසර දී ඇත, අපි මෙහි docs හි සබැඳියක් සහ ණය ලබා දෙන තාක් කල්. ඔබගේ ව්‍යාපෘති වලදීද එයම කිරීම සලකා බලන්න.

භාවිතා කරන ආකාරය

Bootstrap <i>සියලුම අයිකන සඳහා ටැගයක් භාවිතා කරයි, නමුත් ඒවාට කේස් පන්තියක් නොමැත-බෙදාගත් උපසර්ගයක් පමණි. භාවිතා කිරීමට, පහත කේතය ඕනෑම තැනක තබන්න:

  1. <i class = "icon-search" ></i>

එක් අමතර පන්තියක් සමඟ සූදානම් කර ඇති ප්‍රතිලෝම (සුදු) අයිකන සඳහා මෝස්තර ද තිබේ:

  1. <i class = "icon-search icon-white" ></i>

ඔබේ අයිකන සඳහා තෝරා ගැනීමට පන්ති 140ක් ඇත. නිවැරදි පන්ති සහිත ටැගයක් එක් කරන්න <i>එවිට ඔබ සකසා ඇත. ඔබට සම්පූර්ණ ලැයිස්තුව sprites.less හි හෝ මෙම ලේඛනයේ මෙතැනින් සොයාගත හැක.

දැනුම්දීම! <i>බොත්තම් හෝ nav සබැඳිවල මෙන්, පෙළ නූල් අසල භාවිතා කරන විට, නියම පරතරය සඳහා ටැගයට පසුව ඉඩක් තැබීමට වග බලා ගන්න .

නඩු භාවිතා කරන්න

අයිකන විශිෂ්ටයි, නමුත් ඒවා භාවිතා කරන්නේ කොහේද? මෙන්න අදහස් කිහිපයක්:

  • ඔබේ පැති තීරු සංචාලනය සඳහා දර්ශන ලෙස
  • තනිකරම අයිකනය මත පදනම් වූ සංචාලනයක් සඳහා
  • ක්‍රියාවක තේරුම ප්‍රකාශ කිරීමට උදවු වන බොත්තම් සඳහා
  • පරිශීලකයෙකුගේ ගමනාන්තය මත සන්දර්භය බෙදා ගැනීමට සබැඳි සමඟ

අත්යවශ්යයෙන්ම, ඔබට <i>ටැග් එකක් තැබිය හැකි ඕනෑම තැනක, ඔබට අයිකනයක් තැබිය හැකිය.

උදාහරණ

මෙවලම් තීරුවක්, සංචලනය, හෝ පෙර සැකසූ ආකෘති ආදාන සඳහා බොත්තම්, බොත්තම් කණ්ඩායම් තුළ ඒවා භාවිත කරන්න.