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

සම්පූර්ණ මුද්‍රණ ජාලකය පදනම් වී ඇත්තේ අපගේ 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.

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

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>ඕනෑම HTML එකක් උද්ධෘතය ලෙස ඔතා ගන්න . සෘජු උපුටා දැක්වීම් සඳහා අපි නිර්දේශ කරමු a <p>.

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

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

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

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>.

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

මූලික බ්ලොක්

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

<p>සාම්පල පෙළ මෙතැනින්...</p>

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

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

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

Google Prettify

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

<p> නියැදි පෙළ මෙතනින්... </p>

<pre class = "pretyprint 
     linenums" >
  <p>සාම්පල පෙළ මෙතනින්...</p>
</pre>

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

ටැග් කරන්න	විස්තර
<table>	වගු ආකෘතියකින් දත්ත සංදර්ශනය කිරීම සඳහා එතීමේ මූලද්‍රව්‍යය
<thead>	<tr>වගු තීරු ලේබල් කිරීමට වගු ශීර්ෂ පේළි ( ) සඳහා බහාලුම් මූලද්‍රව්‍යය
<tbody>	<tr>මේසයේ සිරුරේ වගු පේළි () සඳහා බහාලුම් මූලද්රව්යය
<tr>	තනි පේළියක දිස්වන වගු සෛල ( <td>හෝ ) කට්ටලයක් සඳහා බහාලුම් මූලද්‍රව්‍යය<th>
<td>	පෙරනිමි වගු කොටුව
<th>	තීරු (හෝ පේළිය, විෂය පථය සහ ස්ථානගත කිරීම මත පදනම්ව) සඳහා විශේෂ වගු කොටුවක් a තුළ භාවිතා කළ යුතුය<thead>
<caption>	වගුවේ ඇති දේ පිළිබඳ විස්තරය හෝ සාරාංශය, විශේෂයෙන් තිර කියවන්නන් සඳහා ප්‍රයෝජනවත් වේ

<වගුව>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ වගුව>

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

<මේස පන්තිය = "වගුව" > 
  …
</ වගුව>

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

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

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

<table class = "මේස ඉරි සහිත" > 
  …
</ වගුව>

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

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

<table class = "table-bordered" > 
  …
</ වගුව>

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

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

<table class = "table-condensed" > 
  …
</ වගුව>

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

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

<table class = "මේස-ඉරි සහිත වගු-මායිම් සහිත වගුව-ඝණීකෘත" > 
  ...
</ වගුව>

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

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

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

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

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

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

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

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

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

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

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

මූලික ආකෘතිය

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

ලේබල් නම

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

මාව පරීක්ෂා කරන්න ඉදිරිපත් කරන්න

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

සෙවුම් පෝරමය

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

සොයන්න

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

පේළිගත පෝරමය

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

මාව මතක තබා ගන්න පුරන්න

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

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

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

පෙළ ආදානය

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

පිරික්සුම් කොටුව

විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න

ලැයිස්තුව තෝරන්න

යමක් 2 3 4 5

බහු නිරූපකය-තෝරන්න

1 2 3 4 5

ගොනු ආදානය

ටෙක්ස්ටාරියා

වෙනස්කම් සුරකින්න අවලංගු කරන්න

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

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

<form class = "form-horizontal" > 
  <fieldset>
    <legend> Legend text </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Text input </label>  
      <div class = "පාලන" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > උපකාරක උපකාරක පෙළ </p> 
      </div>
    </div>
  </fieldset>
</form>

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

---

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

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

<ෆීල්ඩ්සෙට්
  class = "පාලක කණ්ඩායම් දෝෂය" >
  …
</fieldset>

නාභිගත ආදානය

සංස්කරණය කළ නොහැකි ආදානය

මෙහි යම් වටිනාකමක් ඇත

අබල කළ ආදානය

අබල කළ පිරික්සුම් කොටුව

මෙය අබල කළ පිරික්සුම් කොටුවකි

අනතුරු ඇඟවීමක් සමඟ ඇතුළත් කරන්න

මොකක් හරි වැරදීමක් වෙන්න ඇති

දෝෂ සහිත ආදානය

කරුණාකර දෝෂය නිවැරදි කරන්න

සාර්ථකත්වය සමඟ ආදානය

Woohoo!

සාර්ථකත්වය සමඟ තෝරන්න

1 2 3 4 5 Woohoo!

වෙනස්කම් සුරකින්න අවලංගු කරන්න

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

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

---

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

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

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

---

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

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

---

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

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

පෝරම ජාලක ප්‍රමාණ

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

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

විකල්ප ප්රමාණ

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

පෙර සැකසූ පෙළ

@

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

එකතු කළ පෙළ

.00

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

අමුණන්න සහ පෙරනිමිති කරන්න

$ .00

බොත්තම සමඟ එකතු කරන්න

යන්න!

ද්වි-බොත්තම් ඇමුණුම

සොයන්න විකල්ප

පේළිගත පිරික්සුම් කොටු

1 2 3

පිරික්සුම් කොටු

විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න විකල්ප දෙක ද පරීක්ෂා කර පෝරම ප්‍රතිඵලවලට ඇතුළත් කළ හැක තුන්වන විකල්පයට හැකිය-ඔව්, ඔබ එය අනුමාන කළා-ද පරීක්ෂා කර පෝරම ප්‍රතිඵලවලට ඇතුළත් කළ හැක

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

ගුවන්විදුලි බොත්තම්

විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න විකල්ප දෙක වෙනත් දෙයක් විය හැකි අතර එය තේරීමෙන් විකල්පය එක තේරීම ඉවත් කරනු ඇත

වෙනස්කම් සුරකින්න අවලංගු කරන්න

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

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

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

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

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

බහු ප්රමාණ

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

ප්‍රාථමික ක්‍රියාව කටයුතු

ප්‍රාථමික ක්‍රියාව කටයුතු

ප්‍රාථමික ක්‍රියාව කටයුතු

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

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

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

ප්‍රාථමික බොත්තම බොත්තම

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

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

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

සබැඳිය බොත්තම

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" >  
  බොත්තම
</button>
<ආදාන පන්තිය = "btn" වර්ගය = "බොත්තම"  
         අගය = "ආදානය" >
<ආදාන පන්තිය = "btn" වර්ගය = "ඉදිරිපත් කරන්න"  
         අගය = "ඉදිරිපත් කරන්න" >

හොඳම පරිචයක් ලෙස, හරස් බ්‍රවුසර විදැහුම්කරණය ගැළපීම සහතික කිරීම සඳහා ඔබේ සන්දර්භය සඳහා මූලද්‍රව්‍යය ගැළපීමට උත්සාහ කරන්න. ඔබට තිබේ නම් , ඔබේ බොත්තම සඳහා 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>සියලුම අයිකන සඳහා ටැගයක් භාවිතා කරයි, නමුත් ඒවාට කේස් පන්තියක් නොමැත-බෙදාගත් උපසර්ගයක් පමණි. භාවිතා කිරීමට, පහත කේතය ඕනෑම තැනක තබන්න:

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

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

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

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

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

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

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

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

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

නැවුම් කරන්න පරීක්ෂාකාරී වන්න මකන්න

අදහස් දක්වන්න සැකසුම් වැඩි විස්තර

විද්යුත් තැපැල් ලිපිනය