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 থেকে সরানো হয়েছে 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-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 অনুযায়ী, মডেল অপশন দ্বারা লোড করা এইচটিএমএল 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- এ আপগ্রেড করার বিষয়ে আরও তথ্যের জন্য এবং সম্প্রদায় থেকে কোড স্নিপেটগুলি দেখুন, বুটপ্লাই দেখুন ।