2.x बाट 3.0 मा माइग्रेट गर्दै

बुटस्ट्र्याप 3 v2.x सँग ब्याकवर्ड मिल्दो छैन। यो खण्डलाई v2.x बाट v3.0 मा स्तरवृद्धि गर्नको लागि सामान्य गाइडको रूपमा प्रयोग गर्नुहोस्। विस्तृत सिंहावलोकनको लागि, हेर्नुहोस् v3.0 रिलीज घोषणामा नयाँ के छ।

मुख्य वर्ग परिवर्तन

यो तालिकाले v2.x र v3.0 बीचको शैली परिवर्तनहरू देखाउँछ।

बुटस्ट्र्याप 2.x बुटस्ट्र्याप ३.०
.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
Glyphicons .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 पाठ .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 ठाडो विभाजक .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 सूचीहरू .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)।
  • Typeahead हटाइएको छ, Twitter 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 मा, in मा .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 हेर्नुहोस् ।