សមាសធាតុ
សមាសធាតុដែលអាចប្រើឡើងវិញបានច្រើនជាងដប់ដែលត្រូវបានបង្កើតឡើងដើម្បីផ្តល់នូវរូបតំណាង ការទម្លាក់ចុះ ក្រុមបញ្ចូល ការរុករក ការជូនដំណឹង និងច្រើនទៀត។
សមាសធាតុដែលអាចប្រើឡើងវិញបានច្រើនជាងដប់ដែលត្រូវបានបង្កើតឡើងដើម្បីផ្តល់នូវរូបតំណាង ការទម្លាក់ចុះ ក្រុមបញ្ចូល ការរុករក ការជូនដំណឹង និងច្រើនទៀត។
រួមបញ្ចូលជាង 250 glyphs ក្នុងទម្រង់ពុម្ពអក្សរពីសំណុំ Glyphicon Halflings ។ Glyphicons Halflings ជាធម្មតាមិនមានដោយឥតគិតថ្លៃទេ ប៉ុន្តែអ្នកបង្កើតរបស់ពួកគេបានធ្វើឱ្យពួកវាមានសម្រាប់ Bootstrap ដោយមិនគិតថ្លៃ។ ជាការថ្លែងអំណរគុណ យើងគ្រាន់តែស្នើសុំឱ្យអ្នកបញ្ចូលតំណត្រឡប់ទៅ Glyphicons នៅពេលណាដែលអាចធ្វើទៅបាន។
សម្រាប់ហេតុផលដំណើរការ រូបតំណាងទាំងអស់ទាមទារថ្នាក់មូលដ្ឋាន និងថ្នាក់រូបតំណាងនីមួយៗ។ ដើម្បីប្រើ សូមដាក់លេខកូដខាងក្រោមនៅគ្រប់ទីកន្លែង។ ត្រូវប្រាកដថាទុកចន្លោះមួយរវាងរូបតំណាង និងអត្ថបទសម្រាប់ទ្រនាប់ត្រឹមត្រូវ។
ថ្នាក់ Icon មិនអាចរួមបញ្ចូលគ្នាដោយផ្ទាល់ជាមួយសមាសធាតុផ្សេងទៀតបានទេ។ ពួកវាមិនគួរត្រូវបានប្រើរួមជាមួយថ្នាក់ផ្សេងទៀតនៅលើធាតុដូចគ្នានោះទេ។ ជំនួសមកវិញ បន្ថែម <span>
ស្រទាប់ដែលជាប់ ហើយអនុវត្តថ្នាក់រូបតំណាងទៅ <span>
.
ថ្នាក់ Icon គួរតែត្រូវបានប្រើតែលើធាតុដែលគ្មានមាតិកាអត្ថបទ និងគ្មានធាតុកូន។
Bootstrap សន្មត់ថាឯកសារពុម្ពអក្សររូបតំណាងនឹងមានទីតាំងនៅក្នុង ../fonts/
ថតដែលទាក់ទងទៅនឹងឯកសារ CSS ដែលបានចងក្រង។ ការផ្លាស់ទី ឬប្តូរឈ្មោះឯកសារពុម្ពអក្សរទាំងនោះមានន័យថាធ្វើបច្ចុប្បន្នភាព CSS តាមវិធីមួយក្នុងចំណោមវិធីបីយ៉ាង៖
@icon-font-path
និង/ឬ @icon-font-name
អថេរនៅក្នុងប្រភព ឯកសារតិច។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 អ្នកប្រហែលជាចង់លុប ឬពណ៌ស៊ុមឡើងវិញ។
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>
ធាតុដើម្បីប្រើក្រុមប៊ូតុងដែលត្រឹមត្រូវជាមួយ <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
, title
ឬ placeholder
គុណលក្ខណៈ) និងព័ត៌មានបន្ថែមអ្វីដែលនឹងត្រូវបញ្ជូននឹងប្រែប្រួលអាស្រ័យលើប្រភេទពិតប្រាកដនៃធាតុក្រាហ្វិកចំណុចប្រទាក់ដែលអ្នកកំពុងអនុវត្ត។ ឧទាហរណ៍នៅក្នុងផ្នែកនេះផ្តល់នូវវិធីសាស្រ្តមួយចំនួនដែលបានស្នើ និងករណីជាក់លាក់
ដាក់កម្មវិធីបន្ថែមមួយ ឬប៊ូតុងមួយនៅផ្នែកម្ខាងនៃធាតុបញ្ចូល។ អ្នកក៏អាចដាក់មួយនៅលើផ្នែកទាំងពីរនៃការបញ្ចូលមួយ។
យើងមិនគាំទ្រកម្មវិធីបន្ថែមច្រើន ( .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
ថ្នាក់មូលដ្ឋាន ក៏ដូចជារដ្ឋដែលបានចែករំលែកផងដែរ។ ប្តូរថ្នាក់កែប្រែដើម្បីប្តូររវាងរចនាប័ទ្មនីមួយៗ។
ចំណាំ .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 ត្រឹមត្រូវបច្ចុប្បន្នមិនត្រូវបានគាំទ្រទេ។
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
សម្រាប់សមាសធាតុ nav ណាមួយ (ផ្ទាំង ឬថ្នាំគ្រាប់) បន្ថែម .disabled
សម្រាប់ តំណពណ៌ប្រផេះ និងគ្មានផលប៉ះពាល់ ។
<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 ត្រឹមត្រូវបច្ចុប្បន្នមិនត្រូវបានគាំទ្រទេ។
<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-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 លើទំហំឧបករណ៍។
បន្ថែម .navbar-fixed-top
និងរួមបញ្ចូល មាតិការបាររុករក .container
ឬ .container-fluid
កណ្តាល និងបន្ទះ។
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
បន្ថែម .navbar-fixed-bottom
និងរួមបញ្ចូល មាតិការបាររុករក .container
ឬ .container-fluid
កណ្តាល និងបន្ទះ។
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
បង្កើតរបាររុករកដែលមានទទឹងពេញ ដែលរំកិលទៅឆ្ងាយជាមួយទំព័រដោយបន្ថែម .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>
សមាសធាតុ 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">«</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
អ្នកជ្រើសរើស។
រចនាប័ទ្មដែលភ្ជាប់មកជាមួយត្រូវបានរួមបញ្ចូលសម្រាប់ការដាក់ផ្លាកសញ្ញានៅក្នុងស្ថានភាពសកម្មក្នុងការរុករកថ្នាំគ្រាប់។
<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 គ្រប់ប្រភេទដូចជា ចំណងជើង កថាខណ្ឌ ឬប៊ូតុងទៅក្នុងរូបភាពតូចៗ។
<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 ការជូនដំណឹង ។
<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>
ត្រូវប្រាកដថាប្រើ <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) ដែលមិនអនុញ្ញាត 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
ដើម្បីជង់ពួកគេ។
<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 ។
រូបភាព ឬប្រព័ន្ធផ្សព្វផ្សាយផ្សេងទៀតអាចត្រូវបានតម្រឹមខាងលើ កណ្តាល ឬខាងក្រោម។ លំនាំដើមត្រូវបានតម្រឹមកំពូល។
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 ។
<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 ផ្ទាល់ខ្លួនរបស់អ្នកតាមតម្រូវការ។
<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>
បន្ថែមសមាសធាតុផ្លាកសញ្ញាទៅធាតុក្រុមបញ្ជីណាមួយ ហើយវានឹងត្រូវបានដាក់ដោយស្វ័យប្រវត្តិនៅខាងស្តាំ។
<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
រដ្ឋផងដែរ។
<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 ស្ទើរតែទាំងអស់នៅក្នុង សូម្បីតែសម្រាប់ក្រុមបញ្ជីដែលបានភ្ជាប់ដូចមួយខាងក្រោម។
Donec id elit non mi porta gravida នៅ eget metus។ Maecenas sed diam eget risus varius blandit ។
Donec id elit non mi porta gravida នៅ eget metus។ Maecenas sed diam eget risus varius blandit ។
Donec id elit non mi porta gravida នៅ eget metus។ Maecenas sed diam eget risus varius blandit ។
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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 |
២ | យ៉ាកុប | ថនតុន | @ខ្លាញ់ |
៣ | ឡារី | បក្សី |
<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 ។
<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>