Glyphicons

glyphs ដែលអាចប្រើបាន

រួមបញ្ចូលជាង 250 glyphs ក្នុងទម្រង់ពុម្ពអក្សរពីសំណុំ Glyphicon Halflings ។ Glyphicons Halflings ជាធម្មតាមិនមានដោយឥតគិតថ្លៃទេ ប៉ុន្តែអ្នកបង្កើតរបស់ពួកគេបានធ្វើឱ្យពួកវាមានសម្រាប់ Bootstrap ដោយមិនគិតថ្លៃ។ ជាការថ្លែងអំណរគុណ យើងគ្រាន់តែស្នើសុំឱ្យអ្នកបញ្ចូលតំណត្រឡប់ទៅ Glyphicons នៅពេលណាដែលអាចធ្វើទៅបាន។

  • glyphicon glyphicon-សញ្ញាផ្កាយ
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-អឺរ៉ូ
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-ដក
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-ស្រោមសំបុត្រ
  • glyphicon glyphicon-ខ្មៅដៃ
  • glyphicon glyphicon-កញ្ចក់
  • glyphicon glyphicon-តន្ត្រី
  • glyphicon glyphicon-ស្វែងរក
  • glyphicon glyphicon-បេះដូង
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-ទទេ
  • glyphicon glyphicon-អ្នកប្រើប្រាស់
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-យកចេញ
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-សញ្ញា
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-សំរាម
  • glyphicon glyphicon-home
  • glyphicon glyphicon-ឯកសារ
  • glyphicon glyphicon-time
  • glyphicon glyphicon-ផ្លូវ
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-ទាញយក
  • glyphicon glyphicon-ផ្ទុកឡើង
  • glyphicon glyphicon-ប្រអប់ទទួល
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-ធ្វើឱ្យស្រស់
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-ទង់
  • glyphicon glyphicon-កាសស្តាប់ត្រចៀក
  • glyphicon glyphicon-កម្រិតសំឡេងបិទ
  • glyphicon glyphicon-កម្រិតសំឡេងចុះក្រោម
  • glyphicon glyphicon-កម្រិតសំឡេងឡើង
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-សៀវភៅ
  • glyphicon glyphicon-ចំណាំ
  • glyphicon glyphicon-បោះពុម្ព
  • glyphicon glyphicon-កាមេរ៉ា
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-តម្រឹម-ឆ្វេង
  • glyphicon glyphicon-តម្រឹម-កណ្តាល
  • glyphicon glyphicon-តម្រឹម-ស្តាំ
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-បញ្ជី
  • glyphicon glyphicon-ចូលបន្ទាត់-ឆ្វេង
  • glyphicon glyphicon-ចូលបន្ទាត់-ស្ដាំ
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon - រូបភាព
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-លៃតម្រូវ
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-កែសម្រួល
  • glyphicon glyphicon-share
  • glyphicon glyphicon-ពិនិត្យ
  • glyphicon glyphicon-ផ្លាស់ទី
  • glyphicon glyphicon-ជំហានថយក្រោយ
  • glyphicon glyphicon-លឿន-ថយក្រោយ
  • glyphicon glyphicon - ថយក្រោយ
  • glyphicon glyphicon-play
  • glyphicon glyphicon-ផ្អាក
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-ទៅមុខ
  • glyphicon glyphicon - លឿនទៅមុខ
  • glyphicon glyphicon-ជំហានទៅមុខ
  • glyphicon glyphicon-ច្រានចេញ
  • glyphicon glyphicon-chevron-ឆ្វេង
  • glyphicon glyphicon-chevron-ស្តាំ
  • glyphicon glyphicon-បូក-សញ្ញា
  • glyphicon glyphicon-សញ្ញាដក
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-សំណួរ-សញ្ញា
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-រូបថតអេក្រង់
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-រង្វង់
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-ព្រួញ-ឆ្វេង
  • glyphicon glyphicon-ព្រួញ-ស្ដាំ
  • glyphicon glyphicon-ព្រួញឡើងលើ
  • glyphicon glyphicon-ព្រួញចុះក្រោម
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-ប្តូរទំហំ-ពេញ
  • glyphicon glyphicon-ប្តូរទំហំ-តូច
  • glyphicon glyphicon-ឧទាន-សញ្ញា
  • glyphicon glyphicon-អំណោយ
  • glyphicon glyphicon-ស្លឹក
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-បើកភ្នែក
  • glyphicon glyphicon-ភ្នែកបិទ
  • glyphicon glyphicon-សញ្ញាព្រមាន
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-ប្រតិទិន
  • glyphicon glyphicon-ចៃដន្យ
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-មេដែក
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-ដើរទិញឥវ៉ាន់-រទេះ
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-ប្តូរទំហំ-បញ្ឈរ
  • glyphicon glyphicon-ប្តូរទំហំ-ផ្ដេក
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • វិញ្ញាបនបត្រ glyphicon glyphicon
  • glyphicon glyphicon-មេដៃឡើង
  • glyphicon glyphicon-មេដៃចុះក្រោម
  • glyphicon glyphicon-ដៃស្តាំ
  • glyphicon glyphicon-ដៃឆ្វេង
  • glyphicon glyphicon-ដៃឡើង
  • glyphicon glyphicon-ដៃចុះក្រោម
  • glyphicon glyphicon-រង្វង់-ព្រួញ-ស្តាំ
  • glyphicon glyphicon-រង្វង់-ព្រួញ-ឆ្វេង
  • glyphicon glyphicon-រង្វង់-ព្រួញឡើងលើ
  • glyphicon glyphicon-រង្វង់-ព្រួញចុះក្រោម
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-ភារកិច្ច
  • តម្រង glyphicon glyphicon
  • glyphicon glyphicon-កាបូបស្ពាយ
  • glyphicon glyphicon-ពេញអេក្រង់
  • glyphicon glyphicon-ផ្ទាំងគ្រប់គ្រង
  • glyphicon glyphicon-clip
  • glyphicon glyphicon-បេះដូង-ទទេ
  • glyphicon glyphicon-link
  • glyphicon glyphicon-ទូរស័ព្ទ
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-តម្រៀប
  • glyphicon glyphicon-តម្រៀបតាមអក្ខរក្រម
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-តម្រៀបតាមលំដាប់
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-តម្រៀបតាមគុណលក្ខណៈ
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-មិន​បាន​ធីក
  • glyphicon glyphicon-ពង្រីក
  • glyphicon glyphicon-ដួលរលំចុះក្រោម
  • glyphicon glyphicon-ដួលរលំឡើង
  • glyphicon glyphicon-ចូល
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-កំណត់ត្រា
  • glyphicon glyphicon-រក្សាទុក
  • glyphicon glyphicon-បើក
  • glyphicon glyphicon-រក្សាទុក
  • glyphicon glyphicon-នាំចូល
  • glyphicon glyphicon-នាំចេញ
  • glyphicon glyphicon-ផ្ញើ
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-រក្សាទុក
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-កាតឥណទាន
  • glyphicon glyphicon-ផ្ទេរ
  • glyphicon glyphicon- cutlery
  • glyphicon glyphicon-បឋមកថា
  • glyphicon glyphicon-បង្ហាប់
  • glyphicon glyphicon-កាសស្តាប់ត្រចៀក
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-ស្ថិតិ
  • glyphicon glyphicon-sd-វីដេអូ
  • glyphicon glyphicon-hd-វីដេអូ
  • glyphicon glyphicon-អក្សររត់ពីក្រោម
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-រក្សាសិទ្ធិ-សម្គាល់
  • glyphicon glyphicon-ការចុះឈ្មោះ-សម្គាល់
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-ដើមឈើ-conifer
  • glyphicon glyphicon-មែកធាង-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-កម្រិតឡើង
  • glyphicon glyphicon-ចម្លង
  • glyphicon glyphicon-បិទភ្ជាប់
  • glyphicon glyphicon-ជូនដំណឹង
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-ស្តេច
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • រូបមន្ត glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-តង់
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-គ្រែ
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-លុប
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-ចង្កៀង
  • glyphicon glyphicon-ស្ទួន
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-កន្ត្រៃ
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-ខ្នាត
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-ភ្លក់
  • glyphicon glyphicon - ការអប់រំ
  • glyphicon glyphicon-ជម្រើស-ផ្ដេក
  • glyphicon glyphicon-ជម្រើស-បញ្ឈរ
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-ប្រេង
  • glyphicon glyphicon-grain
  • វ៉ែនតា glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-ទំហំអត្ថបទ
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-អត្ថបទ-ផ្ទៃខាងក្រោយ
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-ត្រីកោណ-ស្តាំ
  • glyphicon glyphicon-ត្រីកោណ-ឆ្វេង
  • glyphicon glyphicon-ត្រីកោណ-បាត
  • glyphicon glyphicon-ត្រីកោណ-កំពូល
  • glyphicon glyphicon-កុងសូល។
  • glyphicon glyphicon-អក្សរធំ
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-ម៉ឺនុយ-ឆ្វេង
  • glyphicon glyphicon-ម៉ឺនុយខាងស្តាំ
  • glyphicon glyphicon-ម៉ឺនុយចុះក្រោម
  • glyphicon glyphicon-ម៉ឺនុយឡើង

របៀបប្រើ

សម្រាប់ហេតុផលដំណើរការ រូបតំណាងទាំងអស់ទាមទារថ្នាក់មូលដ្ឋាន និងថ្នាក់រូបតំណាងនីមួយៗ។ ដើម្បីប្រើ សូមដាក់លេខកូដខាងក្រោមនៅគ្រប់ទីកន្លែង។ ត្រូវប្រាកដថាទុកចន្លោះមួយរវាងរូបតំណាង និងអត្ថបទសម្រាប់ទ្រនាប់ត្រឹមត្រូវ។

កុំលាយជាមួយសមាសធាតុផ្សេងទៀត។

ថ្នាក់ Icon មិនអាចរួមបញ្ចូលគ្នាដោយផ្ទាល់ជាមួយសមាសធាតុផ្សេងទៀតបានទេ។ ពួកវាមិនគួរត្រូវបានប្រើរួមជាមួយថ្នាក់ផ្សេងទៀតនៅលើធាតុដូចគ្នានោះទេ។ ជំនួសមកវិញ បន្ថែម <span>ស្រទាប់ដែលជាប់ ហើយអនុវត្តថ្នាក់រូបតំណាងទៅ <span>.

សម្រាប់តែប្រើលើធាតុទទេប៉ុណ្ណោះ។

ថ្នាក់ Icon គួរ​តែ​ត្រូវ​បាន​ប្រើ​តែ​លើ​ធាតុ​ដែល​គ្មាន​មាតិកា​អត្ថបទ និង​គ្មាន​ធាតុ​កូន។

ការផ្លាស់ប្តូរទីតាំងពុម្ពអក្សររូបតំណាង

Bootstrap សន្មត់ថាឯកសារពុម្ពអក្សររូបតំណាងនឹងមានទីតាំងនៅក្នុង ../fonts/ថតដែលទាក់ទងទៅនឹងឯកសារ CSS ដែលបានចងក្រង។ ការផ្លាស់ទី ឬប្តូរឈ្មោះឯកសារពុម្ពអក្សរទាំងនោះមានន័យថាធ្វើបច្ចុប្បន្នភាព CSS តាមវិធីមួយក្នុងចំណោមវិធីបីយ៉ាង៖

  • ផ្លាស់ប្តូរ @icon-font-pathនិង/ឬ @icon-font-nameអថេរនៅក្នុងប្រភព ឯកសារតិច។
  • ប្រើប្រាស់ ជម្រើស URLs ដែលទាក់ទងដែល ផ្តល់ដោយ Less compiler ។
  • ផ្លាស់ប្តូរ url()ផ្លូវនៅក្នុង CSS ដែលបានចងក្រង។

ប្រើជម្រើសណាមួយដែលសមស្របបំផុតនឹងការរៀបចំការអភិវឌ្ឍន៍ជាក់លាក់របស់អ្នក។

រូបតំណាងដែលអាចចូលប្រើបាន។

កំណែទំនើបនៃបច្ចេកវិទ្យាជំនួយនឹងប្រកាសមាតិកាដែលបានបង្កើត CSS ក៏ដូចជាតួអក្សរយូនីកូដជាក់លាក់ផងដែរ។ ដើម្បីជៀសវាងលទ្ធផលដែលមិនមានចេតនា និងច្របូកច្របល់នៅក្នុងកម្មវិធីអានអេក្រង់ (ជាពិសេសនៅពេលដែលរូបតំណាងត្រូវបានប្រើសម្រាប់ការតុបតែងសុទ្ធសាធ) យើងលាក់ពួកវាដោយ aria-hidden="true"គុណលក្ខណៈ។

ប្រសិនបើអ្នកកំពុងប្រើរូបតំណាងដើម្បីបង្ហាញអត្ថន័យ (ជាជាងគ្រាន់តែជាធាតុតុបតែង) សូមប្រាកដថាអត្ថន័យនេះក៏ត្រូវបានបញ្ជូនទៅកាន់បច្ចេកវិទ្យាជំនួយផងដែរ ឧទាហរណ៍ រួមបញ្ចូលខ្លឹមសារបន្ថែម ដែលលាក់ដោយភ្នែកជាមួយ .sr-onlyថ្នាក់។

ប្រសិនបើអ្នកកំពុងបង្កើតវត្ថុបញ្ជាដោយមិនមានអត្ថបទផ្សេងទៀត (ដូចជា <button>ដែលមានតែរូបតំណាង) អ្នកគួរតែផ្តល់មាតិកាជំនួសជានិច្ចដើម្បីកំណត់អត្តសញ្ញាណគោលបំណងនៃការគ្រប់គ្រង ដូច្នេះវានឹងមានប្រយោជន៍ចំពោះអ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ។ ក្នុងករណីនេះ អ្នកអាចបន្ថែម aria-labelគុណលក្ខណៈនៅលើវត្ថុបញ្ជាដោយខ្លួនឯង។

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ឧទាហរណ៍

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

រូបតំណាងដែលប្រើនៅក្នុងការ ជូនដំណឹង ដើម្បីបង្ហាញថាវាជាសារកំហុស ដោយមាន .sr-onlyអត្ថបទបន្ថែមដើម្បីបញ្ជូនព័ត៌មានជំនួយនេះទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ។

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ទម្លាក់ចុះ

អាចបិទបើកបាន ម៉ឺនុយបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ។ បានធ្វើអន្តរកម្មជាមួយ កម្មវិធីជំនួយ JavaScript ទម្លាក់ចុះ

រុំគន្លឹះរបស់ទម្លាក់ចុះ និងម៉ឺនុយទម្លាក់ចុះនៅក្នុង .dropdownឬធាតុផ្សេងទៀតដែលប្រកាស position: relative;។ បន្ទាប់មកបន្ថែម HTML របស់ម៉ឺនុយ។

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ម៉ឺនុយទម្លាក់ចុះអាចត្រូវបានផ្លាស់ប្តូរដើម្បីពង្រីកឡើងលើ (ជំនួសឱ្យចុះក្រោម) ដោយបន្ថែម .dropupទៅមេ។

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

តាមលំនាំដើម ម៉ឺនុយទម្លាក់ចុះត្រូវបានដាក់ដោយស្វ័យប្រវត្តិ 100% ពីខាងលើ និងនៅផ្នែកខាងឆ្វេងនៃមេរបស់វា។ បន្ថែម .dropdown-menu-rightទៅ .dropdown-menuស្តាំ តម្រឹមម៉ឺនុយទម្លាក់ចុះ។

អាចទាមទារទីតាំងបន្ថែម

ការទម្លាក់ចុះត្រូវបានដាក់ដោយស្វ័យប្រវត្តិតាមរយៈ CSS នៅក្នុងលំហូរធម្មតានៃឯកសារ។ នេះមានន័យថាការទម្លាក់ចុះអាចត្រូវបានច្រឹបដោយមាតាបិតាដែលមាន overflowលក្ខណៈសម្បត្តិជាក់លាក់ ឬលេចឡើងក្រៅព្រំដែននៃច្រកមើល។ ដោះស្រាយបញ្ហាទាំងនេះដោយខ្លួនឯងនៅពេលវាកើតឡើង។

.pull-rightការតម្រឹម ដែលបានបដិសេធ

ចាប់ពី v3.1.0 យើងបានបដិសេធ .pull-rightលើម៉ឺនុយទម្លាក់ចុះ។ ដើម្បី​តម្រឹម​ម៉ឺនុយ​ត្រូវ​ប្រើ .dropdown-menu-right។ សមាសធាតុ nav ដែលបានតម្រឹមស្តាំនៅក្នុងរបារ navbar ប្រើកំណែ mixin នៃថ្នាក់នេះ ដើម្បីតម្រឹមម៉ឺនុយដោយស្វ័យប្រវត្តិ។ ដើម្បីបដិសេធវា សូមប្រើ .dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

បន្ថែមបឋមកថាទៅផ្នែកស្លាកនៃសកម្មភាពនៅក្នុងម៉ឺនុយទម្លាក់ចុះណាមួយ។

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

បន្ថែមផ្នែកបែងចែកទៅស៊េរីតំណដាច់ដោយឡែកនៅក្នុងម៉ឺនុយទម្លាក់ចុះ។

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

បញ្ចូល .disabledទៅ <li>ក្នុងបញ្ជីទម្លាក់ចុះ ដើម្បីបិទតំណ។

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

ក្រុមប៊ូតុង

ដាក់ជាក្រុមស៊េរីនៃប៊ូតុងជាមួយគ្នានៅលើបន្ទាត់តែមួយជាមួយក្រុមប៊ូតុង។ បន្ថែមលើជម្រើសវិទ្យុ JavaScript និងឥរិយាបថរចនាប័ទ្មប្រអប់ធីកជាមួយនឹង កម្មវិធីជំនួយប៊ូតុងរបស់យើង

ព័ត៌មានជំនួយ និងការលេចឡើងក្នុងក្រុមប៊ូតុងទាមទារការកំណត់ពិសេស

នៅពេលប្រើព័ត៌មានជំនួយ ឬការលេចឡើងនៅលើធាតុនៅក្នុង មួយ .btn-groupអ្នកនឹងត្រូវបញ្ជាក់ជម្រើស container: 'body'ដើម្បីជៀសវាងផលប៉ះពាល់ដែលមិនចង់បាន (ដូចជាធាតុកាន់តែធំឡើង និង/ឬបាត់បង់ជ្រុងមូលរបស់វា នៅពេលដែលព័ត៌មានជំនួយ ឬផ្ទាំងព័ត៌មានត្រូវបានកេះ)។

ត្រូវប្រាកដថាត្រឹមត្រូវ roleនិងផ្តល់ស្លាក

ដើម្បីឱ្យបច្ចេកវិជ្ជាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម ដើម្បីបង្ហាញថាប៊ូតុងជាក្រុមត្រូវបានដាក់ជាក្រុម roleគុណលក្ខណៈសមស្របចាំបាច់ត្រូវផ្តល់ជូន។ សម្រាប់ក្រុមប៊ូតុង វានឹងក្លាយជា role="group"ខណៈពេលដែលរបារឧបករណ៍គួរតែមាន role="toolbar".

ករណីលើកលែងមួយគឺក្រុមដែលមានការគ្រប់គ្រងតែមួយ (ឧទាហរណ៍ក្រុម ប៊ូតុងដែលត្រឹមត្រូវ ជាមួយ <button>ធាតុ) ឬទម្លាក់ចុះ។

លើសពីនេះ ក្រុម និងរបារឧបករណ៍គួរតែត្រូវបានផ្តល់ស្លាកច្បាស់លាស់ ព្រោះថាបច្ចេកវិជ្ជាជំនួយភាគច្រើននឹងមិនប្រកាសពួកវាទេ បើទោះជាមានវត្តមាន roleគុណលក្ខណៈត្រឹមត្រូវក៏ដោយ។ នៅក្នុងឧទាហរណ៍ដែលបានផ្ដល់ជូននៅទីនេះ យើងប្រើ aria-labelប៉ុន្តែជម្រើសផ្សេងទៀតដូចជា aria-labelledbyអាចត្រូវបានប្រើផងដែរ។

ឧទាហរណ៍ជាមូលដ្ឋាន

រុំស៊េរីនៃប៊ូតុងជាមួយ .btnនៅក្នុង .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

របារឧបករណ៍ប៊ូតុង

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

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

ទំហំ

ជំនួសឱ្យការអនុវត្តថ្នាក់កំណត់ទំហំប៊ូតុងទៅគ្រប់ប៊ូតុងនៅក្នុងក្រុមមួយ គ្រាន់តែបន្ថែម .btn-group-*ទៅនីមួយៗ .btn-groupរួមទាំងនៅពេលដាក់ក្រុមច្រើនផងដែរ។




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

សំបុក

ដាក់​មួយ .btn-group​នៅ​ក្នុង​មួយ​ផ្សេង​ទៀត .btn-group​នៅ​ពេល​ដែល​អ្នក​ចង់​បាន​ម៉ឺនុយ​ទម្លាក់​ចុះ​លាយ​ជា​មួយ​នឹង​ស៊េរី​នៃ​ប៊ូតុង​មួយ​។

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

បំរែបំរួលបញ្ឈរ

ធ្វើឱ្យសំណុំនៃប៊ូតុងលេចឡើងជាជង់បញ្ឈរជាជាងផ្ដេក។ ការទម្លាក់ចុះនៃប៊ូតុងបំបែកមិនត្រូវបានគាំទ្រនៅទីនេះទេ។

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

ក្រុមប៊ូតុងត្រឹមត្រូវ។

ធ្វើឱ្យក្រុមនៃប៊ូតុងលាតសន្ធឹងក្នុងទំហំស្មើគ្នា ដើម្បីពង្រីកទទឹងទាំងមូលនៃមេរបស់វា។ ក៏ដំណើរការជាមួយនឹងការទម្លាក់ប៊ូតុងនៅក្នុងក្រុមប៊ូតុងផងដែរ។

ការគ្រប់គ្រងព្រំដែន

ដោយសារតែ HTML និង CSS ជាក់លាក់ដែលប្រើដើម្បីបង្ហាញអំពីភាពត្រឹមត្រូវនៃប៊ូតុង (ពោលគឺ display: table-cell) ព្រំដែនរវាងពួកវាត្រូវបានកើនឡើងទ្វេដង។ នៅក្នុងក្រុមប៊ូតុងធម្មតា margin-left: -1pxត្រូវបានប្រើដើម្បីជង់ស៊ុមជំនួសឱ្យការយកពួកវាចេញ។ ទោះយ៉ាងណាក៏ដោយ marginមិនដំណើរការជាមួយ display: table-cell. ជាលទ្ធផល អាស្រ័យលើការប្ដូរតាមបំណងរបស់អ្នកចំពោះ Bootstrap អ្នកប្រហែលជាចង់លុប ឬពណ៌ស៊ុមឡើងវិញ។

IE8 និងព្រំដែន

Internet Explorer 8 មិនបង្ហាញព្រំដែនលើប៊ូតុងនៅក្នុងក្រុមប៊ូតុងដែលត្រឹមត្រូវទេ មិនថាវាបើក <a><button>ធាតុទេ។ ដើម្បីចូលទៅជិតនោះ សូមរុំប៊ូតុងនីមួយៗនៅក្នុងមួយផ្សេងទៀត .btn-group

សូមមើល #12476 សម្រាប់ព័ត៌មានបន្ថែម។

ជាមួយនឹង <a>ធាតុ

គ្រាន់តែរុំស៊េរីនៃ .btns នៅក្នុង .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

តំណភ្ជាប់ដើរតួជាប៊ូតុង

ប្រសិនបើ <a>ធាតុត្រូវបានប្រើដើម្បីដើរតួជាប៊ូតុង – ដំណើរការមុខងារក្នុងទំព័រ ជាជាងការរុករកទៅឯកសារ ឬផ្នែកផ្សេងទៀតនៅក្នុងទំព័របច្ចុប្បន្ន – ពួកគេក៏គួរតែត្រូវបានផ្តល់ឱ្យសមស្រប role="button"ផងដែរ។

ជាមួយនឹង <button>ធាតុ

ដើម្បីប្រើក្រុមប៊ូតុងដែលត្រឹមត្រូវជាមួយ <button>ធាតុ អ្នកត្រូវតែរុំប៊ូតុងនីមួយៗនៅក្នុងក្រុមប៊ូតុងមួយ ។ កម្មវិធីរុករកតាមអ៊ីនធឺណិតភាគច្រើនមិនអនុវត្ត CSS របស់យើងឱ្យបានត្រឹមត្រូវសម្រាប់ហេតុផលចំពោះ <button>ធាតុនោះទេ ប៉ុន្តែដោយសារយើងគាំទ្រការទម្លាក់ប៊ូតុង យើងអាចធ្វើការជុំវិញនោះ។

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

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

ភាពអាស្រ័យនៃកម្មវិធីជំនួយ

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

ការទម្លាក់ប៊ូតុងតែមួយ

បង្វែរប៊ូតុងមួយទៅក្នុងបញ្ជីទម្លាក់ចុះ ដោយមានការផ្លាស់ប្តូរការសម្គាល់ជាមូលដ្ឋានមួយចំនួន។

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

ស្រដៀងគ្នានេះដែរ បង្កើតការទម្លាក់ចុះនៃប៊ូតុងបំបែកជាមួយនឹងការផ្លាស់ប្តូរការសម្គាល់ដូចគ្នា មានតែប៊ូតុងដាច់ដោយឡែកប៉ុណ្ណោះ។

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ទំហំ

ប៊ូតុងទម្លាក់ចុះដំណើរការជាមួយប៊ូតុងគ្រប់ទំហំ។

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

បំរែបំរួលទម្លាក់

បើកម៉ឺនុយទម្លាក់ចុះខាងលើធាតុដោយបន្ថែម .dropupទៅមេ។

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ក្រុមបញ្ចូល

ពង្រីក​ការ​គ្រប់គ្រង​ទម្រង់​ដោយ​បន្ថែម​អត្ថបទ​ឬ​ប៊ូតុង​មុន​ក្រោយ​ ឬ​នៅ​លើ​ភាគី​ទាំង​សង​ខាង​នៃ​អត្ថបទ​ដែល​ផ្អែក​លើ​អត្ថបទ <input>។ ប្រើ .input-groupជាមួយ .input-group-addon.input-group-btnដើម្បីបន្ថែម ឬបន្ថែមធាតុទៅតែមួយ .form-control

អត្ថបទ <input>តែប៉ុណ្ណោះ

ជៀសវាងការប្រើ <select>ធាតុនៅទីនេះព្រោះវាមិនអាចត្រូវបានកំណត់រចនាប័ទ្មពេញលេញនៅក្នុងកម្មវិធីរុករក WebKit ។

ជៀសវាងការប្រើ <textarea>ធាតុនៅទីនេះ ព្រោះ rowsគុណលក្ខណៈរបស់ពួកគេនឹងមិនត្រូវបានគោរពនៅក្នុងករណីខ្លះ។

ព័ត៌មានជំនួយ & ការលេចឡើងនៅក្នុងក្រុមបញ្ចូលតម្រូវឱ្យមានការកំណត់ពិសេស

នៅពេលប្រើព័ត៌មានជំនួយ ឬការលេចឡើងនៅលើធាតុនៅក្នុងមួយ .input-groupអ្នកនឹងត្រូវបញ្ជាក់ជម្រើស container: 'body'ដើម្បីជៀសវាងផលប៉ះពាល់ដែលមិនចង់បាន (ដូចជាធាតុដែលរីកធំឡើង និង/ឬបាត់បង់ជ្រុងមូលរបស់វា នៅពេលដែលព័ត៌មានជំនួយ ឬផ្ទាំងព័ត៌មានត្រូវបានកេះ)។

កុំលាយជាមួយសមាសធាតុផ្សេងទៀត។

កុំលាយក្រុមទម្រង់ ឬថ្នាក់ជួរឈរក្រឡាចត្រង្គដោយផ្ទាល់ជាមួយក្រុមបញ្ចូល។ ផ្ទុយទៅវិញ ដាក់ក្រុមបញ្ចូលនៅខាងក្នុងនៃក្រុមទម្រង់ ឬធាតុដែលទាក់ទងនឹងក្រឡាចត្រង្គ។

បន្ថែមស្លាកជានិច្ច

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

បច្ចេកទេសពិតប្រាកដដែលត្រូវប្រើ (ធាតុដែលអាចមើលឃើញ <label>ធាតុដែល <label>លាក់ដោយប្រើ .sr-onlyថ្នាក់ ឬការប្រើប្រាស់ គុណលក្ខណៈ aria-label, aria-labelledby, aria-describedby, titleplaceholderគុណលក្ខណៈ) និងព័ត៌មានបន្ថែមអ្វីដែលនឹងត្រូវបញ្ជូននឹងប្រែប្រួលអាស្រ័យលើប្រភេទពិតប្រាកដនៃធាតុក្រាហ្វិកចំណុចប្រទាក់ដែលអ្នកកំពុងអនុវត្ត។ ឧទាហរណ៍នៅក្នុងផ្នែកនេះផ្តល់នូវវិធីសាស្រ្តមួយចំនួនដែលបានស្នើ និងករណីជាក់លាក់

ឧទាហរណ៍ជាមូលដ្ឋាន

ដាក់​កម្មវិធី​បន្ថែម​មួយ ឬ​ប៊ូតុង​មួយ​នៅ​ផ្នែក​ម្ខាង​នៃ​ធាតុ​បញ្ចូល។ អ្នកក៏អាចដាក់មួយនៅលើផ្នែកទាំងពីរនៃការបញ្ចូលមួយ។

យើងមិនគាំទ្រកម្មវិធីបន្ថែមច្រើន ( .input-group-addon.input-group-btn) នៅផ្នែកតែមួយទេ។

យើងមិនគាំទ្រការគ្រប់គ្រងទម្រង់ច្រើននៅក្នុងក្រុមបញ្ចូលតែមួយទេ។

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ទំហំ

បន្ថែមថ្នាក់ទំហំទម្រង់ដែលទាក់ទងទៅ .input-groupខ្លួនវា ហើយមាតិកានៅក្នុងនឹងផ្លាស់ប្តូរទំហំដោយស្វ័យប្រវត្តិ - មិនចាំបាច់ធ្វើម្តងទៀតនូវថ្នាក់គ្រប់គ្រងទំហំទម្រង់នៅលើធាតុនីមួយៗទេ។

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

ប្រអប់ធីក និងឧបករណ៍បន្ថែមវិទ្យុ

ដាក់ប្រអប់ធីកឬជម្រើសវិទ្យុណាមួយនៅក្នុង addon របស់ក្រុមបញ្ចូលជំនួសឱ្យអត្ថបទ។

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ប៊ូតុងបន្ថែម

ប៊ូតុងនៅក្នុងក្រុមបញ្ចូលគឺខុសគ្នាបន្តិច ហើយត្រូវការកម្រិតបន្ថែមមួយនៃការដាក់សំបុក។ ជំនួសមកវិញ .input-group-addonអ្នកនឹងត្រូវប្រើ .input-group-btnដើម្បីរុំប៊ូតុង។ វាត្រូវបានទាមទារដោយសារតែរចនាប័ទ្មកម្មវិធីរុករកលំនាំដើមដែលមិនអាចបដិសេធបាន។

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ប៊ូតុងដែលបានបែងចែក

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

ប៊ូតុងច្រើន។

ខណៈ​ពេល​ដែល​អ្នក​អាច​មាន​កម្មវិធី​បន្ថែម​មួយ​ប៉ុណ្ណោះ​ក្នុង​មួយ​ចំហៀង អ្នក​អាច​មាន​ប៊ូតុង​ច្រើន​នៅ​ក្នុង​មួយ .input-group-btn​។

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

កងទ័ពជើងទឹក

Navs ដែលមាននៅក្នុង Bootstrap បានចែករំលែកការសម្គាល់ ដោយចាប់ផ្តើមពី .navថ្នាក់មូលដ្ឋាន ក៏ដូចជារដ្ឋដែលបានចែករំលែកផងដែរ។ ប្តូរថ្នាក់កែប្រែដើម្បីប្តូររវាងរចនាប័ទ្មនីមួយៗ។

ការប្រើប្រាស់ navs សម្រាប់ផ្ទាំងផ្ទាំងតម្រូវឱ្យកម្មវិធីជំនួយផ្ទាំង JavaScript

សម្រាប់ផ្ទាំងដែលមានផ្ទៃដែលអាចមើលបាន អ្នកត្រូវតែប្រើ ផ្ទាំងជំនួយ JavaScript ។ ការសម្គាល់ក៏នឹងតម្រូវឱ្យមាន roleគុណលក្ខណៈបន្ថែម និង ARIA – សូមមើលការ សម្គាល់ឧទាហរណ៍ របស់កម្មវិធីជំនួយ សម្រាប់ព័ត៌មានលម្អិតបន្ថែម។

ធ្វើឱ្យ navs ប្រើជាការរុករកអាចចូលដំណើរការបាន។

ប្រសិនបើអ្នកកំពុងប្រើ navs ដើម្បីផ្តល់របាររុករក ត្រូវប្រាកដថាបន្ថែម role="navigation"កុងតឺន័រមេឡូជីខលបំផុតនៃ <ul>, ឬរុំ <nav>ធាតុជុំវិញការរុករកទាំងមូល។ កុំបន្ថែមតួនាទីទៅ <ul>ខ្លួនវា ព្រោះវានឹងរារាំងវាពីការប្រកាសជាបញ្ជីពិតប្រាកដដោយបច្ចេកវិទ្យាជំនួយ។

ចំណាំ .nav-tabsថ្នាក់ត្រូវការថ្នាក់ .navមូលដ្ឋាន។

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

យក HTML ដូចគ្នា ប៉ុន្តែប្រើ .nav-pillsជំនួសវិញ៖

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ថ្នាំគ្រាប់ក៏អាចដាក់បញ្ឈរបានដែរ។ គ្រាន់តែបន្ថែម .nav-stacked

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

ងាយស្រួលបង្កើតផ្ទាំង ឬថ្នាំដែលមានទទឹងស្មើគ្នានៃមេរបស់វានៅអេក្រង់ធំជាង 768px ជាមួយ .nav-justified. នៅលើអេក្រង់តូច តំណភ្ជាប់ nav ត្រូវបានជង់។

តំណភ្ជាប់ navbar navbar ត្រឹមត្រូវបច្ចុប្បន្នមិនត្រូវបានគាំទ្រទេ។

Safari និង navs ដែលសមហេតុផលឆ្លើយតប

គិតត្រឹម v9.1.2, Safari បង្ហាញកំហុសដែលផ្លាស់ប្តូរទំហំកម្មវិធីរុករករបស់អ្នកដោយផ្ដេកបណ្តាលឱ្យមានកំហុសក្នុងការបង្ហាញនៅក្នុង naval ត្រឹមត្រូវដែលត្រូវបានជម្រះនៅពេលផ្ទុកឡើងវិញ។ កំហុសនេះក៏ត្រូវបានបង្ហាញនៅក្នុង ឧទាហរណ៍ navified nav ផងដែរ។

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

សម្រាប់សមាសធាតុ nav ណាមួយ (ផ្ទាំង ឬថ្នាំគ្រាប់) បន្ថែម .disabledសម្រាប់ តំណពណ៌ប្រផេះ និងគ្មានផលប៉ះពាល់

មុខងារតំណមិនប៉ះពាល់ទេ។

ថ្នាក់នេះនឹងផ្លាស់ប្តូរតែ <a>រូបរាង មិនមែនមុខងាររបស់វាទេ។ ប្រើ JavaScript ផ្ទាល់ខ្លួន ដើម្បីបិទតំណនៅទីនេះ។

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

បន្ថែមម៉ឺនុយទម្លាក់ចុះជាមួយ HTML បន្ថែមតិចតួច និង កម្មវិធីជំនួយ JavaScript ទម្លាក់ចុះ

ផ្ទាំងដែលមានបញ្ជីទម្លាក់ចុះ

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ថ្នាំគ្រាប់ជាមួយនឹងការទម្លាក់ចុះ

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbar

Navbars គឺជាសមាសធាតុមេតាដែលឆ្លើយតបដែលបម្រើជាបឋមកថារុករកសម្រាប់កម្មវិធី ឬគេហទំព័ររបស់អ្នក។ ពួកវាចាប់ផ្តើមបង្រួម (ហើយអាចបិទបើកបាន) ក្នុងទិដ្ឋភាពចល័ត ហើយក្លាយជាផ្ដេកនៅពេលដែលទទឹងច្រកចូលមើលមានកើនឡើង។

តំណភ្ជាប់ navbar navbar ត្រឹមត្រូវបច្ចុប្បន្នមិនត្រូវបានគាំទ្រទេ។

មាតិកាលើស

ដោយសារ Bootstrap មិនដឹងថាទំហំផ្ទុកប៉ុន្មានដែលមាតិកានៅក្នុងរបាររុករករបស់អ្នកត្រូវការទេ អ្នកអាចនឹងមានបញ្ហាជាមួយនឹងការរុំមាតិកាទៅក្នុងជួរទីពីរ។ ដើម្បីដោះស្រាយបញ្ហានេះ អ្នកអាច៖

  1. កាត់បន្ថយចំនួន ឬទទឹងរបស់ធាតុ navbar ។
  2. លាក់ធាតុ navbar ជាក់លាក់នៅទំហំអេក្រង់ជាក់លាក់ដោយប្រើ ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប
  3. ផ្លាស់ប្តូរចំណុចដែលរបាររុករករបស់អ្នកប្តូររវាងរបៀបបង្រួម និងផ្ដេក។ ប្ដូរ @grid-float-breakpointអថេរតាមបំណង ឬបន្ថែមសំណួរមេឌៀផ្ទាល់ខ្លួនរបស់អ្នក។

ទាមទារកម្មវិធីជំនួយ JavaScript

ប្រសិនបើ JavaScript ត្រូវបានបិទ ហើយច្រកទិដ្ឋភាពតូចចង្អៀតគ្រប់គ្រាន់ដែល navbar ដួលរលំ វានឹងមិនអាចពង្រីក navbar និងមើលមាតិកានៅក្នុង .navbar-collapse.

របាររុករកដែលឆ្លើយតបតម្រូវឱ្យ កម្មវិធីជំនួយការដួលរលំ ត្រូវបានរួមបញ្ចូលនៅក្នុងកំណែ Bootstrap របស់អ្នក។

ការផ្លាស់ប្តូរចំណុចបំបែករបាររុករកចល័តដែលបានដួលរលំ

របារ navbar ដួលរលំចូលទៅក្នុងទិដ្ឋភាពចល័តបញ្ឈររបស់វា នៅពេលដែលច្រកទិដ្ឋភាពតូចជាង ហើយពង្រីកចូលទៅក្នុងទិដ្ឋភាពមិនចល័តផ្ដេករបស់វា នៅពេលដែលច្រកមើលមាន ទទឹង @grid-float-breakpointយ៉ាងហោចណាស់ ។ @grid-float-breakpointកែតម្រូវអថេរនេះនៅក្នុងប្រភពតិច ដើម្បីគ្រប់គ្រងនៅពេលដែលរបាររុករកដួលរលំ/ពង្រីក។ តម្លៃលំនាំដើមគឺ 768px(អេក្រង់តូចបំផុត "តូច" ឬ "ថេប្លេត") ។

ធ្វើឱ្យរបាររុករកអាចចូលប្រើបាន។

ត្រូវប្រាកដថាប្រើ <nav>ធាតុមួយ ឬប្រសិនបើប្រើធាតុទូទៅដូចជា a <div>បន្ថែម a role="navigation"ទៅគ្រប់របាររុករកដើម្បីកំណត់អត្តសញ្ញាណយ៉ាងច្បាស់ថាវាជាតំបន់សម្គាល់សម្រាប់អ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ។

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ជំនួសម៉ាក navbar ជាមួយនឹងរូបភាពផ្ទាល់ខ្លួនរបស់អ្នកដោយប្តូរអត្ថបទសម្រាប់ <img>. ដោយសារ .navbar-brand​មាន​ទ្រនាប់ និង​កម្ពស់​ផ្ទាល់​ខ្លួន អ្នក​ប្រហែល​ជា​ត្រូវ​លុប​លើ CSS ខ្លះ អាស្រ័យ​លើ​រូបភាព​របស់​អ្នក។

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

ដាក់​មាតិកា​ទម្រង់​ក្នុង .navbar-form​សម្រាប់​ការ​តម្រឹម​បញ្ឈរ​ត្រឹមត្រូវ និង​ឥរិយាបថ​បង្រួម​ក្នុង​ច្រក​មើល​តូច​ចង្អៀត។ ប្រើជម្រើសតម្រឹមដើម្បីសម្រេចថាតើវាស្ថិតនៅកន្លែងណានៅក្នុងមាតិការបាររុករក។

ជាបឋម .navbar-formចែករំលែកកូដរបស់វាជាច្រើន .form-inlineតាមរយៈ mixin ។ ការគ្រប់គ្រងទម្រង់មួយចំនួន ដូចជាក្រុមបញ្ចូល អាចទាមទារទទឹងថេរ ដើម្បីបង្ហាញឱ្យបានត្រឹមត្រូវនៅក្នុងរបាររុករក។

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ឧបករណ៍ចល័តព្រមាន

មានការព្រមានមួយចំនួនទាក់ទងនឹងការប្រើប្រាស់ការគ្រប់គ្រងទម្រង់នៅក្នុងធាតុថេរនៅលើឧបករណ៍ចល័ត។ សូមមើលឯកសារជំនួយកម្មវិធីរុករករបស់យើង សម្រាប់ព័ត៌មានលម្អិត។

បន្ថែមស្លាកជានិច្ច

អ្នកអានអេក្រង់នឹងមានបញ្ហាជាមួយនឹងទម្រង់របស់អ្នក ប្រសិនបើអ្នកមិនបញ្ចូលស្លាកសម្រាប់រាល់ការបញ្ចូល។ សម្រាប់ទម្រង់ក្នុងជួរទាំងនេះ អ្នកអាចលាក់ស្លាកដោយប្រើ .sr-onlyថ្នាក់។ មានវិធីសាស្រ្តជំនួសបន្ថែមទៀតនៃការផ្តល់ស្លាកសម្រាប់បច្ចេកវិទ្យាជំនួយ ដូចជា aria-label, aria-labelledbytitleគុណលក្ខណៈ។ ប្រសិនបើគ្មានវត្ថុទាំងនេះទេ អ្នកអានអេក្រង់អាចងាកមកប្រើ placeholderគុណលក្ខណៈ ប្រសិនបើមានវត្តមាន ប៉ុន្តែសូមចំណាំថា ការប្រើ placeholderជាការជំនួសសម្រាប់វិធីដាក់ស្លាកផ្សេងទៀតមិនត្រូវបានណែនាំទេ។

បន្ថែម .navbar-btn​ថ្នាក់​ទៅ <button>​ធាតុ​ដែល​មិន​ស្ថិត​នៅ​ក្នុង​មួយ <form>ដើម្បី​ដាក់​កណ្តាល​ពួកវា​បញ្ឈរ​ក្នុង​របារ​រុករក។

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

ការប្រើប្រាស់តាមបរិបទជាក់លាក់

ដូចជា ថ្នាក់ប៊ូតុង ស្តង់ដារ .navbar-btnអាចត្រូវបានប្រើនៅលើ និង <a>ធាតុ <input>។ ទោះយ៉ាងណាក៏ដោយ ទាំង .navbar-btnថ្នាក់ប៊ូតុងស្តង់ដារ មិនគួរត្រូវបានប្រើប្រាស់លើ <a>ធាតុនៅក្នុង .navbar-nav.

រុំខ្សែអក្សរនៃអត្ថបទនៅក្នុងធាតុមួយ .navbar-textជាធម្មតានៅលើ <p>ស្លាកសម្រាប់ការនាំមុខ និងពណ៌ត្រឹមត្រូវ។

<p class="navbar-text">Signed in as Mark Otto</p>

សម្រាប់​អ្នក​ប្រើ​តំណ​ស្តង់ដារ​ដែល​មិន​ស្ថិត​នៅ​ក្នុង​សមាសភាគ​រុករក​របារ​ធម្មតា ប្រើ .navbar-link​ថ្នាក់​ដើម្បី​បន្ថែម​ពណ៌​ត្រឹមត្រូវ​សម្រាប់​ជម្រើស​របារ​រុករក​លំនាំដើម និង​បញ្ច្រាស។

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

តម្រឹមតំណរុករក ទម្រង់ ប៊ូតុង ឬអត្ថបទ ដោយប្រើ .navbar-left.navbar-rightថ្នាក់ឧបករណ៍ប្រើប្រាស់។ ថ្នាក់ទាំងពីរនឹងបន្ថែមអណ្តែត CSS ក្នុងទិសដៅដែលបានបញ្ជាក់។ ឧទាហរណ៍ ដើម្បីតម្រឹមតំណ nav សូមដាក់ពួកវាដាច់ដោយឡែក <ul>ជាមួយថ្នាក់ឧបករណ៍ប្រើប្រាស់រៀងៗខ្លួន។

ថ្នាក់ទាំងនេះគឺជាកំណែ mixin-ed នៃ .pull-leftនិង .pull-rightប៉ុន្តែពួកវាមានវិសាលភាពទៅនឹងសំណួរមេឌៀ ដើម្បីងាយស្រួលក្នុងការគ្រប់គ្រងសមាសធាតុ navbar លើទំហំឧបករណ៍។

ការតម្រឹមខាងស្តាំនៃសមាសធាតុជាច្រើន។

Navbars បច្ចុប្បន្នមានដែនកំណត់ជាមួយនឹង .navbar-rightថ្នាក់ជាច្រើន។ ដើម្បីឱ្យមាតិកាដកឃ្លាបានត្រឹមត្រូវ យើងប្រើរឹមអវិជ្ជមាននៅលើ .navbar-rightធាតុចុងក្រោយ។ នៅពេលមានធាតុជាច្រើនដោយប្រើថ្នាក់នោះ រឹមទាំងនេះមិនដំណើរការដូចបំណងទេ។

យើងនឹងពិនិត្យមើលវាឡើងវិញ នៅពេលដែលយើងអាចសរសេរសមាសភាគនោះឡើងវិញនៅក្នុង v4.

បន្ថែម .navbar-fixed-topនិងរួមបញ្ចូល មាតិការបាររុករក .container.container-fluidកណ្តាល និងបន្ទះ។

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

ត្រូវការទ្រនាប់លើដងខ្លួន

របាររុករកដែលបានជួសជុលនឹងត្រួតលើមាតិកាផ្សេងទៀតរបស់អ្នក លុះត្រាតែអ្នកបន្ថែម paddingទៅផ្នែកខាងលើនៃ <body>. សាកល្បងតម្លៃផ្ទាល់ខ្លួនរបស់អ្នក ឬប្រើអត្ថបទរបស់យើងខាងក្រោម។ គន្លឹះ៖ តាមលំនាំដើម របាររុករកគឺខ្ពស់ 50px ។

body { padding-top: 70px; }

ត្រូវប្រាកដថាបញ្ចូលវា បន្ទាប់ពី Bootstrap CSS ស្នូល។

បន្ថែម .navbar-fixed-bottomនិងរួមបញ្ចូល មាតិការបាររុករក .container.container-fluidកណ្តាល និងបន្ទះ។

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

ត្រូវការទ្រនាប់លើដងខ្លួន

របាររុករកថេរនឹងត្រួតលើមាតិកាផ្សេងទៀតរបស់អ្នក លុះត្រាតែអ្នកបន្ថែម paddingទៅផ្នែកខាងក្រោមនៃ <body>. សាកល្បងតម្លៃផ្ទាល់ខ្លួនរបស់អ្នក ឬប្រើអត្ថបទរបស់យើងខាងក្រោម។ គន្លឹះ៖ តាមលំនាំដើម របាររុករកគឺខ្ពស់ 50px ។

body { padding-bottom: 70px; }

ត្រូវប្រាកដថាបញ្ចូលវា បន្ទាប់ពី Bootstrap CSS ស្នូល។

បង្កើតរបាររុករកដែលមានទទឹងពេញ ដែលរំកិលទៅឆ្ងាយជាមួយទំព័រដោយបន្ថែម .navbar-static-topនិងបញ្ចូល មាតិការបាររុករក .container.container-fluidទៅកណ្តាល និងបន្ទះ។

មិនដូច .navbar-fixed-*ថ្នាក់ទេ អ្នកមិនចាំបាច់ផ្លាស់ប្តូរទ្រនាប់ណាមួយនៅលើ body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

កែប្រែរូបរាងរបស់របាររុករកដោយបន្ថែម .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

ម្សៅនំប៉័ង

ចង្អុលបង្ហាញទីតាំងរបស់ទំព័របច្ចុប្បន្ននៅក្នុងឋានានុក្រមរុករក។

ឧបករណ៍បំបែកត្រូវបានបន្ថែមដោយស្វ័យប្រវត្តិនៅក្នុង CSS តាមរយៈ :beforeនិង content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

ការបិទភ្ជាប់

ផ្តល់តំណភ្ជាប់ទំព័រសម្រាប់គេហទំព័រ ឬកម្មវិធីរបស់អ្នកជាមួយនឹងសមាសភាគទំព័រច្រើនទំព័រ ឬ ជម្រើស ទំព័រទំព័រសាមញ្ញជាង ។

ការកំណត់ទំព័រលំនាំដើម

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ការដាក់ស្លាកសមាសភាគ pagination

សមាសធាតុ pagination គួរតែត្រូវបានរុំនៅក្នុង <nav>ធាតុមួយដើម្បីកំណត់ថាវាជាផ្នែករុករកទៅកាន់អ្នកអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយផ្សេងទៀត។ លើសពីនេះ ដោយសារទំព័រមួយទំនងជាមានផ្នែករុករកច្រើនជាងមួយរួចហើយ (ដូចជាការរុករកបឋមនៅក្នុងបឋមកថា ឬការរុករករបារចំហៀង) គួរតែផ្តល់ការពិពណ៌នា aria-labelសម្រាប់អ្វី <nav>ដែលឆ្លុះបញ្ចាំងពីគោលបំណងរបស់វា។ ឧទាហរណ៍ ប្រសិនបើសមាសធាតុ pagination ត្រូវបានប្រើដើម្បីរុករករវាងសំណុំនៃលទ្ធផលស្វែងរកនោះ ស្លាកដែលសមរម្យអាចជា aria-label="Search results pages".

រដ្ឋដែលបិទ និងសកម្ម

តំណភ្ជាប់អាចប្ដូរតាមបំណងបានសម្រាប់កាលៈទេសៈផ្សេងៗ។ ប្រើ .disabledសម្រាប់តំណដែលមិនអាចចុចបាន និង .activeដើម្ប���ចង្អុលបង្ហាញទំព័របច្ចុប្បន្ន។

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

យើងសូមណែនាំឱ្យអ្នកប្តូរយុថ្កាសកម្ម ឬបិទសម្រាប់ <span>ឬលុបចោលយុថ្កាក្នុងករណីព្រួញមុន/បន្ទាប់ ដើម្បីលុបមុខងារចុចចេញ ខណៈពេលដែលរក្សារចនាប័ទ្មដែលចង់បាន។

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

ទំហំ

ចង់បានទំព័រធំ ឬតូចជាង? បន្ថែម .pagination-lg.pagination-smសម្រាប់ទំហំបន្ថែម។

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ផេក

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

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

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

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

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

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ស្លាក

ឧទាហរណ៍

ឧទាហរណ៍ចំណងជើង ថ្មី ។

ឧទាហរណ៍ចំណងជើង ថ្មី ។

ឧទាហរណ៍ចំណងជើង ថ្មី ។

ឧទាហរណ៍ចំណងជើង ថ្មី ។

ឧទាហរណ៍ចំណងជើង ថ្មី ។
ឧទាហរណ៍ចំណងជើង ថ្មី ។
<h3>Example heading <span class="label label-default">New</span></h3>

បំរែបំរួលដែលមាន

បន្ថែមថ្នាក់កែប្រែណាមួយដែលបានរៀបរាប់ខាងក្រោម ដើម្បីផ្លាស់ប្តូររូបរាងរបស់ស្លាក។

ព័ត៌មានអំពី ភាពជោគជ័យ បឋម លំនាំដើម ព្រមាន គ្រោះថ្នាក់
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

មានស្លាកសញ្ញារាប់តោន?

បញ្ហាក្នុងការបង្ហាញអាចកើតឡើងនៅពេលដែលអ្នកមានស្លាកក្នុងជួររាប់សិបនៅក្នុងធុងតូចចង្អៀត ដែលនីមួយៗមាន inline-blockធាតុផ្ទាល់ខ្លួនរបស់វា (ដូចជារូបតំណាង)។ មធ្យោបាយជុំវិញនេះគឺការកំណត់ display: inline-block;។ សម្រាប់បរិបទ និងឧទាហរណ៍ សូមមើល #13219

ផ្លាកសញ្ញា

ងាយស្រួលរំលេចធាតុថ្មី ឬមិនទាន់បានអានដោយបន្ថែម <span class="badge">តំណទៅកាន់ Bootstrap navs និងច្រើនទៀត។

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

ការដួលរលំដោយខ្លួនឯង។

នៅពេលដែលមិនមានធាតុថ្មី ឬមិនទាន់បានអានទេ ផ្លាកសញ្ញានឹងដួលរលំជាធម្មតា (តាមរយៈកម្មវិធី :emptyជ្រើសរើសរបស់ CSS) ដែលមិនមានខ្លឹមសារនៅក្នុងនោះ។

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

ផ្លាកសញ្ញានឹងមិនដួលរលំដោយខ្លួនឯងនៅក្នុង Internet Explorer 8 ព្រោះវាខ្វះការគាំទ្រសម្រាប់ :emptyអ្នកជ្រើសរើស។

សម្របទៅនឹងរដ្ឋ nav សកម្ម

រចនាប័ទ្មដែលភ្ជាប់មកជាមួយត្រូវបានរួមបញ្ចូលសម្រាប់ការដាក់ផ្លាកសញ្ញានៅក្នុងស្ថានភាពសកម្មក្នុងការរុករកថ្នាំគ្រាប់។

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Jumbotron

សមាសធាតុដែលអាចបត់បែនបានទម្ងន់ស្រាល ដែលអាចពង្រីកច្រកទិដ្ឋភាពទាំងមូលជាជម្រើស ដើម្បីបង្ហាញខ្លឹមសារសំខាន់ៗនៅលើគេហទំព័ររបស់អ្នក។

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

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

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

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

ដើម្បីធ្វើឱ្យ jumbotron មានទទឹងពេញ ហើយដោយគ្មានជ្រុងមូល ចូរដាក់វានៅខាងក្រៅ .containers ហើយជំនួសមកវិញនូវផ្នែក .containerខាងក្នុង។

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

ក្បាលទំព័រ

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

រូបភាពតូច

ពង្រីក ប្រព័ន្ធក្រឡាចត្រង្គ របស់ Bootstrap ជាមួយនឹងសមាសធាតុរូបភាពតូច ដើម្បីងាយស្រួលបង្ហាញក្រឡាចត្រង្គនៃរូបភាព វីដេអូ អត្ថបទ និងច្រើនទៀត។

ប្រសិនបើអ្នកកំពុងស្វែងរកការបង្ហាញរូបភាពតូចដូច Pinterest នៃកម្ពស់ និង/ឬទទឹងខុសៗគ្នា អ្នកនឹងត្រូវប្រើកម្មវិធីជំនួយភាគីទីបីដូចជា Masonry , IsotopeSalvattore

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

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

មាតិកាផ្ទាល់ខ្លួន

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

100% x 200

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

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 ។

ប៊ូតុង ប៊ូតុង

100% x 200

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

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 ។

ប៊ូតុង ប៊ូតុង

100% x 200

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

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 ។

ប៊ូតុង ប៊ូតុង

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

ការជូនដំណឹង

ផ្តល់សារមតិកែលម្អតាមបរិបទសម្រាប់សកម្មភាពអ្នកប្រើប្រាស់ធម្មតា ជាមួយនឹងសារដាស់តឿនដែលមាន និងអាចបត់បែនបាន។

ឧទាហរណ៍

រុំអត្ថបទណាមួយ និងប៊ូតុងបិទជាជម្រើសមួយនៅក្នុង .alertថ្នាក់បរិបទទាំងបួន (ឧ. .alert-success) សម្រាប់សារជូនដំណឹងជាមូលដ្ឋាន។

មិនមានថ្នាក់លំនាំដើមទេ។

ការជូនដំណឹងមិនមានថ្នាក់លំនាំដើមទេ មានតែថ្នាក់មូលដ្ឋាន និងថ្នាក់កែប្រែប៉ុណ្ណោះ។ ការដាស់តឿនពណ៌ប្រផេះលំនាំដើមមិនមានន័យខ្លាំងពេកទេ ដូច្នេះអ្នកត្រូវបញ្ជាក់ប្រភេទតាមរយៈថ្នាក់បរិបទ។ ជ្រើសរើសពីភាពជោគជ័យ ព័ត៌មាន ការព្រមាន ឬគ្រោះថ្នាក់។

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

ការជូនដំណឹងដែលអាចបដិសេធបាន។

បង្កើតការជូនដំណឹងណាមួយដោយបន្ថែម .alert-dismissibleប៊ូតុងស្រេចចិត្ត និងបិទ។

ទាមទារកម្មវិធីជំនួយការជូនដំណឹង JavaScript

សម្រាប់ដំណើរការពេញលេញ ការជូនដំណឹងដែលអាចបដិសេធបាន អ្នកត្រូវតែប្រើ កម្មវិធីជំនួយ JavaScript ការជូនដំណឹង

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ធានានូវឥរិយាបថត្រឹមត្រូវនៅគ្រប់ឧបករណ៍ទាំងអស់។

ត្រូវប្រាកដថាប្រើ <button>ធាតុជាមួយ data-dismiss="alert"គុណលក្ខណៈទិន្នន័យ។

ប្រើ .alert-linkថ្នាក់ឧបករណ៍ប្រើប្រាស់ដើម្បីផ្តល់នូវតំណភ្ជាប់ពណ៌ដែលត្រូវគ្នាយ៉ាងឆាប់រហ័សនៅក្នុងការជូនដំណឹងណាមួយ។

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

របារវឌ្ឍនភាព

ផ្តល់មតិកែលម្អថ្មីៗអំពីវឌ្ឍនភាពនៃដំណើរការការងារ ឬសកម្មភាពជាមួយនឹងរបារវឌ្ឍនភាពសាមញ្ញ ប៉ុន្តែអាចបត់បែនបាន។

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

របារវឌ្ឍនភាពប្រើប្រាស់ការផ្លាស់ប្តូរ និងចលនា CSS3 ដើម្បីសម្រេចបាននូវផលប៉ះពាល់មួយចំនួន។ មុខងារទាំងនេះមិនត្រូវបានគាំទ្រនៅក្នុង Internet Explorer 9 និងកំណែខាងក្រោម ឬកំណែចាស់របស់ Firefox ទេ។ Opera 12 មិនគាំទ្រចលនាទេ។

ភាពត្រូវគ្នានៃគោលការណ៍សុវត្ថិភាពខ្លឹមសារ (CSP)

ប្រសិនបើគេហទំព័ររបស់អ្នកមាន គោលការណ៍សុវត្ថិភាពខ្លឹមសារ (CSP) ដែលមិនអនុញ្ញាត style-src 'unsafe-inline'នោះអ្នកនឹងមិនអាចប្រើ styleគុណលក្ខណៈក្នុងជួរដើម្បីកំណត់ទទឹងរបារវឌ្ឍនភាពដូចដែលបានបង្ហាញក្នុងឧទាហរណ៍របស់យើងខាងក្រោមនោះទេ។ វិធីសាស្រ្តជំនួសសម្រាប់ការកំណត់ទទឹងដែលត្រូវគ្នាជាមួយ CSPs ដ៏តឹងរឹងរួមមានការប្រើប្រាស់ JavaScript ផ្ទាល់ខ្លួនតិចតួច (ដែលកំណត់ element.style.width) ឬប្រើថ្នាក់ CSS ផ្ទាល់ខ្លួន។

ឧទាហរណ៍ជាមូលដ្ឋាន

របារវឌ្ឍនភាពលំនាំដើម។

60% រួចរាល់
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ជាមួយស្លាក

យក ថ្នាក់ <span>ជាមួយ .sr-onlyថ្នាក់ចេញពីក្នុងរបារវឌ្ឍនភាព ដើម្បីបង្ហាញភាគរយដែលអាចមើលឃើញ។

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

ដើម្បីធានាថាអត្ថបទស្លាកនៅតែអាចយល់បាន ទោះបីជាមានភាគរយទាបក៏ដោយ សូមពិចារណាបន្ថែម min-widthទៅរបារវឌ្ឍនភាព។

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

ជម្មើសជំនួសតាមបរិបទ

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

40% បញ្ចប់ (ជោគជ័យ)
20% រួចរាល់
សម្រេចបាន 60% (ព្រមាន)
80% ពេញលេញ (គ្រោះថ្នាក់)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ឆ្នូត

ប្រើជម្រាលដើម្បីបង្កើតបែបផែនឆ្នូត។ មិនមាននៅក្នុង IE9 និងខាងក្រោមទេ។

40% បញ្ចប់ (ជោគជ័យ)
20% រួចរាល់
សម្រេចបាន 60% (ព្រមាន)
80% ពេញលេញ (គ្រោះថ្នាក់)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

មានចលនា

បន្ថែម .activeទៅ .progress-bar-stripedដើម្បីធ្វើឱ្យឆ្នូតមានចលនាពីស្តាំទៅឆ្វេង។ មិនមាននៅក្នុង IE9 និងខាងក្រោមទេ។

45% រួចរាល់
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

ជង់

ដាក់របារជាច្រើនចូលទៅក្នុងដូចគ្នា .progressដើម្បីជង់ពួកគេ។

35% បញ្ចប់ (ជោគជ័យ)
20% រួចរាល់ (ព្រមាន)
10% ពេញលេញ (គ្រោះថ្នាក់)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

វត្ថុប្រព័ន្ធផ្សព្វផ្សាយ

រចនាប័ទ្ម​វត្ថុ​អរូបី​សម្រាប់​ការ​បង្កើត​ប្រភេទ​សមាសធាតុ​ផ្សេងៗ (ដូចជា​មតិ​ប្លក់ ធ្វីត។

ប្រព័ន្ធផ្សព្វផ្សាយលំនាំដើម

មេឌៀលំនាំដើមបង្ហាញវត្ថុមេឌៀ (រូបភាព វីដេអូ អូឌីយ៉ូ) នៅខាងឆ្វេង ឬខាងស្តាំនៃប្លុកមាតិកា។

ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។ Fusce condimentum nunc ac nisi vulputate fringilla ។ Donec lacinia congue felis នៅ faucibus ។

ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។ Fusce condimentum nunc ac nisi vulputate fringilla ។ Donec lacinia congue felis នៅ faucibus ។

ក្បាលមេឌៀដែលបង្កប់

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។ Fusce condimentum nunc ac nisi vulputate fringilla ។ Donec lacinia congue felis នៅ faucibus ។

ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។

ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

ថ្នាក់ .pull-leftនិង .pull-rightក៏មានដែរ ហើយពីមុនត្រូវបានប្រើជាផ្នែកនៃសមាសធាតុមេឌៀ ប៉ុន្តែត្រូវបានបដិសេធសម្រាប់ការប្រើប្រាស់នោះជា v3.3.0។ ពួកវាគឺប្រហែលស្មើនឹង .media-leftនិង .media-rightលើកលែងតែវា .media-rightគួរតែត្រូវបានដាក់បន្ទាប់ពី .media-bodyក្នុង html ។

ការតម្រឹមប្រព័ន្ធផ្សព្វផ្សាយ

រូបភាព ឬប្រព័ន្ធផ្សព្វផ្សាយផ្សេងទៀតអាចត្រូវបានតម្រឹមខាងលើ កណ្តាល ឬខាងក្រោម។ លំនាំដើមត្រូវបានតម្រឹមកំពូល។

ប្រព័ន្ធផ្សព្វផ្សាយដែលបានតម្រឹមកំពូល

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។ Fusce condimentum nunc ac nisi vulputate fringilla ។ Donec lacinia congue felis នៅ faucibus ។

Donec sed odio dui ។ Nullam quis risus eget urna mollis ornare vel eu leo ​​។ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

ប្រព័ន្ធផ្សព្វផ្សាយតម្រឹមកណ្តាល

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។ Fusce condimentum nunc ac nisi vulputate fringilla ។ Donec lacinia congue felis នៅ faucibus ។

Donec sed odio dui ។ Nullam quis risus eget urna mollis ornare vel eu leo ​​។ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

ប្រព័ន្ធផ្សព្វផ្សាយដែលបានតម្រឹមបាត

Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។ Fusce condimentum nunc ac nisi vulputate fringilla ។ Donec lacinia congue felis នៅ faucibus ។

Donec sed odio dui ។ Nullam quis risus eget urna mollis ornare vel eu leo ​​។ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

បញ្ជីប្រព័ន្ធផ្សព្វផ្សាយ

ជាមួយនឹងការសម្គាល់បន្ថែមបន្តិច អ្នកអាចប្រើមេឌៀនៅខាងក្នុងបញ្ជី (មានប្រយោជន៍សម្រាប់អត្ថបទមតិយោបល់ ឬបញ្ជីអត្ថបទ)។

  • ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

    Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។

    ក្បាលមេឌៀដែលបង្កប់

    Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។

    ក្បាលមេឌៀដែលបង្កប់

    Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។

    ក្បាលមេឌៀដែលបង្កប់

    Cras អង្គុយ amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo ។ Cras purus odio, vestibulum in vulputate at, tempus viverra turpis ។
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

បញ្ជីក្រុម

បញ្ជីក្រុមគឺជាសមាសធាតុដែលអាចបត់បែនបាន និងមានឥទ្ធិពលសម្រាប់បង្ហាញមិនត្រឹមតែបញ្ជីធាតុសាមញ្ញប៉ុណ្ណោះទេ ប៉ុន្តែស្មុគស្មាញជាមួយនឹងមាតិកាផ្ទាល់ខ្លួន។

ឧទាហរណ៍ជាមូលដ្ឋាន

ក្រុម​បញ្ជី​មូលដ្ឋាន​បំផុត​គឺ​គ្រាន់​តែ​ជា​បញ្ជី​ដែល​មិន​បាន​តម្រៀប​ជាមួយ​នឹង​ធាតុ​បញ្ជី និង​ថ្នាក់​ត្រឹមត្រូវ។ បង្កើតវាជាមួយនឹងជម្រើសដែលធ្វើតាម ឬ CSS ផ្ទាល់ខ្លួនរបស់អ្នកតាមតម្រូវការ។

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
  • Porta ac consectetur ac
  • vestibulum នៅ eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ផ្លាកសញ្ញា

បន្ថែមសមាសធាតុផ្លាកសញ្ញាទៅធាតុក្រុមបញ្ជីណាមួយ ហើយវានឹងត្រូវបានដាក់ដោយស្វ័យប្រវត្តិនៅខាងស្តាំ។

  • ១៤Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ធាតុដែលបានភ្ជាប់

ភ្ជាប់ធាតុក្រុមបញ្ជីដោយប្រើស្លាកយុថ្កាជំនួសឱ្យធាតុបញ្ជី (នោះក៏មានន័យថាមេ <div>ជំនួសឱ្យ <ul>) មិនចាំបាច់មានឪពុកម្តាយម្នាក់ៗនៅជុំវិញធាតុនីមួយៗទេ។

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ធាតុប៊ូតុង

បញ្ជី​ធាតុ​ក្រុម​អាច​ជា​ប៊ូតុង​ជំនួស​ឱ្យ​ធាតុ​ក្នុង​បញ្ជី (នោះ​ក៏​មាន​ន័យ​ថា​មេ <div>​ជំនួស​ឱ្យ <ul>) ។ មិនចាំបាច់មានឪពុកម្តាយម្នាក់ៗនៅជុំវិញធាតុនីមួយៗទេ។ កុំប្រើ .btnថ្នាក់ស្តង់ដារនៅទីនេះ។

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

ធាតុដែលបិទ

បន្ថែម .disabledទៅ a .list-group-itemទៅជាពណ៌ប្រផេះ ដើម្បីបង្ហាញថាបិទ។

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ថ្នាក់បរិបទ

ប្រើថ្នាក់បរិបទដើម្បីធាតុបញ្ជីរចនាប័ទ្ម លំនាំដើម ឬភ្ជាប់។ រួមទាំង .activeរដ្ឋផងដែរ។

  • Dapibus ac facilisis ក្នុង
  • Cras អង្គុយ amet nibh libero
  • Porta ac consectetur ac
  • vestibulum នៅ eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

មាតិកាផ្ទាល់ខ្លួន

បន្ថែម HTML ស្ទើរតែទាំងអស់នៅក្នុង សូម្បីតែសម្រាប់ក្រុមបញ្ជីដែលបានភ្ជាប់ដូចមួយខាងក្រោម។

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

បន្ទះ

ខណៈពេលដែលមិនចាំបាច់ ពេលខ្លះអ្នកត្រូវដាក់ DOM របស់អ្នកនៅក្នុងប្រអប់មួយ។ សម្រាប់ស្ថានភាពទាំងនោះ សូមសាកល្បងសមាសភាគបន្ទះ។

ឧទាហរណ៍ជាមូលដ្ឋាន

តាមលំនាំដើម រាល់អ្វីដែល .panelធ្វើគឺអនុវត្តស៊ុមមូលដ្ឋានមួយចំនួន និងទ្រនាប់ដើម្បីឱ្យមានមាតិកាមួយចំនួន។

ឧទាហរណ៍បន្ទះមូលដ្ឋាន
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

បន្ទះដែលមានចំណងជើង

ងាយស្រួលបន្ថែមធុងក្បាលទៅបន្ទះរបស់អ្នកជាមួយ .panel-heading. អ្នកក៏អាចរួមបញ្ចូលផងដែរ <h1>- <h6>ជាមួយ .panel-titleថ្នាក់មួយដើម្បីបន្ថែមចំណងជើងដែលមានរចនាប័ទ្មជាមុន។ ទោះយ៉ាងណាក៏ដោយ ទំហំពុម្ពអក្សររបស់ <h1>- <h6>ត្រូវបានបដិសេធដោយ .panel-heading.

សម្រាប់​ការ​ដាក់​ពណ៌​តំណ​ត្រឹមត្រូវ​ ត្រូវ​ប្រាកដ​ថា​ដាក់​តំណ​ក្នុង​ក្បាល​ក្នុង .panel-title​។

ក្បាលបន្ទះដោយគ្មានចំណងជើង
មាតិកាបន្ទះ

ចំណងជើងបន្ទះ

មាតិកាបន្ទះ
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

រុំប៊ូតុង ឬអត្ថបទបន្ទាប់បន្សំនៅក្នុង .panel-footer. ចំណាំថាបាតកថាបន្ទះ មិនបាន ទទួលពណ៌ និងស៊ុមទេ នៅពេលប្រើបំរែបំរួលតាមបរិបទ ដោយសារវាមិនមានន័យថានៅខាងមុខ។

មាតិកាបន្ទះ
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

ជម្មើសជំនួសតាមបរិបទ

ដូចសមាសធាតុផ្សេងទៀតដែរ ងាយស្រួលធ្វើឱ្យបន្ទះមួយមានអត្ថន័យកាន់តែច្រើនចំពោះបរិបទជាក់លាក់មួយ ដោយបន្ថែមថ្នាក់នៃស្ថានភាពបរិបទណាមួយ។

ចំណងជើងបន្ទះ

មាតិកាបន្ទះ

ចំណងជើងបន្ទះ

មាតិកាបន្ទះ

ចំណងជើងបន្ទះ

មាតិកាបន្ទះ

ចំណងជើងបន្ទះ

មាតិកាបន្ទះ

ចំណងជើងបន្ទះ

មាតិកាបន្ទះ
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

ជាមួយតុ

បន្ថែម​អ្វី​ដែល​គ្មាន​ព្រំដែន .table​ក្នុង​បន្ទះ​សម្រាប់​ការ​រចនា​គ្មាន​ថ្នេរ។ ប្រសិនបើមាន .panel-bodyយើងបន្ថែមស៊ុមមួយទៅផ្នែកខាងលើនៃតារាងសម្រាប់ការបំបែក។

ក្បាលបន្ទះ

មាតិកាបន្ទះលំនាំដើមមួយចំនួននៅទីនេះ។ Nulla vitae elit libero, a pharetra auggue ។ Aenean lacinia bibendum nulla sed consectetur ។ Aenean eu leo ​​quam ។ Pellentesque ornare sem lacinia quam venenatis vestibulum ។ Nullam id dolor id nibh ultricies vehicula ut id elit ។

# ឈ្មោះដំបូង នាមត្រកូល ឈ្មោះ​អ្នកប្រើប្រាស់
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ប្រសិនបើមិនមានតួបន្ទះទេ សមាសធាតុផ្លាស់ទីពីក្បាលបន្ទះទៅតារាងដោយមិនមានការរំខាន។

ក្បាលបន្ទះ
# ឈ្មោះដំបូង នាមត្រកូល ឈ្មោះ​អ្នកប្រើប្រាស់
ម៉ាក អូតូ @mdo
យ៉ាកុប ថនតុន @ខ្លាញ់
ឡារី បក្សី @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ជាមួយក្រុមបញ្ជី

ងាយស្រួលរួមបញ្ចូល ក្រុមបញ្ជី ទទឹងពេញ នៅក្នុងបន្ទះណាមួយ។

ក្បាលបន្ទះ

មាតិកាបន្ទះលំនាំដើមមួយចំនួននៅទីនេះ។ Nulla vitae elit libero, a pharetra auggue ។ Aenean lacinia bibendum nulla sed consectetur ។ Aenean eu leo ​​quam ។ Pellentesque ornare sem lacinia quam venenatis vestibulum ។ Nullam id dolor id nibh ultricies vehicula ut id elit ។

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • Morbi leo risus
  • Porta ac consectetur ac
  • vestibulum នៅ eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ការបង្កប់ដែលឆ្លើយតប

អនុញ្ញាតឱ្យកម្មវិធីរុករកតាមអ៊ីនធឺណិតកំណត់ទំហំវីដេអូ ឬការបញ្ចាំងស្លាយដោយផ្អែកលើទទឹងនៃប្លុកដែលមានរបស់វា ដោយបង្កើតសមាមាត្រខាងក្នុងដែលនឹងធ្វើមាត្រដ្ឋានឱ្យបានត្រឹមត្រូវនៅលើឧបករណ៍ណាមួយ។

ច្បាប់ត្រូវបានអនុវត្តដោយផ្ទាល់ទៅ <iframe>, <embed>, <video>, និង <object>ធាតុ; ជាជម្រើសប្រើថ្នាក់បន្តពូជយ៉ាងច្បាស់លាស់ .embed-responsive-itemនៅពេលអ្នកចង់ផ្គូផ្គងរចនាប័ទ្មសម្រាប់គុណលក្ខណៈផ្សេងទៀត។

Pro-Tip! អ្នកមិនចាំបាច់បញ្ចូលទៅ frameborder="0"ក្នុងរបស់អ្នកទេ <iframe>ព្រោះយើងបដិសេធវាសម្រាប់អ្នក។

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

អណ្តូង

លំនាំដើមល្អ។

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

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

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

គ្រប់គ្រងទ្រនាប់ និងជ្រុងមូលជាមួយនឹងថ្នាក់កែប្រែស្រេចចិត្តពីរ។

មើល​ចុះ ខ្ញុំ​នៅ​ក្នុង​អណ្ដូង​ធំ!
<div class="well well-lg">...</div>
មើលខ្ញុំនៅក្នុងអណ្តូងតូចមួយ!
<div class="well well-sm">...</div>