glyphs ដែលអាចប្រើបាន
រួមបញ្ចូលជាង 250 glyphs ក្នុងទម្រង់ពុម្ពអក្សរពីសំណុំ Glyphicon Halflings ។ Glyphicons Halflings ជាធម្មតាមិនមានដោយឥតគិតថ្លៃទេ ប៉ុន្តែអ្នកបង្កើតរបស់ពួកគេបានធ្វើឱ្យពួកវាមានសម្រាប់ Bootstrap ដោយមិនគិតថ្លៃ។ ជាការថ្លែងអំណរគុណ យើងគ្រាន់តែស្នើសុំឱ្យអ្នកបញ្ចូលតំណត្រឡប់ទៅ Glyphicons នៅពេលណាដែលអាចធ្វើទៅបាន។
របៀបប្រើ
សម្រាប់ហេតុផលដំណើរការ រូបតំណាងទាំងអស់ទាមទារថ្នាក់មូលដ្ឋាន និងថ្នាក់រូបតំណាងនីមួយៗ។ ដើម្បីប្រើ សូមដាក់លេខកូដខាងក្រោមនៅគ្រប់ទីកន្លែង។ ត្រូវប្រាកដថាទុកចន្លោះមួយរវាងរូបតំណាង និងអត្ថបទសម្រាប់ទ្រនាប់ត្រឹមត្រូវ។
កុំលាយជាមួយសមាសធាតុផ្សេងទៀត។
ថ្នាក់ 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 និងឥរិយាបថរចនាប័ទ្មប្រអប់ធីកជាមួយនឹង កម្មវិធីជំនួយប៊ូតុងរបស់យើង ។
ត្រូវប្រាកដថាត្រឹមត្រូវ 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>
ធាតុ
គ្រាន់តែរុំស៊េរីនៃ .btn
s នៅក្នុង .btn-group.btn-group-justified
.
<div class= "btn-group btn-group-justified" role= "group" aria-label= "..." >
...
</div>
តំណភ្ជាប់ដើរតួជាប៊ូតុង
ប្រសិនបើ <a>
ធាតុត្រូវបានប្រើដើម្បីដើរតួជាប៊ូតុង – ដំណើរការមុខងារក្នុងទំព័រ ជាជាងការរុករកទៅឯកសារ ឬផ្នែកផ្សេងទៀតនៅក្នុងទំព័របច្ចុប្បន្ន – ពួកគេក៏គួរតែត្រូវបានផ្តល់ឱ្យសមស្រប role="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'
ដើម្បីជៀសវាងផលប៉ះពាល់ដែលមិនចង់បាន (ដូចជាធាតុដែលរីកធំឡើង និង/ឬបាត់បង់ជ្រុងមូលរបស់វា នៅពេលដែលព័ត៌មានជំនួយ ឬផ្ទាំងព័ត៌មានត្រូវបានកេះ)។
ដាក់កម្មវិធីបន្ថែមមួយ ឬប៊ូតុងមួយនៅផ្នែកម្ខាងនៃធាតុបញ្ចូល។ អ្នកក៏អាចដាក់មួយនៅលើផ្នែកទាំងពីរនៃការបញ្ចូលមួយ។
យើងមិនគាំទ្រកម្មវិធីបន្ថែមច្រើន ( .input-group-addon
ឬ .input-group-btn
) នៅផ្នែកតែមួយទេ។
យើងមិនគាំទ្រការគ្រប់គ្រងទម្រង់ច្រើននៅក្នុងក្រុមបញ្ចូលតែមួយទេ។
<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>
របាររុករកលំនាំដើម
Navbars គឺជាសមាសធាតុមេតាដែលឆ្លើយតបដែលបម្រើជាបឋមកថារុករកសម្រាប់កម្មវិធី ឬគេហទំព័ររបស់អ្នក។ ពួកវាចាប់ផ្តើមបង្រួម (ហើយអាចបិទបើកបាន) ក្នុងទិដ្ឋភាពចល័ត ហើយក្លាយជាផ្ដេកនៅពេលដែលទទឹងច្រកចូលមើលមានកើនឡើង។
តំណភ្ជាប់ navbar navbar ត្រឹមត្រូវបច្ចុប្បន្នមិនត្រូវបានគាំទ្រទេ។
មាតិកាលើស
ដោយសារ Bootstrap មិនដឹងថាទំហំផ្ទុកប៉ុន្មានដែលមាតិកានៅក្នុងរបាររុករករបស់អ្នកត្រូវការទេ អ្នកអាចនឹងមានបញ្ហាជាមួយនឹងការរុំមាតិកាទៅក្នុងជួរទីពីរ។ ដើម្បីដោះស្រាយបញ្ហានេះ អ្នកអាច៖
កាត់បន្ថយចំនួន ឬទទឹងរបស់ធាតុ navbar ។
លាក់ធាតុ navbar ជាក់លាក់នៅទំហំអេក្រង់ជាក់លាក់ដោយប្រើ ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប ។
ផ្លាស់ប្តូរចំណុចដែលរបាររុករករបស់អ្នកប្តូររវាងរបៀបបង្រួម និងផ្ដេក។ ប្ដូរ @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>
បន្ថែម .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" > « </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" > » </span>
</a>
</li>
</ul>
</nav>
រដ្ឋដែលបិទ និងសកម្ម
តំណភ្ជាប់អាចប្ដូរតាមបំណងបានសម្រាប់កាលៈទេសៈផ្សេងៗ។ ប្រើ .disabled
សម្រាប់តំណដែលមិនអាចចុចបាន និង .active
ដើម្ប���ចង្អុលបង្ហាញទំព័របច្ចុប្បន្ន។
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </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" > « </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" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
ស្ថានភាពបិទជម្រើស
តំណភ្ជាប់ Pager ក៏ប្រើ .disabled
ថ្នាក់ឧបករណ៍ប្រើប្រាស់ទូទៅពី pagination ផងដែរ។
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </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 សាមញ្ញសម្រាប់ការហៅការយកចិត្តទុកដាក់បន្ថែមចំពោះខ្លឹមសារ ឬព័ត៌មានដែលមានលក្ខណៈពិសេស។
ស្វែងយល់បន្ថែម
<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 មានទទឹងពេញ ហើយដោយគ្មានជ្រុងមូល ចូរដាក់វានៅខាងក្រៅ .container
s ហើយជំនួសមកវិញនូវផ្នែក .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 , Isotope ឬ Salvattore ។
ឧទាហរណ៍លំនាំដើម
តាមលំនាំដើម រូបភាពតូចៗរបស់ Bootstrap ត្រូវបានរចនាឡើងដើម្បីបង្ហាញរូបភាពដែលបានភ្ជាប់ជាមួយនឹងការសម្គាល់ដែលត្រូវការតិចតួចបំផុត។
<div class= "row" >
<div class= "col-xs-6 col-md-3" >
<a href= "#" class= "thumbnail" >
<img src= "..." alt= "..." >
</a>
</div>
...
</div>
មាតិកាផ្ទាល់ខ្លួន
ជាមួយនឹងការសម្គាល់បន្ថែមបន្តិច វាអាចបន្ថែមមាតិកា 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 ។
ប៊ូតុង ប៊ូតុង
ស្លាកសញ្ញារូបភាពតូច
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
ប៊ូតុងស្រេចចិត្ត និងបិទ។
×
ព្រមាន! ពិនិត្យខ្លួនឯងឱ្យបានល្អជាងនេះទៅទៀត អ្នកមិនសូវល្អទេ។
<div class= "alert alert-warning alert-dismissible" role= "alert" >
<button type= "button" class= "close" data-dismiss= "alert" aria-label= "Close" ><span aria-hidden= "true" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
តំណភ្ជាប់នៅក្នុងការជូនដំណឹង
ប្រើ .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 ផ្ទាល់ខ្លួន។
ឧទាហរណ៍ជាមូលដ្ឋាន
របារវឌ្ឍនភាពលំនាំដើម។
<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
ថ្នាក់ចេញពីក្នុងរបារវឌ្ឍនភាព ដើម្បីបង្ហាញភាគរយដែលអាចមើលឃើញ។
<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
ទៅរបារវឌ្ឍនភាព។
<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>
ជម្មើសជំនួសតាមបរិបទ
របារវឌ្ឍនភាពប្រើប៊ូតុងដូចគ្នាមួយចំនួន និងថ្នាក់ជូនដំណឹងសម្រាប់រចនាប័ទ្មស្របគ្នា។
<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 និងខាងក្រោមទេ។
<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 និងខាងក្រោមទេ។
<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>
រចនាប័ទ្មវត្ថុអរូបីសម្រាប់ការបង្កើតប្រភេទសមាសធាតុផ្សេងៗ (ដូចជាមតិប្លក់ ធ្វីត។
មេឌៀលំនាំដើមបង្ហាញវត្ថុមេឌៀ (រូបភាព វីដេអូ អូឌីយ៉ូ) នៅខាងឆ្វេង ឬខាងស្តាំនៃប្លុកមាតិកា។
<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 ។
រូបភាព ឬប្រព័ន្ធផ្សព្វផ្សាយផ្សេងទៀតអាចត្រូវបានតម្រឹមខាងលើ កណ្តាល ឬខាងក្រោម។ លំនាំដើមត្រូវបានតម្រឹមកំពូល។
<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>
ជាមួយនឹងការសម្គាល់បន្ថែមបន្តិច អ្នកអាចប្រើមេឌៀនៅខាងក្នុងបញ្ជី (មានប្រយោជន៍សម្រាប់អត្ថបទមតិយោបល់ ឬបញ្ជីអត្ថបទ)។
<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
ថ្នាក់ស្តង់ដារនៅទីនេះ។
Cras justo odio
Dapibus ac facilisis ក្នុង
Morbi leo risus
Porta ac consectetur ac
vestibulum នៅ eros
<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>