2.x तः 3.0 मध्ये प्रवासनम्

Bootstrap 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 तः निष्कासितम् ३.० तुल्यम्
कर्माणि रूप .form-actions न/अ
खोज प्रपत्र .form-search न/अ
info सहित समूह बनाएँ .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अधुना पूर्वनिर्धारितरूपेण शतप्रतिशतम् विस्तृतानि सन्ति । <div class="col-*"></div>इनपुट् विस्तारं नियन्त्रयितुं इनपुट् अन्तः लपेटयन्तु ।
  • .badgeन पुनः सन्दर्भात्मक (-सफलता,-प्राथमिक,आदि..) वर्ग हैं।
  • .btn.btn-default"default" बटनं प्राप्तुं अपि अवश्यं उपयोक्तव्यम् ।
  • .rowइदानीं द्रवः अस्ति।
  • चित्राणि पूर्वनिर्धारितरूपेण प्रतिक्रियाशीलाः न भवन्ति । .img-responsiveद्रव <img>आकार के लिए प्रयोग करें ।
  • चिह्नानि, इदानीं .glyphicon, इदानीं font आधारितानि सन्ति । चिह्नानां कृते आधारस्य चिह्नवर्गस्य च आवश्यकता भवति (उदा .glyphicon .glyphicon-asterisk. ) ।
  • Typeahead इत्येतत् त्यक्तम् अस्ति, Twitter Typeahead इत्यस्य उपयोगस्य पक्षे ।
  • मोडल मार्कअप इत्यत्र महत्त्वपूर्णं परिवर्तनं जातम् अस्ति। , .modal-header, .modal-bodyतथा .modal-footerविभागाः इदानीं वेष्टिताः सन्ति .modal-contentतथा .modal-dialogच उत्तम-मोबाइल-स्टाइलिंग्-व्यवहाराय च । अपि च, भवन्तः स्वस्य मार्कअप मध्ये .hideto इत्यस्मै पुनः आवेदनं न कर्तव्यम् ।.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" इवेण्ट् नियन्त्रयितुं, उपयुज्यताम् 'show.bs.modal'। "दर्शित" ट्याब्स् कृते 'shown.bs.tab', इत्यादि उपयुज्यताम् ।

v3.0 - मध्ये उन्नयनस्य विषये अधिकसूचनार्थं, समुदायात् च कोडस्निपेट् - कृते, Bootply पश्यन्तु ।