මාතෘකා

සියලුම HTML මාතෘකා, <h1>හරහා <h6>ලබා ගත හැක.

h1. ශීර්ෂය 1

h2. ශීර්ෂය 2

h3. ශීර්ෂය 3

h4. ශීර්ෂය 4

h5. ශීර්ෂය 5

h6. ශීර්ෂය 6

ශරීර පිටපත

Bootstrap හි ගෝලීය පෙරනිමිය 14pxfont-size වේ , 20px සමඟ . මෙය සියලුම ඡේදවලට අදාළ වේ. ඊට අමතරව, (ඡේදවලට) ඒවායේ රේඛා-උසෙන් අඩක පහළ ආන්තිකය (පෙරනිමියෙන් 10px) ලැබේ.line-height<body><p>

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

සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචූරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

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

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

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

<p class = "lead" > ... </p>

අඩුවෙන් ඉදිකර ඇත

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

අවධාරණය

සැහැල්ලු මෝස්තර සහිත HTML හි පෙරනිමි අවධාරණය ටැග් භාවිතා කරන්න.

`<small>`

පේළිගත හෝ පෙළ කොටස් අවධාරනය කිරීම සඳහා, කුඩා ටැගය භාවිතා කරන්න.

මෙම පෙළ පේළිය සියුම් මුද්‍රණයක් ලෙස සැලකීමට අදහස් කෙරේ.

<p> <small> මෙම පෙළ පේළිය සියුම් මුද්‍රණය ලෙස සැලකීමට අදහස් කෙරේ. </small> </p>

නිර්භීත

බර අකුරු-බරක් සහිත පෙළ කොටසක් අවධාරණය කිරීම සඳහා.

පහත පෙළ කොටස තද අකුරු ලෙස විදැහුම් කෙරේ .

<strong> තද පෙළ ලෙස විදහා දැක්විණි </strong>

ඇල අකුරු

ඇල අකුරු සහිත පෙළ කොටසක් අවධාරණය කිරීම සඳහා.

පහත පෙළ කොටස ඇල අකුරු ලෙස විදැහුම් කෙරේ .

<em> ඇල අකුරු </em> ලෙස විදහා දක්වයි

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

පෙළගැස්වීමේ පන්ති

පෙළ පෙළගැස්වීමේ පන්ති සමඟින් පෙළ කොටස්වලට පහසුවෙන් නැවත සකස් කරන්න.

වමට පෙළගස්වන ලද පෙළ.

පෙළ මැදට පෙළගස්වා ඇත.

දකුණට පෙළගස්වන ලද පෙළ.

<p class = "text-left" > වමට පෙළගස්වන ලද පෙළ. </p> 
<p class = "text-center" > මැදට පෙළගස්වන ලද පෙළ. </p> 
<p class = "text-right" > දකුණට පෙළගස්වන ලද පෙළ. </p>

අවධාරණය පන්ති

අවධාරණ උපයෝගිතා පන්ති අතලොස්සක් සමඟ වර්ණය හරහා අර්ථය ප්‍රකාශ කරන්න.

Fusce dapibus, Telus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada Magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

කෙටි යෙදුම්

සංක්ෂිප්ත සහ කෙටි යෙදුම් සඳහා HTML හි <abbr>මූලද්‍රව්‍යයේ ශෛලීගත ක්‍රියාවට නැංවීම, ප්‍රසාරණය වූ අනුවාදය hover මත පෙන්වීමට. උපලක්ෂණයක් සහිත කෙටි යෙදුම්වලට titleසැහැල්ලු තිත් සහිත පහළ මායිමක් සහ හොවර් මත ආධාරක කර්සරයක් ඇත, එය උඩින් ගමන් කිරීමේදී අමතර සන්දර්භය සපයයි.

`<abbr>`

කෙටි යෙදුමක දිගු සැරිසැරීම මත පුළුල් කළ පෙළ සඳහා, titleගුණාංගය ඇතුළත් කරන්න.

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

<abbr title = "attribute" > attr </abbr>

`<abbr class="initialism">`

.initialismතරමක් කුඩා අකුරු ප්‍රමාණය සඳහා කෙටි යෙදුමකට එක් කරන්න .

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

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

ලිපිනයන්

ආසන්නතම මුතුන්මිත්තන් හෝ සමස්ත කාර්ය මණ්ඩලය සඳහා සම්බන්ධතා තොරතුරු ඉදිරිපත් කරන්න.

`<address>`

සියලු රේඛා අවසන් කිරීමෙන් හැඩතල ගැන්වීම ආරක්ෂා කරන්න <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

සම්පූර්ණ නම
[email protected]

<ලිපිනය>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  සැන් ෆ්රැන්සිස්කෝ, CA 94107 <br>
  <abbr title = "දුරකථනය" > P: </abbr> (123) 456-7890 
</address>
 
<ලිපිනය>
  <strong> සම්පූර්ණ නම </strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</address>

අවහිර කිරීම්

ඔබේ ලේඛනය තුළ වෙනත් මූලාශ්‍රයකින් අන්තර්ගත කොටස් උපුටා දැක්වීම සඳහා.

පෙරනිමි වාරණ උපුටා දැක්වීම

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්. </p>
</blockquote>

Blockquote විකල්ප

සම්මත බ්ලොක්කෝට් එකක සරල වෙනස්කම් සඳහා විලාසය සහ අන්තර්ගත වෙනස්කම්.

මූලාශ්රයක් නම් කිරීම

<small>මූලාශ්‍රය හඳුනා ගැනීම සඳහා ටැගය එක් කරන්න . මූලාශ්‍ර කාර්යයේ නම ඔතා <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
මූලාශ්‍ර මාතෘකාවේ ප්‍රසිද්ධ කෙනෙක්

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්. </p>
  <small> ප්‍රසිද්ධ කෙනෙක් <cite title = "මූලාශ්‍ර මාතෘකාව" > මූලාශ්‍ර මාතෘකාව </cite></small> 
</blockquote>

විකල්ප සංදර්ශක

.pull-rightපාවෙන, දකුණට පෙළගස්වන ලද බ්ලොක්කෝට් සඳහා භාවිතා කරන්න .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. නිඛිල සංඛේතය පූර්වයෙන්.
මූලාශ්‍ර මාතෘකාවේ ප්‍රසිද්ධ කෙනෙක්

<blockquote class = "දකුණට අදින්න" > 
  ...
</blockquote>

ලැයිස්තු

ඇණවුම් නොකළ

ඇණවුම පැහැදිලිවම වැදගත් නොවන අයිතම ලැයිස්තුවක් .

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>
  <li> ... </li>
</ul>

ඇණවුම් කළා

ඇණවුම පැහැදිලිව�� වැදගත් වන අයිතම ලැයිස්තුවක් .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Massa සහ integer molestie lorem
pretium nisl aliquet හි පහසුකම
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet nunc
Eget porttitor lorem

<ol>
  <li> ... </li>
</ol>

මෝස්තර නොකළ

ලැයිස්තු අයිතමවල පෙරනිමි 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

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

පෙළට

සියලුම ලැයිස්තු අයිතම තනි පේළියක් inline-blockසහ සැහැල්ලු පිරවුමක් මත තබන්න.

ලෝරම් ඉප්සම්
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

විස්තර

ඒවායේ ආශ්‍රිත විස්තර සහිත නියම ලැයිස්තුවක්.

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

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

නියමයන් සහ විස්තරයන් <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.
Felis euismod semper eget lacinia: Fusce dapibus, Telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-horizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

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

පෙළට

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

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

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

මූලික බ්ලොක්

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

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

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

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

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

පෙරනිමි මෝස්තර

.tableමූලික හැඩගැන්වීම් සඳහා-ආලෝකය පෑඩිං සහ තිරස් බෙදුම්කරුවන් පමණි- ඕනෑම දෙයකට මූලික පන්තිය එක් කරන්න <table>.

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

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

විකල්ප පන්ති

පහත සඳහන් ඕනෑම පංතියක් .tableමූලික පන්තියට එක් කරන්න.

`.table-striped`

<tbody>CSS තේරීම්කාරකය හරහා ඕනෑම වගු පේළියකට සීබ්‍රා- ඉරි එකතු කරයි :nth-child(IE7-8 හි නොමැත).

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

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

`.table-bordered`

මේසයට මායිම් සහ වටකුරු කොන් එකතු කරන්න.

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

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

`.table-hover`

a ඇතුළත වගු පේළි මත hover තත්වයක් සබල කරන්න <tbody>.

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

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

`.table-condensed`

සෛල පිරවුම අඩකින් කැපීමෙන් වගු වඩාත් සංයුක්ත කරයි.

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

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

විකල්ප පේළි පන්ති

වගු පේළි වර්ණ ගැන්වීමට සන්දර්භීය පන්ති භාවිතා කරන්න.

පන්තිය	විස්තර
`.success`	සාර්ථක හෝ ධනාත්මක ක්‍රියාවක් පෙන්නුම් කරයි.
`.error`	භයානක හෝ සෘණාත්මක ක්‍රියාවක් පෙන්නුම් කරයි.
`.warning`	අවධානය යොමු කළ යුතු අනතුරු ඇඟවීමක් පෙන්නුම් කරයි.
`.info`	පෙරනිමි මෝස්තර සඳහා විකල්පයක් ලෙස භාවිතා කරයි.

#	නිෂ්පාදන	ගෙවීම ගෙන ඇත	තත්ත්වය
1	TB - මාසිකව	01/04/2012	අනුමත කළා
2	TB - මාසිකව	02/04/2012	ප්‍රතික්ෂේප කළා
3	TB - මාසිකව	03/04/2012	පොරොත්තුවෙන්
4	TB - මාසිකව	04/04/2012	තහවුරු කිරීමට අමතන්න

...
  < tr class = "සාර්ථකත්වය" >
    <td> 1 < /td>
    <td>TB - මාසිකව</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>අනුමතයි</ td >
  </ tr >
...

සහාය දක්වන වගු සලකුණු කිරීම

සහාය දක්වන වගු HTML මූලද්‍රව්‍ය ලැයිස්තුව සහ ඒවා භාවිතා කළ යුතු ආකාරය.

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

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

පෙරනිමි මෝස්තර

තනි පුද්ගල ආකෘති පාලන මෝස්තර ලබා ගනී, නමුත් කිසිදු අවශ්‍ය මූලික පන්තියක් නොමැතිව හෝ <form>සලකුණු කිරීමේ විශාල වෙනස්කම් නොමැතිව. පෝරම පාලනවලට ඉහළින් අට්ටි කළ, වමට පෙළගස්වන ලද ලේබලවල ප්‍රතිඵල.

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

විකල්ප පිරිසැලසුම්

Bootstrap සමඟ ඇතුළත් කර ඇත්තේ පොදු භාවිත අවස්ථා සඳහා විකල්ප ආකෘති පිරිසැලසුම් තුනකි.

සෙවුම් පෝරමය

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

තිරස් ආකෘතිය

ලේබල් දකුණට පෙළගස්වා ඒවා පාලනයන් මෙන් එකම පේළියක දිස් කිරීමට ඒවා වමට පා කරන්න. පෙරනිමි පෝරමයකින් වඩාත්ම සලකුණු වෙනස්කම් අවශ්‍ය වේ:

.form-horizontalපෝරමයට එකතු කරන්න
ලේබල් සහ පාලන එතුම.control-group
.control-labelලේබලයට එකතු කරන්න
.controlsනිසි පෙළගැස්ම සඳහා ඕනෑම ආශ්‍රිත පාලනයක් ඔතා

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "පාලන" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > මුරපදය </label>  
    <div class = "පාලන" > 
      <input type = "මුරපදය" id = "inputPassword" placeholder = "මුරපදය" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "පාලන" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > මාව මතක තියාගන්න 
      </label>
      <button type = "submit" class = "btn" > Sign in </button>  
    </div>
  </div>
</form>

සහාය දක්වන පෝරම පාලන

උදාහරණ පෝරම පිරිසැලසුමක සහය දක්වන සම්මත පෝරම පාලන සඳහා උදාහරණ.

යෙදවුම්

වඩාත් පොදු ආකෘති පාලනය, පෙළ මත පදනම් වූ ආදාන ක්ෂේත්‍ර. සියලුම HTML5 වර්ග සඳහා සහය ඇතුළත් වේ: පෙළ, මුරපදය, දින වේලාව, දිනය-දේශීය, දිනය, මාසය, වේලාව, සතිය, අංකය, විද්‍යුත් තැපෑල, url, සෙවීම, දුරකථන සහ වර්ණය.

typeසෑම විටම නිශ්චිතව භාවිතා කිරීම අවශ්ය වේ .

<input type = "text" placeholder = "Text input" >

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

පෙළ පේළි කිහිපයකට සහය දක්වන පෝරම පාලනය. rowsඅවශ්‍ය පරිදි ගුණාංගය වෙනස් කරන්න .

<textarea row = " 3" ></textarea>

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

පිරික්සුම් කොටු යනු ලැයිස්තුවක විකල්ප එකක් හෝ කිහිපයක් තෝරාගැනීම සඳහා වන අතර රේඩියෝ යනු බොහෝ දෙනෙකුගෙන් එක් විකල්පයක් තෝරාගැනීම සඳහා වේ.

පෙරනිමි (අතුගත)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න
</label>
 
<ලේබල් පන්තිය = "රේඩියෝ" > 
  <ආදාන වර්ගය = "රේඩියෝ" නම = "optionsRadios" id = "optionsRadios1 " අගය = "option1" සලකුණු කර ඇත >     
  විකල්පය එක මෙය සහ එයයි - එය විශිෂ්ට වන්නේ මන්දැයි ඇතුළත් කිරීමට වග බලා ගන්න
</label>
<ලේබල් පන්තිය = "රේඩියෝ" > 
  <input type = "රේඩියෝ" නම = "optionsRadios" id = "optionsRadios2 " value = "option2" >    
  විකල්ප දෙක වෙනත් දෙයක් විය හැකි අතර එය තේරීමෙන් විකල්පය එක තේරීම ඉවත් කරනු ඇත
</label>

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

.inlineඑකම පේළියේ දිස්වන පාලන සඳහා පිරික්සුම් කොටු හෝ රේඩියෝ මාලාවකට පන්තිය එක් කරන්න .

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

තෝරනවා

multiple="multiple"එකවර විකල්ප කිහිපයක් පෙන්වීමට පෙරනිමි විකල්පය භාවිතා කරන්න හෝ a සඳහන් කරන්න .

<තෝරන්න>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "multiple" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

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

පවතින බ්‍රවුසර පාලන මතට එකතු කිරීම, Bootstrap වෙනත් ප්‍රයෝජනවත් ආකෘති සංරචක ඇතුළත් වේ.

පෙර සහ අනුයුක්ත යෙදවුම්

ඕනෑම පෙළ පදනම් ආදානයකට පෙර හෝ පසුව පෙළ හෝ බොත්තම් එක් කරන්න. selectමෙහි මූලද්‍රව්‍ය සඳහා සහය නොදක්වන බව සලකන්න .

පෙරනිමි විකල්ප

ආදානයකට පෙළ පෙර කිරීමට හෝ එක් කිරීමට පන්ති දෙකෙන් එකක් සමඟින් .add-onසහ එකක් ඔතා.input

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

ඒකාබද්ධ

.add-onආදානයක් පෙර කිරීමට සහ එකතු කිරීමට පන්ති දෙකම සහ අවස්ථා දෙකක් භාවිතා කරන්න .

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

පෙළ වෙනුවට බොත්තම්

<span>අකුරු සහිත a වෙනුවට , .btnආදානයකට බොත්තමක් (හෝ දෙකක්) ඇමිණීමට a භාවිතා කරන්න.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > යන්න! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Search </button>  
  <button class = "btn" type = "button" > Options </button>  
</div>

බොත්තම් පතන

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      කටයුතු
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      කටයුතු
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      කටයුතු
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      කටයුතු
      <span class = "caret" ></span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

ඛණ්ඩනය කරන ලද පතන කණ්ඩායම්

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <ආදාන වර්ගය = "පෙළ" > 
  </div>
  <div class = "input-append" > 
    <ආදාන වර්ගය = "පෙළ" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

සෙවුම් පෝරමය

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Search </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Search </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

පාලන ප්‍රමාණය

.input-largeපන්ති භාවිතා කරමින් ජාල තීරු ප්‍රමාණවලට ඔබේ යෙදවුම් වැනි සාපේක්ෂ ප්‍රමාණ පන්ති භාවිතා කරන්න .span*.

වාරණ මට්ටමේ යෙදවුම්

කිසියම් <input>හෝ <textarea>මූලද්‍රව්‍යයක් වාරණ මට්ටමේ මූලද්‍රව්‍යයක් ලෙස හැසිරීමට සලස්වන්න.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

සාපේක්ෂ ප්රමාණය

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

දැනුම්දීම!අනාගත අනුවාදවලදී, අපි අපගේ බොත්තම් ප්‍රමාණයන්ට ගැළපෙන පරිදි මෙම සාපේක්ෂ ආදාන පන්ති භාවිතය වෙනස් කරන්නෙමු. උදාහරණයක් ලෙස, .input-largeආදානයක පිරවුම සහ අකුරු ප්‍රමාණය වැඩි කරයි.

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

ජාල තීරු වල එකම ප්‍රමාණයන්ට ගැළපෙන ආදාන සඳහා භාවිතා කරන්න .span1..span12

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
< පන්තිය තෝරන්න = "span1" > 
  ...
</select>
< පන්තිය තෝරන්න = "span2" > 
  ...
</select>
< පන්තිය තෝරන්න = "span3" > 
  ...
</select>

එක් පේළියකට බහු ජාල ආදාන සඳහා, නිසි පරතරය සඳහා විකරණය කිරීමේ පන්තිය භාවිතා කරන්න.controls-row . එය සුදු-අවකාශය බිඳ වැටීමට යෙදවුම් පාවෙන අතර, නිසි මායිම් සකසයි, සහ පාවෙන ඉවත් කරයි.

<div class = "පාලන" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

සංස්කරණය කළ නොහැකි යෙදවුම්

සත්‍ය පෝරම ලකුණු කිරීම භාවිතයෙන් තොරව සංස්කරණය කළ නොහැකි පෝරමයක දත්ත ඉදිරිපත් කරන්න.

<span class = "input-xlarge uneditable-input" > මෙහි යම් අගයක් </span>

ආකෘති ක්රියා

ක්‍රියා සමූහයක් (බොත්තම්) සමඟ පෝරමයක් අවසන් කරන්න. a තුළ තැබූ විට .form-actions, බොත්තම් ස්වයංක්‍රීයව පෝරම පාලන සමඟ පෙලගැසෙනු ඇත.

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > වෙනස්කම් සුරකින්න </button>  
  <button type = "button" class = "btn" > Cancel </button>  
</div>

උදව් පෙළ

පෝරම පාලන වටා දිස්වන උපකාරක පෙළ සඳහා පේළිගත සහ වාරණ මට්ටමේ සහාය.

පේළිගත උදව්

<input type = "text" ><span class = "help-inline" > Inline help text </span>

උදව් අවහිර කරන්න

<input type = "text" ><span class = "help-block" > නව පේළියකට කැඩී එක් පේළියකින් ඔබ්බට විහිදෙන දිගු උපකාරක පෙළ කොටසකි. </span>

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

පෝරම පාලන සහ ලේබල පිළිබඳ මූලික ප්‍රතිපෝෂණ තත්ත්වයන් සමඟ පරිශීලකයින්ට හෝ අමුත්තන්ට ප්‍රතිපෝෂණ ලබා දෙන්න.

ආදාන අවධානය

අපි සමහර පෝරම පාලනවල පෙරනිමි outlineවිලාසයන් ඉවත් box-shadowකර එහි ස්ථානයේ :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "මෙය නාභිගත කර ඇත..." >

වලංගු නොවන ආදාන

පෙරනිමි බ්‍රවුසර ක්‍රියාකාරීත්වය හරහා මෝස්තර යෙදවුම් :invalid. a සඳහන් කරන්න, ක්ෂේත්‍රය වෛකල්පිත නොවේ නම් ගුණාංගය typeඑක් කරන්න , සහ (අදාළ නම්) a සඳහන් කරන්න .requiredpattern

CSS ව්‍යාජ තේරීම් සඳහා සහය නොමැතිකම හේතුවෙන් මෙය Internet Explorer 7-9 අනුවාද වල නොමැත.

<input class = "span3" type = "email" අවශ්‍යයි >

අබල කළ යෙදවුම්

disabledපරිශීලක ආදානය වැළැක්වීමට සහ තරමක් වෙනස් පෙනුමක් අවුලුවාලීමට ආදානයක් මත ගුණාංගය එක් කරන්න .

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "මෙතැන අබල කළ ආදානය..." අක්‍රිය >

වලංගුකරණය සඳහන් කරයි

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

<div class = "පාලක කණ්ඩායම් අනතුරු ඇඟවීම" > 
  <label class = "control-label" for = "inputWarning" > අවවාදය සහිත ආදානය </label>  
  <div class = "පාලන" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > යම් දෙයක් වැරදී ඇත </span> 
  </div>
</div>
 
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > දෝෂ සහිත ආදානය </label>  
  <div class = "පාලන" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > කරුණාකර දෝෂය නිවැරදි කරන්න </span> 
  </div>
</div>
 
<div class = "පාලක කණ්ඩායම් තොරතුරු" > 
  <label class = "control-label" for = "inputInfo" > තොරතුරු සහිත ආදානය </label>  
  <div class = "පාලන" > 
    <ආදාන වර්ගය = "පෙළ" id = "inputInfo" >  
    <span class = "help-inline" > පරිශීලක නාමය දැනටමත් ගෙන ඇත </span> 
  </div>
</div>
 
<div class = "control-group success" > 
  <label class = "control-label" for = "inputSuccess" > සාර්ථකත්වය සමඟ ආදානය </label>  
  <div class = "පාලන" > 
    <ආදාන වර්ගය = "පෙළ" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

පෙරනිමි බොත්තම්

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

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

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

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

බොත්තම් ප්රමාණ

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

<p>
  <button class = "btn btn-large btn-primary" type = "button" > විශාල බොත්තම </button>  
  <button class = "btn btn-large" type = "button" > විශාල බොත්තම </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Default බොත්තම </button>  
  <button class = "btn" type = "button" > Default බොත්තම </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > කුඩා බොත්තම </button>  
  <button class = "btn btn-small" type = "button" > කුඩා බොත්තම </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  <button class = "btn btn-mini" type = "button" > Mini button </button>  
</p>

බ්ලොක් මට්ටමේ බොත්තම්-දෙමව්පියෙකුගේ සම්පූර්ණ පළල දක්වා විහිදෙන-එකතු කිරීමෙන් සාදන්න .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > අවහිර මට්ටමේ බොත්තම </button>  
<button class = "btn btn-large btn-block" type = "button" > Block level button </button>

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

බොත්තම් 50% ආපසු මැකී යාමෙන් ක්ලික් කළ නොහැකි ලෙස පෙනෙන්න.

ඇන්කර් මූලද්රව්යය

බොත්තම් .disabledවලට පන්තිය එක් කරන්න .<a>

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

<a href = "#" class = "btn btn-large btn-primary disabled" > මූලික සබැඳිය </a>  
<a href = "#" class = "btn btn-large disabled" > Link </a>

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

බොත්තම් මූලද්රව්යය

බොත්තම් disabledවලට ගුණාංගය එක් කරන්න .<button>

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > ප්‍රාථමික බොත්තම </button>   
<button type = "button" class = "btn btn-large" disabled > Button </button>

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

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

<a class = "btn" href = "" > Link </a>  
<button class = "btn" type = "submit" > බොත්තම </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

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

<img>ඕනෑම ව්‍යාපෘතියක පින්තූර පහසුවෙන් හැඩගස්වා ගැනීමට අංගයකට පන්ති එක් කරන්න .

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

දැනුම්දීම! .img-roundedසහ සහාය .img-circleනොමැතිකම නිසා IE7-8 හි වැඩ නොකරන්න border-radius.

අයිකන ග්ලයිෆ්

ස්ප්‍රයිට් ආකාරයෙන් අයිකන 140ක්, Glyphicons විසින් සපයන ලද තද අළු (පෙරනිමි) සහ සුදු පැහැයෙන් ලබා ගත හැක .

අයිකන-වීදුරු
අයිකනය-සංගීතය
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
නිරූපකය-පූර්ණ තිරය

Glyphicons ආරෝපණය

Glyphicons Halflings සාමාන්‍යයෙන් නොමිලයේ ලබා ගත නොහැක, නමුත් Bootstrap සහ Glyphicons නිර්මාපකයින් අතර ඇති විධිවිධානයක් මඟින් සංවර්ධකයින් ලෙස ඔබට කිසිදු වියදමක් නොමැතිව මෙය සිදු කර ඇත. ස්තූතියක් වශයෙන්, ප්‍රායෝගික ඕනෑම අවස්ථාවක Glyphicons වෙත විකල්ප සබැඳියක් ඇතුළත් කරන ලෙස අපි ඔබෙන් ඉල්ලා සිටිමු .

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

සියලුම අයිකන වලට <i>අනන්‍ය පන්තියක් සහිත ටැගයක් අවශ්‍ය වේ, උපසර්ග කර icon-ඇත. භාවිතා කිරීමට, පහත කේතය ඕනෑම තැනක තබන්න:

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

එක් අමතර පන්තියක් සමඟ සූදානම් කර ඇති ප්‍රතිලෝම (සුදු) අයිකන සඳහා මෝස්තර ද තිබේ. nav සහ dropdown links සඳහා අපි මෙම පන්තිය hover සහ සක්‍රිය තත්වයන් මත විශේෂයෙන් බලාත්මක කරන්නෙමු.

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

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

අයිකන උදාහරණ

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

බොත්තම්

බොත්තම් මෙවලම් තීරුවක බොත්තම් සමූහය

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

බොත්තම් සමූහයක පතන

පරිශීලක

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> පරිශීලක </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "dropdown-menu" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> සංස්කරණය </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> මකන්න </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> තහනම් </a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i> පරිපාලක කරන්න </a></li>  
  </ul>
</div>

බොත්තම් ප්රමාණ

තරුව තරුව තරුව

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> තරුව </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> තරුව </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> තරුව </a>

සංචලනය

<ul class = "nav nav-list" > 
  <li class = "සක්‍රිය" ><a href = "#" ><i class = "icon-home icon-white" ></i> මුල් පිටුව </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> පුස්තකාලය </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> යෙදුම් </a></li>  
  <li><a href = "#" ><i class = "i" ></i> වෙනත් </a> </li>  
</ul>

ආකෘති ක්ෂේත්ර

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > ඊමේල් ලිපිනය </label>  
  <div class = "පාලන" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

මුද්‍රණ ශිල්පය

මාතෘකා

h1. ශීර්ෂය 1

h2. ශීර්ෂය 2

h3. ශීර්ෂය 3

h4. ශීර්ෂය 4

h5. ශීර්ෂය 5

h6. ශීර්ෂය 6

ශරීර පිටපත

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

අඩුවෙන් ඉදිකර ඇත

අවධාරණය

<small>

නිර්භීත

ඇල අකුරු

පෙළගැස්වීමේ පන්ති

අවධාරණය පන්ති

කෙටි යෙදුම්

<abbr>

<abbr class="initialism">

ලිපිනයන්

<address>

අවහිර කිරීම්

පෙරනිමි වාරණ උපුටා දැක්වීම

Blockquote විකල්ප

මූලාශ්රයක් නම් කිරීම

විකල්ප සංදර්ශක

ලැයිස්තු

ඇණවුම් නොකළ

ඇණවුම් කළා

මෝස්තර නොකළ

පෙළට

විස්තර

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

කේතය

පෙළට

මූලික බ්ලොක්

මේස

පෙරනිමි මෝස්තර

විකල්ප පන්ති

.table-striped

.table-bordered

.table-hover

.table-condensed

විකල්ප පේළි පන්ති

සහාය දක්වන වගු සලකුණු කිරීම

ආකෘති පත්ර

පෙරනිමි මෝස්තර

විකල්ප පිරිසැලසුම්

සෙවුම් පෝරමය

පේළිගත පෝරමය

තිරස් ආකෘතිය

සහාය දක්වන පෝරම පාලන

යෙදවුම්

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

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

පෙරනිමි (අතුගත)

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

තෝරනවා

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

පෙර සහ අනුයුක්ත යෙදවුම්

පෙරනිමි විකල්ප

ඒකාබද්ධ

පෙළ වෙනුවට බොත්තම්

බොත්තම් පතන

ඛණ්ඩනය කරන ලද පතන කණ්ඩායම්

සෙවුම් පෝරමය

පාලන ප්‍රමාණය

වාරණ මට්ටමේ යෙදවුම්

සාපේක්ෂ ප්රමාණය

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

සංස්කරණය කළ නොහැකි යෙදවුම්

ආකෘති ක්රියා

උදව් පෙළ

පේළිගත උදව්

උදව් අවහිර කරන්න

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

ආදාන අවධානය

වලංගු නොවන ආදාන

අබල කළ යෙදවුම්

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`