ផ្ទេរទៅ v3.x
ការណែនាំអំពីរបៀបធ្វើឱ្យប្រសើរឡើងពី Bootstrap v2.x ទៅ v3.x ដោយសង្កត់ធ្ងន់លើការផ្លាស់ប្តូរសំខាន់ៗ អ្វីដែលថ្មី និងអ្វីដែលត្រូវបានដកចេញ។
ការណែនាំអំពីរបៀបធ្វើឱ្យប្រសើរឡើងពី Bootstrap v2.x ទៅ v3.x ដោយសង្កត់ធ្ងន់លើការផ្លាស់ប្តូរសំខាន់ៗ អ្វីដែលថ្មី និងអ្វីដែលត្រូវបានដកចេញ។
Bootstrap 3 មិនត្រូវគ្នានឹង v2.x ថយក្រោយទេ។ ប្រើផ្នែកនេះជាការណែនាំទូទៅក្នុងការធ្វើបច្ចុប្បន្នភាពពី v2.x ទៅ v3.0 ។ សម្រាប់ទិដ្ឋភាពទូទៅ សូមមើល អ្វីដែលថ្មី នៅក្នុងសេចក្តីប្រកាសនៃការចេញផ្សាយ v3.0 ។
តារាងនេះបង្ហាញពីការផ្លាស់ប្តូររចនាប័ទ្មរវាង v2.x និង v3.0 ។
Bootstrap 2.x | Bootstrap 3.0 |
---|---|
.row-fluid |
.row |
.span* |
.col-md-* |
.offset* |
.col-md-offset-* |
.brand |
.navbar-brand |
.navbar .nav |
.navbar-nav |
.nav-collapse |
.navbar-collapse |
.nav-toggle |
.navbar-toggle |
.btn-navbar |
.navbar-btn |
.hero-unit |
.jumbotron |
.icon-* |
.glyphicon .glyphicon-* |
.btn |
.btn .btn-default |
.btn-mini |
.btn-xs |
.btn-small |
.btn-sm |
.btn-large |
.btn-lg |
.alert |
.alert .alert-warning |
.alert-error |
.alert-danger |
.visible-phone |
.visible-xs |
.visible-tablet |
.visible-sm |
.visible-desktop |
បំបែកទៅជា.visible-md .visible-lg |
.hidden-phone |
.hidden-xs |
.hidden-tablet |
.hidden-sm |
.hidden-desktop |
បំបែកទៅជា.hidden-md .hidden-lg |
.input-block-level |
.form-control |
.control-group |
.form-group |
.control-group.warning .control-group.error .control-group.success |
.form-group.has-* |
.checkbox.inline .radio.inline |
.checkbox-inline .radio-inline |
.input-prepend .input-append |
.input-group |
.add-on |
.input-group-addon |
.img-polaroid |
.img-thumbnail |
ul.unstyled |
.list-unstyled |
ul.inline |
.list-inline |
.muted |
.text-muted |
.label |
.label .label-default |
.label-important |
.label-danger |
.text-error |
.text-danger |
.table .error |
.table .danger |
.bar |
.progress-bar |
.bar-* |
.progress-bar-* |
.accordion |
.panel-group |
.accordion-group |
.panel .panel-default |
.accordion-heading |
.panel-heading |
.accordion-body |
.panel-collapse |
.accordion-inner |
.panel-body |
យើងបានបន្ថែមធាតុថ្មី និងផ្លាស់ប្តូរធាតុដែលមានស្រាប់មួយចំនួន។ នេះគឺជារចនាប័ទ្មថ្មី ឬទាន់សម័យ។
ធាតុ | ការពិពណ៌នា |
---|---|
បន្ទះ | .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse |
រាយក្រុម | .list-group .list-group-item .list-group-item-text .list-group-item-heading |
Glyphicons | .glyphicon |
Jumbotron | .jumbotron |
ក្រឡាចត្រង្គតូចបន្ថែម (<768px) | .col-xs-* |
ក្រឡាចត្រង្គតូច (≥768px) | .col-sm-* |
ក្រឡាចត្រង្គមធ្យម (≥992px) | .col-md-* |
ក្រឡាចត្រង្គធំ (≥1200px) | .col-lg-* |
ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប (≥1200px) | .visible-lg .hidden-lg |
អុហ្វសិត | .col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
រុញ | .col-sm-push-* .col-md-push-* .col-lg-push-* |
ទាញ | .col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
បញ្ចូលទំហំកម្ពស់ | .input-sm .input-lg |
ក្រុមបញ្ចូល | .input-group .input-group-addon .input-group-btn |
ការគ្រប់គ្រងទម្រង់ | .form-control .form-group |
ទំហំក្រុមប៊ូតុង | .btn-group-xs .btn-group-sm .btn-group-lg |
អត្ថបទ Navbar | .navbar-text |
បឋមកថា Navbar | .navbar-header |
ថេប្លេត / គ្រាប់ដែលសមហេតុផល | .nav-justified |
រូបភាពដែលឆ្លើយតប | .img-responsive |
ជួរដេកតារាងបរិបទ | .success .danger .warning .active .info |
បន្ទះបរិបទ | .panel-success .panel-danger .panel-warning .panel-info |
ម៉ូឌុល | .modal-dialog .modal-content |
រូបភាពតូច | .img-thumbnail |
ទំហំល្អ។ | .well-sm .well-lg |
តំណភ្ជាប់ជូនដំណឹង | .alert-link |
ធាតុខាងក្រោមត្រូវបានទម្លាក់ ឬផ្លាស់ប្តូរនៅក្នុង v3.0។
ធាតុ | ដកចេញពី 2.x | 3.0 សមមូល |
---|---|---|
ទម្រង់សកម្មភាព | .form-actions |
គ្មាន |
ទម្រង់ស្វែងរក | .form-search |
គ្មាន |
បង្កើតក្រុមជាមួយព័ត៌មាន | .control-group.info |
គ្មាន |
ទំហំបញ្ចូលទទឹងថេរ | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
ប្រើ .form-control និង ប្រព័ន្ធក្រឡាចត្រង្គ ជំនួសវិញ។ |
រារាំងការបញ្ចូលទម្រង់កម្រិត | .input-block-level |
មិនមានសមមូលដោយផ្ទាល់ទេ ប៉ុន្តែ ការគ្រប់គ្រងទម្រង់ គឺស្រដៀងគ្នា។ |
ប៊ូតុងបញ្ច្រាស | .btn-inverse |
គ្មាន |
ជួររាវ | .row-fluid |
.row (មិនមានក្រឡាចត្រង្គថេរទៀតទេ) |
គ្រប់គ្រងរុំ | .controls |
គ្មាន |
គ្រប់គ្រងជួរ | .controls-row |
.row ឬ.form-group |
Navbar ខាងក្នុង | .navbar-inner |
គ្មាន |
ការបែងចែកបញ្ឈរ Navbar | .navbar .divider-vertical |
គ្មាន |
ម៉ឺនុយរងទម្លាក់ចុះ | .dropdown-submenu |
គ្មាន |
ការតម្រឹមផ្ទាំង | .tabs-left .tabs-right .tabs-below |
គ្មាន |
កន្លែងដាក់ថ្នាំគ្រាប់ | .pill-content |
.tab-content |
បន្ទះតំបន់ដែលអាចដាក់ផ្ទាំងបានផ្អែកលើថ្នាំគ្រាប់ | .pill-pane |
.tab-pane |
បញ្ជី Nav | .nav-list .nav-header |
មិនមានសមមូលដោយផ្ទាល់ទេ ប៉ុន្តែ ក្រុមបញ្ជី និង .panel-group s គឺស្រដៀងគ្នា។ |
ជំនួយក្នុងជួរសម្រាប់ការគ្រប់គ្រងទម្រង់ | .help-inline |
មិនមានសមមូលពិតប្រាកដទេ ប៉ុន្តែ .help-block ស្រដៀងគ្នា។ |
ពណ៌វឌ្ឍនភាពមិនកម្រិតរបារ | .progress-info .progress-success .progress-warning .progress-danger |
ប្រើ .progress-bar-* ជំនួស .progress-bar វិញ។ |
ការផ្លាស់ប្តូរផ្សេងទៀតនៅក្នុង v3.0 មិនច្បាស់ភ្លាមៗទេ។ ថ្នាក់មូលដ្ឋាន រចនាប័ទ្មគន្លឹះ និងអាកប្បកិរិយាត្រូវបានកែតម្រូវសម្រាប់ភាពបត់បែន និង វិធីសាស្រ្ត ដំបូងរបស់យើងសម្រាប់ទូរសព្ទ ។ នេះគឺជាបញ្ជីមួយផ្នែក៖
.form-control
ថ្នាក់លើធាតុទៅជារចនាប័ទ្ម។.form-control
ថ្នាក់ដែលបានអនុវត្តឥឡូវនេះគឺធំទូលាយ 100% តាមលំនាំដើម។ រុំធាតុបញ្ចូលនៅខាងក្នុង <div class="col-*"></div>
ដើម្បីគ្រប់គ្រងទទឹងបញ្ចូល។.badge
លែងមានថ្នាក់បរិបទ (-success,-primary, etc.) ទៀតហើយ។.btn
ត្រូវតែប្រើផងដែរ .btn-default
ដើម្បីទទួលបានប៊ូតុង "លំនាំដើម" ។.row
ឥឡូវនេះមានសារធាតុរាវ។.img-responsive
សារធាតុរាវ ។<img>
.glyphicon
គឺត្រូវបានផ្អែកលើពុម្ពអក្សរ។ រូបតំណាងក៏ទាមទារថ្នាក់មូលដ្ឋាន និងរូបតំណាងផងដែរ (ឧ. .glyphicon .glyphicon-asterisk
) ។.modal-header
, .modal-body
, និង .modal-footer
ឥឡូវនេះត្រូវបានរុំព័ទ្ធ .modal-content
និង .modal-dialog
សម្រាប់រចនាប័ទ្ម និងឥរិយាបថទូរសព្ទដែលប្រសើរជាងមុន។ ដូចគ្នានេះផងដែរ អ្នកមិនគួរអនុវត្ត .hide
ចំពោះ .modal
ការសម្គាល់របស់អ្នកទៀតទេ។remote
ជម្រើស modal ឥឡូវនេះត្រូវបានបញ្ចូលទៅក្នុង .modal-content
(ពី v3.0.0 ដល់ v3.0.3 ចូលទៅក្នុង .modal
) ជំនួសឱ្យការចូលទៅក្នុង .modal-body
. នេះអនុញ្ញាតឱ្យអ្នកផ្លាស់ប្តូរបឋមកថា និងបាតកថាបានយ៉ាងងាយស្រួល មិនត្រឹមតែតួម៉ូឌុលប៉ុណ្ណោះទេ។data-toggle="buttons"
ជំនួស data-toggle="buttons-checkbox"
ឬ data-toggle="buttons-radio"
នៅក្នុងការសម្គាល់របស់ពួកគេ។'show.bs.modal'
. សម្រាប់ផ្ទាំង "បង្ហាញ" ប្រើ 'shown.bs.tab'
ល។សម្រាប់ព័ត៌មានបន្ថែមស្តីពីការអាប់ដេតទៅ v3.0 និងអត្ថបទកូដពីសហគមន៍ សូមមើល Bootply ។