2.x இலிருந்து 3.0க்கு இடம்பெயர்கிறது

பூட்ஸ்டார்ப் 3 v2.x உடன் பின்னோக்கி இணக்கமாக இல்லை. v2.x இலிருந்து v3.0 க்கு மேம்படுத்துவதற்கான பொதுவான வழிகாட்டியாக இந்தப் பகுதியைப் பயன்படுத்தவும். விரிவான கண்ணோட்டத்திற்கு, v3.0 வெளியீட்டு அறிவிப்பில் புதிதாக என்ன இருக்கிறது என்பதைப் பார்க்கவும்.

முக்கிய வகுப்பு மாற்றங்கள்

இந்த அட்டவணை v2.x மற்றும் v3.0 இடையே நடை மாற்றங்களைக் காட்டுகிறது.

பூட்ஸ்ட்ராப் 2.x பூட்ஸ்ட்ராப் 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
கிளிஃபிகான்கள் .glyphicon
ஜம்போட்ரான் .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-text
நவ்பார் தலைப்பு .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 N/A
தேடல் படிவம் .form-search N/A
தகவலுடன் குழுவை உருவாக்கவும் .control-group.info N/A
நிலையான அகல உள்ளீடு அளவுகள் .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge .form-controlஅதற்கு பதிலாக கட்டம் அமைப்பு பயன்படுத்தவும் .
தடுப்பு நிலை படிவ உள்ளீடு .input-block-level நேரடிச் சமமானவை இல்லை, ஆனால் படிவக் கட்டுப்பாடுகள் ஒரே மாதிரியானவை.
தலைகீழ் பொத்தான்கள் .btn-inverse N/A
திரவ வரிசை .row-fluid .row(இனி நிலையான கட்டம் இல்லை)
கட்டுப்பாட்டு ரேப்பர் .controls N/A
கட்டுப்பாடுகள் வரிசை .controls-row .rowஅல்லது.form-group
நவ்பார் உள் .navbar-inner N/A
Navbar செங்குத்து பிரிப்பான்கள் .navbar .divider-vertical N/A
கீழ்தோன்றும் துணைமெனு .dropdown-submenu N/A
தாவல் சீரமைப்புகள் .tabs-left .tabs-right .tabs-below N/A
மாத்திரை அடிப்படையிலான அட்டவணையிடக்கூடிய பகுதி .pill-content .tab-content
மாத்திரை அடிப்படையிலான டேபபிள் பகுதி பலகம் .pill-pane .tab-pane
நாவ் பட்டியல்கள் .nav-list .nav-header நேரடி சமமானவை இல்லை, ஆனால் பட்டியல் குழுக்கள் மற்றும் .panel-groupகள் ஒரே மாதிரியானவை.
படிவக் கட்டுப்பாடுகளுக்கான இன்லைன் உதவி .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இனி சூழல் சார்ந்த (-வெற்றி,-முதன்மை, முதலியன..) வகுப்புகள் இல்லை.
  • .btn.btn-default"இயல்புநிலை" பொத்தானைப் பெறவும் பயன்படுத்த வேண்டும்.
  • .rowஇப்போது திரவமாக உள்ளது.
  • இயல்புநிலையாக படங்கள் இனி பதிலளிக்காது. .img-responsiveதிரவ <img>அளவு பயன்படுத்தவும் .
  • சின்னங்கள், இப்போது .glyphicon, இப்போது எழுத்துரு அடிப்படையிலானவை. ஐகான்களுக்கு அடிப்படை மற்றும் ஐகான் வகுப்பும் தேவை (எ.கா. .glyphicon .glyphicon-asterisk).
  • ட்விட்டர் டைப்ஹெட் பயன்படுத்துவதற்கு ஆதரவாக, டைப்ஹெட் கைவிடப்பட்டது .
  • மாதிரி மார்க்அப் கணிசமாக மாறிவிட்டது. சிறந்த மொபைல் ஸ்டைலிங் மற்றும் நடத்தைக்காக இப்போது .modal-header, .modal-body, மற்றும் .modal-footerபிரிவுகள் இணைக்கப்பட்டுள்ளன . மேலும், உங்கள் மார்க்அப்பில் இனி விண்ணப்பிக்க வேண்டாம் ..modal-content.modal-dialog.hide.modal
  • v3.1.0 இன் படி, remoteமாடல் விருப்பத்தால் ஏற்றப்பட்ட HTML இப்போது க்கு பதிலாக .modal-content(v3.0.0 இலிருந்து v3.0.3 வரை, இல் .modal) செலுத்தப்படுகிறது .modal-body. இது மாதிரி உடலை மட்டும் இல்லாமல், மாதிரியின் தலைப்பு மற்றும் அடிக்குறிப்பையும் எளிதாக மாற்ற உங்களை அனுமதிக்கிறது.
  • இப்போது button.js செருகுநிரலின் தேர்வுப்பெட்டி மற்றும் ரேடியோ அம்சங்கள் இரண்டுமே அவற்றின் மார்க்அப்பிற்குப் data-toggle="buttons"பதிலாக data-toggle="buttons-checkbox"அல்லது பயன்படுத்துகின்றன.data-toggle="buttons-radio"
  • ஜாவாஸ்கிரிப்ட் நிகழ்வுகள் பெயரிடப்பட்டவை. எடுத்துக்காட்டாக, மாதிரி "நிகழ்ச்சி" நிகழ்வைக் கையாள, பயன்படுத்தவும் 'show.bs.modal'. "காட்டப்பட்ட" தாவல்களுக்கு, பயன்படுத்த 'shown.bs.tab', போன்றவை.

v3.0 க்கு மேம்படுத்துவது மற்றும் சமூகத்தில் இருந்து குறியீடு துணுக்குகள் பற்றிய கூடுதல் தகவலுக்கு, Bootply ஐப் பார்க்கவும் .