V3.x କୁ ସ୍ଥାନାନ୍ତରଣ
ପ୍ରମୁଖ ପରିବର୍ତ୍ତନ, କ’ଣ ନୂଆ ଏବଂ କ’ଣ ଅପସାରିତ ହୋଇଛି ତାହା ଉପରେ ବୁଟଷ୍ଟ୍ରାପ୍ v2.x ରୁ v3.x କୁ କିପରି ଅପଗ୍ରେଡ୍ କରାଯିବ ସେ ସମ୍ବନ୍ଧରେ ନିର୍ଦ୍ଦେଶାବଳୀ |
ପ୍ରମୁଖ ପରିବର୍ତ୍ତନ, କ’ଣ ନୂଆ ଏବଂ କ’ଣ ଅପସାରିତ ହୋଇଛି ତାହା ଉପରେ ବୁଟଷ୍ଟ୍ରାପ୍ v2.x ରୁ v3.x କୁ କିପରି ଅପଗ୍ରେଡ୍ କରାଯିବ ସେ ସମ୍ବନ୍ଧରେ ନିର୍ଦ୍ଦେଶାବଳୀ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 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
ଆଉ ପ୍ରସଙ୍ଗଗତ (-ସୁକେସନ୍, -ପ୍ରାଇମେରୀ, ଇତ୍ୟାଦି) କ୍ଲାସ୍ ନାହିଁ |.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 କୁ ଅପଗ୍ରେଡ୍ କରିବା ଏବଂ ସମ୍ପ୍ରଦାୟରୁ କୋଡ୍ ସ୍ନିପେଟ୍ ବିଷୟରେ ଅଧିକ ସୂଚନା ପାଇଁ, ବୁଟପ୍ଲୀ ଦେଖନ୍ତୁ |