Source

v4 এ স্থানান্তরিত হচ্ছে

বুটস্ট্র্যাপ 4 পুরো প্রকল্পের একটি প্রধান পুনর্লিখন। সর্বাধিক উল্লেখযোগ্য পরিবর্তনগুলি নীচে সংক্ষিপ্ত করা হয়েছে, তারপরে প্রাসঙ্গিক উপাদানগুলিতে আরও নির্দিষ্ট পরিবর্তনগুলি অনুসরণ করা হয়েছে৷

স্থিতিশীল পরিবর্তন

বিটা 3 থেকে আমাদের স্থিতিশীল v4.0 রিলিজে চলে যাওয়ায়, কোনও ব্রেকিং পরিবর্তন নেই, তবে কিছু উল্লেখযোগ্য পরিবর্তন রয়েছে৷

প্রিন্টিং

  • স্থির ভাঙ্গা মুদ্রণ ইউটিলিটি. পূর্বে, একটি .d-print-*ক্লাস ব্যবহার করা অপ্রত্যাশিতভাবে অন্য কোনো .d-*ক্লাসকে অগ্রাহ্য করবে। এখন, তারা আমাদের অন্যান্য প্রদর্শন ইউটিলিটিগুলির সাথে মেলে এবং শুধুমাত্র সেই মিডিয়াতে প্রযোজ্য ( @media print)।

  • প্রসারিত উপলব্ধ মুদ্রণ প্রদর্শন ইউটিলিটি অন্যান্য ইউটিলিটি মেলে. বিটা 3 এবং তার বেশি বয়সে শুধুমাত্র block, inline-block, inline, এবং ছিল none। স্থিতিশীল v4 যোগ করা হয়েছে flex, inline-flex, table, table-row, এবং table-cell.

  • নির্দিষ্ট করা নতুন প্রিন্ট শৈলী সহ ব্রাউজার জুড়ে স্থির প্রিন্ট প্রিভিউ রেন্ডারিং @page size।

বিটা 3 পরিবর্তন

যদিও বিটা 2 বিটা পর্বের সময় আমাদের ব্রেকিং পরিবর্তনগুলির বেশিরভাগই দেখেছিল, কিন্তু আমাদের এখনও কিছু আছে যা বিটা 3 রিলিজে সমাধান করা দরকার। এই পরিবর্তনগুলি প্রযোজ্য হয় যদি আপনি বিটা 2 থেকে বিটা 3 বা বুটস্ট্র্যাপের কোনও পুরানো সংস্করণ থেকে আপডেট করছেন।

বিবিধ

  • $thumbnail-transitionঅব্যবহৃত পরিবর্তনশীল সরানো হয়েছে . আমরা কিছু পরিবর্তন করছি না, তাই এটি শুধুমাত্র অতিরিক্ত কোড ছিল.
  • npm প্যাকেজ আমাদের উৎস এবং dist ফাইল ছাড়া অন্য কোনো ফাইল অন্তর্ভুক্ত করে না; আপনি যদি তাদের উপর নির্ভর করেন এবং node_modulesফোল্ডারের মাধ্যমে আমাদের স্ক্রিপ্টগুলি চালাচ্ছেন, তাহলে আপনার কর্মপ্রবাহকে মানিয়ে নেওয়া উচিত।

ফর্ম

  • কাস্টম এবং ডিফল্ট উভয় চেকবক্স এবং রেডিও পুনরায় লিখুন। এখন, উভয়েরই এইচটিএমএল স্ট্রাকচার (সহোদরের <div>সাথে বাইরের <input>এবং <label>) এবং একই লেআউট শৈলী (স্ট্যাক করা ডিফল্ট, মডিফায়ার ক্লাসের সাথে ইনলাইন) রয়েছে। এটি আমাদের ইনপুটের অবস্থার উপর ভিত্তি করে লেবেলটিকে স্টাইল করার অনুমতি দেয়, disabledঅ্যাট্রিবিউটের জন্য সমর্থনকে সহজ করে (আগে একটি অভিভাবক শ্রেণীর প্রয়োজন) এবং আমাদের ফর্ম বৈধতাকে আরও ভালভাবে সমর্থন করে।

    background-imageএর অংশ হিসাবে, আমরা কাস্টম ফর্ম চেকবক্স এবং রেডিওতে একাধিক গুলি পরিচালনার জন্য CSS পরিবর্তন করেছি । পূর্বে, এখন সরানো .custom-control-indicatorউপাদানটির পটভূমির রঙ, গ্রেডিয়েন্ট এবং SVG আইকন ছিল। ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট কাস্টমাইজ করার অর্থ হল প্রতিবার যখন আপনার শুধুমাত্র একটি পরিবর্তন করার প্রয়োজন হয় তখন সেগুলিকে প্রতিস্থাপন করা। এখন, আমাদের কাছে .custom-control-label::beforeফিল এবং গ্রেডিয়েন্ট আছে এবং .custom-control-label::afterআইকনটি পরিচালনা করে।

    একটি কাস্টম চেক ইনলাইন করতে, যোগ করুন .custom-control-inline.

  • ইনপুট-ভিত্তিক বোতাম গোষ্ঠীগুলির জন্য আপডেট করা নির্বাচক৷ [data-toggle="buttons"] { }শৈলী এবং আচরণের পরিবর্তে , আমরা শুধুমাত্র JS আচরণের জন্য বৈশিষ্ট্য ব্যবহার করি এবং স্টাইলিং এর জন্য dataএকটি নতুন শ্রেণীর উপর নির্ভর করি।.btn-group-toggle

  • .col-form-legendকিছুটা উন্নতির পক্ষে সরানো হয়েছে .col-form-label। এই ভাবে .col-form-label-smএবং সহজে উপাদান .col-form-label-lgব্যবহার করা যেতে পারে .<legend>

  • কাস্টম ফাইল ইনপুটগুলি তাদের $custom-file-textSass ভেরিয়েবলে একটি পরিবর্তন পেয়েছে। এটি আর একটি নেস্টেড Sass মানচিত্র নয় এবং এখন শুধুমাত্র একটি স্ট্রিংকে শক্তি দেয় - Browseবোতামটি এখন আমাদের Sass থেকে উৎপন্ন একমাত্র ছদ্ম-উপাদান। টেক্সট এখন Choose fileথেকে আসে .custom-file-label.

ইনপুট গ্রুপ

  • ইনপুট গ্রুপ অ্যাডঅনগুলি এখন একটি ইনপুটের সাপেক্ষে তাদের স্থাপনের জন্য নির্দিষ্ট। আমরা বাদ দিয়েছি .input-group-addonএবং .input-group-btnদুটি নতুন ক্লাসের জন্য, .input-group-prependএবং .input-group-append. আমাদের সিএসএসের অনেকটাই সরলীকরণ করে আপনাকে অবশ্যই স্পষ্টভাবে একটি অ্যাপেন্ড বা প্রিপেন্ড ব্যবহার করতে হবে। একটি সংযোজন বা প্রিপেন্ডের মধ্যে, আপনার বোতামগুলিকে এমনভাবে রাখুন যেভাবে সেগুলি অন্য কোথাও থাকবে, তবে টেক্সট র্যাপ করুন .input-group-text৷

  • বৈধকরণ শৈলী এখন সমর্থিত, যেমন একাধিক ইনপুট (যদিও আপনি প্রতি গ্রুপে শুধুমাত্র একটি ইনপুট যাচাই করতে পারেন)।

  • সাইজিং ক্লাস অবশ্যই পিতামাতার উপর হতে হবে .input-groupএবং পৃথক ফর্ম উপাদান নয়।

বিটা 2 পরিবর্তন

বিটাতে থাকাকালীন, আমরা লক্ষ্য রাখি যে কোনও ব্রেকিং পরিবর্তন না হোক। যাইহোক, জিনিস সবসময় পরিকল্পনা মত যায় না. নীচে বিটা 1 থেকে বিটা 2 এ যাওয়ার সময় মনে রাখতে হবে ব্রেকিং পরিবর্তনগুলি।

ব্রেকিং

  • সরানো $badge-colorভেরিয়েবল এবং তার ব্যবহার চালু .badge. আমরা একটি রঙের বৈসাদৃশ্য ফাংশন ব্যবহার করি colorভিত্তিক একটি বাছাই করতে background-color, তাই পরিবর্তনশীলটি অপ্রয়োজনীয়।
  • CSS নেটিভ ফিল্টারের সাথে বিরোধ এড়াতে grayscale()ফাংশনের নাম পরিবর্তন করা হয়েছে।gray()grayscale
  • অন্যত্র ব্যবহৃত আমাদের রঙের স্কিমগুলির ���াথে মিলে যাওয়া .table-inverse, .thead-inverse, এবং .thead-defaultথেকে .*-darkএবং এর নাম পরিবর্তন করা হয়েছে।.*-light
  • প্রতিক্রিয়াশীল টেবিল এখন প্রতিটি গ্রিড ব্রেকপয়েন্টের জন্য ক্লাস তৈরি করে। এটি বিটা 1 থেকে বিরতি যে .table-responsiveআপনি ব্যবহার করছেন আরো মত .table-responsive-md. আপনি এখন ব্যবহার করতে পারেন .table-responsiveবা .table-responsive-{sm,md,lg,xl}প্রয়োজন হিসাবে.
  • প্যাকেজ ম্যানেজার হিসাবে ড্রপড বোওয়ার সমর্থন বিকল্পগুলির জন্য অবমূল্যায়িত করা হয়েছে (যেমন, সুতা বা npm)। বিস্তারিত জানার জন্য bower/bower#2298 দেখুন।
  • বুটস্ট্র্যাপের জন্য এখনও jQuery 1.9.1 বা উচ্চতর প্রয়োজন, তবে আপনাকে 3.x সংস্করণ ব্যবহার করার পরামর্শ দেওয়া হচ্ছে যেহেতু v3.x এর সমর্থিত ব্রাউজারগুলি বুটস্ট্র্যাপ সমর্থন করে এবং v3.x-এর কিছু নিরাপত্তা সংশোধন রয়েছে৷
  • .form-control-labelঅব্যবহৃত ক্লাস সরানো হয়েছে . আপনি যদি এই ক্লাসটি ব্যবহার করে থাকেন তবে এটি সেই ক্লাসের নকল ছিল যা অনুভূমিক ফর্ম লেআউটে এটির সাথে যুক্ত ইনপুটকে .col-form-labelউল্লম্বভাবে কেন্দ্র করে।<label>
  • color-yiqএকটি মিক্সিন থেকে পরিবর্তন করা হয়েছে যা সম্পত্তি অন্তর্ভুক্ত করে এমন colorএকটি ফাংশনে পরিবর্তন করেছে যা একটি মান প্রদান করে, যা আপনাকে যেকোনো CSS সম্পত্তির জন্য এটি ব্যবহার করার অনুমতি দেয়। উদাহরণস্বরূপ, এর পরিবর্তে color-yiq(#000), আপনি লিখবেন color: color-yiq(#000);।

হাইলাইট

  • মডেলগুলিতে নতুন pointer-eventsব্যবহার চালু করা হয়েছে। কাস্টম ক্লিক পরিচালনার জন্য বাইরেরটি .modal-dialogইভেন্টগুলির মধ্য দিয়ে যায় pointer-events: none(যেকোন ক্লিকের জন্য এটি কেবল শোনা সম্ভব করে তোলে ), এবং তারপরে এটির সাথে .modal-backdropপ্রকৃতপক্ষে এটিকে প্রতিহত করে ।.modal-contentpointer-events: auto

সারসংক্ষেপ

এখানে বড় টিকিটের আইটেমগুলি রয়েছে যা আপনি v3 থেকে v4 এ যাওয়ার সময় সচেতন হতে চান৷

ব্রাউজার সমর্থন

  • IE8, IE9, এবং iOS 6 সমর্থন বাদ দেওয়া হয়েছে। v4 এখন শুধুমাত্র IE10+ এবং iOS 7+। যেগুলির যেকোন একটির প্রয়োজনের জন্য, v3 ব্যবহার করুন।
  • Android v5.0 Lollipop এর ব্রাউজার এবং WebView এর জন্য অফিসিয়াল সমর্থন যোগ করা হয়েছে। অ্যান্ড্রয়েড ব্রাউজার এবং ওয়েবভিউ-এর আগের সংস্করণগুলি শুধুমাত্র অনানুষ্ঠানিকভাবে সমর্থিত থাকে।

বিশ্বব্যাপী পরিবর্তন

  • ফ্লেক্সবক্স ডিফল্টরূপে সক্ষম। সাধারণভাবে এর অর্থ হল আমাদের উপাদান জুড়ে ফ্লোট থেকে দূরে সরে যাওয়া এবং আরও অনেক কিছু।
  • আমাদের সোর্স CSS ফাইলের জন্য Less থেকে Sass- এ স্যুইচ করা হয়েছে।
  • pxআমাদের প্রাথমিক CSS ইউনিট হিসাবে থেকে থেকে তে স্যুইচ করা হয়েছে rem, যদিও পিক্সেলগুলি এখনও মিডিয়া ক্যোয়ারী এবং গ্রিড আচরণের জন্য ব্যবহৃত হয় কারণ ডিভাইস ভিউপোর্ট টাইপ আকার দ্বারা প্রভাবিত হয় না।
  • গ্লোবাল ফন্ট সাইজ থেকে 14pxবেড়ে 16pxহয়েছে
  • একটি পঞ্চম বিকল্প যোগ করার জন্য গ্রিড স্তরগুলিকে সংস্কার করা হয়েছে (এতে 576pxএবং নীচের ছোট ডিভাইসগুলিকে সম্বোধন করা) এবং -xsসেই ক্লাসগুলি থেকে ইনফিক্স সরিয়ে দেওয়া হয়েছে৷ উদাহরণ: .col-6.col-sm-4.col-md-3.
  • $enable-gradients: trueSCSS ভেরিয়েবলের (যেমন, ) মাধ্যমে কনফিগারযোগ্য বিকল্পগুলির সাথে পৃথক ঐচ্ছিক থিম প্রতিস্থাপন করা হয়েছে ।
  • গ্রান্টের পরিবর্তে এনপিএম স্ক্রিপ্টের একটি সিরিজ ব্যবহার করার জন্য বিল্ড সিস্টেম ওভারহল করা হয়েছে। সমস্ত স্ক্রিপ্টের জন্য দেখুন package.json, অথবা স্থানীয় উন্নয়নের প্রয়োজনের জন্য আমাদের প্রকল্পের রিডমি দেখুন।
  • বুটস্ট্র্যাপের অ-প্রতিক্রিয়াশীল ব্যবহার আর সমর্থিত নয়।
  • আরও বিস্তৃত সেটআপ ডকুমেন্টেশন এবং কাস্টমাইজড বিল্ডের পক্ষে অনলাইন কাস্টমাইজার বাদ দেওয়া হয়েছে।
  • সাধারণ CSS সম্পত্তি-মান জোড়া এবং মার্জিন/প্যাডিং স্পেসিং শর্টকাটের জন্য কয়েক ডজন নতুন ইউটিলিটি ক্লাস যুক্ত করা হয়েছে।

গ্রিড সিস্টেম

  • ফ্লেক্সবক্সে সরানো হয়েছে।
    • গ্রিড মিক্সিন এবং পূর্বনির্ধারিত ক্লাসে ফ্লেক্সবক্সের জন্য সমর্থন যোগ করা হয়েছে।
    • ফ্লেক্সবক্সের অংশ হিসাবে, উল্লম্ব এবং অনুভূমিক প্রান্তিককরণ ক্লাসের জন্য সমর্থন অন্তর্ভুক্ত।
  • গ্রিড শ্রেণীর নাম এবং একটি নতুন গ্রিড স্তর আপডেট করা হয়েছে।
    • আরও দানাদার নিয়ন্ত্রণের জন্য নীচে একটি নতুন smগ্রিড স্তর যুক্ত করা হয়েছে৷ 768pxআমাদের এখন আছে xs, sm, md, lg, এবং xl. এর অর্থ হল প্রতিটি স্তরকে এক স্তরে বাম্প করা হয়েছে (তাই .col-md-6v3 তে এখন .col-lg-6v4)।
    • xsগ্রিড ক্লাসগুলিকে আরও সঠিকভাবে উপস্থাপন করার জন্য ইনফিক্সের প্রয়োজন না করার জন্য পরিবর্তন করা হয়েছে যে তারা স্টাইল প্রয়োগ করা শুরু করে min-width: 0এবং একটি সেট পিক্সেল মান নয়। পরিবর্তে .col-xs-6, এটা এখন .col-6. অন্যান্য সমস্ত গ্রিড স্তরের ইনফিক্স প্রয়োজন (যেমন, sm)।
  • আপডেট করা গ্রিড মাপ, mixins, এবং ভেরিয়েবল.
    • গ্রিড নর্দমাগুলির এখন একটি Sass মানচিত্র রয়েছে যাতে আপনি প্রতিটি ব্রেকপয়েন্টে নির্দিষ্ট নর্দমার প্রস্থ নির্দিষ্ট করতে পারেন।
    • একটি make-col-readyপ্রিপ মিক্সিন ব্যবহার করার জন্য গ্রিড মিক্সিন এবং একটি make-colসেট করার জন্য flexএবং max-widthপৃথক কলামের আকারের জন্য আপডেট করা হয়েছে।
    • গ্রিড সিস্টেম মিডিয়া ক্যোয়ারী ব্রেকপয়েন্ট এবং কন্টেইনার প্রস্থকে নতুন গ্রিড স্তরের জন্য অ্যাকাউন্টে পরিবর্তন করা হয়েছে এবং নিশ্চিত করুন যে কলামগুলি 12তাদের সর্বোচ্চ প্রস্থে সমানভাবে বিভাজ্য।
    • গ্রিড ব্রেকপয়েন্ট এবং কন্টেইনার প্রস্থ এখন মুষ্টিমেয় পৃথক ভেরিয়েবলের পরিবর্তে Sass ম্যাপ ( $grid-breakpointsএবং ) এর মাধ্যমে পরিচালনা করা হয়। $container-max-widthsএগুলি @screen-*ভেরিয়েবলগুলিকে সম্পূর্ণরূপে প্রতিস্থাপন করে এবং আপনাকে গ্রিড স্তরগুলি সম্পূর্ণরূপে কাস্টমাইজ করার অনুমতি দেয়।
    • মিডিয়া প্রশ্নও পরিবর্তিত হয়েছে। প্রতিবার একই মান সহ আমাদের মিডিয়া ক্যোয়ারী ঘোষণাগুলি পুনরাবৃত্তি করার পরিবর্তে, আমাদের এখন আছে @include media-breakpoint-up/down/only। এখন, লেখার পরিবর্তে @media (min-width: @screen-sm-min) { ... }, আপনি লিখতে পারেন @include media-breakpoint-up(sm) { ... }।

উপাদান

  • ড্রপ করা প্যানেল, থাম্বনেইল, এবং একটি নতুন সর্ব-বিস্তৃত উপাদান, কার্ডের জন্য কূপ ।
  • Glyphicons আইকন ফন্ট বাদ দেওয়া হয়েছে. আপনার যদি আইকনগুলির প্রয়োজন হয় তবে কিছু বিকল্প হল:
  • Affix jQuery প্লাগইন বাদ দেওয়া হয়েছে।
    • আমরা position: stickyপরিবর্তে ব্যবহার করার সুপারিশ. বিশদ বিবরণ এবং নির্দিষ্ট পলিফিল সুপারিশের জন্য দয়া করে এন্ট্রি HTML5 দেখুন । একটি পরামর্শ হল @supportsএটি বাস্তবায়নের জন্য একটি নিয়ম ব্যবহার করা (যেমন, @supports (position: sticky) { ... })/
    • আপনি যদি অতিরিক্ত, অ position-শৈলী প্রয়োগ করতে Affix ব্যবহার করেন, তাহলে পলিফিলগুলি আপনার ব্যবহারের ক্ষেত্রে সমর্থন নাও করতে পারে। এই ধরনের ব্যবহারের জন্য একটি বিকল্প হল তৃতীয় পক্ষের ScrollPos-Styler লাইব্রেরি।
  • পেজার উপাদানটি বাদ দেওয়া হয়েছে কারণ এটি মূলত সামান্য কাস্টমাইজড বোতাম ছিল।
  • অতিরিক্ত-নির্দিষ্ট শিশু নির্বাচকদের পরিবর্তে আরও আন-নেস্টেড ক্লাস নির্বাচক ব্যবহার করার জন্য প্রায় সমস্ত উপাদানকে রিফ্যাক্টর করা হয়েছে।

উপাদান দ্বারা

এই তালিকাটি v3.xx এবং v4.0.0 এর মধ্যে উপাদান দ্বারা মূল পরিবর্তনগুলিকে হাইলাইট করে।

রিবুট করুন

বুটস্ট্র্যাপ 4-এ নতুন হল রিবুট , একটি নতুন স্টাইলশীট যা আমাদের নিজস্ব কিছু মতামতযুক্ত রিসেট শৈলীর সাথে নরমালাইজে তৈরি করে। এই ফাইলে উপস্থিত নির্বাচকরা শুধুমাত্র উপাদান ব্যবহার করে—এখানে কোন ক্লাস নেই। এটি আরও মডুলার পদ্ধতির জন্য আমাদের কম্পোনেন্ট শৈলী থেকে আমাদের রিসেট শৈলীকে বিচ্ছিন্ন করে। এর মধ্যে সবচেয়ে গুরুত্বপূর্ণ কিছু রিসেট হল box-sizing: border-boxপরিবর্তন, অনেক উপাদান, লিঙ্ক শৈলী এবং অনেকগুলি ফর্ম উপাদান রিসেট থেকে ইউনিটে emচলে যাওয়া।rem

টাইপোগ্রাফি

  • ফাইলে সমস্ত .text-ইউটিলিটি সরানো হয়েছে।_utilities.scss
  • এটির শৈলীগুলি .page-headerইউটিলিটিগুলির মাধ্যমে প্রয়োগ করা যেতে পারে বলে বাদ দেওয়া হয়েছে৷
  • .dl-horizontalবাদ দেওয়া হয়েছে। পরিবর্তে, এটি এবং শিশুদের উপর গ্রিড কলাম ক্লাস (বা মিক্সিন) ব্যবহার .rowকরুন এবং ব্যবহার করুন ।<dl><dt><dd>
  • ব্লককোটগুলিকে পুনরায় ডিজাইন করা হয়েছে, তাদের শৈলীগুলিকে <blockquote>উপাদান থেকে একটি একক শ্রেণীতে স্থানান্তর করা হয়েছে .blockquote, .blockquote-reverseটেক্সট ইউটিলিটিগুলির জন্য মডিফায়ার বাদ দেওয়া হয়েছে ।
  • .list-inlineএখন প্রয়োজন যে এর বাচ্চাদের তালিকা আইটেম তাদের জন্য নতুন .list-inline-itemক্লাস প্রয়োগ করা হয়েছে।

ছবি

  • নাম পরিবর্তন .img-responsiveকরে .img-fluid।
  • নাম পরিবর্তন .img-roundedকরে.rounded
  • নাম পরিবর্তন .img-circleকরে.rounded-circle

টেবিল

  • নির্বাচকের প্রায় সমস্ত দৃষ্টান্ত >মুছে ফেলা হয়েছে, মানে নেস্টেড টেবিলগুলি এখন স্বয়ংক্রিয়ভাবে তাদের পিতামাতার কাছ থেকে শৈলীগুলি উত্তরাধিকারী হবে৷ এটি আমাদের নির্বাচক এবং সম্ভাব্য কাস্টমাইজেশনকে ব্যাপকভাবে সরল করে।
  • ধারাবাহিকতার জন্য নামকরণ .table-condensedকরা হয়েছে।.table-sm
  • একটি নতুন .table-inverseবিকল্প যোগ করা হয়েছে.
  • যোগ করা হয়েছে টেবিল হেডার মডিফায়ার: .thead-defaultএবং .thead-inverse.
  • একটি -প্রিফিক্স থাকতে প্রাসঙ্গিক ক্লাসের নাম পরিবর্তন করা হয়েছে .table-। তাই .active, .success, .warning, .dangerএবং .infoথেকে .table-active, .table-success, .table-warning, .table-dangerএবং .table-info.

ফর্ম

  • সরানো উপাদান _reboot.scssফাইল রিসেট.
  • নাম পরিবর্তন .control-labelকরে .col-form-label।
  • যথাক্রমে .input-lgএবং .input-smথেকে .form-control-lgএবং নামকরণ করা হয়েছে।.form-control-sm
  • সরলতার .form-group-*জন্য ক্লাস বাদ দিয়েছি। .form-control-*পরিবর্তে এখন ক্লাস ব্যবহার করুন .
  • ব্লক -লেভেল হেল্প টেক্সট এর জন্য .help-blockবাদ দিয়ে প্রতিস্থাপন করা হয়েছে। .form-textইনলাইন হেল্প টেক্সট এবং অন্যান্য নমনীয় বিকল্পগুলির জন্য, ইউটিলিটি ক্লাসগুলি ব্যবহার করুন .text-muted।
  • বাদ .radio-inlineএবং .checkbox-inline.
  • একত্রিত .checkboxএবং বিভিন্ন শ্রেণীর .radioমধ্যে ।.form-check.form-check-*
  • অনুভূমিক ফর্মগুলি সংশোধন করা হয়েছে:
    • .form-horizontalক্লাসের প্রয়োজনীয়তা বাদ দিয়েছে ।
    • .form-group.rowমিক্সিনের মাধ্যমে আর শৈলী প্রয়োগ করে না , তাই .rowঅনুভূমিক গ্রিড লেআউটের জন্য এখন প্রয়োজন (যেমন, <div class="form-group row">)।
    • s .col-form-labelসহ উল্লম্বভাবে কেন্দ্রের লেবেলে নতুন শ্রেণী যোগ করা হয়েছে।.form-control
    • .form-rowগ্রিড ক্লাসের সাথে কমপ্যাক্ট ফর্ম লেআউটের জন্য নতুন যোগ করা হয়েছে (আপনার .rowজন্য একটি .form-rowএবং যান)।
  • কাস্টম ফর্ম সমর্থন যোগ করা হয়েছে (চেকবক্স, রেডিও, নির্বাচন এবং ফাইল ইনপুটগুলির জন্য)।
  • CSS এবং ছদ্ম-ক্লাসের মাধ্যমে HTML5 ফর্মের বৈধতা দিয়ে প্রতিস্থাপিত .has-error, .has-warningএবং ক্লাস।.has-success:invalid:valid
  • নাম পরিবর্তন .form-control-staticকরে .form-control-plaintext।

বোতাম

  • নাম পরিবর্তন .btn-defaultকরে .btn-secondary।
  • v3 এর তুলনায় আনুপাতিকভাবে অনেক ছোট হওয়ায় ক্লাসটিকে .btn-xsসম্পূর্ণরূপে বাদ দেওয়া হয়েছে।.btn-sm
  • jQuery প্লাগইনের স্টেটফুল বোতাম বৈশিষ্ট্যটি বাদ দেওয়া হয়েছে। button.jsএর মধ্যে রয়েছে $().button(string)এবং $().button('reset')পদ্ধতি। আমরা পরিবর্তে সামান্য কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করার পরামর্শ দিই, যা আপনি যেভাবে চান ঠিক সেইভাবে আচরণ করার সুবিধা পাবেন।
    • মনে রাখবেন যে প্লাগইনের অন্যান্য বৈশিষ্ট্যগুলি (বোতাম চেকবক্স, বোতাম রেডিও, একক-টগল বোতাম) v4 এ ধরে রাখা হয়েছে।
  • IE9+ সমর্থন করে বোতামগুলি পরিবর্তন [disabled]করুন ৷ তবে এখনও প্রয়োজনীয় কারণ নেটিভ অক্ষম ফিল্ডসেটগুলি এখনও IE11 এ বগি রয়েছে ।:disabled:disabledfieldset[disabled]

বোতাম গ্রুপ

  • ফ্লেক্সবক্সের সাথে কম্পোনেন্ট পুনরায় লিখুন।
  • সরানো হয়েছে .btn-group-justified। একটি প্রতিস্থাপন হিসাবে আপনি <div class="btn-group d-flex" role="group"></div>উপাদানগুলির চারপাশে একটি মোড়ক হিসাবে ব্যবহার করতে পারেন .w-100।
  • .btn-group-xsসম্পূর্ণভাবে ক্লাস বাদ দেওয়া হয়েছে অপসারণ .btn-xs।
  • বোতাম টুলবারে বোতাম গ্রুপের মধ্যে স্পষ্ট ব্যবধান সরানো হয়েছে; এখন মার্জিন ইউটিলিটি ব্যবহার করুন।
  • অন্যান্য উপাদানের সাথে ব্যবহারের জন্য উন্নত ডকুমেন্টেশন।
  • অভিভাবক নির্বাচকদের থেকে সমস্ত উপাদান, সংশোধক ইত্যাদির জন্য একক ক্লাসে পরিবর্তন করা হয়েছে৷
  • সরলীকৃত ড্রপডাউন শৈলী ড্রপডাউন মেনুতে সংযুক্ত উপরের দিকে বা নিম্নমুখী তীরগুলির সাথে আর পাঠানো হবে না।
  • ড্রপডাউনগুলি এখন <div>s বা <ul>s দিয়ে তৈরি করা যেতে পারে।
  • <a>ড্রপডাউন আইটেমগুলির জন্য এবং <button>ভিত্তিক ড্রপডাউন আইটেমগুলির জন্য সহজ, অন্তর্নির্মিত সমর্থন প্রদানের জন্য ড্রপডাউন শৈলী এবং মার্কআপ পুনর্নির্মাণ করুন ৷
  • নাম পরিবর্তন .dividerকরে .dropdown-divider।
  • ড্রপডাউন আইটেম এখন প্রয়োজন .dropdown-item.
  • ড্রপডাউন টগলের জন্য আর স্পষ্ট প্রয়োজন নেই <span class="caret"></span>; ::afterএটি এখন CSS এর অন এর মাধ্যমে স্বয়ংক্রিয়ভাবে প্রদান করা হয় .dropdown-toggle।

গ্রিড সিস্টেম

  • একটি নতুন 576pxগ্রিড ব্রেকপয়েন্ট হিসাবে যোগ করা হয়েছে sm, যার অর্থ এখন মোট পাঁচটি স্তর রয়েছে ( xs, sm, md, lg, এবং xl)।
  • সহজ গ্রিড ক্লাসের জন্য রেসপন্সিভ গ্রিড মডিফায়ার ক্লাসের নাম পরিবর্তন করা .col-{breakpoint}-{modifier}-{size}হয়েছে ।.{modifier}-{breakpoint}-{size}
  • নতুন ফ্লেক্সবক্স-চালিত orderক্লাসের জন্য পুশ এবং পুল মডিফায়ার ক্লাস বাদ দেওয়া হয়েছে। উদাহরণস্বরূপ, .col-8.push-4এবং এর পরিবর্তে, আপনি এবং .col-4.pull-8ব্যবহার করবেন ।.col-8.order-2.col-4.order-1
  • গ্রিড সিস্টেম এবং উপাদানগুলির জন্য ফ্লেক্সবক্স ইউটিলিটি ক্লাস যুক্ত করা হয়েছে।

গ্রুপ তালিকাভুক্ত করুন

  • ফ্লেক্সবক্সের সাথে কম্পোনেন্ট পুনরায় লিখুন।
  • লিস্ট গ্রুপ আইটেমগুলির স্টাইলিং লিঙ্ক এবং বোতাম সংস্করণগুলির জন্য a.list-group-itemএকটি স্পষ্ট শ্রেণি দিয়ে প্রতিস্থাপিত হয়েছে।.list-group-item-action
  • .list-group-flushকার্ডের সাথে ব্যবহারের জন্য ক্লাস যোগ করা হয়েছে।
  • ফ্লেক্সবক্সের সাথে কম্পোনেন্ট পুনরায় লিখুন।
  • ফ্লেক্সবক্সে সরানো হলে, হেডারে খারিজ আইকনগুলির প্রান্তিককরণ সম্ভবত ভেঙে গেছে কারণ আমরা আর ফ্লোট ব্যবহার করছি না। ফ্লোটেড কন্টেন্ট প্রথমে আসে, কিন্তু ফ্লেক্সবক্সের সাথে এটি আর হয় না। ঠিক করার জন্য মডেল শিরোনামের পরে আসতে আপনার খারিজ আইকন আপডেট করুন।
  • বিকল্পটি (যা স্বয়ংক্রিয়ভাবে remoteএকটি মডেলে বাহ্যিক সামগ্রী লোড এবং ইনজেক্ট করতে ব্যবহার করা যেতে পারে) এবং সংশ্লিষ্ট loaded.bs.modalইভেন্টটি সরানো হয়েছে। আমরা এর পরিবর্তে ক্লায়েন্ট-সাইড টেমপ্লেটিং বা ডেটা বাইন্ডিং ফ্রেমওয়ার্ক ব্যবহার করার বা jQuery.load নিজে কল করার পরামর্শ দিই।
  • ফ্লেক্সবক্সের সাথে কম্পোনেন্ট পুনরায় লিখুন।
  • আন-নেস্টেড ক্লাসের মাধ্যমে সহজ স্টাইলিংয়ের জন্য প্রায় সব >নির্বাচককে বাদ দেওয়া হয়েছে।
  • HTML-নির্দিষ্ট নির্বাচকের পরিবর্তে , আমরা s, s, এবং s-এর .nav > li > aজন্য আলাদা ক্লাস ব্যবহার করি । এটি আপনার HTML কে আরও নমনীয় করে তোলে যখন বর্ধিত এক্সটেনসিবিলিটি নিয়ে আসে।.nav.nav-item.nav-link

সারিবদ্ধকরণ, প্রতিক্রিয়াশীলতা এবং কাস্টমাইজেশনের জন্য উন্নত সমর্থন সহ নেভিবার সম্পূর্ণরূপে ফ্লেক্সবক্সে পুনরায় লেখা হয়েছে।

  • প্রতিক্রিয়াশীল ন্যাভবার আচরণগুলি এখন .navbarক্লাসে প্রয়োগ করা হয় যেখানে আপনি ন্যাভিবারটি ভেঙে ফেলার জন্য চয়ন করেন । .navbar-expand-{breakpoint}পূর্বে এটি একটি কম পরিবর্তনশীল পরিবর্তন এবং প্রয়োজনীয় পুনরায় কম্পাইলিং ছিল।
  • .navbar-defaultএখন আছে .navbar-light, যদিও .navbar-darkএকই থাকে। প্রতিটি নববারে এর মধ্যে একটি প্রয়োজন। যাইহোক, এই ক্লাসগুলি আর background-colors সেট করে না; পরিবর্তে তারা মূলত শুধুমাত্র প্রভাবিত color.
  • Navbars এখন কোনো ধরনের একটি পটভূমি ঘোষণা প্রয়োজন. আমাদের ব্যাকগ্রাউন্ড ইউটিলিটি ( ) থেকে বেছে নিন অথবা পাগল কাস্টমাইজেশনের জন্য.bg-* উপরে আলো/বিপরীত ক্লাসের সাথে আপনার নিজের সেট করুন ।
  • প্রদত্ত ফ্লেক্সবক্স শৈলী, navbars এখন সহজ প্রান্তিককরণ বিকল্পের জন্য flexbox ইউটিলিটি ব্যবহার করতে পারে।
  • .navbar-toggleএখন .navbar-togglerআছে এবং বিভিন্ন শৈলী এবং অভ্যন্তরীণ মার্কআপ রয়েছে (তিনটি আর নয় <span>)।
  • .navbar-formক্লাস একেবারেই বাদ দিল । এটা আর প্রয়োজন নেই; পরিবর্তে, .form-inlineপ্রয়োজনে শুধু মার্জিন ইউটিলিটি ব্যবহার করুন এবং প্রয়োগ করুন।
  • Navbars আর অন্তর্ভুক্ত margin-bottomবা border-radiusডিফল্টরূপে নয়। প্রয়োজনে ইউটিলিটি ব্যবহার করুন।
  • নতুন মার্কআপ অন্তর্ভুক্ত করার জন্য নেভিবার সমন্বিত সমস্ত উদাহরণ আপডেট করা হয়েছে।

পৃষ্ঠা সংখ্যা

  • ফ্লেক্সবক্সের সাথে কম্পোনেন্ট পুনরায় লিখুন।
  • স্পষ্ট শ্রেণী ( .page-item, .page-link) এখন .paginations-এর বংশধরদের জন্য প্রয়োজন
  • .pagerকাস্টমাইজড আউটলাইন বোতামের চেয়ে একটু বেশি হওয়ায় কম্পোনেন্টটিকে সম্পূর্ণভাবে বাদ দেওয়া হয়েছে ।
  • একটি সুস্পষ্ট শ্রেণী, .breadcrumb-item, এখন .breadcrumbs-এর বংশধরদের জন্য প্রয়োজন

লেবেল এবং ব্যাজ

  • একত্রীকরণ .labelএবং উপাদান .badgeথেকে দ্ব্যর্থতা <label>এবং সম্পর্কিত উপাদান সরলীকরণ.
  • .badge-pillবৃত্তাকার "পিল" চেহারা জন্য সংশোধক হিসাবে যোগ করা হয়েছে.
  • তালিকা গোষ্ঠী এবং অন্যান্য উপাদানগুলিতে ব্যাজগুলি আর স্বয়ংক্রিয়ভাবে ভাসানো হয় না। এর জন্য এখন ইউটিলিটি ক্লাস প্রয়োজন।
  • .badge-default.badge-secondaryঅন্যত্র ব্যবহৃত কম্পোনেন্ট মডিফায়ার ক্লাসের সাথে বাদ দেওয়া হয়েছে এবং যোগ করা হয়েছে।

প্যানেল, থাম্বনেল, এবং কূপ

নতুন কার্ড কম্পোনেন্টের জন্য সম্পূর্ণভাবে বাদ দেওয়া হয়েছে।

প্যানেল

  • .panelথেকে .card, এখন ফ্লেক্সবক্স দিয়ে তৈরি।
  • .panel-defaultঅপসারণ এবং কোন প্রতিস্থাপন.
  • .panel-groupঅপসারণ এবং কোন প্রতিস্থাপন. .card-groupএটি একটি প্রতিস্থাপন নয়, এটি ভিন্ন।
  • .panel-headingপ্রতি.card-header
  • .panel-titleথেকে .card-title_ পছন্দসই চেহারার উপর নির্ভর করে, আপনি শিরোনাম উপাদান বা ক্লাস (যেমন <h3>, .h3) বা সাহসী উপাদান বা ক্লাস (যেমন <strong>, <b>, .font-weight-bold) ব্যবহার করতে চাইতে পারেন। উল্লেখ্য যে .card-title, একইভাবে নামকরণ করা হলে, এর চেয়ে ভিন্ন চেহারা তৈরি করে .panel-title।
  • .panel-bodyপ্রতি.card-body
  • .panel-footerপ্রতি.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, এবং আমাদের Sass মানচিত্র থেকে উত্পন্ন , , এবং ইউটিলিটিগুলির .panel-dangerজন্য বাদ দেওয়া হয়েছে ।.bg-.text-.border$theme-colors

অগ্রগতি

  • ইউটিলিটিগুলির .progress-bar-*সাথে প্রাসঙ্গিক ক্লাস প্রতিস্থাপন করা হয়েছে। .bg-*উদাহরণস্বরূপ, class="progress-bar progress-bar-danger"হয়ে যায় class="progress-bar bg-danger"।
  • .activeঅ্যানিমেটেড অগ্রগতি বারের জন্য প্রতিস্থাপিত হয়েছে .progress-bar-animated।
  • নকশা এবং স্টাইলিং সরল করার জন্য সমগ্র উপাদান ওভারহল করা হয়েছে। আপনার ওভাররাইড করার জন্য আমাদের কাছে কম শৈলী, নতুন সূচক এবং নতুন আইকন রয়েছে।
  • সমস্ত CSS আন-নেস্ট করা হয়েছে এবং নতুন নামকরণ করা হয়েছে, প্রতিটি ক্লাসের সাথে প্রিফিক্স করা হয়েছে তা নিশ্চিত করে .carousel-।
    • ক্যারোজেল আইটেমগুলির জন্য, .next, .prev, .left, এবং .rightএখন .carousel-item-next, .carousel-item-prev, .carousel-item-left, এবং .carousel-item-right.
    • .itemএছাড়াও এখন আছে .carousel-item.
    • পূর্ববর্তী/পরবর্তী নিয়ন্ত্রণের জন্য, .carousel-control.rightএবং .carousel-control.leftএখন .carousel-control-nextএবং .carousel-control-prev, যার অর্থ তাদের আর একটি নির্দিষ্ট বেস ক্লাসের প্রয়োজন নেই।
  • সমস্ত প্রতিক্রিয়াশীল স্টাইলিং সরানো হয়েছে, ইউটিলিটিগুলিকে স্থগিত করে (যেমন, নির্দিষ্ট ভিউপোর্টে ক্যাপশন দেখানো) এবং প্রয়োজন অনুসারে কাস্টম শৈলী।
  • ক্যারোজেল আইটেমগুলির ছবির জন্য সরানো ছবি ওভাররাইড, ইউটিলিটিগুলিতে পিছিয়ে।
  • নতুন মার্কআপ এবং শৈলী অন্তর্ভুক্ত করতে ক্যারোজেল উদাহরণটি টুইক করা হয়েছে।

টেবিল

  • স্টাইল করা নেস্টেড টেবিলের জন্য সমর্থন সরানো হয়েছে। সহজ নির্বাচকদের জন্য সমস্ত টেবিল শৈলী এখন v4-এ উত্তরাধিকারসূত্রে পাওয়া যায়।
  • বিপরীত টেবিল বৈকল্পিক যোগ করা হয়েছে.

ইউটিলিটিস

বিক্রেতা উপসর্গ mixins

বুটস্ট্র্যাপ 3-এর ভেন্ডর প্রিফিক্স মিক্সিনগুলি, যেগুলি v3.2.0 তে অবমূল্যায়িত হয়েছিল, বুটস্ট্র্যাপ 4-এ সরিয়ে দেওয়া হয়েছে৷ যেহেতু আমরা অটোপ্রেফিক্সার ব্যবহার করি , সেগুলির আর প্রয়োজন নেই৷

নিম্নলিখিত মিশ্রণগুলি সরানো হয়েছে: animation, animation-delay, animation-direction, animation-duration,animation-fill-mode , animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

ডকুমেন্টেশন

আমাদের ডকুমেন্টেশন পাশাপাশি বোর্ড জুড়ে একটি আপগ্রেড পেয়েছে। এখানে নিম্ন নিম্ন:

  • আমরা এখনও জেকিল ব্যবহার করছি, কিন্তু আমাদের মিশ্রণে প্লাগইন রয়েছে:
    • bugify.rbআমাদের ব্রাউজার বাগ পৃষ্ঠায় এন্ট্রিগুলিকে দক্ষতার সাথে তালিকাভুক্ত করতে ব্যবহৃত হয় ।
    • example.rbডিফল্ট highlight.rbপ্লাগইনের একটি কাস্টম কাঁটা, সহজ উদাহরণ-কোড পরিচালনার জন্য অনুমতি দেয়।
    • callout.rbএটির একটি অনুরূপ কাস্টম কাঁটা, কিন্তু আমাদের বিশেষ ডক্স কলআউটের জন্য ডিজাইন করা হয়েছে৷
    • jekyll-toc আমাদের বিষয়বস্তু সারণী তৈরি করতে ব্যবহৃত হয়।
  • সহজ সম্পাদনার জন্য সমস্ত ডক্স সামগ্রী মার্কডাউনে (এইচটিএমএল এর পরিবর্তে) পুনরায় লেখা হয়েছে।
  • পৃষ্ঠাগুলিকে সহজতর বিষয়বস্তু এবং আরও সহজলভ্য অনুক্রমের জন্য পুনর্গঠিত করা হয়েছে৷
  • বুটস্ট্র্যাপের ভেরিয়েবল, মিক্সিন এবং আরও অনেক কিছুর সম্পূর্ণ সুবিধা নিতে আমরা নিয়মিত CSS থেকে SCSS-এ চলে এসেছি।

প্রতিক্রিয়াশীল ইউটিলিটি

@screen-v4.0.0 এ সমস্ত ভেরিয়েবল মুছে ফেলা হয়েছে। পরিবর্তে media-breakpoint-up(), media-breakpoint-down(), বা media-breakpoint-only()Sass মিক্সিন বা $grid-breakpointsSass মানচিত্র ব্যবহার করুন।

আমাদের প্রতিক্রিয়াশীল ইউটিলিটি ক্লাসগুলি মূলত স্পষ্ট displayইউটিলিটির পক্ষে সরানো হয়েছে।

  • এবং ক্লাসগুলি সরিয়ে দেওয়া হয়েছে কারণ তারা jQuery .hiddenএবং পদ্ধতির সাথে বিরোধপূর্ণ। পরিবর্তে, বৈশিষ্ট্য টগল করার চেষ্টা করুন বা ইনলাইন শৈলী যেমন এবং ব্যবহার করুন ।.show$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • সমস্ত .hidden-ক্লাস মুছে ফেলা হয়েছে, মুদ্রণ ইউটিলিটিগুলির জন্য বাদে যার নাম পরিবর্তন করা হয়েছে৷
    • v3 থেকে সরানো হয়েছে:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • v4 alphas থেকে সরানো হয়েছে:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • প্রিন্ট ইউটিলিটিগুলি আর শুরু হয় না .hidden-বা দিয়ে .visible-, কিন্তু দিয়ে .d-print-।
    • পুরাতন নাম: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • নতুন ক্লাস: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

সুস্পষ্ট ক্লাস ব্যবহার করার পরিবর্তে .visible-*, আপনি একটি উপাদানকে সেই পর্দার আকারে লুকিয়ে না রেখে দৃশ্যমান করে তোলেন। আপনি শুধুমাত্র একটি প্রদত্ত ব্যবধানে স্ক্রীন মাপের একটি উপাদান দেখানোর জন্য একটি .d-*-noneক্লাসের সাথে একটি ক্লাস একত্রিত করতে পারেন (যেমন শুধুমাত্র মাঝারি এবং বড় ডিভাইসগুলিতে উপাদানটি দেখায়)।.d-*-block.d-none.d-md-block.d-xl-none

মনে রাখবেন যে v4 এ গ্রিড ব্রেকপয়েন্টে পরিবর্তনের অর্থ হল একই ফলাফল অর্জন করতে আপনাকে একটি ব্রেকপয়েন্ট বড় করতে হবে। নতুন প্রতিক্রিয়াশীল ইউটিলিটি ক্লাসগুলি কম সাধারণ ক্ষেত্রে মিটমাট করার চেষ্টা করে না যেখানে একটি উপাদানের দৃশ্যমানতা ভিউপোর্ট আকারের একক সংলগ্ন পরিসর হিসাবে প্রকাশ করা যায় না; পরিবর্তে আপনাকে এই ধরনের ক্ষেত্রে কাস্টম CSS ব্যবহার করতে হবে।