មាត្រដ្ឋានវាយអក្សរ

ក្រឡាចត្រង្គវាយអក្សរទាំងមូលគឺផ្អែកលើអថេរ Less ពីរនៅក្នុងឯកសារ variables.less របស់យើង៖ @baseFontSizeនិង @baseLineHeight. ទីមួយ​គឺ​ទំហំ​ពុម្ពអក្សរ​មូលដ្ឋាន​ដែល​បាន​ប្រើ​ពេញ​មួយ ហើយ​ទីពីរ​គឺ​កម្ពស់​បន្ទាត់​មូលដ្ឋាន។

យើងប្រើអថេរទាំងនោះ និងគណិតវិទ្យាមួយចំនួន ដើម្បីបង្កើតរឹម បន្ទះ និងបន្ទាត់កម្ពស់នៃប្រភេទរបស់យើង និងច្រើនទៀត។

ឧទាហរណ៍អត្ថបទ

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 ut id elit ។

Vivamus sagittis lacus vel auggue laoreet rutrum faucibus dolor auctor ។ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit ។ Donec sed odio dui ។

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

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

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

អាសយដ្ឋានឧទាហរណ៍

នេះគឺជាឧទាហរណ៍ពីរនៃរបៀបដែល <address>ស្លាកអាចត្រូវបានប្រើ:

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

ឈ្មោះពេញ
[email protected]

ឧទាហរណ៍អក្សរកាត់

អក្សរកាត់​ដែល​មាន title​គុណលក្ខណៈ​មាន​ស៊ុម​បាត​ចំនុច​ស្រាល និង​ទស្សន៍ទ្រនិច​ជំនួយ​នៅ​លើ​ដាក់​លើ។ នេះផ្តល់ឱ្យអ្នកប្រើប្រាស់នូវការចង្អុលបង្ហាញបន្ថែមថា អ្វីមួយដែលនឹងត្រូវបានបង្ហាញនៅពេលដាក់។

បន្ថែម initialismថ្នាក់ទៅជាអក្សរកាត់មួយដើម្បីបង្កើនភាពសុខដុមនៃការវាយអក្សរដោយផ្តល់ឱ្យវានូវទំហំអត្ថបទតូចជាងបន្តិច។

HTML គឺជារឿងដ៏ល្អបំផុតចាប់តាំងពីនំប៉័ងចំណិត។

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

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

រួមបញ្ចូលធាតុស្រេចចិត្ត <small>ដើម្បីដកស្រង់ប្រភពរបស់អ្នក ហើយអ្នកនឹងទទួលបាន em dash —មុនពេលវាសម្រាប់គោលបំណងរចនាប័ទ្ម។

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។ </p>
  <small> អ្នកល្បីល្បាញ </small>
</blockquote>

សម្រង់ប្លុកលំនាំដើមត្រូវបានកំណត់រចនាប័ទ្មដូចនេះ៖

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។

បុគ្គលល្បីខាង ផ្នែកការងារ

ដើម្បីបណ្តែតសម្រង់ប្លុករបស់អ្នកទៅខាងស្តាំ សូមបន្ថែម class="pull-right"៖

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។

បុគ្គលល្បីខាង ផ្នែកការងារ

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

<ul>

• 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">

• 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

បានបញ្ជាទិញ

<ol>

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

ការពិពណ៌នា

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

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

<dl class="dl-horizontal">

បញ្ជីពិពណ៌នា

បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។

អ៊ីស្មូដ

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។

---

ព្រឺក្បាល! បញ្ជី​ពណ៌នា​ផ្ដេក​នឹង​កាត់​ឲ្យ​ខ្លី​ពាក្យ​ដែល​វែង​ពេក​ដើម្បី​សម​ក្នុង​ការ​ជួសជុល​ជួរ​ឈរ​ខាង​ឆ្វេង text-overflow។ នៅ​ក្នុង​ច្រក​មើល​តូច​ជាង​នេះ ពួក​គេ​នឹង​ផ្លាស់​ប្តូរ​ទៅ​ប្លង់​ជង់​លំនាំដើម។

ក្នុងជួរ

រុំផ្នែកតូចៗនៃកូដក្នុងជួរជាមួយ <code>.

ឧទាហរណ៍ <code> section </ code > គួរតែ ត្រូវ បាន រុំ ជាជួរ ។  

ប្លុកមូលដ្ឋាន

ប្រើ <pre>សម្រាប់បន្ទាត់កូដច្រើន។ ត្រូវប្រាកដថាគេចចេញពីតង្កៀបមុំណាមួយនៅក្នុងកូដសម្រាប់ការបង្ហាញត្រឹមត្រូវ។

<p>អត្ថបទគំរូនៅទីនេះ...</p>

<មុន>
  <p>អត្ថបទគំរូនៅទីនេះ...</p>
</pre>

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

អ្នកអាចបន្ថែម .pre-scrollableថ្នាក់ជាជម្រើសដែលនឹងកំណត់កម្ពស់អតិបរមា 350px និងផ្តល់នូវរបាររមូរអ័ក្ស y ។

Google Prettify

យក <pre>ធាតុដូចគ្នា ហើយបន្ថែមថ្នាក់ជាជម្រើសពីរសម្រាប់ការបង្ហាញដែលប្រសើរឡើង។

<p> អត្ថបទគំរូនៅទីនេះ... </p>

<pre class = "prettyprint 
     បន្ទាត់" >
  <p>អត្ថបទគំរូនៅទីនេះ...</p>
</pre>

ទាញយក google-code-prettify ហើយមើល readme សម្រាប់របៀបប្រើ។

ស្លាក	ការពិពណ៌នា
<table>	ធាតុរុំសម្រាប់បង្ហាញទិន្នន័យក្នុងទម្រង់តារាង
<thead>	ធាតុ​កុងតឺន័រ​សម្រាប់​ជួរ​ដេក​ក្បាល​តារាង ( <tr>) ដើម្បី​ដាក់​ស្លាក​ជួរ​ឈរ​តារាង
<tbody>	ធាតុកុងតឺន័រសម្រាប់ជួរតារាង ( <tr>) នៅក្នុងតួតារាង
<tr>	ធាតុកុងតឺន័រសម្រាប់សំណុំនៃក្រឡាតារាង ( <td>ឬ <th>) ដែលបង្ហាញនៅលើជួរតែមួយ
<td>	ក្រឡាតារាងលំនាំដើម
<th>	ក្រឡាតារាងពិសេសសម្រាប់ជួរឈរ (ឬជួរដេកអាស្រ័យលើវិសាលភាព និងការដាក់) ស្លាក ត្រូវតែប្រើក្នុង a<thead>
<caption>	ការពិពណ៌នា ឬសេចក្តីសង្ខេបនៃអ្វីដែលតារាងមាន ជាពិសេសមានប្រយោជន៍សម្រាប់អ្នកអានអេក្រង់

<តារាង>
  <ក្បាល>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</table>

តារាង​ត្រូវ​បាន​កំណត់​រចនាប័ទ្ម​ដោយ​ស្វ័យ​ប្រវត្តិ​ដោយ​មាន​ស៊ុម​តែ​មួយ​ចំនួន​ប៉ុណ្ណោះ ដើម្បី​ធានា​ថា​អាច​អាន​បាន និង​រក្សា​រចនាសម្ព័ន្ធ។ ជាមួយនឹង 2.0 .tableថ្នាក់ត្រូវបានទាមទារ។

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

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

ទទួលបានភាពស្រើបស្រាលជាមួយតុរបស់អ្នកដោយបន្ថែមការឆ្នូតសេះបង្កង់ - គ្រាន់តែបន្ថែម .table-stripedថ្នាក់។

ចំណាំ៖ តារាងឆ្នូតប្រើ :nth-childឧបករណ៍ជ្រើសរើស CSS ហើយមិនមាននៅក្នុង IE7-IE8 ទេ។

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

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

បន្ថែមស៊ុមជុំវិញតុទាំងមូល និងជ្រុងមូលសម្រាប់គោលបំណងសាភ័ណភ្ព។

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

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

ធ្វើឱ្យតារាងរបស់អ្នកកាន់តែបង្រួមដោយបន្ថែម .table-condensedថ្នាក់ដើម្បីកាត់ក្រឡាតារាងជាពាក់កណ្តាល (ពី 8px ដល់ 4px) ។

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

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

មានអារម្មណ៍សេរីក្នុងការរួមបញ្ចូលគ្នានៃថ្នាក់តារាងណាមួយ ដើម្បីសម្រេចបាននូវរូបរាងផ្សេងគ្នាដោយប្រើប្រាស់ថ្នាក់ដែលមាន។

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

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

HTML និង CSS ដែលអាចបត់បែនបាន។

ផ្នែកដ៏ល្អបំផុតអំពីទម្រង់នៅក្នុង Bootstrap គឺថារាល់ធាតុចូល និងការគ្រប់គ្រងរបស់អ្នកមើលទៅអស្ចារ្យមិនថាអ្នកបង្កើតពួកវានៅក្នុងការសម្គាល់របស់អ្នកដោយរបៀបណានោះទេ។ មិនតម្រូវឱ្យមាន HTML ហួសហេតុនោះទេ ប៉ុន្តែយើងផ្តល់គំរូសម្រាប់អ្នកដែលត្រូវការវា។

ប្លង់ដែលស្មុគស្មាញជាងនេះមកជាមួយថ្នាក់សង្ខេប និងអាចធ្វើមាត្រដ្ឋានបានសម្រាប់រចនាប័ទ្មងាយស្រួល និងការចងព្រឹត្តិការណ៍ ដូច្នេះអ្នកត្រូវបានគ្របដណ្តប់នៅគ្រប់ជំហាន។

ប្លង់ចំនួនបួនរួមបញ្ចូល

Bootstrap ភ្ជាប់មកជាមួយការគាំទ្រសម្រាប់ប្លង់ទម្រង់បួនប្រភេទ៖

• បញ្ឈរ (លំនាំដើម)
• ស្វែងរក
• ក្នុងជួរ
• ផ្ដេក

ប្រភេទផ្សេងគ្នានៃប្លង់ទម្រង់តម្រូវឱ្យមានការផ្លាស់ប្ដូរមួយចំនួនដើម្បីសម្គាល់ ប៉ុន្តែការគ្រប់គ្រងខ្លួនឯងនៅតែមាន និងមានលក្ខណៈដូចគ្នា។

គ្រប់គ្រងរដ្ឋ និងច្រើនទៀត

ទម្រង់របស់ Bootstrap រួមបញ្ចូលរចនាប័ទ្មសម្រាប់ការគ្រប់គ្រងទម្រង់មូលដ្ឋានទាំងអស់ដូចជា ការបញ្ចូល ផ្ទៃអត្ថបទ និងការជ្រើសរើសដែលអ្នកចង់បាន។ ប៉ុន្តែវាក៏មានភ្ជាប់មកជាមួយនូវសមាសធាតុផ្ទាល់ខ្លួនមួយចំនួនផងដែរ ដូចជាការបញ្ចូលបន្ថែម និងដែលបានបន្ថែមជាមុន និងការគាំទ្រសម្រាប់បញ្ជីប្រអប់ធីក។

រដ្ឋដូចជាកំហុស ការព្រមាន និងភាពជោគជ័យត្រូវបានរួមបញ្ចូលសម្រាប់ប្រភេទនៃការគ្រប់គ្រងទម្រង់នីមួយៗ។ រួមបញ្ចូលផងដែរគឺជារចនាប័ទ្មសម្រាប់ការគ្រប់គ្រងដែលបិទ។

ទម្រង់មូលដ្ឋាន

លំនាំដើមឆ្លាតវៃ និងទម្ងន់ស្រាល ដោយគ្មានសញ្ញាសម្គាល់បន្ថែម។

ឈ្មោះស្លាក

ឧទាហរណ៍អត្ថបទជំនួយកម្រិតប្លុកនៅទីនេះ។

សូមពិនិត្យមើលខ្ញុំ ដាក់ស្នើ

<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" > បញ្ជូន </button>  
</form>

ទម្រង់ស្វែងរក

បន្ថែម .form-search​ទៅ​ក្នុង​សំណុំ​បែបបទ និង .search-query​ទៅ​ក្នុង input.

ស្វែងរក

<form class = "well form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > ស្វែងរក </button>  
</form>

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

បន្ថែម .form-inline​ដើម្បី​សម្រួល​ការ​តម្រឹម​បញ្ឈរ និង​គម្លាត​នៃ​ការ​គ្រប់គ្រង​ទម្រង់។

ចងចាំខ្ញុំ ចូល

<form class = "well 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>

បង្ហាញនៅខាងស្តាំគឺជាការគ្រប់គ្រងទម្រង់លំនាំដើមទាំងអស់ដែលយើងគាំទ្រ។ នេះ​ជា​បញ្ជី​ចំណុច៖

• ការបញ្ចូលអត្ថបទ (អត្ថបទ ពាក្យសម្ងាត់ អ៊ីមែល។ល។)
• ប្រអប់ធីក
• វិទ្យុ
• ជ្រើសរើស
• ជ្រើសរើសច្រើន។
• ការបញ្ចូលឯកសារ
• តំបន់អត្ថបទ

ការបញ្ចូលអត្ថបទ

បន្ថែមពីលើអត្ថបទទម្រង់ឥតគិតថ្លៃ ការបញ្ចូលអត្ថបទដែលមានមូលដ្ឋានលើ HTML5 លេចឡើងដូចនេះ។

ប្រអប់ធីក

ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ

ជ្រើសរើសបញ្ជី

អ្វីមួយ ២ ៣ ៤ ៥

Multicon-ជ្រើសរើស

១ ២ ៣ ៤ ៥

ការបញ្ចូលឯកសារ

អត្ថបទ

រក្សាទុកការផ្លាស់ប្តូរ បោះបង់

ឧទាហរណ៍សម្គាល់

ដោយ​បាន​ផ្ដល់​ឱ្យ​នូវ​គំរូ​ទម្រង់​ប្លង់​ខាង​លើ នេះ​ជា​ការ​សម្គាល់​ដែល​ភ្ជាប់​ជាមួយ​នឹង​ការ​បញ្ចូល និង​ក្រុម​ត្រួតពិនិត្យ​ដំបូង។ ថ្នាក់ .control-group, .control-label, និង .controlsថ្នាក់ទាំងអស់ត្រូវបានទាមទារសម្រាប់រចនាប័ទ្ម។

<form class = "form-horizontal" > 
  <សំណុំវាល>
    <legend> អត្ថបទរឿងព្រេង </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > ការបញ្ចូលអត្ថបទ </label>  
      <div class = "បញ្ជា" > 
        < ប្រភេទ បញ្ចូល = "អត្ថបទ" class = "បញ្ចូល-xlarge" id = "បញ្ចូល01" >   
        <p class = "help-block" > គាំទ្រអត្ថបទជំនួយ </p> 
      </div>
    </div>
  </fieldset>
</form>

disabledBootstrap មានលក្ខណៈពិសេសរចនាប័ទ្មសម្រាប់ការផ្តោតអារម្មណ៍ និង រដ្ឋ ដែលគាំទ្រដោយកម្មវិធីរុករក ។ យើងដក Webkit លំនាំដើមចេញ outlineហើយអនុវត្ត a box-shadowនៅកន្លែងរបស់វាសម្រាប់ :focus.

---

ការបញ្ជាក់ទម្រង់

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

<សំណុំវាល
  class = "control-group error" >
  …
</fieldset>

ការបញ្ចូលដែលផ្តោត

ការបញ្ចូលដែលមិនអាចកែប្រែបាន។

តម្លៃខ្លះនៅទីនេះ

បានបិទការបញ្ចូល

បានបិទប្រអប់ធីក

នេះគឺជាប្រអប់ធីកដែលបិទ

បញ្ចូលជាមួយការព្រមាន

មានអ្វីមួយខុសប្រក្រតី

បញ្ចូលជាមួយកំហុស

សូមកែកំហុស

បញ្ចូលដោយជោគជ័យ

ហូហូ!

ជ្រើសរើសដោយជោគជ័យ

១ ២ ៣ ៤ ៥ ហូហូ!

រក្សាទុកការផ្លាស់ប្តូរ បោះបង់

បន្ថែម និងបន្ថែមធាតុចូល

ក្រុមបញ្ចូល — ជាមួយ​នឹង​អត្ថបទ​បន្ថែម ឬ​បន្ថែម​ខាង​មុខ — ផ្តល់​នូវ​វិធី​ងាយ​ស្រួល​ក្នុង​ការ​ផ្តល់​បរិបទ​បន្ថែម​ទៀត​សម្រាប់​ការ​បញ្ចូល​របស់​អ្នក។ ឧទាហរណ៍ដ៏អស្ចារ្យរួមមានសញ្ញា @ សម្រាប់ឈ្មោះអ្នកប្រើប្រាស់ Twitter ឬ $ សម្រាប់ហិរញ្ញវត្ថុ។

---

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

រហូតដល់ 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

បន្ថែមដោយប៊ូតុង

ទៅ!

បន្ថែមប៊ូតុងពីរ

ស្វែងរក ជម្រើស

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

១ ២ ៣

ប្រអប់ធីក

ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ ជម្រើសទីពីរក៏អាចត្រូវបានពិនិត្យ និងបញ្ចូលក្នុងលទ្ធផលទម្រង់ ជម្រើសទីបីអាច—បាទ អ្នកបានទាយវា—ក៏ត្រូវបានពិនិត្យ និងបញ្ចូលក្នុងលទ្ធផលទម្រង់ផងដែរ។

ចំណាំ៖ ស្លាកជុំវិញជម្រើសទាំងអស់សម្រាប់តំបន់ចុចធំជាង និងទម្រង់ដែលអាចប្រើបានច្រើនជាង។

ប៊ូតុងវិទ្យុ

ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ ជម្រើសទីពីរអាចជាអ្វីផ្សេងទៀត ហើយការជ្រើសរើសវានឹងមិនជ្រើសរើសជម្រើសមួយ។

រក្សាទុកការផ្លាស់ប្តូរ បោះបង់

ប៊ូតុងសម្រាប់សកម្មភាព

ក្នុងនាមជាអនុសញ្ញា ប៊ូតុងគួរតែត្រូវបានប្រើសម្រាប់តែសកម្មភាព ខណៈពេលដែលតំណខ្ពស់នឹងត្រូវប្រើសម្រាប់វត្ថុ។ ឧទាហរណ៍ "ទាញយក" គួរតែជាប៊ូតុងមួយ ខណៈដែល "សកម្មភាពថ្មីៗ" គួរតែជាតំណ។

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

ភាពឆបគ្នារបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត

IE9 មិនច្រឹបជម្រាលផ្ទៃខាងក្រោយនៅលើជ្រុងមូលទេ ដូច្នេះយើងលុបវាចេញ។ ពាក់ព័ន្ធ IE9 បន្ថែម button​ធាតុ​ដែល​បាន​បិទ ដោយ​បង្ហាញ​អត្ថបទ​ពណ៌​ប្រផេះ​ជាមួយ​ស្រមោល​អត្ថបទ​អាក្រក់​ដែល​យើង​មិន​អាច​ជួសជុល​បាន។

ទំហំច្រើន។

ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? បន្ថែម .btn-large, .btn-smallឬ .btn-miniសម្រាប់ទំហំបន្ថែមពីរ។

សកម្មភាពបឋម សកម្មភាព

សកម្មភាពបឋម សកម្មភាព

សកម្មភាពបឋម សកម្មភាព

រដ្ឋពិការ

សម្រាប់ប៊ូតុងបិទ សូមបន្ថែម .disabledថ្នាក់ទៅតំណ និង disabledគុណលក្ខណៈសម្រាប់ <button>ធាតុ។

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

ប៊ូតុងបឋម ប៊ូតុង

ព្រឺក្បាល! យើងប្រើ .disabledជាថ្នាក់ឧបករណ៍ប្រើប្រាស់នៅទីនេះ ស្រដៀងនឹង .activeថ្នាក់ទូទៅ ដូច្នេះមិនទាមទារបុព្វបទទេ។

ថ្នាក់មួយ ស្លាកច្រើន។

ប្រើ .btnថ្នាក់នៅលើ <a>, <button>, ឬ <input>ធាតុ។

តំណភ្ជាប់ ប៊ូតុង

<a class="btn" href=""> តំណ ភ្ជាប់ </a> _ _ _ _  
<button class = "btn" type = "submit" >  
  ប៊ូតុង
</button>
<input class = "btn" type = "button"  
         តម្លៃ = "បញ្ចូល" >
<បញ្ចូល class = "btn" type = "submit"  
         តម្លៃ = "បញ្ជូន" >

ជាការអនុវត្តល្អបំផុត សូមព្យាយាមផ្គូផ្គងធាតុសម្រាប់បរិបទរបស់អ្នក ដើម្បីធានាឱ្យមានការផ្គូផ្គងការបង្ហាញតាមកម្មវិធីរុករកតាមអ៊ីនធឺណិត។ ប្រសិន​បើ​អ្នក​មាន inputសូម​ប្រើ <input type="submit">​ប៊ូតុង​របស់​អ្នក។

• រូបតំណាង - កញ្ចក់
• រូបតំណាង - តន្ត្រី
• រូបតំណាង - ស្វែងរក
• រូបតំណាង-ស្រោមសំបុត្រ
• រូបតំណាង - បេះដូង
• រូបតំណាង-តារា
• រូបតំណាង-ផ្កាយ-ទទេ
• រូបតំណាង - អ្នកប្រើប្រាស់
• រូបតំណាង - ខ្សែភាពយន្ត
• រូបតំណាង - ទី - ធំ
• រូបតំណាង-ទី
• 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
• រូបតំណាង - ភារកិច្ច
• តម្រងរូបតំណាង
• រូបតំណាង-កាបូបស្ពាយ
• រូបតំណាងពេញអេក្រង់

សាងសង់ជា sprite

ជំនួសឱ្យការធ្វើឱ្យរូបតំណាងនីមួយៗក្លាយជាសំណើបន្ថែម យើងបានចងក្រងពួកវាទៅជា sprite ដែលជាបណ្តុំនៃរូបភាពនៅក្នុងឯកសារមួយដែលប្រើ CSS ដើម្បីដាក់រូបភាពជាមួយ background-position. នេះគឺជាវិធីសាស្រ្តដូចគ្នាដែលយើងប្រើនៅលើ Twitter.com ហើយវាដំណើរការល្អសម្រាប់យើង។

ថ្នាក់រូបតំណាងទាំងអស់ត្រូវបានបុព្វបទជាមួយ .icon-សម្រាប់ការកំណត់ឈ្មោះ និងវិសាលភាពត្រឹមត្រូវ ដូចជាសមាសធាតុផ្សេងទៀតរបស់យើង។ វានឹងជួយជៀសវាងការប៉ះទង្គិចជាមួយឧបករណ៍ផ្សេងទៀត។

Glyphicons បានផ្តល់ឱ្យយើងនូវការប្រើប្រាស់ Halflings ដែលបានកំណត់នៅក្នុងប្រអប់ឧបករណ៍ប្រភពបើកចំហរបស់យើង ដរាបណាយើងផ្តល់តំណ និងឥណទាននៅទីនេះក្នុងឯកសារ។ សូមពិចារណាធ្វើដូចគ្នានៅក្នុងគម្រោងរបស់អ្នក។

របៀបប្រើ

Bootstrap ប្រើ <i>ស្លាកសម្រាប់រូបតំណាងទាំងអស់ ប៉ុន្តែពួកវាមិនមានថ្នាក់ករណីទេ មានតែបុព្វបទដែលបានចែករំលែកប៉ុណ្ណោះ។ ដើម្បីប្រើ សូមដាក់កូដខាងក្រោមនៅគ្រប់ទីកន្លែង៖

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

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

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

មាន 120 ថ្នាក់ដែលត្រូវជ្រើសរើសសម្រាប់រូបតំណាងរបស់អ្នក។ គ្រាន់​តែ​បន្ថែម <i>​ស្លាក​ជាមួយ​ថ្នាក់​ដែល​ត្រឹមត្រូវ​ហើយ​អ្នក​បាន​កំណត់​។ អ្នកអាចស្វែងរកបញ្ជីពេញលេញនៅក្នុង sprites.less ឬនៅទីនេះក្នុងឯកសារនេះ។

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

ករណីប្រើប្រាស់

រូបតំណាងគឺអស្ចារ្យណាស់ ប៉ុន្តែតើកន្លែងណានឹងប្រើវា? នេះគឺជាគំនិតមួយចំនួន៖

• ជារូបភាពសម្រាប់ការរុករករបារចំហៀងរបស់អ្នក។
• សម្រាប់ការរុករកដែលដឹកនាំដោយរូបតំណាងសុទ្ធសាធ
• សម្រាប់ប៊ូតុងដើម្បីជួយបង្ហាញអត្ថន័យនៃសកម្មភាព
• ជាមួយនឹងតំណភ្ជាប់ដើម្បីចែករំលែកបរិបទនៅលើគោលដៅរបស់អ្នកប្រើ

សំខាន់ កន្លែងណាដែលអ្នកអាចដាក់ <i>ស្លាកបាន អ្នកអាចដាក់រូបតំណាងបាន។

ធ្វើ​ឱ្យ​ស្រស់ ពិនិត្យ​មុន​ពេល​ចេញ លុប

មតិយោបល់ ការកំណត់ ព័​ត៍​មាន​បន្ថែម

អាស័យ​ដ្ឋាន​អ៊ី​ម៉េ​ល