v3.x वर स्थलांतर करत आहे
बूटस्ट्रॅप v2.x वरून v3.x वर कसे अपग्रेड करायचे याचे मार्गदर्शन मोठे बदल, नवीन काय आहे आणि काय काढले आहे यावर भर दिला आहे.
बूटस्ट्रॅप v2.x वरून v3.x वर कसे अपग्रेड करायचे याचे मार्गदर्शन मोठे बदल, नवीन काय आहे आणि काय काढले आहे यावर भर दिला आहे.
बूटस्ट्रॅप 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-group s समान आहेत. |
फॉर्म नियंत्रणासाठी इनलाइन मदत | .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
. )..modal-header
, .modal-body
आणि .modal-footer
विभाग आता चांगले मोबाइल शैली आणि वर्तनासाठी गुंडाळले .modal-content
आहेत .modal-dialog
. तसेच, तुम्ही यापुढे तुमच्या मार्कअपमध्ये अर्ज .hide
करू नये..modal
remote
आता मध्ये ऐवजी .modal-content
(v3.0.0 ते v3.0.3, मध्ये .modal
) मध्ये इंजेक्ट केले आहे .modal-body
. हे तुम्हाला मॉडेलचे शीर्षलेख आणि तळटीप सहजपणे बदलण्याची परवानगी देते, केवळ मॉडेल बॉडीच नाही.data-toggle="buttons"
त्याऐवजी वापरतात .data-toggle="buttons-checkbox"
data-toggle="buttons-radio"
'show.bs.modal'
. टॅबसाठी "दर्शविले" वापरा 'shown.bs.tab'
, इ.v3.0 वर श्रेणीसुधारित करण्याबद्दल अधिक माहितीसाठी आणि समुदायाकडून कोड स्निपेट्स, Bootply पहा .