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) 1। .col-sm-*
मध्यम ग्रिड (≥992px) 1। .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 सँ हटा देल गेल ३.० समकक्ष
रूप क्रियाएँ .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-inner एन / क
नवबार ऊर्ध्वाधर विभाजक .navbar .divider-vertical एन / क
ड्रॉपडाउन सबमेनू .dropdown-submenu एन / क
टैब संरेखण .tabs-left .tabs-right .tabs-below एन / क
गोली आधारित टैबबल क्षेत्र .pill-content .tab-content
गोली आधारित टैब योग्य क्षेत्र फलक .pill-pane .tab-pane
नव सूची .nav-list .nav-header प्रत्यक्ष समकक्ष नहि, मुदा सूची समूह आ .panel-groups समान अछि ।
फॉर्म नियंत्रण के लिये इनलाइन मदद .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 .