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 .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 एन/ए
खोज फ़ॉर्म .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>आकार के लिए उपयोग करें ।
  • आइकन, now .glyphicon, अब फ़ॉन्ट आधारित हैं। चिह्नों को भी आधार और चिह्न वर्ग की आवश्यकता होती है (उदाहरण के लिए .glyphicon .glyphicon-asterisk)।
  • Twitter Typeahead का उपयोग करने के पक्ष में, Typeahead को हटा दिया गया है ।
  • मोडल मार्कअप में काफी बदलाव आया है। बेहतर मोबाइल स्टाइलिंग और व्यवहार के लिए , .modal-header, .modal-bodyऔर .modal-footerअनुभागों को अब लपेटा गया है। साथ ही, अब आपको अपने मार्कअप में आवेदन नहीं करना चाहिए ।.modal-content.modal-dialog.hide.modal
  • V3.1.0 के अनुसार, मोडल विकल्प द्वारा लोड किया गया remoteHTML अब . यह आपको केवल मोडल बॉडी ही नहीं, बल्कि मोडल के हेडर और फ़ुटर को भी आसानी से बदलने की अनुमति देता है।.modal-content.modal.modal-body
  • Button.js प्लगइन के चेकबॉक्स और रेडियो फीचर अब दोनों data-toggle="buttons"के बजाय data-toggle="buttons-checkbox"या data-toggle="buttons-radio"उनके मार्कअप में उपयोग किए जाते हैं।
  • जावास्क्रिप्ट घटनाओं को नाम दिया गया है। उदाहरण के लिए, मोडल "शो" ईवेंट को हैंडल करने के लिए, 'show.bs.modal'. टैब के लिए "दिखाया गया" उपयोग 'shown.bs.tab', आदि।

v3.0 में अपग्रेड करने और समुदाय से कोड स्निपेट के बारे में अधिक जानकारी के लिए, बूटप्लाई देखें ।