ក្បាល

ចំណងជើង HTML ទាំងអស់ <h1>មាន <h6>។

h1. ចំណងជើង 1

h2. ក្បាល 2

h3. ចំណងជើង ៣

h4. ក្បាល ៤

h5. ក្បាលទី 5

h6. ចំណងជើង 6

ច្បាប់ចម្លងរាងកាយ

លំនាំដើមសកលរបស់ Bootstrap font-sizeគឺ 14px ជាមួយនឹង 20px ។ នេះត្រូវបានអនុវត្តចំពោះ កថាខណ្ឌទាំងអស់។ លើសពីនេះទៀត (កថាខណ្ឌ) ទទួលបានរឹមខាងក្រោមនៃពាក់កណ្តាលបន្ទាត់-កម្ពស់ (10px តាមលំនាំដើម)។line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo ។ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ។

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 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 អង្គុយ amet non magna ។ Donec id elit non mi porta gravida នៅ 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 auggue laoreet rutrum faucibus dolor auctor ។ Duis mollis គឺជា luctus ដែលមិនមែនជាទំនិញ។

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

សាងសង់ដោយតិច

មាត្រដ្ឋានវាយអក្សរគឺផ្អែកលើអថេរ LESS ពីរនៅក្នុង variables.less : @baseFontSizeនិង @baseLineHeight. ទីមួយគឺទំហំពុម្ពអក្សរមូលដ្ឋានដែលបានប្រើពេញមួយហើយទីពីរគឺកម្ពស់បន្ទាត់មូលដ្ឋាន។ យើងប្រើអថេរទាំងនោះ និងគណិតវិទ្យាសាមញ្ញមួយចំនួនដើម្បីបង្កើតរឹម បន្ទះ និងបន្ទាត់កម្ពស់នៃប្រភេទរបស់យើង និងច្រើនទៀត។ ប្ដូរពួកវាតាមបំណង ហើយ Bootstrap សម្រប។

ការសង្កត់ធ្ងន់

ប្រើស្លាកសង្កត់ធ្ងន់លំនាំដើមរបស់ HTML ជាមួយនឹងរចនាប័ទ្មស្រាល។

`<small>`

សម្រាប់ការលុបការសង្កត់ធ្ងន់ក្នុងបន្ទាត់ ឬប្លុកនៃអត្ថបទ សូម ប្រើស្លាកតូច។

បន្ទាត់នៃអត្ថបទនេះមានន័យថាត្រូវបានចាត់ទុកជាការបោះពុម្ពដ៏ល្អ។

<p> <small> បន្ទាត់នៃអត្ថបទនេះមានន័យថាត្រូវបានចាត់ទុកថាជាការបោះពុម្ពល្អ។ </small> </p>

ដិត

សម្រាប់ការសង្កត់ធ្ងន់លើអត្ថបទខ្លីៗដែលមានទម្ងន់ពុម្ពអក្សរធ្ងន់ជាង។

អត្ថបទខ្លីៗខាងក្រោមត្រូវ បានបកប្រែជាអក្សរដិត ។

<strong> បង្ហាញជាអក្សរដិត </strong>

ទ្រេត

សម្រាប់ការសង្កត់ធ្ងន់លើអត្ថបទដោយអក្សរទ្រេត។

អត្ថបទខ្លីៗខាងក្រោមត្រូវ បានបកប្រែជាអក្សរទ្រេត ។

<em> បង្ហាញជាអក្សរទ្រេត </em>

ព្រឺក្បាល!មានអារម្មណ៍សេរីក្នុងការប្រើប្រាស់ <b>និង <i>ក្នុង HTML5។ <b>មានន័យដើម្បីរំលេចពាក្យឬឃ្លាដោយមិនបង្ហាញពីសារៈសំខាន់បន្ថែមខណៈពេលដែល <i>ភាគច្រើនគឺសម្រាប់សំឡេង ពាក្យបច្ចេកទេស ។ល។

ថ្នាក់តម្រឹម

ងាយស្រួលតម្រឹមអត្ថបទទៅសមាសធាតុជាមួយនឹងថ្នាក់តម្រឹមអត្ថបទ។

អត្ថបទដែលបានតម្រឹមឆ្វេង។

អត្ថបទតម្រឹមកណ្តាល។

អត្ថបទតម្រឹមស្ដាំ។

<p class = "text-left" > អត្ថបទដែលបានតម្រឹមឆ្វេង។ </p> 
<p class = "text-center" > អត្ថបទតម្រឹមកណ្តាល។ </p> 
<p class = "text-right" > អត្ថបទតម្រឹមស្តាំ។ </p>

ថ្នាក់សង្កត់ធ្ងន់

បង្ហាញអត្ថន័យតាមរយៈពណ៌ដោយប្រើថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលសង្កត់ធ្ងន់។

Fusce dapibus, tellus 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>

អក្សរកាត់

ការអនុវត្តរចនាប័ទ្មនៃ <abbr>ធាតុរបស់ HTML សម្រាប់អក្សរកាត់ និងអក្សរកាត់ដើម្បីបង្ហាញកំណែដែលបានពង្រីកនៅលើដាក់លើ។ អក្សរកាត់ដែលមាន titleគុណលក្ខណៈមានស៊ុមបាតចំនុចស្រាល និងទស្សន៍ទ្រនិចជំនួយនៅលើការដាក់លើ ដែលផ្តល់បរិបទបន្ថែមនៅលើការដាក់លើ។

`<abbr>`

សម្រាប់អត្ថបទដែលបានពង្រីកនៅលើការដាក់អក្សរកាត់ឲ្យវែង រួមបញ្ចូល titleគុណលក្ខណៈ។

អក្សរកាត់នៃពាក្យ attribute គឺ attr ។

<abbr title = "គុណលក្ខណៈ" > 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>
  San Francisco, CA 94107 <br>
  <abbr title = "ទូរស័ព្ទ" > P: </abbr> (123) 456-7890 
</អាសយដ្ឋាន>
 
<អាសយដ្ឋាន>
  <strong> ឈ្មោះពេញ </strong><br>
  <a href="mailto:#"> [email protected] </a> _ _ _ 
</អាសយដ្ឋាន>

ប្លុកសម្រង់

សម្រាប់ការដកស្រង់ប្លុកនៃមាតិកាពីប្រភពផ្សេងទៀតនៅក្នុងឯកសាររបស់អ្នក។

សម្រង់ប្លុកលំនាំដើម

រុំ <blockquote>ជុំវិញ HTML ណាមួយ ជាសម្រង់។ សម្រាប់សម្រង់ត្រង់យើងសូមណែនាំមួយ <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere លុបបំបាត់មុន។

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere លុបបំបាត់មុន។ </p>
</blockquote>

ជម្រើសនៃការដកស្រង់

រចនាប័ទ្ម និងមាតិកាផ្លាស់ប្តូរសម្រាប់បំរែបំរួលសាមញ្ញនៅលើប្លុកសម្រង់ស្តង់ដារ។

ការដាក់ឈ្មោះប្រភព

បន្ថែម <small>ស្លាកសម្រាប់កំណត់អត្តសញ្ញាណប្រភព។ រុំឈ្មោះរបស់ប្រភពការងារនៅក្នុង <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere លុបបំបាត់មុន។
នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere លុបបំបាត់មុន។ </p>
  <small> នរណាម្នាក់ដ៏ល្បីល្បាញ <cite title = "ចំណងជើងប្រភព" > ចំណងជើងប្រភព </cite></small> 
</blockquote>

ការបង្ហាញជំនួស

ប្រើ .pull-rightសម្រាប់ប្លុកសម្រង់ដែលបានតម្រឹមស្តាំអណ្តែត។

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere លុបបំបាត់មុន។
នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព

<blockquote class = "pull-right" > 
  ...
</blockquote>

បញ្ជី

មិនបានបញ្ជាទិញ

បញ្ជីនៃធាតុដែលការបញ្ជាទិញ មិន សំខាន់។

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ចំនួនគត់ molestie lorem និង massa
Facilisis នៅក្នុង Pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat នៅ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ទទួលបាន porttitor lorem

<ul>
  <li> ... </li>
</ul>

បានបញ្ជាទិញ

បញ្ជីនៃវត្ថុដែលបញ្ជាទិញ ពិតជា សំខាន់។

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ចំនួនគត់ molestie lorem និង massa
Facilisis នៅក្នុង Pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ទទួលបាន porttitor lorem

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

គ្មានរចនាប័ទ្ម

យកលំនាំដើម list-styleចេញហើយនៅខាងឆ្វេងលើធាតុក្នុងបញ្ជីចេញ (សម្រាប់តែកុមារភ្លាមៗ)។

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ចំនួនគត់ molestie lorem និង massa
Facilisis នៅក្នុង Pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat នៅ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ទទួលបាន porttitor lorem

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

ក្នុងជួរ

ដាក់ធាតុបញ្ជីទាំងអស់នៅលើបន្ទាត់តែមួយជាមួយ inline-blockនិងបន្ទះពន្លឺមួយចំនួន។

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

ការពិពណ៌នា

បញ្ជីនៃលក្ខខណ្ឌជាមួយនឹងការពិពណ៌នាដែលពាក់ព័ន្ធរបស់ពួកគេ។

បញ្ជីពិពណ៌នា: បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
អ៊ីស្មូដ: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit ។; Donec id elit non mi porta gravida នៅ eget metus។
Malesuada porta: Etiam porta sem malesuada magna mollis euismod ។

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

ការពិពណ៌នាផ្ដេក

បង្កើតលក្ខខណ្ឌ និងការពិពណ៌នា <dl>ជាជួរដោយចំហៀង។

បញ្ជីពិពណ៌នា: បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
អ៊ីស្មូដ: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit ។; Donec id elit non mi porta gravida នៅ eget metus។
Malesuada porta: Etiam porta sem malesuada magna mollis euismod ។
Felis euismod semper eget lacinia: Fusce dapibus, tellus 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>។

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី	បក្សី	@twitter

<table class = "table" > 
  …
</table>

ថ្នាក់ជម្រើស

បន្ថែមថ្នាក់ណាមួយខាងក្រោមទៅថ្នាក់ .tableមូលដ្ឋាន។

`.table-striped`

បន្ថែមការឆ្នូតសេះបង្កង់ទៅជួរតារាងណាមួយនៅក្នុង <tbody>តាមរយៈ :nth-childឧបករណ៍ជ្រើស CSS (មិនមានក្នុង IE7-8)។

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី	បក្សី	@twitter

<table class = "table table-striped" > 
  …
</table>

`.table-bordered`

បន្ថែមស៊ុមនិងជ្រុងមូលទៅតុ។

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
១	ម៉ាក	អូតូ	@getbootstrap
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី បក្សី		@twitter

<table class = "table table-bordered" > 
  …
</table>

`.table-hover`

បើកស្ថានភាពដាក់លើជួរតារាងក្នុង <tbody>.

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី បក្សី		@twitter

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

ធ្វើឱ្យតារាងកាន់តែបង្រួមដោយកាត់បន្ទះក្រឡាជាពាក់កណ្តាល។

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី បក្សី		@twitter

<table class = "table table-condensed" > 
  …
</table>

ថ្នាក់ជួរស្រេចចិត្ត

ប្រើថ្នាក់បរិបទដើម្បីដាក់ពណ៌ជួរតារាង។

ថ្នាក់	ការពិពណ៌នា
`.success`	បង្ហាញពីសកម្មភាពជោគជ័យ ឬវិជ្ជមាន។
`.error`	បង្ហាញពីសកម្មភាពគ្រោះថ្នាក់ ឬសក្តានុពលអវិជ្ជមាន។
`.warning`	បង្ហាញពីការព្រមានដែលអាចត្រូវការការយកចិត្តទុកដាក់។
`.info`	ប្រើជាជម្រើសសម្រាប់រចនាប័ទ្មលំនាំដើម។

#	ផលិតផល	ការទូទាត់ត្រូវបានយក	ស្ថានភាព
១	TB - ប្រចាំខែ	០១/០៤/២០១២	បានអនុម័ត
២	TB - ប្រចាំខែ	០២/០៤/២០១២	បានបដិសេធ
៣	TB - ប្រចាំខែ	០៣/០៤/២០១២	កំពុងរង់ចាំ
៤	TB - ប្រចាំខែ	០៤/០៤/២០១២	ហៅចូលដើម្បីបញ្ជាក់

...
  < tr class = "success" >
    <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>
  <ក្បាល>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

រចនាប័ទ្មលំនាំដើម

ការគ្រប់គ្រងទម្រង់បុគ្គលទទួលបានរចនាប័ទ្ម ប៉ុន្តែដោយគ្មានថ្នាក់មូលដ្ឋានដែលត្រូវការណាមួយនៅលើ <form>ឬការផ្លាស់ប្តូរធំនៅក្នុងការសម្គាល់។ លទ្ធផលនៅក្នុងស្លាកដែលតម្រឹមឆ្វេងជាជង់នៅលើវត្ថុបញ្ជាទម្រង់។

<ទម្រង់>
  <សំណុំវាល>
    <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" > បញ្ជូន </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" > ស្វែងរក </button>  
</form>

ទម្រង់ក្នុងជួរ

បន្ថែម .form-inlineសម្រាប់ស្លាកដែលបានតម្រឹមឆ្វេង និងការគ្រប់គ្រងប្លុកក្នុងបន្ទាត់សម្រាប់ប្លង់បង្រួម។

<form class = "form-inline" > 
  < input type = "text" class = "input-small" placeholder = "Email" >   
  < input type = "password" class = "input-small" placeholder = "password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > ចងចាំខ្ញុំ 
  </label>
  <button type = "submit" class = "btn" > ចូល </button>  
</form>

ទម្រង់ផ្ដេក

តម្រឹមស្លាកខាងស្ដាំ ហើយបណ្តែតពួកវាទៅឆ្វេង ដើម្បីធ្វើឱ្យពួកវាបង្ហាញនៅលើបន្ទាត់ដូចគ្នានឹងវត្ថុបញ្ជា។ ទាមទារការផ្លាស់ប្តូរការសម្គាល់ច្រើនបំផុតពីទម្រង់លំនាំដើម៖

បន្ថែម .form-horizontalទៅទម្រង់
រុំស្លាក និងការគ្រប់គ្រងនៅក្នុង.control-group
បន្ថែម .control-labelទៅស្លាក
រុំការគ្រប់គ្រងដែលពាក់ព័ន្ធ .controlsសម្រាប់ការតម្រឹមត្រឹមត្រូវ ។

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > អ៊ីមែល </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 = "បញ្ជា" > 
      < ប្រភេទ បញ្ចូល = "ពាក្យសម្ងាត់" id = "inputPassword" កន្លែងដាក់ = "ពាក្យសម្ងាត់" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "បញ្ជា" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > ចងចាំខ្ញុំ 
      </label>
      <button type = "submit" class = "btn" > ចូល </button>  
    </div>
  </div>
</form>

ការគ្រប់គ្រងទម្រង់ដែលបានគាំទ្រ

ឧទាហរណ៍នៃការគ្រប់គ្រងទម្រង់ស្តង់ដារដែលគាំទ្រនៅក្នុងប្លង់ទម្រង់ឧទាហរណ៍។

ធាតុចូល

ការគ្រប់គ្រងទម្រង់ទូទៅបំផុត វាលបញ្ចូលដែលមានមូលដ្ឋានលើអត្ថបទ។ រួមបញ្ចូលការគាំទ្រសម្រាប់ប្រភេទ HTML5 ទាំងអស់៖ អត្ថបទ ពាក្យសម្ងាត់ កាលបរិច្ឆេទកាលបរិច្ឆេទ កាលបរិច្ឆេទ-មូលដ្ឋាន កាលបរិច្ឆេទ ខែ ពេលវេលា សប្តាហ៍ លេខ អ៊ីមែល url ការស្វែងរក ទូរស័ព្ទ និងពណ៌។

តម្រូវឱ្យមានការប្រើប្រាស់ដែលបានបញ្ជាក់ typeគ្រប់ពេលវេលា។

< ប្រភេទ បញ្ចូល = "អត្ថបទ" កន្លែងដាក់ = "ការបញ្ចូលអត្ថបទ" >

អត្ថបទ

ការគ្រប់គ្រងទម្រង់ដែលគាំទ្របន្ទាត់ជាច្រើននៃអត្ថបទ។ ផ្លាស់ប្តូរ rowsគុណលក្ខណៈតាមការចាំបាច់។

<textarea rows = "3" ></textarea>

ប្រអប់ធីក និងវិទ្យុ

ប្រអប់ធីកគឺសម្រាប់ជ្រើសរើសជម្រើសមួយ ឬច្រើននៅក្នុងបញ្ជីមួយ ខណៈដែលវិទ្យុគឺសម្រាប់ជ្រើសរើសជម្រើសមួយពីមនុស្សជាច្រើន។

លំនាំដើម (ជង់)

<label class = "checkbox" > 
  < ប្រភេទ បញ្ចូល = "ប្រអប់ធីក" តម្លៃ = "" >  
  ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ
</label>
 
<label class = "វិទ្យុ" > 
  < ប្រភេទ បញ្ចូល = "វិទ្យុ" name = "ជម្រើសវិទ្យុ" id = "ជម្រើសវិទ្យុ 1" តម្លៃ = "ជម្រើស 1" បានធីក >     
  ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ
</label>
<label class = "វិទ្យុ" > 
  < ប្រភេទ បញ្ចូល = "វិទ្យុ" name = "ជម្រើសវិទ្យុ" id = "ជម្រើសវិទ្យុ 2" តម្លៃ = "ជម្រើស 2" >    
  ជម្រើសទីពីរអាចជាអ្វីផ្សេងទៀត ហើយការជ្រើសរើសវានឹងមិនជ្រើសរើសជម្រើសមួយ។
</label>

ប្រអប់ធីកក្នុងជួរ

បន្ថែម .inlineថ្នាក់ទៅប្រអប់ធីកស៊េរី ឬវិទ្យុសម្រាប់វត្ថុបញ្ជាបង្ហាញនៅលើបន្ទាត់តែមួយ។

<label class = "checkbox inline" > 
  < ប្រភេទ បញ្ចូល = "ប្រអប់ធីក" id = "inlineCheckbox1" តម្លៃ = "ជម្រើស1" > 1   
</label>
<label class = "checkbox inline" > 
  < ប្រភេទ បញ្ចូល = "ប្រអប់ធីក" id = "inlineCheckbox2" តម្លៃ = "ជម្រើសទី2" > 2   
</label>
<label class = "checkbox inline" > 
  < ប្រភេទ បញ្ចូល = "ប្រអប់ធីក" id = "inlineCheckbox3" តម្លៃ = "ជម្រើសទី3" > 3   
</label>

ជ្រើសរើស

ប្រើជម្រើសលំនាំដើម ឬបញ្ជាក់ a multiple="multiple"ដើម្បីបង្ហាញជម្រើសច្រើនក្នុងពេលតែមួយ។

<ជ្រើសរើស>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<ជ្រើសរើស ច្រើន = "ច្រើន" > 
  <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" > 
  <បញ្ចូល 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> 
  < ថ្នាក់ បញ្ចូល = "span2" id = "បន្ថែមការបញ្ចូលបន្ថែម" ប្រភេទ = "អត្ថបទ" >   
  <span class = "add-on" > .00 </span> 
</div>

ប៊ូតុងជំនួសឱ្យអត្ថបទ

ជំនួសឱ្យ <span>អក្សរមួយ ប្រើ a .btnដើម្បីភ្ជាប់ប៊ូតុង (ឬពីរ) ទៅនឹងធាតុបញ្ចូល។

<div class = "input-append" > 
  <បញ្ចូល 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" > ស្វែងរក </button>  
  <button class = "btn" type = "button" > ជម្រើស </button>  
</div>

ប៊ូតុងទម្លាក់ចុះ

<div class = "input-append" > 
  <បញ្ចូល 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>
  <បញ្ចូល 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>
  <បញ្ចូល 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>

ក្រុមទម្លាក់ចុះជាផ្នែក

<ទម្រង់>
  <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" > ស្វែងរក </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > ស្វែងរក </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" >   
<ជ្រើសរើស class = "span1" > 
  ...
</select>
<ជ្រើសរើស class = "span2" > 
  ...
</select>
<ជ្រើសរើស class = "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>

ទម្រង់សកម្មភាព

បញ្ចប់ទម្រង់ជាមួយក្រុមសកម្មភាព (ប៊ូតុង)។ នៅពេលដាក់នៅក្នុង .form-actionsប៊ូតុងនឹងចូលបន្ទាត់ដោយស្វ័យប្រវត្តិ ដើម្បីតម្រង់ជួរជាមួយនឹងការគ្រប់គ្រងទម្រង់។

<div class = "form-actions" > 
  <button type = "submit" class = "btn btn-primary" > រក្សាទុកការផ្លាស់ប្តូរ </button>  
  <button type = "button" class = "btn" > បោះបង់ </button>  
</div>

អត្ថបទជំនួយ

ការគាំទ្រកម្រិតក្នុងបន្ទាត់ និងប្លុកសម្រាប់អត្ថបទជំនួយដែលលេចឡើងជុំវិញការគ្រប់គ្រងទម្រង់។

ជំនួយក្នុងបណ្តាញ

<input type = "text" ><span class = "help-inline" > អត្ថបទជំនួយ ក្នុងបន្ទាត់ </span>

រារាំងជំនួយ

<input type = "text" ><span class = "help-block" > ប្លុកនៃអត្ថបទជំនួយវែងជាង ដែលបំបែកទៅបន្ទាត់ថ្មី ហើយអាចលាតសន្ធឹងលើសពីមួយជួរ។ </span>

ទម្រង់គ្រប់គ្រងរដ្ឋ

ផ្តល់មតិកែលម្អដល់អ្នកប្រើប្រាស់ ឬអ្នកទស្សនាជាមួយនឹងស្ថានភាពមតិស្ថាបនាជាមូលដ្ឋានលើការគ្រប់គ្រងទម្រង់ និងស្លាក។

ការផ្តោតអារម្មណ៍បញ្ចូល

យើងលុបរចនាប័ទ្មលំនាំដើម outlineនៅលើការគ្រប់គ្រងទម្រង់មួយចំនួន ហើយអនុវត្ត a box-shadowនៅកន្លែងរបស់វាសម្រាប់ :focus.

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "នេះត្រូវបានផ្ដោត..." >

ការបញ្ចូលមិនត្រឹមត្រូវ

ការបញ្ចូលរចនាប័ទ្មតាមរយៈមុខងារកម្មវិធីរុករកលំនាំដើមជាមួយ :invalid. បញ្ជាក់ a typeបន្ថែម requiredគុណលក្ខណៈ ប្រសិនបើវាលមិនមែនជាជម្រើស ហើយ (ប្រសិនបើមាន) បញ្ជាក់ a pattern.

វាមិនមាននៅក្នុងកំណែរបស់ Internet Explorer 7-9 ដោយសារកង្វះការគាំទ្រសម្រាប់ CSS pseudo selectors ។

<បញ្ចូល ថ្នាក់ = "span3" ប្រភេទ = "អ៊ីមែល" ទាមទារ >

ធាតុចូលដែលបិទ

បន្ថែម disabledគុណលក្ខណៈនៅលើធាតុបញ្ចូល ដើម្បីការពារការបញ្ចូលរបស់អ្នកប្រើ និងបង្កឱ្យមានរូបរាងខុសគ្នាបន្តិច។

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "បិទការបញ្ចូលនៅទីនេះ..." disabled >

បញ្ជាក់សុពលភាព

Bootstrap រួមបញ្ចូលរចនាប័ទ្មសុពលភាពសម្រាប់កំហុស ការព្រមាន ព័ត៌មាន និងសារជោគជ័យ។ ដើម្បីប្រើ សូមបន្ថែមថ្នាក់សមរម្យទៅកន្លែងជុំវិញ .control-group។

<div class = "control-group warning" > 
  <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 = "បញ្ជា" > 
    < ប្រភេទ បញ្ចូល = "អត្ថបទ" id = "កំហុសបញ្ចូល" >  
    <span class = "help-inline" > សូមកែកំហុស </span> 
  </div>
</div>
 
<div class = "ព័ត៌មានក្រុមបញ្ជា" > 
  <label class = "control-label" for = "inputInfo" > បញ្ចូលជាមួយព័ត៌មាន </label>  
  <div class = "បញ្ជា" > 
    < ប្រភេទ បញ្ចូល = "អត្ថបទ" id = "ព័ត៌មានបញ្ចូល" >  
    <span class = "help-inline" > ឈ្មោះអ្នកប្រើត្រូវបានយករួចហើយ </span> 
  </div>
</div>
 
<div class = "control-group success" > 
  <label class = "control-label" for = "inputSuccess" > បញ្ចូលដោយជោគជ័យ </label>  
  <div class = "បញ្ជា" > 
    < ប្រភេទ បញ្ចូល = "អត្ថបទ" id = "បញ្ចូលជោគជ័យ" >  
    <span class = "help-inline" > អ៊ូហូ! </span> 
  </div>
</div>

ប៊ូតុងលំនាំដើម

រចនាប័ទ្មប៊ូតុងអាចត្រូវបានអនុវត្តចំពោះអ្វីទាំងអស់ជាមួយនឹង .btnថ្នាក់ដែលបានអនុវត្ត។ ទោះជាយ៉ាងណាក៏ដោយ ជាធម្មតា អ្នកនឹងចង់អនុវត្តទាំងនេះចំពោះតែ <a>និង <button>ធាតុសម្រាប់ការបង្ហាញដ៏ល្អបំផុត។

ប៊ូតុង	ថ្នាក់ = ""	ការពិពណ៌នា
	`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ធាតុដែលបានបិទ ដោយបង្ហាញអត្ថបទពណ៌ប្រផេះជាមួយស្រមោលអត្ថបទអាក្រក់ដែលយើងមិនអាចជួសជុលបាន។

ទំហំប៊ូតុង

ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? បន្ថែម .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" > ប៊ូតុងលំនាំដើម </button>  
  <button class = "btn" type = "button" > ប៊ូតុងលំនាំដើម </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" > ប៊ូតុងតូច </button>  
  <button class = "btn btn-mini" type = "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" > ប៊ូតុងកម្រិតប្លុក </button>

រដ្ឋពិការ

ធ្វើឱ្យប៊ូតុងមើលទៅមិនអាចចុចបានដោយបន្ថយពួកវាត្រឡប់មកវិញ 50% ។

ធាតុយុថ្កា

បន្ថែម .disabledថ្នាក់ទៅ <a>ប៊ូតុង។

តំណភ្ជាប់បឋម តំណភ្ជាប់

<a href="#" class="btn btn-large btn-primary disabled"> តំណ ចម្បង </a> _  
<a href="#" class="btn btn-large disabled"> តំណ ភ្ជាប់ </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=""> តំណ ភ្ជាប់ </a> _ _ _ _  
<button class = "btn" type = "submit" > ប៊ូតុង </button>  
<input class = "btn" type = "button" value = "បញ្ចូល" >   
<input class = "btn" type = "submit" value = "ដាក់ស្នើ" >

ជាការអនុវត្តល្អបំផុត សូមព្យាយាមផ្គូផ្គងធាតុសម្រាប់បរិបទរបស់អ្នក ដើម្បីធានាឱ្យមានការផ្គូផ្គងការបង្ហាញតាមកម្មវិធីរុករកតាមអ៊ីនធឺណិត។ ប្រសិនបើអ្នកមាន 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 ក្នុងទម្រង់ sprite មានពណ៌ប្រផេះងងឹត (លំនាំដើម) និងពណ៌ស ដែលផ្តល់ដោយ Glyphicons ។

រូបតំណាង - កញ្ចក់
រូបតំណាង - តន្ត្រី
រូបតំណាង - ស្វែងរក
រូបតំណាង-ស្រោមសំបុត្រ
រូបតំណាង - បេះដូង
រូបតំណាង-តារា
រូបតំណាង-ផ្កាយ-ទទេ
រូបតំណាង - អ្នកប្រើប្រាស់
រូបតំណាង - ខ្សែភាពយន្ត
រូបតំណាង - ទី - ធំ
រូបតំណាង-ទី
icon-th-list
រូបតំណាង-យល់ព្រម
រូបតំណាង - ដកចេញ
រូបតំណាង-ពង្រីក
រូបតំណាង-ពង្រីក-ចេញ
រូបតំណាងបិទ
រូបតំណាង - សញ្ញា
icon-cog
រូបតំណាង - សំរាម
រូបតំណាង - ផ្ទះ
រូបតំណាង-ឯកសារ
រូបតំណាងពេលវេលា
រូបតំណាងផ្លូវ
icon-download-alt
រូបតំណាង - ទាញយក
រូបតំណាង - ផ្ទុកឡើង
រូបតំណាង-ប្រអប់សំបុត្រ
រូបតំណាង-លេង-រង្វង់
រូបតំណាង - ធ្វើម្តងទៀត
រូបតំណាង - ធ្វើឱ្យស្រស់
icon-list-alt
រូបតំណាងចាក់សោ
រូបតំណាង - ទង់ជាតិ
រូបតំណាង - កាសស្តាប់ត្រចៀក
រូបតំណាង-កម្រិតសំឡេង-បិទ
រូបតំណាង - កម្រិតសំឡេងចុះក្រោម
រូបតំណាង - បរិមាណឡើង
រូបតំណាង-qrcode
រូបតំណាង-បារកូដ
រូបតំណាង-ស្លាក
រូបតំណាង-ស្លាក
សៀវភៅរូបតំណាង
រូបតំណាង-ចំណាំ
រូបតំណាង-បោះពុម្ព
រូបតំណាង - កាមេរ៉ា
រូបតំណាង-ពុម្ពអក្សរ
រូបតំណាង - ដិត
រូបតំណាង-ទ្រេត
រូបតំណាង-អត្ថបទ-កម្ពស់
រូបតំណាង-ទទឹងអត្ថបទ
រូបតំណាង-តម្រឹម-ឆ្វេង
រូបតំណាង-តម្រឹម-កណ្តាល
រូបតំណាង-តម្រឹម-ស្ដាំ
icon-align-justify
បញ្ជីរូបតំណាង
រូបតំណាង-ចូលបន្ទាត់-ឆ្វេង
រូបតំណាង-ចូលបន្ទាត់-ស្ដាំ
រូបតំណាង-facetime-វីដេអូ
រូបតំណាង - រូបភាព
រូបតំណាង-ខ្មៅដៃ
រូបតំណាង - ផែនទី - សញ្ញាសម្គាល់
រូបតំណាង - កែតម្រូវ
រូបតំណាង-ពណ៌
រូបតំណាង-កែសម្រួល
រូបតំណាង-ចែករំលែក
ពិនិត្យរូបតំណាង
រូបតំណាង - ផ្លាស់ទី
រូបតំណាង - ថយក្រោយ
រូបតំណាង - លឿន - ថយក្រោយ
រូបតំណាង - ថយក្រោយ
រូបតំណាងលេង
រូបតំណាង - ផ្អាក
រូបតំណាងឈប់
រូបតំណាងទៅមុខ
រូបតំណាង - លឿនទៅមុខ
រូបតំណាង - ជំហានទៅមុខ
រូបតំណាង - ច្រានចេញ
icon-chevron-ឆ្វេង
icon-chevron-ស្តាំ
រូបតំណាងបូកសញ្ញា
រូបតំណាង - សញ្ញាដក
រូបតំណាង - ដក - សញ្ញា
រូបតំណាង-យល់ព្រម-សញ្ញា
រូបតំណាង-សំណួរ-សញ្ញា
រូបតំណាង-ព័ត៌មាន-សញ្ញា
រូបតំណាង - រូបថតអេក្រង់
រូបតំណាង-ដកចេញ-រង្វង់
រូបតំណាង - យល់ព្រម - រង្វង់
រូបតំណាង-ហាម-រង្វង់
រូបតំណាង-ព្រួញ-ឆ្វេង
រូបតំណាង-ព្រួញ-ស្ដាំ
រូបតំណាង-ព្រួញឡើងលើ
រូបតំណាង-ព្រួញចុះក្រោម
រូបតំណាង-ចែករំលែក-alt
រូបតំណាង-ប្តូរទំហំពេញ
រូបតំណាង - ផ្លាស់ប្តូរទំហំតូច
រូបតំណាង-បូក
រូបតំណាង - ដក
រូបតំណាង - សញ្ញាផ្កាយ
រូបតំណាង-ឧទាន-សញ្ញា
រូបតំណាង - អំណោយ
រូបតំណាង - ស្លឹក
រូបតំណាងភ្លើង
រូបតំណាងបើកភ្នែក
រូបតំណាង - បិទភ្នែក
រូបតំណាង - សញ្ញាព្រមាន
រូបតំណាង - យន្តហោះ
រូបតំណាង - ប្រតិទិន
រូបតំណាង - ចៃដន្យ
រូបតំណាង - មតិយោបល់
រូបតំណាង - មេដែក
icon-chevron-up
រូបតំណាង - ឆេវរ៉ុនចុះក្រោម
icon-retweet
រូបតំណាង - រទេះទិញទំនិញ
រូបតំណាង-ថតឯកសារ-បិទ
រូបតំណាង-ថតឯកសារ-បើក
រូបតំណាង - ផ្លាស់ប្តូរទំហំ - បញ្ឈរ
រូបតំណាង - ផ្លាស់ប្តូរទំហំ - ផ្ដេក
រូបតំណាង-hdd
រូបតំណាង-bullhorn
រូបតំណាង-កណ្តឹង
រូបតំណាង - វិញ្ញាបនប័ត្រ
រូបតំណាង - មេដៃឡើង
រូបតំណាង-មេដៃចុះក្រោម
រូបតំណាង - ដៃស្តាំ
រូបតំណាង - ដៃឆ្វេង
រូបតំណាងការលើកដៃ
រូបតំណាង-ចុះក្រោម
រូបតំណាង-រង្វង់-ព្រួញ-ស្ដាំ
រូបតំណាង-រង្វង់-ព្រួញ-ឆ្វេង
រូបតំណាង-រង្វង់-ព្រួញឡើងលើ
រូបតំណាង-រង្វង់-ព្រួញចុះក្រោម
រូបតំណាង - ពិភពលោក
រូបតំណាង - wrench
រូបតំណាង - ភារកិច្ច
តម្រងរូបតំណាង
រូបតំណាង-កាបូបស្ពាយ
រូបតំណាងពេញអេក្រង់

គុណលក្ខណៈ Glyphicons

Glyphicons Halflings ជាធម្មតាមិនមានផ្តល់ជូនដោយឥតគិតថ្លៃទេ ប៉ុន្តែការរៀបចំរវាង Bootstrap និងអ្នកបង្កើត Glyphicons បានធ្វើឱ្យវាអាចធ្វើទៅបានដោយមិនគិតថ្លៃសម្រាប់អ្នកជាអ្នកអភិវឌ្ឍន៍។ ជាការថ្លែងអំណរគុណ យើងស្នើឱ្យអ្នកបញ្ចូលតំណភ្ជាប់ស្រេចចិត្តត្រឡប់ទៅ Glyphicons នៅពេលណាដែលជាក់ស្តែង។

របៀបប្រើ

រូបតំណាងទាំងអស់ទាមទារ <i>ស្លាកដែលមានថ្នាក់តែមួយគត់ បុព្វបទដោយ icon-. ដើម្បីប្រើ សូមដាក់កូដខាងក្រោមនៅគ្រប់ទីកន្លែង៖

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

វាក៏មានរចនាប័ទ្មដែលអាចរកបានសម្រាប់រូបតំណាងដាក់បញ្ច្រាស (ពណ៌ស) ដែលត្រូវបានរៀបចំរួចរាល់ជាមួយនឹងថ្នាក់បន្ថែមមួយ។ យើងនឹងអនុវត្តជាពិសេសថ្នាក់នេះលើការដាក់កណ្ដុរ និងស្ថានភាពសកម្មសម្រាប់តំណរុករក និងតំណទម្លាក់ចុះ។

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

ព្រឺក្បាល!នៅពេលប្រើនៅក្បែរខ្សែអក្សរ ដូចជានៅក្នុងប៊ូតុង ឬតំណរុករក ត្រូវប្រាកដថាទុកចន្លោះមួយបន្ទាប់ពី <i>ស្លាកសម្រាប់គម្លាតត្រឹមត្រូវ។

ឧទាហរណ៍រូបតំណាង

ប្រើពួកវានៅក្នុងប៊ូតុង ក្រុមប៊ូតុងសម្រាប់របារឧបករណ៍ ការរុករក ឬការបញ្ចូលទម្រង់ដែលបានភ្ជាប់ជាមុន។

ប៊ូតុង

ក្រុមប៊ូតុងនៅក្នុងរបារឧបករណ៍ប៊ូតុង

<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 = "active" > <a href="#"> <i class = " icon-home icon-white" ></i> Home </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="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>