សមាសធាតុ

សមាសធាតុដែលអាចប្រើឡើងវិញបានរាប់សិបត្រូវបានបង្កើតឡើងនៅក្នុង Bootstrap ដើម្បីផ្តល់នូវការរុករក ការជូនដំណឹង ការលេចឡើង និងច្រើនទៀត។

ក្រុមប៊ូតុង

ប្រើក្រុមប៊ូតុងដើម្បីភ្ជាប់ប៊ូតុងជាច្រើនរួមគ្នាជាសមាសធាតុផ្សំតែមួយ។ បង្កើតពួកវាជាមួយស៊េរី <a><button>ធាតុ។

ការអនុវត្តល្អបំផុត

យើងសូមណែនាំការណែនាំខាងក្រោមសម្រាប់ការប្រើប្រាស់ក្រុមប៊ូតុង និងរបារឧបករណ៍៖

  • តែងតែប្រើធាតុដូចគ្នានៅក្នុងក្រុមប៊ូតុងតែមួយ <a><button>.
  • កុំលាយប៊ូតុងនៃពណ៌ផ្សេងគ្នានៅក្នុងក្រុមប៊ូតុងដូចគ្នា។
  • ប្រើរូបតំណាងបន្ថែមលើ ឬជំនួសឱ្យអត្ថបទ ប៉ុន្តែត្រូវប្រាកដថាបញ្ចូលអក្សរជំនួស និងចំណងជើងតាមដែលសមរម្យ។

ក្រុមប៊ូតុង ដែលទាក់ទង ជាមួយនឹងការទម្លាក់ចុះ (សូមមើលខាងក្រោម) គួរតែត្រូវបានហៅចេញដោយឡែកពីគ្នា ហើយតែងតែរួមបញ្ចូលការយកចិត្តទុកដាក់លើការទម្លាក់ចុះ ដើម្បីបង្ហាញពីអាកប្បកិរិយាដែលមានបំណង។

ឧទាហរណ៍លំនាំដើម

នេះជារបៀបដែល HTML ស្វែងរកក្រុមប៊ូតុងស្តង់ដារដែលបង្កើតដោយប៊ូតុងស្លាកយុថ្កា៖

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

ឧទាហរណ៍របារឧបករណ៍

ផ្សំសំណុំនៃ <div class="btn-group">ទៅក្នុង a <div class="btn-toolbar">សម្រាប់សមាសធាតុស្មុគស្មាញបន្ថែមទៀត។

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

ប្រអប់ធីកនិងរសជាតិវិទ្យុ

ក្រុមប៊ូតុងក៏អាចដំណើរការជាវិទ្យុ ដែលប៊ូតុងតែមួយអាចសកម្ម ឬប្រអប់ធីក ដែលចំនួនប៊ូតុងណាមួយអាចសកម្ម។ មើល ឯកសារ Javascript សម្រាប់នោះ។

ទទួលបាន javascript »

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

ព្រឺក្បាល! ប៊ូតុង​ដែល​មាន​ការ​ទម្លាក់​ចុះ​ត្រូវ​តែ​ត្រូវ​បាន​រុំ​ជា​លក្ខណៈ​បុគ្គល​ដោយ​ខ្លួន​ឯង .btn-group​ក្នុង .btn-toolbar​ការ​បង្ហាញ​ត្រឹមត្រូវ។

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

ទិដ្ឋភាពទូទៅនិងឧទាហរណ៍

ប្រើប៊ូតុងណាមួយដើម្បីកេះម៉ឺនុយទម្លាក់ចុះដោយដាក់វានៅក្នុង a .btn-groupនិងផ្តល់នូវការសម្គាល់ម៉ឺនុយត្រឹមត្រូវ។

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

ស្រដៀងទៅនឹងក្រុមប៊ូតុងមួយ ការសម្គាល់របស់យើងប្រើការសម្គាល់ប៊ូតុងធម្មតា ប៉ុន្តែជាមួយនឹងការបន្ថែមមួយចំនួនដើម្បីកែលម្អរចនាប័ទ្ម និងគាំទ្រកម្មវិធីជំនួយ jQuery ទម្លាក់ចុះរបស់ Bootstrap ។

  1. <div class = "btn-group" >
  2. <a class="btn dropdown-toggle" data-toggle = "dropdown" href="#" > _ _ _
  3. សកម្មភាព
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  8. </ul>
  9. </div>

ធ្វើការជាមួយទំហំប៊ូតុងទាំងអស់។

ប៊ូតុងទម្លាក់ចុះដំណើរការគ្រប់ទំហំ។ ទំហំប៊ូតុងរបស់អ្នកទៅ .btn-largeជា .btn-small, ឬ .btn-mini.

ទាមទារ javascript

ការទម្លាក់ប៊ូតុងតម្រូវឱ្យ កម្មវិធីជំនួយទម្លាក់ចុះ Bootstrap ដើម្បីដំណើរការ។

ក្នុងករណីខ្លះ ដូចជាទូរសព្ទចល័ត ម៉ឺនុយទម្លាក់ចុះនឹងពង្រីកនៅខាងក្រៅកន្លែងមើល។ អ្នកត្រូវដោះស្រាយការតម្រឹមដោយដៃ ឬដោយប្រើ javascript ផ្ទាល់ខ្លួន។


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

ទិដ្ឋភាពទូទៅនិងឧទាហរណ៍

ដោយបង្កើតរចនាប័ទ្មក្រុមប៊ូតុង និងការសម្គាល់ យើងអាចបង្កើតប៊ូតុងបំបែកបានយ៉ាងងាយស្រួល។ ប៊ូតុងបំបែកមានសកម្មភាពស្តង់ដារមួយនៅខាងឆ្វេង និងទម្លាក់ចុះបិទបើកនៅខាងស្តាំជាមួយនឹងតំណភ្ជាប់បរិបទ។

ទំហំ

ប្រើថ្នាក់ប៊ូតុងបន្ថែម .btn-mini, .btn-small.btn-largeសម្រាប់ទំហំ។

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  5. </ul>
  6. </div>

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

យើងពង្រីកលើការទម្លាក់ចុះប៊ូតុងធម្មតា ដើម្បីផ្តល់នូវសកម្មភាពប៊ូតុងទីពីរដែលដំណើរការជាគន្លឹះទម្លាក់ចុះដាច់ដោយឡែក។

  1. <div class = "btn-group" >
  2. <button class = "btn" > សកម្មភាព </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  8. </ul>
  9. </div>

ម៉ឺនុយទម្លាក់ចុះ

ម៉ឺនុយទម្លាក់ចុះក៏អាចត្រូវបានបិទបើកពីបាតឡើងលើដោយបន្ថែមថ្នាក់តែមួយទៅមេនៃ .dropdown-menu. វានឹងត្រឡប់ទិសដៅ .caretនិងកំណត់ទីតាំងម៉ឺនុយខ្លួនវាវិញ ដើម្បីផ្លាស់ទីពីបាតឡើងលើ ជំនួសឱ្យពីលើចុះក្រោម។

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > ទម្លាក់ </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- តំណម៉ឺនុយទម្លាក់ចុះ -->
  8. </ul>
  9. </div>

ទំព័រពហុទំព័រ

ពេលណាត្រូវប្រើ

ទំព័រដែលមានរចនាប័ទ្មសាមញ្ញបំផុត និងតិចតួចបំផុតដែលត្រូវបានបំផុសគំនិតដោយ Rdio ដ៏អស្ចារ្យសម្រាប់កម្មវិធី និងលទ្ធផលស្វែងរក។ ប្លុកធំគឺពិបាកនឹងខកខាន ងាយស្រួលធ្វើមាត្រដ្ឋាន និងផ្តល់នូវតំបន់ចុចធំ។

តំណ​ទំព័រ​បញ្ជាក់

តំណភ្ជាប់អាចប្ដូរតាមបំណង និងដំណើរការក្នុងកាលៈទេសៈមួយចំនួនជាមួយនឹងថ្នាក់ត្រឹមត្រូវ។ .disabledសម្រាប់តំណភ្ជាប់ដែលមិនអាចចុចបាន និង .activeសម្រាប់ទំព័របច្ចុប្បន្ន។

ការតម្រឹមដែលអាចបត់បែនបាន។

បន្ថែមថ្នាក់ស្រេចចិត្តទាំងពីរ ដើម្បីផ្លាស់ប្តូរការតម្រឹមនៃតំណភ្ជាប់ទំព័រ៖ .pagination-centeredនិង .pagination-right.

ឧទាហរណ៍

សមាសភាគ pagination លំនាំដើមគឺអាចបត់បែនបាន និងដំណើរការក្នុងការប្រែប្រួលមួយចំនួន។

សម្គាល់

រុំក្នុង a <div>, pagination គឺគ្រាន់តែជា <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href="#"> មុន </a> < /li >
  4. <li class = "active" >
  5. <a href="#"> </a> _ _ _
  6. </li>
  7. <li><a href="#"> 2 </a> < /li >
  8. <li><a href="#"> 3 </a> < /li >
  9. <li><a href="#"> </a> < /li >
  10. <li><a href="#"> បន្ទាប់ </a> < /li >
  11. </ul>
  12. </div>

Pager សម្រាប់តំណភ្ជាប់មុន និងបន្ទាប់រហ័ស

អំពី pager

សមាសធាតុ pager គឺជាសំណុំនៃតំណភ្ជាប់សម្រាប់ការអនុវត្ត pagination សាមញ្ញជាមួយនឹងការសម្គាល់ពន្លឺ និងសូម្បីតែរចនាប័ទ្មស្រាលជាងមុន។ វាល្អណាស់សម្រាប់គេហទំព័រសាមញ្ញដូចជាប្លក់ ឬទស្សនាវដ្តីជាដើម។

ស្ថានភាពបិទជម្រើស

តំណភ្ជាប់ Pager ក៏ប្រើ .disabledថ្នាក់ទូទៅពី pagination ផងដែរ។

ឧទាហរណ៍លំនាំដើម

តាម​លំនាំដើម ទំព័រ​ហ្រ្វង់ស័រ​ភ្ជាប់​មជ្ឈមណ្ឌល។

  1. <ul class = "pager" >
  2. <li>
  3. <a href="#"> មុន </a> _ _ _
  4. </li>
  5. <li>
  6. <a href="#"> បន្ទាប់ </a> _ _ _
  7. </li>
  8. </ul>

តំណភ្ជាប់ដែលបានតម្រឹម

ជាជម្រើស អ្នកអាចតម្រឹមតំណនីមួយៗទៅភាគី៖

  1. <ul class = "pager" >
  2. <li class = "មុន" >
  3. <a href="#"> & larr ; _ ចាស់ </a>
  4. </li>
  5. <li class = "next" >
  6. <a href="#"> ថ្មី ជាង & rarr ; </a>
  7. </li>
  8. </ul>
ស្លាក សម្គាល់
លំនាំដើម <span class="label">Default</span>
ជោគជ័យ <span class="label label-success">Success</span>
ការព្រមាន <span class="label label-warning">Warning</span>
សំខាន់ <span class="label label-important">Important</span>
ព័ត៌មាន <span class="label label-info">Info</span>
បញ្ច្រាស <span class="label label-inverse">Inverse</span>

អំពី

ផ្លាកសញ្ញាគឺជាសមាសធាតុដ៏សាមញ្ញតូចមួយសម្រាប់បង្ហាញសូចនាករ ឬចំនួននៃប្រភេទមួយចំនួន។ ពួកវាត្រូវបានរកឃើញជាទូទៅនៅក្នុងកម្មវិធីអ៊ីមែលដូចជា Mail.app ឬនៅលើកម្មវិធីទូរស័ព្ទសម្រាប់ការជូនដំណឹងជំរុញ។

ថ្នាក់ដែលមាន

ឈ្មោះ ឧទាហរណ៍ សម្គាល់
លំនាំដើម <span class="badge">1</span>
ជោគជ័យ <span class="badge badge-success">2</span>
ការព្រមាន <span class="badge badge-warning">4</span>
សំខាន់ <span class="badge badge-important">6</span>
ព័ត៌មាន <span class="badge badge-info">8</span>
បញ្ច្រាស ១០ <span class="badge badge-inverse">10</span>

ឯកតាវីរបុរស

Bootstrap ផ្តល់នូវសមាសធាតុដែលអាចបត់បែនបានទម្ងន់ស្រាល ហៅថា Hero Unit ដើម្បីបង្ហាញខ្លឹមសារនៅលើគេហទំព័ររបស់អ្នក។ វាដំណើរការបានយ៉ាងល្អនៅលើទីផ្សារ និងគេហទំព័រដែលមានមាតិកាធ្ងន់។

សម្គាល់

ចងក្រងខ្លឹមសាររបស់អ្នក divដូចតទៅ៖

  1. <div class = "hero-unit" >
  2. <h1> ក្បាល </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class="btn btn-primary btn-large"> _
  6. ស្វែង​យល់​បន្ថែម
  7. </a>
  8. </p>
  9. </div>

សួស្តី​ពិភពលោក!

នេះគឺជាឯកតាវីរៈបុរសសាមញ្ញ ដែលជាសមាសធាតុរចនាប័ទ្ម jumbotron សាមញ្ញសម្រាប់ការហៅការយកចិត្តទុកដាក់បន្ថែមចំពោះខ្លឹមសារ ឬព័ត៌មានដែលមានលក្ខណៈពិសេស។

ស្វែង​យល់​បន្ថែម

ក្បាលទំព័រ

សែលសាមញ្ញសម្រាប់ h1ដកឃ្លាយ៉ាងសមរម្យ និងបែងចែកផ្នែកនៃមាតិកានៅលើទំព័រមួយ។ វា​អាច​ប្រើ h1​លំនាំដើម​របស់ small​ធាតុ ក៏ដូចជា​សមាសធាតុ​ផ្សេងទៀត​ភាគច្រើន (ជាមួយ​រចនាប័ទ្ម​បន្ថែម)។

  1. <div class = "page-header" >
  2. <h1> ឧទាហរណ៍បឋមកថាទំព័រ </h1>
  3. </div>

រូបភាពតូចលំនាំដើម

តាមលំនាំដើម រូបភាពតូចៗរបស់ Bootstrap ត្រូវបានរចនាឡើងដើម្បីបង្ហាញរូបភាពដែលបានភ្ជាប់ជាមួយនឹងការសម្គាល់ដែលត្រូវការតិចតួចបំផុត។

អាចប្ដូរតាមបំណងបានខ្ពស់។

ជាមួយនឹងការសម្គាល់បន្ថែមបន្តិច វាអាចបន្ថែមមាតិកា HTML គ្រប់ប្រភេទដូចជា ចំណងជើង កថាខណ្ឌ ឬប៊ូតុងទៅក្នុងរូបភាពតូចៗ។

  • ស្លាកសញ្ញារូបភាពតូច

    Cras justo odio, dapibus ac facilisis in, egestas eget quam ។ Donec id elit non mi porta gravida នៅ eget metus។ Nullam id dolor id nibh ultricies vehicula ut id elit ។

    សកម្មភាព សកម្មភាព

  • ស្លាកសញ្ញារូបភាពតូច

    Cras justo odio, dapibus ac facilisis in, egestas eget quam ។ Donec id elit non mi porta gravida នៅ eget metus។ Nullam id dolor id nibh ultricies vehicula ut id elit ។

    សកម្មភាព សកម្មភាព

ហេតុអ្វីត្រូវប្រើរូបភាពតូច

រូបភាពតូចៗ (ពីមុន .media-gridរហូតដល់ v1.4) គឺល្អសម្រាប់ក្រឡានៃរូបថត ឬវីដេអូ លទ្ធផលស្វែងរករូបភាព ផលិតផលលក់រាយ ផលប័ត្រ និងច្រើនទៀត។ ពួកវាអាចជាតំណភ្ជាប់ ឬខ្លឹមសារឋិតិវន្ត។

ការសម្គាល់សាមញ្ញ និងអាចបត់បែនបាន។

ការសម្គាល់រូបភាពតូចគឺសាមញ្ញ - ulជាមួយនឹងចំនួន liធាតុណាមួយគឺចាំបាច់ទាំងអស់។ វាក៏អាចបត់បែនបានផងដែរ ដែលអនុញ្ញាតឱ្យមានប្រភេទមាតិកាណាមួយ ដោយគ្រាន់តែមានសញ្ញាសម្គាល់បន្ថែមទៀត ដើម្បីរុំមាតិការបស់អ្នក។

ប្រើទំហំជួរឈរក្រឡាចត្រង្គ

ជាចុងក្រោយ សមាសធាតុរូបភាពតូចប្រើប្រាស់ថ្នាក់ប្រព័ន្ធក្រឡាចត្រង្គដែលមានស្រាប់ ដូចជា .span2.span3- សម្រាប់ការគ្រប់គ្រងទំហំរូបភាពតូច។

ការសម្គាល់

ដូចដែលបានរៀបរាប់ពីមុន ការសម្គាល់ដែលត្រូវការសម្រាប់រូបភាពតូចៗគឺស្រាល និងត្រង់។ នេះជាការកំណត់លំនាំដើម សម្រាប់រូបភាពដែលបានភ្ជាប់

  1. <ul class = "រូបភាពតូច" >
  2. <li class = "span3" >
  3. <a href="#" class="thumbnail"> _ _ _ _ _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

សម្រាប់មាតិកា HTML ផ្ទាល់ខ្លួននៅក្នុងរូបភាពតូច សញ្ញាសម្គាល់ផ្លាស់ប្តូរបន្តិច។ ដើម្បីអនុញ្ញាតឱ្យមាតិកាកម្រិតប្លុកនៅគ្រប់ទីកន្លែង យើងប្តូរទៅ <a>ដូច <div>នោះ៖

  1. <ul class = "រូបភាពតូច" >
  2. <li class = "span3" >
  3. <div class = "រូបភាពតូច" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> ស្លាកសញ្ញារូបភាពតូច </h5>
  6. <p> ចំណងជើងរូបភាពតូចនៅទីនេះ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

ឧទាហរណ៍ច្រើនទៀត

រុករកជម្រើសរបស់អ្នកទាំងអស់ជាមួយនឹងថ្នាក់ក្រឡាចត្រង្គផ្សេងៗដែលមានសម្រាប់អ្នក។ អ្នកក៏អាចលាយ និងផ្គូផ្គងទំហំផ្សេងៗបានផងដែរ។

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

ថ្នាក់មូលដ្ឋានសរសេរឡើងវិញ

ជាមួយនឹង Bootstrap 2 យើងបានសម្រួលដល់ថ្នាក់មូលដ្ឋាន៖ .alertជំនួសឱ្យ .alert-message. យើងក៏បានកាត់បន្ថយការសម្គាល់ដែលទាមទារអប្បបរមាផងដែរ—មិន <p>តម្រូវឱ្យមានតាមលំនាំដើមទេ គ្រាន់តែផ្នែកខាងក្រៅ <div>ប៉ុណ្ណោះ។

សារដាស់តឿនតែមួយ

សម្រាប់សមាសធាតុដែលប្រើប្រាស់បានយូរជាងមុនជាមួយនឹងកូដតិច យើងបានដកចេញនូវភាពខុសគ្នានៃរូបរាងសម្រាប់ការជូនដំណឹងអំពីការទប់ស្កាត់ សារដែលភ្ជាប់មកជាមួយបន្ទះបន្ថែម និងជាធម្មតាអត្ថបទច្រើនទៀត។ ថ្នាក់ក៏បានប្តូរទៅ .alert-block


ដំណើរការល្អជាមួយ javascript

Bootstrap ភ្ជាប់មកជាមួយកម្មវិធីជំនួយ jQuery ដ៏អស្ចារ្យដែលគាំទ្រសារដាស់តឿន ដែលធ្វើឱ្យការច្រានចោលពួកវារហ័ស និងងាយស្រួល។

ទាញយកកម្មវិធីជំនួយ »

ការជូនដំណឹងឧទាហរណ៍

រុំសាររបស់អ្នក និងរូបតំណាងបិទជាជម្រើសនៅក្នុង div ជាមួយនឹងថ្នាក់សាមញ្ញ។

ព្រមាន! ពិនិត្យ​មើល​ខ្លួន​ឯង​ឱ្យ​បាន​ល្អ​បំផុត អ្នក​មិន​សូវ​ល្អ​ទេ។
  1. <div class = "ការជូនដំណឹង" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> ព្រមាន! ពិនិត្យ​មើល​ខ្លួន​ឯង ​ឱ្យ ​បាន​ល្អ​បំផុត អ្នក​មើល​ទៅ​មិន​ល្អ​ពេក​ទេ។
  4. </div>

ព្រឺក្បាល! ឧបករណ៍ iOS ទាមទារការ href="#"បិទការជូនដំណឹង។ ត្រូវប្រាកដថាបញ្ចូលវា និងគុណលក្ខណៈទិន្នន័យសម្រាប់រូបតំណាងបិទយុថ្កា។ ជាជម្រើស អ្នកអាចប្រើ <button>ធាតុដែលមានគុណលក្ខណៈទិន្នន័យ ដែលយើងជ្រើសរើសធ្វើសម្រាប់ឯកសាររបស់យើង។ នៅពេលប្រើ <button>អ្នកត្រូវតែបញ្ចូល type="button"ឬទម្រង់របស់អ្នកមិនអាចដាក់ស្នើបានទេ។

ពង្រីកសារដាស់តឿនស្ដង់ដារយ៉ាងងាយស្រួលជាមួយនឹងថ្នាក់ជម្រើសពីរ៖ .alert-blockសម្រាប់ទ្រនាប់បន្ថែម និងការគ្រប់គ្រងអត្ថបទ និង .alert-headingសម្រាប់ចំណងជើងដែលត្រូវគ្នា។

ព្រមាន!

ពិនិត្យ​មើល​ខ្លួន​ឯង​ឱ្យ​បាន​ល្អ​បំផុត អ្នក​មិន​សូវ​ល្អ​ទេ។ Nulla vitae elit libero, a pharetra auggue ។ Praesent commodo cursus magna, vel scelerisque nisl consectetur et ។

  1. <div class = "ការជូនដំណឹង alert-block" >
  2. <a class="close" data-dismiss="alert" href="#"> × </a> _ _ _ _ _ _ _
  3. <h4 class = "alert-heading" > ព្រមាន! </h4>
  4. ពិនិត្យ​ខ្លួន​ឯង​ឱ្យ​បាន​ល្អ​បំផុត អ្នក​មិន...
  5. </div>

ជម្មើសជំនួសបរិបទ បន្ថែមថ្នាក់ស្រេចចិត្ត ដើម្បីផ្លាស់ប្តូរអត្ថន័យនៃការជូនដំណឹង

កំហុសឬគ្រោះថ្នាក់

អូខ្ទាស់! ផ្លាស់ប្តូររឿងមួយចំនួន ហើយព្យាយាមដាក់ស្នើម្តងទៀត។
  1. <div class = "ការជូនដំណឹង alert-error" >
  2. ...
  3. </div>

ជោគជ័យ

ល្អ​ណាស់! អ្នកបានអានសារដាស់តឿនដ៏សំខាន់នេះដោយជោគជ័យ។
  1. <div class = "ការជូនដំណឹង alert-success" >
  2. ...
  3. </div>

ព័ត៌មាន

ព្រឺក្បាល! ការជូនដំណឹងនេះត្រូវការការយកចិត្តទុកដាក់របស់អ្នក ប៉ុន្តែវាមិនសំខាន់ខ្លាំងនោះទេ។
  1. <div class = "ការជូនដំណឹង alert-info" >
  2. ...
  3. </div>

ឧទាហរណ៍និងការសម្គាល់

មូលដ្ឋាន

របារវឌ្ឍនភាពលំនាំដើមជាមួយនឹងជម្រាលបញ្ឈរ។

  1. <div class = "វឌ្ឍនភាព" >
  2. <div class = "bar"
  3. style = " width : 60 %; " ></div>
  4. </div>

ឆ្នូត

ប្រើជម្រាលដើម្បីបង្កើតបែបផែនឆ្នូត (គ្មាន IE) ។

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " width : 20 %; " ></div>
  4. </div>

មានចលនា

យកឧទាហរណ៍ឆ្នូតហើយធ្វើចលនាវា (គ្មាន IE) ។

  1. <div class = "ដំណើរ​ការ​វឌ្ឍនភាព-ឆ្នូត
  2. សកម្ម" >
  3. <div class = "bar"
  4. style = " width : 40 %; " ></div>
  5. </div>

ជម្រើសនិងការគាំទ្រកម្មវិធីរុករក

ពណ៌បន្ថែម

របារវឌ្ឍនភាពប្រើប៊ូតុងដូចគ្នាមួយចំនួន និងថ្នាក់ជូនដំណឹងសម្រាប់រចនាប័ទ្មស្របគ្នា។

របារឆ្នូត

ស្រដៀងទៅនឹងពណ៌រឹង យើងមានរបារវឌ្ឍនភាពឆ្នូតខុសៗគ្នា។

អាកប្បកិរិយា

របារវឌ្ឍនភាពប្រើការផ្លាស់ប្តូរ CSS3 ដូច្នេះប្រសិនបើអ្នកលៃតម្រូវទទឹងតាម javascript យ៉ាងស្វាហាប់ វានឹងផ្លាស់ប្តូរទំហំយ៉ាងរលូន។

ប្រសិនបើអ្នកប្រើ .activeថ្នាក់ .progress-stripedរបារវឌ្ឍនភាពរបស់អ្នកនឹងធ្វើឱ្យឆ្នូតពីឆ្វេងទៅស្តាំមានចលនា។

ការគាំទ្រកម្មវិធីរុករក

របារវឌ្ឍនភាពប្រើជម្រាល CSS3 ការផ្លាស់ប្តូរ និងចលនាដើម្បីសម្រេចបាននូវឥទ្ធិពលទាំងអស់របស់វា។ មុខងារទាំងនេះមិនត្រូវបានគាំទ្រនៅក្នុង IE7-9 ឬកំណែចាស់របស់ Firefox ទេ។

Opera និង IE មិនគាំទ្រចលនានៅពេលនេះទេ។

អណ្តូង

ប្រើអណ្តូងជាបែបផែនសាមញ្ញលើធាតុមួយ ដើម្បីផ្តល់ឱ្យវានូវឥទ្ធិពល inset ។

មើលខ្ញុំនៅក្នុងអណ្តូង!
  1. <div class = "ល្អ" >
  2. ...
  3. </div>

បិទរូបតំណាង

ប្រើរូបតំណាងបិទទូទៅសម្រាប់ការបិទមាតិកាដូចជាម៉ូឌុល និងការជូនដំណឹង។

  1. <button class = "close" > × </button>

ឧបករណ៍ iOS ទាមទារ href="#" សម្រាប់ព្រឹត្តិការណ៍ចុច ប្រសិនបើអ្នកចូលចិត្តប្រើយុថ្កា។

  1. <a class="close" href="#"> & times ; _ _ _ </a>