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 ৰ পৰা আঁতৰোৱা হৈছে ৩.০ সমতুল্য
কাৰ্য্যসমূহ গঠন কৰক .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 তালিকাসমূহ .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"অবিকল্পিত" বুটাম পাবলৈও ব্যৱহাৰ কৰিব লাগিব ।
  • .rowএতিয়া তৰল হৈ পৰিছে।
  • ছবিসমূহ অবিকল্পিতভাৱে আৰু সঁহাৰিজনক নহয়। .img-responsiveতৰল পদাৰ্থৰ <img>আকাৰৰ বাবে ব্যৱহাৰ কৰক ।
  • আইকনসমূহ, এতিয়া .glyphicon, এতিয়া ফন্ট ভিত্তিক। আইকনসমূহৰ বাবে এটা ভিত্তি আৰু আইকন শ্ৰেণীৰ প্ৰয়োজন হয় (যেনে .glyphicon .glyphicon-asterisk) ।
  • টাইপএহেড বাদ দিয়া হৈছে, টুইটাৰ টাইপহেড ব্যৱহাৰ কৰাৰ সপক্ষে ।
  • মডাল মাৰ্কআপৰ যথেষ্ট পৰিৱৰ্তন হৈছে। , .modal-header, .modal-bodyআৰু .modal-footerঅংশসমূহ এতিয়া ৰেপ কৰা হৈছে .modal-contentআৰু .modal-dialogউন্নত মোবাইল ষ্টাইলিং আৰু আচৰণৰ বাবে। লগতে, আপুনি আপোনাৰ মাৰ্কআপত আৰু আবেদন .hideকৰিব নালাগে।.modal
  • v3.1.0 ৰ পৰা, remoteমডাল বিকল্পৰ দ্বাৰা লোড কৰা HTML এতিয়া ৰ পৰিবৰ্তে .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 চাওক ।