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

v3.0 कडेन अपग्रेड करपा विशीं चड म्हायती खातीर, आनी समुदायांतल्यान कोड स्निपेटां खातीर, पळयात Bootply .