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) .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-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. ).
  • Twitter Typeahead वापरण्याच्या बाजूने, Typeahead वगळण्यात आले आहे .
  • मॉडेल मार्कअप लक्षणीय बदलले आहे. , .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. हे तुम्हाला मॉडेलचे शीर्षलेख आणि तळटीप सहजपणे बदलण्याची परवानगी देते, केवळ मॉडेल बॉडीच नाही.
  • button.js प्लगइनचे चेकबॉक्स आणि रेडिओ वैशिष्ट्ये आता त्यांच्या मार्कअपऐवजी किंवा data-toggle="buttons"त्याऐवजी वापरतात .data-toggle="buttons-checkbox"data-toggle="buttons-radio"
  • JavaScript इव्हेंट नेमस्पेस आहेत. उदाहरणार्थ, मॉडेल "शो" इव्हेंट हाताळण्यासाठी, वापरा 'show.bs.modal'. टॅबसाठी "दर्शविले" वापरा 'shown.bs.tab', इ.

v3.0 वर श्रेणीसुधारित करण्याबद्दल अधिक माहितीसाठी आणि समुदायाकडून कोड स्निपेट्स, Bootply पहा .