2.x ରୁ 3.0 କୁ ସ୍ଥାନାନ୍ତରିତ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ v v2.x ସହିତ ପଛକୁ ସୁସଙ୍ଗତ ନୁହେଁ | V2.x ରୁ v3.0 କୁ ନବୀକରଣ ପାଇଁ ଏହି ବିଭାଗକୁ ସାଧାରଣ ଗାଇଡ୍ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ | ଏକ ବିସ୍ତୃତ ସମୀକ୍ଷା ପାଇଁ, v3.0 ପ୍ରକାଶନ ଘୋଷଣାରେ କ’ଣ ନୂଆ ଅଛି ଦେଖନ୍ତୁ |

ମୁଖ୍ୟ ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ |

ଏହି ଟେବୁଲ୍ v2.x ଏବଂ v3.0 ମଧ୍ୟରେ ଶ style ଳୀ ପରିବର୍ତ୍ତନଗୁଡ଼ିକୁ ଦର୍ଶାଏ |

ବୁଟଷ୍ଟ୍ରାପ୍ 2.x ବୁଟଷ୍ଟ୍ରାପ୍ .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

ନୁଆ କଣ

ଆମେ ନୂତନ ଉପାଦାନଗୁଡିକ ଯୋଡିଛୁ ଏବଂ କିଛି ବିଦ୍ୟମାନକୁ ପରିବର୍ତ୍ତନ କରିଛୁ | ଏଠାରେ ନୂତନ କିମ୍ବା ଅପଡେଟ୍ ଶ yles ଳୀ ଅଛି |

ଉପାଦାନ ବର୍ଣ୍ଣନା
ପ୍ୟାନେଲ୍ | .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 ରୁ ଅପସାରିତ ହୋଇଛି | .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 କ direct ଣସି ପ୍ରତ୍ୟକ୍ଷ ସମାନ ନୁହେଁ, କିନ୍ତୁ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ସମାନ |
ଓଲଟା ବଟନ୍ | .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 କ direct ଣସି ପ୍ରତ୍ୟକ୍ଷ ସମାନ ନୁହେଁ, କିନ୍ତୁ ତାଲିକା ଗୋଷ୍ଠୀ ଏବଂ .panel-groupଗୁଡିକ ସମାନ |
ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପାଇଁ ଇନଲାଇନ ସହାୟତା | .help-inline କ exact ଣସି ସଠିକ୍ ସମାନ ନୁହେଁ, କିନ୍ତୁ .help-blockସମାନ |
ଅଣ-ସ୍ତରୀୟ ପ୍ରଗତି ରଙ୍ଗ | .progress-info .progress-success .progress-warning .progress-danger ଏହା ବଦଳରେ ବ୍ୟବହାର .progress-bar-*କରନ୍ତୁ .progress-bar|

ଅତିରିକ୍ତ ଟିପ୍ପଣୀ |

V3.0 ର ଅନ୍ୟାନ୍ୟ ପରିବର୍ତ୍ତନ ତୁରନ୍ତ ସ୍ପଷ୍ଟ ହୁଏ ନାହିଁ | ବେସ୍ କ୍ଲାସ୍, ମୁଖ୍ୟ ଶ yles ଳୀ, ଏବଂ ଆଚରଣ ନମନୀୟତା ଏବଂ ଆମର ମୋବାଇଲ୍ ପ୍ରଥମ ଆଭିମୁଖ୍ୟ ପାଇଁ ସଜାଡି ଦିଆଯାଇଛି | ଏଠାରେ ଏକ ଆଂଶିକ ତାଲିକା ଅଛି:

  • ଡିଫଲ୍ଟ ଭାବରେ, ପାଠ୍ୟ-ଆଧାରିତ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ ବର୍ତ୍ତମାନ କେବଳ ସର୍ବନିମ୍ନ ଷ୍ଟାଇଲିଂ ଗ୍ରହଣ କରେ | ଫୋକସ୍ ରଙ୍ଗ ଏବଂ ଗୋଲାକାର କୋଣ ପାଇଁ, .form-controlଉପାଦାନ ଉପରେ ଶ୍ରେଣୀକୁ ଶ style ଳୀରେ ପ୍ରୟୋଗ କରନ୍ତୁ |
  • ପ୍ରୟୋଗ ହୋଇଥିବା ଶ୍ରେଣୀ ସହିତ ପାଠ୍ୟ-ଆଧାରିତ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ .form-controlବର୍ତ୍ତମାନ ଡିଫଲ୍ଟ ଭାବରେ 100% ଚଉଡା | <div class="col-*"></div>ଇନପୁଟ୍ ଓସାରକୁ ନିୟନ୍ତ୍ରଣ କରିବା ପାଇଁ ଇନପୁଟ୍ ଗୁଡ଼ାଇ ରଖନ୍ତୁ |
  • .badgeଆଉ କ context ଣସି ପ୍ରସଙ୍ଗଗତ (-ସୁକେସନ୍, -ପ୍ରାଇମେରୀ, ଇତ୍ୟାଦି) କ୍ଲାସ୍ ନାହିଁ |
  • .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 ପରି, ମୋଡାଲ୍ ଅପ୍ସନ୍ ଦ୍ୱାରା ଲୋଡ୍ ହୋଇଥିବା HTML remoteବର୍ତ୍ତମାନ .modal-content(v3.0.0 ରୁ v3.0.3 ପର୍ଯ୍ୟନ୍ତ .modal) କୁ ଇଞ୍ଜେକ୍ସନ ଦିଆଯାଇଛି .modal-body| ଏହା ଆପଣଙ୍କୁ କେବଳ ମୋଡାଲ୍ ଶରୀର ନୁହେଁ, ମୋଡାଲର ହେଡର୍ ଏବଂ ଫୁଟର୍ କୁ ସହଜରେ ଭିନ୍ନ କରିବାକୁ ଅନୁମତି ଦିଏ |
  • ବଟନ୍। Js ପ୍ଲଗଇନ୍ ର ଚେକ୍ ବକ୍ସ ଏବଂ ରେଡିଓ ବ features ଶିଷ୍ଟ୍ୟ ବର୍ତ୍ତମାନ ଉଭୟ ମାର୍କଅପ୍ data-toggle="buttons"ବଦଳରେ data-toggle="buttons-checkbox"କିମ୍ବା ବ୍ୟବହାର କରନ୍ତି |data-toggle="buttons-radio"
  • ଜାଭାସ୍କ୍ରିପ୍ଟ ଇଭେଣ୍ଟଗୁଡିକ ନାମ ସ୍ଥାନ ଅଟେ | ଉଦାହରଣ ସ୍ୱରୂପ, ମୋଡାଲ୍ “ଶୋ” ଇଭେଣ୍ଟକୁ ପରିଚାଳନା କରିବାକୁ, ବ୍ୟବହାର କରନ୍ତୁ 'show.bs.modal'| ଟ୍ୟାବ୍ ପାଇଁ “ପ୍ରଦର୍ଶିତ” ବ୍ୟବହାର 'shown.bs.tab'ଇତ୍ୟାଦି |

V3.0 କୁ ଅପଗ୍ରେଡ୍ କରିବା ଏବଂ ସମ୍ପ୍ରଦାୟରୁ କୋଡ୍ ସ୍ନିପେଟ୍ ବିଷୟରେ ଅଧିକ ସୂଚନା ପାଇଁ, ବୁଟପ୍ଲୀ ଦେଖନ୍ତୁ |