CSS មូលដ្ឋាន

ធាតុ HTML ជាមូលដ្ឋានត្រូវបានរចនា និងពង្រឹងជាមួយនឹងថ្នាក់ដែលអាចពង្រីកបាន។

ក្បាល

ចំណងជើង 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>​ភាគ​ច្រើន​គឺ​សម្រាប់​សំឡេង ពាក្យ​បច្ចេកទេស ។ល។

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

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

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

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

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

  1. <p class = "text-left" > អត្ថបទដែលបានតម្រឹមឆ្វេង។ </p>
  2. <p class = "text-center" > អត្ថបទ​តម្រឹម​កណ្តាល។ </p>
  3. <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 ។

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh។ </p>
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod ។ </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla ។ </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam ។ Pellentesque ornare sem lacinia quam venenatis ។ </p>
  5. <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]
  1. <អាសយដ្ឋាន>
  2. <strong> Twitter, Inc. </strong><br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr title = "ទូរស័ព្ទ" > P: </abbr> (123) 456-7890
  6. </អាសយដ្ឋាន>
  7.  
  8. <អាសយដ្ឋាន>
  9. <strong> ឈ្មោះពេញ </strong><br>
  10. <a href="mailto:#"> [email protected] </a> _ _ _
  11. </អាសយដ្ឋាន>

ប្លុកសម្រង់

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

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

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

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

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

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

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

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

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

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

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

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

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

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

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព
  1. <blockquote class = "pull-right" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

បានបញ្ជាទិញ

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

  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
  1. <ol>
  2. <li> ... </li>
  3. </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
  1. <ul class = "unstyled" >
  2. <li> ... </li>
  3. </ul>

ក្នុងជួរ

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </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 ។
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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។
  1. <dl class = "dl-horizontal" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </dl>

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

ក្នុងជួរ

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

ជាឧទាហរណ៍ <section>គួរតែរុំជាជួរ។
  1. ឧទាហរណ៍ < code > & lt ; ផ្នែក & gt ;</ code > គួរតែត្រូវបាន រុំ ជាជួរ

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

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

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

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

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

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

សម្រាប់រចនាប័ទ្មមូលដ្ឋាន - បន្ទះស្រាល និងតែផ្នែកផ្ដេក - បន្ថែមថ្នាក់មូលដ្ឋាន .tableទៅណាមួយ <table>

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

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

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

.table-striped

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

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

.table-bordered

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

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

.table-hover

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

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

.table-condensed

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

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

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

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

ថ្នាក់ ការពិពណ៌នា
.success បង្ហាញពីសកម្មភាពជោគជ័យ ឬវិជ្ជមាន។
.error បង្ហាញពីសកម្មភាពគ្រោះថ្នាក់ ឬសក្តានុពលអវិជ្ជមាន។
.warning បង្ហាញពីការព្រមានដែលអាចត្រូវការការយកចិត្តទុកដាក់។
.info ប្រើជាជម្រើសសម្រាប់រចនាប័ទ្មលំនាំដើម។
# ផលិតផល ការទូទាត់ត្រូវបានយក ស្ថានភាព
TB - ប្រចាំខែ ០១/០៤/២០១២ បានអនុម័ត
TB - ប្រចាំខែ ០២/០៤/២០១២ បានបដិសេធ
TB - ប្រចាំខែ ០៣/០៤/២០១២ កំពុងរង់ចាំ
TB - ប្រចាំខែ ០៤/០៤/២០១២ ហៅចូលដើម្បីបញ្ជាក់
  1. ...
  2. < tr class = "success" >
  3. <td> 1 < /td>
  4. <td>TB - ប្រចាំខែ</ td >
  5. < td > 01/04/2012 < / td >
  6. <td>បាន​អនុម័ត</ td >
  7. </ tr >
  8. ...

ការសម្គាល់តារាងដែលគាំទ្រ

បញ្ជីនៃធាតុ HTML តារាងដែលគាំទ្រ និងរបៀបដែលពួកវាគួរត្រូវបានប្រើ។

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

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

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

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

ប្លង់ស្រេចចិត្ត

រួមបញ្ចូលជាមួយ Bootstrap គឺជាទម្រង់ជម្រើសបីសម្រាប់ករណីប្រើប្រាស់ទូទៅ។

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

បន្ថែម .form-search​ទៅ​ក្នុង​ទម្រង់ និង ​សម្រាប់ .search-query​ការ <input>​បញ្ចូល​អត្ថបទ​រាង​មូល​បន្ថែម។

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

ទម្រង់ផ្ដេក

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

  • បន្ថែម .form-horizontalទៅទម្រង់
  • រុំស្លាក និងការគ្រប់គ្រងនៅក្នុង.control-group
  • បន្ថែម .control-labelទៅស្លាក
  • រុំការគ្រប់គ្រងដែលពាក់ព័ន្ធ .controlsសម្រាប់ការតម្រឹមត្រឹមត្រូវ ។
  1. <form class = "form-horizontal" >
  2. <div class = "control-group" >
  3. <label class = "control-label" for = "inputEmail" > អ៊ីមែល </label>
  4. <div class = "បញ្ជា" >
  5. < input type = "text" id = "inputEmail" placeholder = "Email" >
  6. </div>
  7. </div>
  8. <div class = "control-group" >
  9. <label class = "control-label" for = "inputPassword" > ពាក្យសម្ងាត់ </label>
  10. <div class = "បញ្ជា" >
  11. < ប្រភេទ បញ្ចូល = "ពាក្យសម្ងាត់" id = "inputPassword" កន្លែងដាក់ = "ពាក្យសម្ងាត់" >
  12. </div>
  13. </div>
  14. <div class = "control-group" >
  15. <div class = "បញ្ជា" >
  16. <label class = "checkbox" >
  17. <input type = "checkbox" > ចងចាំខ្ញុំ
  18. </label>
  19. <button type = "submit" class = "btn" > ចូល </button>
  20. </div>
  21. </div>
  22. </form>

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

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

ធាតុចូល

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

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

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

អត្ថបទ

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

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

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

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

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


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

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

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

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

ជ្រើសរើស

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


  1. <ជ្រើសរើស>
  2. <option> 1 </option>
  3. <option> 2 </option>
  4. <option> 3 </option>
  5. <option> 4 </option>
  6. <option> 5 </option>
  7. </select>
  8.  
  9. <ជ្រើសរើស ច្រើន = "ច្រើន" >
  10. <option> 1 </option>
  11. <option> 2 </option>
  12. <option> 3 </option>
  13. <option> 4 </option>
  14. <option> 5 </option>
  15. </select>

ពង្រីកការគ្រប់គ្រងទម្រង់

ការបន្ថែមពីលើការគ្រប់គ្រងកម្មវិធីរុករកដែលមានស្រាប់ Bootstrap រួមបញ្ចូលសមាសធាតុទម្រង់មានប្រយោជន៍ផ្សេងទៀត។

ធាតុបញ្ចូលដែលបានទុកមុន និងបន្ថែម

បន្ថែមអត្ថបទ ឬប៊ូតុងមុន ឬក្រោយការបញ្ចូលអត្ថបទណាមួយ សូមចំណាំថា selectធាតុមិនត្រូវបានគាំទ្រនៅទីនេះទេ។

ជម្រើសលំនាំដើម

រុំ .add-onនិងមួយ inputជាមួយថ្នាក់មួយក្នុងចំនោមថ្នាក់ពីរ ដើម្បីបន្តបន្ទាប់ ឬបន្ថែមអត្ថបទទៅធាតុបញ្ចូល។

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >
  4. </div>
  5. <div class = "input-append" >
  6. <បញ្ចូល class = "span2" id = "appendedInput " type = "text" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

រួមបញ្ចូលគ្នា

ប្រើ​ទាំង​ថ្នាក់ និង​ឧទាហរណ៍​ពីរ .add-on​ដើម្បី​ដាក់​ខាង​មុខ និង​បន្ថែម​ការ​បញ្ចូល។

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "add-on" > $ </span>
  3. < ថ្នាក់ បញ្ចូល = "span2" id = "បន្ថែមការបញ្ចូលបន្ថែម" ប្រភេទ = "អត្ថបទ" >
  4. <span class = "add-on" > .00 </span>
  5. </div>

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

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

  1. <div class = "input-append" >
  2. <បញ្ចូល class = "span2" id = "appendedInputButton " type = "text" >
  3. <button class = "btn" type = "button" > ទៅ! </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons " type = "text" >
  3. <button class = "btn" type = "button" > ស្វែងរក </button>
  4. <button class = "btn" type = "button" > ជម្រើស </button>
  5. </div>

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

  1. <div class = "input-append" >
  2. <បញ្ចូល class = "span2" id = "appendedDropdownButton " type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. សកម្មភាព
  6. <span class = "caret" ></span>
  7. </button>
  8. <ul class = "dropdown-menu" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. សកម្មភាព
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <បញ្ចូល class = "span2" id = "prependedDropdownButton" type = "text" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. សកម្មភាព
  5. <span class = "caret" ></span>
  6. </button>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <បញ្ចូល class = "span2" id = "appendedPrependedDropdownButton " type = "text" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. សកម្មភាព
  15. <span class = "caret" ></span>
  16. </button>
  17. <ul class = "dropdown-menu" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

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

  1. <ទម្រង់>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. < ប្រភេទ បញ្ចូល = "អត្ថបទ" >
  5. </div>
  6. <div class = "input-append" >
  7. < ប្រភេទ បញ្ចូល = "អត្ថបទ" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

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

  1. <form class = "form-search" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <button type = "submit" class = "btn" > ស្វែងរក </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > ស្វែងរក </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </form>

គ្រប់គ្រងទំហំ

ប្រើថ្នាក់ទំហំដែលទាក់ទងដូចជា .input-largeឬផ្គូផ្គងធាតុបញ្ចូលរបស់អ្នកទៅនឹងទំហំជួរឈរក្រឡាចត្រង្គដោយប្រើ .span*ថ្នាក់។

ទប់ស្កាត់ការបញ្ចូលកម្រិត

ធ្វើឱ្យធាតុណាមួយ <input>មាន <textarea>ឥរិយាបទដូចជាធាតុកម្រិតប្លុក។

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

ទំហំទាក់ទង

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

ព្រឺក្បាល!នៅក្នុងកំណែនាពេលអនាគត យើងនឹងផ្លាស់ប្តូរការប្រើប្រាស់ថ្នាក់បញ្ចូលដែលទាក់ទងទាំងនេះ ដើម្បីផ្គូផ្គងទំហំប៊ូតុងរបស់យើង។ ឧទាហរណ៍ .input-largeនឹងបង្កើនទំហំទ្រនាប់ និងទំហំពុម្ពអក្សរនៃការបញ្ចូល។

ទំហំក្រឡាចត្រង្គ

ប្រើ .span1ដើម្បី .span12សម្រាប់ធាតុបញ្ចូលដែលត្រូវគ្នានឹងទំហំដូចគ្នានៃជួរឈរក្រឡាចត្រង្គ។

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. <ជ្រើសរើស class = "span1" >
  5. ...
  6. </select>
  7. <ជ្រើសរើស class = "span2" >
  8. ...
  9. </select>
  10. <ជ្រើសរើស class = "span3" >
  11. ...
  12. </select>

សម្រាប់ការបញ្ចូលក្រឡាចត្រង្គច្រើនក្នុងមួយជួរ សូម ប្រើ .controls-rowថ្នាក់កែប្រែសម្រាប់គម្លាតត្រឹមត្រូវ ។ វាបណ្តែតធាតុបញ្ចូលដើម្បីបង្រួមចន្លោះពណ៌ស កំណត់រឹមត្រឹមត្រូវ និងសម្អាតអណ្តែត។

  1. <div class = "បញ្ជា" >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "controls controls-row" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

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

បង្ហាញទិន្នន័យក្នុងទម្រង់ដែលមិនអាចកែសម្រួលបានដោយមិនប្រើការសម្គាល់ទម្រង់ជាក់ស្តែង។

តម្លៃខ្លះនៅទីនេះ
  1. <span class = "input-xlarge uneditable-input" > តម្លៃខ្លះនៅទីនេះ </span>

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

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

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

អត្ថបទជំនួយ

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

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

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

រារាំងជំនួយ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

មានអ្វីមួយខុសប្រក្រតី
សូមកែកំហុស
ឈ្មោះអ្នកប្រើត្រូវបានយក
ហូហូ!
  1. <div class = "control-group warning" >
  2. <label class = "control-label" for = "inputWarning" > បញ្ចូលជាមួយការព្រមាន </label>
  3. <div class = "បញ្ជា" >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > មានអ្វីមួយអាចខុស </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "control-group error" >
  10. <label class = "control-label" for = "inputError" > ការបញ្ចូលដែលមានកំហុស </label>
  11. <div class = "បញ្ជា" >
  12. < ប្រភេទ បញ្ចូល = "អត្ថបទ" id = "កំហុសបញ្ចូល" >
  13. <span class = "help-inline" > សូមកែកំហុស </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "ព័ត៌មានក្រុមបញ្ជា" >
  18. <label class = "control-label" for = "inputInfo" > បញ្ចូលជាមួយព័ត៌មាន </label>
  19. <div class = "បញ្ជា" >
  20. < ប្រភេទ បញ្ចូល = "អត្ថបទ" id = "ព័ត៌មានបញ្ចូល" >
  21. <span class = "help-inline" > ឈ្មោះអ្នកប្រើត្រូវបានយករួចហើយ </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "control-group success" >
  26. <label class = "control-label" for = "inputSuccess" > បញ្ចូលដោយជោគជ័យ </label>
  27. <div class = "បញ្ជា" >
  28. < ប្រភេទ បញ្ចូល = "អត្ថបទ" id = "បញ្ចូលជោគជ័យ" >
  29. <span class = "help-inline" > អ៊ូហូ! </span>
  30. </div>
  31. </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សម្រាប់ទំហំបន្ថែម។

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > ប៊ូតុងធំ </button>
  3. <button class = "btn btn-large" type = "button" > ប៊ូតុងធំ </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > ប៊ូតុងលំនាំដើម </button>
  7. <button class = "btn" type = "button" > ប៊ូតុងលំនាំដើម </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > ប៊ូតុងតូច </button>
  11. <button class = "btn btn-small" type = "button" > ប៊ូតុងតូច </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > ប៊ូតុងតូច </button>
  15. <button class = "btn btn-mini" type = "button" > ប៊ូតុងតូច </button>
  16. </p>

បង្កើតប៊ូតុងកម្រិតប្លុក—ដែលលាតសន្ធឹងទទឹងពេញរបស់មេ—ដោយបន្ថែម .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > ប៊ូតុងកម្រិតប្លុក </button>
  2. <button class = "btn btn-large btn-block" type = "button" > ប៊ូតុងកម្រិតប្លុក </button>

រដ្ឋពិការ

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

ធាតុយុថ្កា

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

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

  1. <a href="#" class="btn btn-large btn-primary disabled"> តំណ ចម្បង </a> _
  2. <a href="#" class="btn btn-large disabled"> តំណ ភ្ជាប់ </a> _ _

ព្រឺក្បាល!យើងប្រើ .disabledជាថ្នាក់ឧបករណ៍ប្រើប្រាស់នៅទីនេះ ស្រដៀងនឹង .activeថ្នាក់ទូទៅ ដូច្នេះមិនទាមទារបុព្វបទទេ។ ដូចគ្នានេះផងដែរ, ថ្នាក់នេះគឺសម្រាប់តែសោភ័ណភាព; អ្នកត្រូវតែប្រើ JavaScript ផ្ទាល់ខ្លួន ដើម្បីបិទតំណភ្ជាប់នៅទីនេះ។

ធាតុប៊ូតុង

បន្ថែម disabledគុណលក្ខណៈទៅ <button>ប៊ូតុង។

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > ប៊ូតុងចម្បង </button>
  2. <button type = "button" class = "btn btn-large" disabled > Button </button>

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

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

តំណភ្ជាប់
  1. <a class="btn" href=""> តំណ ភ្ជាប់ </a> _ _ _ _
  2. <button class = "btn" type = "submit" > ប៊ូតុង </button>
  3. <input class = "btn" type = "button" value = "បញ្ចូល" >
  4. <input class = "btn" type = "submit" value = "ដាក់ស្នើ" >

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

បន្ថែមថ្នាក់ទៅ <img>ធាតុដើម្បីងាយស្រួលធ្វើរចនាប័ទ្មរូបភាពនៅក្នុងគម្រោងណាមួយ។

១៤០x១៤០ ១៤០x១៤០ ១៤០x១៤០
  1. <img src = "..." class = "img-rounded" >
  2. <img src = "..." class = "img-circle" >
  3. <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-. ដើម្បីប្រើ សូមដាក់កូដខាងក្រោមនៅគ្រប់ទីកន្លែង៖

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

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

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

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


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

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

ប៊ូតុង

ក្រុមប៊ូតុងនៅក្នុងរបារឧបករណ៍ប៊ូតុង
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class="btn" href="#"> < i class = " icon - align -left" > </i></a>
  4. <a class="btn" href="#"> < i class = " icon - align -center" > </i></a>
  5. <a class="btn" href="#"> < i class = " icon - align -right" > </i></a>
  6. <a class="btn" href="#"> < i class = " icon -align-justify" > < /i></a>
  7. </div>
  8. </div>
ទម្លាក់ចុះក្នុងក្រុមប៊ូតុង
  1. <div class = "btn-group" >
  2. <a class="btn btn-primary" href="#"> < i class = " icon -user icon-white" > </i> អ្នកប្រើប្រាស់ </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle btn-primary "dropdown" href="#" > <span class = "caret" > </span></a>
  4. <ul class = "dropdown-menu" >
  5. <li><a href < i class = "icon-pencil" > </i> កែសម្រួល </a></li>
  6. <li><a href < i class = "icon-trash" > </i> លុប </a></li>
  7. <li><a href < i class = "icon-ban-circle" > </i> ហាម </a></li>
  8. <li class = "divider" ></li>
  9. <li><a href = <i class = i" > </i> បង្កើតអ្នកគ្រប់គ្រង </a></li>
  10. </ul>
  11. </div>
ទំហំប៊ូតុង
  1. <a class="btn btn-large" href="#"> < i _ _ icon -star" > </i> តារា </a>
  2. <a class="btn btn-small" href="#"> < i class _ _ -star" > </i> តារា </a>
  3. <a class="btn btn-mini" href="#"> < i class _ _ -star" > </i> តារា </a>

ការរុករក

  1. <ul class = "nav nav-list" >
  2. <li class = "active" > <a href="#"> <i class = " icon-home icon-white" ></i> Home </a></li>
  3. <li><a href="#"> < i class = "icon-book" > </i> បណ្ណាល័យ </a></li>
  4. <li><a href="#"> < i class = "icon-pencil" > </i> កម្មវិធី </a></li>
  5. <li><a href="#"> <i class = " i" > </i> ផ្សេងៗ </a></li>
  6. </ul>

វាលទម្រង់

  1. <div class = "control-group" >
  2. <label class = "control-label" for = "inputIcon" > អាសយដ្ឋានអ៊ីមែល </label>
  3. <div class = "បញ្ជា" >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" ><i class = "icon-envelope" ></i></span>
  6. <input class = "span2" id = "inputIcon" type = "text" >
  7. </div>
  8. </div>
  9. </div>