v3.x-ലേക്ക് മൈഗ്രേറ്റ് ചെയ്യുന്നു
ബൂട്ട്സ്ട്രാപ്പ് v2.x-ൽ നിന്ന് v3.x-ലേക്ക് എങ്ങനെ അപ്ഗ്രേഡ് ചെയ്യാം എന്നതിനെക്കുറിച്ചുള്ള മാർഗ്ഗനിർദ്ദേശം, പ്രധാന മാറ്റങ്ങൾ, എന്താണ് പുതിയത്, എന്തൊക്കെയാണ് നീക്കം ചെയ്തത്.
ബൂട്ട്സ്ട്രാപ്പ് v2.x-ൽ നിന്ന് v3.x-ലേക്ക് എങ്ങനെ അപ്ഗ്രേഡ് ചെയ്യാം എന്നതിനെക്കുറിച്ചുള്ള മാർഗ്ഗനിർദ്ദേശം, പ്രധാന മാറ്റങ്ങൾ, എന്താണ് പുതിയത്, എന്തൊക്കെയാണ് നീക്കം ചെയ്തത്.
ബൂട്ട്സ്ട്രാപ്പ് 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 .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
remote
ഇപ്പോൾ .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 ലേക്ക് അപ്ഗ്രേഡുചെയ്യുന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്കും കമ്മ്യൂണിറ്റിയിൽ നിന്നുള്ള കോഡ് സ്നിപ്പെറ്റുകൾക്കും, ബൂട്ട്പ്ലൈ കാണുക .