CSS មូលដ្ឋាន

នៅលើកំពូលនៃរន្ទា ធាតុ HTML ជាមូលដ្ឋានត្រូវបានរចនា និងពង្រឹងជាមួយនឹងថ្នាក់ដែលអាចពង្រីកបាន ដើម្បីផ្តល់នូវរូបរាង និងអារម្មណ៍ស្រស់ស្រាយ។

ចំណងជើង និងច្បាប់ចម្លងតួ

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

ក្រឡាចត្រង្គវាយអក្សរទាំងមូលគឺផ្អែកលើអថេរ 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 ។

ច្បាប់ចម្លងរាងកាយនាំមុខ

ធ្វើឱ្យកថាខណ្ឌលេចធ្លោដោយបន្ថែម .lead

Vivamus sagittis lacus vel auggue laoreet rutrum faucibus dolor auctor ។ Duis mollis គឺជា luctus ដែលមិនមែនជាទំនិញ។

h1. ចំណងជើង 1

h2. ក្បាល 2

h3. ចំណងជើង ៣

h4. ក្បាល ៤

h5. ក្បាលទី 5
h6. ចំណងជើង 6

ការសង្កត់ធ្ងន់ អាសយដ្ឋាន និងអក្សរកាត់

ធាតុ ការប្រើប្រាស់ ស្រេចចិត្ត
<strong> សម្រាប់​ការ​សង្កត់​ធ្ងន់​លើ​ផ្នែក​ខ្លី​នៃ​អត្ថបទ​ជា​មួយ​នឹង ​ការ​សំខាន់ គ្មាន
<em> សម្រាប់​ការ​សង្កត់​ធ្ងន់​លើ​អត្ថបទ​ខ្លីៗ​ដោយ​មាន ​ភាព​តានតឹង គ្មាន
<abbr> រុំអក្សរកាត់ និងអក្សរកាត់ដើម្បីបង្ហាញកំណែដែលបានពង្រីកនៅលើដាក់

រួមបញ្ចូលគុណលក្ខណៈស្រេចចិត្ត titleសម្រាប់អត្ថបទដែលបានពង្រីក

ប្រើ .initialismថ្នាក់សម្រាប់អក្សរកាត់អក្សរធំ។
<address> សម្រាប់ព័ត៌មានទំនាក់ទំនងសម្រាប់បុព្វបុរសដែលនៅជិតបំផុតរបស់វា ឬផ្នែកទាំងមូលនៃការងារ រក្សា​ការ​ធ្វើ​ទ្រង់ទ្រាយ​ដោយ​បញ្ចប់​បន្ទាត់​ទាំងអស់​ជាមួយ<br>

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

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> ធាតុកម្រិតប្លុកសម្រាប់ការដកស្រង់ខ្លឹមសារពីប្រភពផ្សេងទៀត។

បន្ថែម citeគុណលក្ខណៈសម្រាប់ URL ប្រភព

ប្រើ .pull-leftនិង .pull-rightថ្នាក់សម្រាប់ជម្រើសអណ្តែត
<small> ធាតុស្រេចចិត្តសម្រាប់ការបន្ថែមការដកស្រង់ដែលប្រឈមមុខនឹងអ្នកប្រើប្រាស់ ជាទូទៅអ្នកនិពន្ធដែលមានចំណងជើងការងារ ដាក់ <cite>ជុំវិញចំណងជើង ឬឈ្មោះប្រភព

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

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

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។ </p>
  3. <small> អ្នកល្បីល្បាញ </small>
  4. </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>.

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

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

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

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

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

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

Google Prettify

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

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

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

ការសម្គាល់តារាង

ស្លាក ការពិពណ៌នា
<table> ធាតុរុំសម្រាប់បង្ហាញទិន្នន័យក្នុងទម្រង់តារាង
<thead> ធាតុ​កុងតឺន័រ​សម្រាប់​ជួរ​ដេក​ក្បាល​តារាង ( <tr>) ដើម្បី​ដាក់​ស្លាក​ជួរ​ឈរ​តារាង
<tbody> ធាតុកុងតឺន័រសម្រាប់ជួរតារាង ( <tr>) នៅក្នុងតួតារាង
<tr> ធាតុកុងតឺន័រសម្រាប់សំណុំនៃក្រឡាតារាង ( <td><th>) ដែលបង្ហាញនៅលើជួរតែមួយ
<td> ក្រឡាតារាងលំនាំដើម
<th> ក្រឡាតារាងពិសេសសម្រាប់ជួរឈរ (ឬជួរដេកអាស្រ័យលើវិសាលភាព និងការដាក់) ស្លាក
ត្រូវតែប្រើក្នុង a<thead>
<caption> ការពិពណ៌នា ឬសេចក្តីសង្ខេបនៃអ្វីដែលតារាងមាន ជាពិសេសមានប្រយោជន៍សម្រាប់អ្នកអានអេក្រង់
  1. <តារាង>
  2. <ក្បាល>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

ជម្រើសតារាង

ឈ្មោះ ថ្នាក់ ការពិពណ៌នា
លំនាំដើម គ្មាន គ្មានរចនាប័ទ្មទេ គ្រាន់តែជួរឈរ និងជួរដេក
មូលដ្ឋាន .table មានតែបន្ទាត់ផ្ដេករវាងជួរដេកប៉ុណ្ណោះ។
មានព្រំប្រទល់ .table-bordered បង្គត់ជ្រុង និងបន្ថែមស៊ុមខាងក្រៅ
សេះបង្កង់-ឆ្នូត .table-striped បន្ថែមពណ៌ផ្ទៃខាងក្រោយពណ៌ប្រផេះស្រាលទៅជួរសេស (1, 3, 5 ។ល។)
ខាប់ .table-condensed កាត់បន្ទះបញ្ឈរជាពាក់កណ្តាល ពី 8px ទៅ 4px ក្នុងផ្នែកទាំងអស់ tdនិង thធាតុ

តារាងឧទាហរណ៍

1. រចនាប័ទ្មតារាងលំនាំដើម

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

  1. <table class = "table" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ឈ្មោះ​អ្នកប្រើប្រាស់
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter

2. តារាងឆ្នូត

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

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

  1. <table class = "table table-striped" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ឈ្មោះ​អ្នកប្រើប្រាស់
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter

3. តារាងព្រំដែន

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

  1. <table class = "table table-bordered" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ឈ្មោះ​អ្នកប្រើប្រាស់
ម៉ាក អូតូ @mdo
ម៉ាក អូតូ @getbootstrap
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter

4. តារាង condensed

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

  1. <table class = "table table-condensed" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ឈ្មោះ​អ្នកប្រើប្រាស់
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter

5. ផ្សំវាទាំងអស់គ្នា!

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

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
ឈ្មោះ​ពេញ
# ឈ្មោះដំបូង នាមត្រកូល ឈ្មោះ​អ្នកប្រើប្រាស់
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter

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

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

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

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

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

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

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

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

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

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

ទម្រង់បួនប្រភេទ

Bootstrap ផ្តល់នូវការសម្គាល់ និងរចនាប័ទ្មសាមញ្ញសម្រាប់រចនាប័ទ្មបួននៃទម្រង់បណ្ដាញទូទៅ។

ឈ្មោះ ថ្នាក់ ការពិពណ៌នា
បញ្ឈរ (លំនាំដើម) .form-vertical (មិន​ត្រូវការ) បានដាក់ជង់ តម្រឹមឆ្វេងស្លាកលើវត្ថុបញ្ជា
ក្នុងជួរ .form-inline ស្លាកដែលបានតម្រឹមឆ្វេង និងការគ្រប់គ្រងប្លុកក្នុងបន្ទាត់សម្រាប់រចនាប័ទ្មបង្រួម
ស្វែងរក .form-search ការបញ្ចូលអត្ថបទរាងមូលបន្ថែមសម្រាប់សោភ័ណភាពស្វែងរកធម្មតា។
ផ្ដេក .form-horizontal អណ្តែតទៅឆ្វេង តម្រឹមស្តាំស្លាកនៅលើបន្ទាត់ដូចគ្នាជាវត្ថុបញ្ជា

ទម្រង់​គំរូ ​ដោយ​ប្រើ​តែ​ការ​គ្រប់គ្រង​ទម្រង់​ប៉ុណ្ណោះ គ្មាន​ការ​សម្គាល់​បន្ថែម

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

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

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

  1. <form class = "ល្អ" >
  2. <label> ឈ្មោះស្លាក </label>
  3. < input type = "text" class = "span3" placeholder = "វាយអ្វីមួយ..." >
  4. <span class = "help-block" > ឧទាហរណ៍ អត្ថបទជំនួយកម្រិតប្លុកនៅទីនេះ។ </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > ពិនិត្យខ្ញុំចេញ
  7. </label>
  8. <button type = "submit" class = "btn" > បញ្ជូន </button>
  9. </form>

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

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

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

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

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

  1. <form class = "well form-inline" >
  2. < input type = "text" class = "input-small" placeholder = "Email" >
  3. < input type = "password" class = "input-small" placeholder = "password" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > ចងចាំខ្ញុំ
  6. </label>
  7. <button type = "submit" class = "btn" > ចូល </button>
  8. </form>

ទម្រង់ផ្ដេក

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

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

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

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

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

  1. <form class = "form-horizontal" >
  2. <សំណុំវាល>
  3. <legend> អត្ថបទរឿងព្រេង </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > ការបញ្ចូលអត្ថបទ </label>
  6. <div class = "បញ្ជា" >
  7. < ប្រភេទ បញ្ចូល = "អត្ថបទ" class = "បញ្ចូល-xlarge" id = "បញ្ចូល01" >
  8. <p class = "help-block" > គាំទ្រអត្ថបទជំនួយ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

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

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


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

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

  1. <សំណុំវាល
  2. class = "control-group error" >
  3. </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 ប៊ូតុងពណ៌ប្រផេះស្តង់ដារជាមួយនឹងពណ៌ជម្រាល
btn btn-primary ផ្តល់ទម្ងន់ដែលមើលឃើញបន្ថែម និងកំណត់សកម្មភាពចម្បងនៅក្នុងសំណុំនៃប៊ូតុង
btn btn-info ប្រើជាជម្រើសសម្រាប់រចនាប័ទ្មលំនាំដើម
btn btn-success បង្ហាញពីសកម្មភាពជោគជ័យ ឬវិជ្ជមាន
btn btn-warning បង្ហាញថាការប្រុងប្រយ័ត្នគួរតែត្រូវបានអនុវត្តជាមួយនឹងសកម្មភាពនេះ។
btn btn-danger បង្ហាញពីសកម្មភាពគ្រោះថ្នាក់ ឬសក្តានុពលអវិជ្ជមាន
btn btn-inverse ប៊ូតុង​ប្រផេះ​ងងឹត​ឆ្លាស់​គ្នា មិន​ត្រូវ​បាន​ភ្ជាប់​ទៅ​នឹង​សកម្មភាព ឬ​ការប្រើប្រាស់

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

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

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

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

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

ទំហំច្រើន។

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


រដ្ឋពិការ

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

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

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

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

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

តំណភ្ជាប់
  1. <a class="btn" href=""> តំណ ភ្ជាប់ </a> _ _ _ _
  2. <button class = "btn" type = "submit" >
  3. ប៊ូតុង
  4. </button>
  5. <input class = "btn" type = "button"
  6. តម្លៃ = "បញ្ចូល" >
  7. <បញ្ចូល class = "btn" type = "submit"
  8. តម្លៃ = "បញ្ជូន" >

ជាការអនុវត្តល្អបំផុត សូមព្យាយាមផ្គូផ្គងធាតុសម្រាប់បរិបទរបស់អ្នក ដើម្បីធានាឱ្យមានការផ្គូផ្គងការបង្ហាញតាមកម្មវិធីរុករកតាមអ៊ីនធឺណិត។ ប្រសិន​បើ​អ្នក​មាន 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>ស្លាកសម្រាប់រូបតំណាងទាំងអស់ ប៉ុន្តែពួកវាមិនមានថ្នាក់ករណីទេ មានតែបុព្វបទដែលបានចែករំលែកប៉ុណ្ណោះ។ ដើម្បីប្រើ សូមដាក់កូដខាងក្រោមនៅគ្រប់ទីកន្លែង៖

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

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

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

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

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

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

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

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

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

ឧទាហរណ៍

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