Source

v4 লৈ প্ৰব্ৰজন কৰা হৈছে

বুটষ্ট্ৰেপ ৪ হৈছে সমগ্ৰ প্ৰকল্পটোৰ এটা ডাঙৰ পুনৰ লিখা। আটাইতকৈ উল্লেখযোগ্য পৰিৱৰ্তনসমূহ তলত সংক্ষিপ্তভাৱে উল্লেখ কৰা হৈছে, তাৰ পিছত প্ৰাসংগিক উপাদানসমূহৰ অধিক নিৰ্দিষ্ট পৰিৱৰ্তনসমূহ।

সুস্থিৰ পৰিৱৰ্তন

Beta 3 ৰ পৰা আমাৰ সুস্থিৰ v4.0 মুক্তিলৈ যোৱাৰ সময়ত, কোনো ব্ৰেকিং পৰিৱৰ্তন নাই, কিন্তু কিছুমান উল্লেখযোগ্য পৰিৱৰ্তন আছে।

প্ৰিন্টিং

  • ভঙা প্ৰিন্ট সঁজুলিসমূহ ঠিক কৰা হৈছে। পূৰ্বতে এটা .d-print-*শ্ৰেণী ব্যৱহাৰ কৰিলে আন যিকোনো .d-*শ্ৰেণীক অপ্ৰত্যাশিতভাৱে অভাৰৰুল কৰা হ’ব। এতিয়া, সিহঁতে আমাৰ অন্য প্ৰদৰ্শন সঁজুলিসমূহৰ সৈতে মিল খায় আৰু কেৱল সেই মাধ্যমৰ বাবেহে প্ৰযোজ্য ( @media print) ।

  • অন্য সঁজুলিসমূহৰ সৈতে মিলাবলৈ উপলব্ধ প্ৰিন্ট প্ৰদৰ্শন সঁজুলিসমূহ প্ৰসাৰিত কৰা হৈছে। বিটা ৩ আৰু তাতকৈ অধিক বয়সৰ মাত্ৰ আছিল block, inline-block, inline, আৰু none. স্থিতিশীল v4 যোগ কৰা হৈছে flex, inline-flex, table, table-row, আৰু table-cell.

  • নতুন প্ৰিন্ট শৈলীসমূহৰ সৈতে ব্ৰাউজাৰসমূহৰ মাজেৰে প্ৰিন্ট পূৰ্বদৰ্শন ৰেণ্ডাৰ স্থিৰ কৰা হৈছে যি ধাৰ্য্য কৰে @page size।

বিটা ৩ পৰিৱৰ্তন

বিটা ২ য়ে বিটা পৰ্যায়ৰ সময়ত আমাৰ ব্ৰেকিং পৰিৱৰ্তনৰ ডাঙৰ অংশ দেখিলেও, কিন্তু আমাৰ হাতত এতিয়াও কেইটামান আছে যিবোৰ বিটা ৩ মুক্তিত সম্বোধন কৰিবলগীয়া আছিল। এই পৰিবৰ্তনসমূহ প্ৰযোজ্য যদি আপুনি Beta 2 বা Bootstrap ৰ যিকোনো পুৰণি সংস্কৰণৰ পৰা Beta 3 লৈ আপডেইট কৰিছে।

সানমিহলি

  • অব্যৱহৃত $thumbnail-transitionচলকটো আঁতৰাই পেলোৱা হৈছে। আমি একো ট্ৰেঞ্জিচন কৰা নাছিলোঁ, গতিকে ই কেৱল অতিৰিক্ত ক’ড আছিল।
  • npm পেকেইজে আৰু আমাৰ উৎস আৰু dist নথিপত্ৰসমূহৰ বাহিৰে অন্য কোনো নথিপত্ৰ অন্তৰ্ভুক্ত নকৰে; যদি আপুনি সিহঁতৰ ওপৰত নিৰ্ভৰ কৰিছিল আৰু আমাৰ স্ক্ৰিপ্টসমূহ node_modulesফোল্ডাৰৰ যোগেদি চলাই আছিল, আপুনি আপোনাৰ কাৰ্য্যপ্ৰবাহ খাপ খুৱাব লাগে।

প্ৰপত্ৰসমূহ

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

    ইয়াৰ অংশ হিচাপে, আমি background-imageস্বনিৰ্বাচিত ফৰ্ম চেকবক্স আৰু ৰেডিঅ'সমূহত একাধিক s ব্যৱস্থাপনা কৰাৰ বাবে 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-textস্বনিৰ্বাচিত নথিপত্ৰ ইনপুটসমূহে সিহঁতৰ Sass চলকলৈ এটা পৰিবৰ্তন লাভ কৰিছিল । ই আৰু এটা নেষ্টেড Sass মেপ নহয় আৰু এতিয়া কেৱল এটা ষ্ট্ৰিং শক্তি দিয়ে— Browseবুটামটো কাৰণ সেইটোৱেই এতিয়া আমাৰ Sass ৰ পৰা সৃষ্টি কৰা একমাত্ৰ ছ্যুডো-উপাদান। Choose fileলিখনীটো এতিয়া .custom-file-label.

ইনপুট গোটসমূহ

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

  • বৈধকৰণ শৈলীসমূহ এতিয়া সমৰ্থিত, যেনে একাধিক ইনপুটসমূহ (যদিও আপুনি প্ৰতিটো গোটত কেৱল এটা ইনপুট বৈধ কৰিব পাৰে)।

  • আকাৰ নিৰ্ধাৰণ শ্ৰেণীসমূহ অভিভাৱকৰ ওপৰত হ'ব লাগিব .input-groupআৰু ব্যক্তিগত ৰূপ উপাদানসমূহৰ ওপৰত নহয়।

বিটা ২ পৰিৱৰ্তন

বিটাত থকাৰ সময়ত আমি কোনো ধৰণৰ ব্ৰেকিং পৰিৱৰ্তন নথকাৰ লক্ষ্য ৰাখিছো। অৱশ্যে সদায় পৰিকল্পনা অনুসৰি কামবোৰ নহয়। তলত বিটা ১ৰ পৰা বিটা ২ লৈ যোৱাৰ সময়ত মনত ৰাখিবলগীয়া ব্ৰেকিং পৰিৱৰ্তনসমূহ দিয়া হৈছে।

ব্ৰেকিং

  • আঁতৰোৱা হৈছে $badge-colorচলক আৰু ইয়াৰ ব্যৱহাৰ .badge. colorআমি ৰ ওপৰত ভিত্তি কৰি এটা বাছি ল’বলৈ এটা ৰঙৰ কনট্ৰাষ্ট ফাংচন ব্যৱহাৰ কৰো background-color, গতিকে ভেৰিয়েবলটো অপ্ৰয়োজনীয়।
  • CSS স্থানীয় ফিল্টাৰৰ সৈতে সংঘাত ভংগ নকৰিবলৈ grayscale()ফলনৰ পুনৰনামকৰণ কৰা হৈছে।gray()grayscale
  • পুনৰনামকৰণ কৰা হৈছে .table-inverse, .thead-inverse, আৰু .thead-defaultto .*-darkআৰু .*-light, অন্য ঠাইত ব্যৱহৃত আমাৰ ৰঙৰ আঁচনিৰ সৈতে মিল থকা।
  • প্ৰতিক্ৰিয়াশীল টেবুলসমূহে এতিয়া প্ৰতিটো গ্ৰীড ব্ৰেকপইণ্টৰ বাবে শ্ৰেণীসমূহ সৃষ্টি কৰে। এই বিটা 1 ৰ পৰা বিচ্ছিন্ন ��য় যে .table-responsiveআপুনি ব্যৱহাৰ কৰি অহাটো অধিক ৰ দৰে .table-responsive-md। আপুনি এতিয়া .table-responsiveবা .table-responsive-{sm,md,lg,xl}প্ৰয়োজন অনুসৰি ব্যৱহাৰ কৰিব পাৰে।
  • বিকল্পসমূহৰ বাবে সৰঞ্জাম ব্যৱস্থাপকক অবিকল্পিত হোৱাৰ বাবে Bower সমৰ্থন বাদ দিয়া হৈছে (যেনে, Yarn বা 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-contentকৰে pointer-events: auto।

সাৰাংশ

v3 ৰ পৰা v4 লৈ যোৱাৰ সময়ত আপুনি সচেতন হ'ব বিচৰা ডাঙৰ টিকট বস্তুসমূহ ইয়াত দিয়া হৈছে।

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

  • IE8, IE9, আৰু iOS 6 সমৰ্থন বাদ দিলে। v4 এতিয়া কেৱল IE10+ আৰু iOS 7+। সেইবোৰৰ যিকোনো এটাৰ প্ৰয়োজন হোৱা চাইটসমূহৰ বাবে, v3 ব্যৱহাৰ কৰক।
  • Android v5.0 Lollipop ৰ ব্ৰাউজাৰ আৰু WebView ৰ বাবে অফিচিয়েল সমৰ্থন যোগ কৰা হৈছে। Android Browser আৰু WebView ৰ পূৰ্বৰ সংস্কৰণসমূহ কেৱল বেচৰকাৰীভাৱে সমৰ্থিত হৈয়েই থাকে।

গোলকীয় পৰিৱৰ্তন

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

গ্ৰীড ব্যৱস্থা

  • flexbox লৈ স্থানান্তৰ কৰা হৈছে।
    • গ্ৰীড মিক্সিন আৰু পূৰ্বনিৰ্ধাৰিত শ্ৰেণীসমূহত flexbox ৰ বাবে সমৰ্থন যোগ কৰা হৈছে।
    • flexbox ৰ অংশ হিচাপে, উলম্ব আৰু অনুভূমিক প্ৰান্তিককৰণ শ্ৰেণীসমূহৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে।
  • আপডেইট কৰা গ্ৰীড শ্ৰেণীৰ নাম আৰু এটা নতুন গ্ৰীড স্তৰ।
    • অধিক গ্ৰেনুলাৰ নিয়ন্ত্ৰণৰ বাবে তলত এটা নতুন smগ্ৰীড টায়াৰ যোগ কৰা হৈছে। 768pxআমাৰ হাতত এতিয়া xs, sm, md, lg, আৰু xl. ইয়াৰ অৰ্থ এইটোও যে প্ৰতিটো স্তৰক এটা স্তৰত বাম্প কৰা হৈছে (গতিকে .col-md-6v3 ত এতিয়া .col-lg-6v4 ত আছে)।
    • xsগ্ৰীড শ্ৰেণীসমূহক পৰিবৰ্তন কৰা হৈছে যাতে ইনফিক্সে অধিক সঠিকভাৱে প্ৰতিনিধিত্ব কৰাৰ প্ৰয়োজন নহয় যে সিহঁতে min-width: 0এটা নিৰ্ধাৰিত পিক্সেল মানত শৈলীসমূহ প্ৰয়োগ কৰিবলৈ আৰম্ভ কৰে। তাৰ পৰিৱৰ্তে .col-xs-6, এতিয়া .col-6৷ অন্য সকলো গ্ৰীড স্তৰৰ বাবে ইনফিক্সৰ প্ৰয়োজন হয় (যেনে, sm).
  • গ্ৰীড আকাৰ, মিক্সিন, আৰু চলকসমূহ আপডেইট কৰা হৈছে।
    • গ্ৰীড নালাসমূহৰ এতিয়া এটা Sass মেপ আছে যাতে আপুনি প্ৰতিটো ব্ৰেকপইন্টত নিৰ্দিষ্ট নালা প্ৰস্থ ধাৰ্য্য কৰিব পাৰে।
    • make-col-readyএটা প্ৰেপ মিক্সিন ব্যৱহাৰ কৰিবলে আৰু এটা ব্যক্তিগত স্তম্ভ আকাৰৰ বাবে আৰু make-colসংহতি কৰিবলে আপডেইট কৰা গ্ৰীড মিক্সিনসমূহ ।flexmax-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) { ... })/
    • যদি আপুনি অতিৰিক্ত, অশৈলীসমূহ প্ৰয়োগ কৰিবলে Affix ব্যৱহাৰ কৰিছিল position, পলিফিলসমূহে আপোনাৰ ব্যৱহাৰৰ ক্ষেত্ৰত সমৰ্থন নকৰিব পাৰে। এনে ব্যৱহাৰৰ বাবে এটা বিকল্প হৈছে তৃতীয়-পক্ষৰ ScrollPos-Styler লাইব্ৰেৰী।
  • পেজাৰ উপাদানটো বাদ দিলে কাৰণ ই মূলতঃ সামান্য কাষ্টমাইজড বুটাম আছিল।
  • অতি-নিৰ্দিষ্ট শিশু নিৰ্বাচকসমূহৰ পৰিবৰ্তে অধিক অ-নেষ্টেড শ্ৰেণী নিৰ্বাচকসমূহ ব্যৱহাৰ কৰিবলে প্ৰায় সকলো উপাদান পুনৰায় ফেক্টৰ কৰা হৈছে।

উপাদান অনুসৰি

এই তালিকাই v3.xx আৰু v4.0.0 ৰ মাজত উপাদান অনুসৰি চাবি পৰিবৰ্তনসমূহ আলোকপাত কৰে।

পুনৰাৰম্ভ কৰক

Bootstrap 4 ৰ বাবে নতুন হৈছে Reboot , এটা নতুন শৈলীপত্ৰিকা যি আমাৰ নিজৰ কিছু মতামতযুক্ত পুনৰায় সেট শৈলীসমূহৰ সৈতে Normalize ৰ ওপৰত নিৰ্মাণ কৰে। এই নথিপত্ৰত উপস্থিত নিৰ্বাচকসমূহে কেৱল উপাদানসমূহ ব্যৱহাৰ কৰে—ইয়াত কোনো শ্ৰেণী নাই। ই আমাৰ ৰিছেট শৈলীসমূহক আমাৰ উপাদান শৈলীসমূহৰ পৰা অধিক মডিউলাৰ পদ্ধতিৰ বাবে পৃথক কৰে। ই অন্তৰ্ভুক্ত কৰা কিছুমান গুৰুত্বপূৰ্ণ পুনৰায় সেটসমূহ হৈছে 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আৰু .infoto .table-active, .table-success, .table-warning, .table-dangerআৰু .table-info.

প্ৰপত্ৰসমূহ

  • স্থানান্তৰ কৰা উপাদান _reboot.scssনথিপত্ৰলৈ পুনৰায় সেট কৰে।
  • পুনৰ নামকৰণ .control-labelকৰা হৈছে .col-form-label.
  • পুনৰনামকৰণ কৰা হৈছে .input-lgআৰু ক্ৰমে .input-smto .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.rowvia mixin ৰ পৰা শৈলীসমূহ আৰু প্ৰয়োগ নকৰে , গতিকে .rowএতিয়া অনুভূমিক গ্ৰীড পৰিকল্পনাসমূহৰ বাবে প্ৰয়োজনীয় (যেনে, <div class="form-group row">) ।
    • s ৰ .col-form-labelসৈতে উলম্বভাৱে কেন্দ্ৰ লেবেলসমূহত নতুন শ্ৰেণী যোগ কৰা হৈছে।.form-control
    • .form-rowগ্ৰীড শ্ৰেণীসমূহৰ সৈতে কমপাক্ট ফৰ্ম পৰিকল্পনাসমূহৰ বাবে নতুন যোগ কৰা হৈছে (আপোনাৰ .rowএটা .form-rowআৰু যাওক ৰ বাবে শ্বেপ কৰক)।
  • স্বনিৰ্বাচিত প্ৰপত্ৰ সমৰ্থন যোগ কৰা হৈছে (চেকবাকচসমূহ, ৰেডিঅ'সমূহ, নিৰ্ব্বাচনসমূহ, আৰু নথিপত্ৰ ইনপুটসমূহৰ বাবে)।
  • .has-error, .has-warning, আৰু শ্ৰেণীসমূহক CSS's আৰু ছ্যুডো-শ্ৰেণীসমূহৰ .has-successযোগেদি HTML5 প্ৰপত্ৰ বৈধকৰণৰ সৈতে সলনি কৰা হৈছে।:invalid:valid
  • পুনৰ নামকৰণ .form-control-staticকৰা হৈছে .form-control-plaintext.

বুটামসমূহ

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

বুটাম গোট

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

গ্ৰীড ব্যৱস্থা

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

গোটসমূহৰ তালিকাভুক্ত কৰক

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

navbar সম্পূৰ্ণৰূপে flexbox ত পুনৰ লিখা হৈছে প্ৰান্তিককৰণ, সঁহাৰি, আৰু স্বনিৰ্বাচনৰ বাবে উন্নত সমৰ্থনৰ সৈতে।

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

পেজিনেচন

  • flexbox ৰ সৈতে উপাদান পুনৰ লিখা।
  • s ৰ বংশধৰসকলৰ ওপৰত এতিয়া স্পষ্ট শ্ৰেণী ( .page-item, )ৰ প্ৰয়োজন.page-link.pagination
  • উপাদানটো সম্পূৰ্ণৰূপে বাদ দিলে .pagerকাৰণ ই কাষ্টমাইজড আউটলাইন বুটামতকৈ অলপ বেছি আছিল।
  • s ৰ .breadcrumb-itemবংশধৰসকলৰ ওপৰত এতিয়া এটা স্পষ্ট শ্ৰেণী, ,ৰ প্ৰয়োজন.breadcrumb

লেবেল আৰু বেজ

  • একত্ৰিত কৰা .labelআৰু মৌলৰ .badgeপৰা অস্পষ্ট কৰা <label>আৰু সম্পৰ্কীয় উপাদানসমূহ সৰল কৰা।
  • .badge-pillঘূৰণীয়া “পিল” ৰূপৰ বাবে পৰিৱৰ্তক হিচাপে যোগ কৰা হৈছে।
  • তালিকা গোট আৰু অন্য উপাদানসমূহত বেজসমূহ আৰু স্বয়ংক্ৰিয়ভাৱে ভাসমান নহয়। তাৰ বাবে এতিয়া ইউটিলিটি ক্লাছৰ প্ৰয়োজন।
  • .badge-default.badge-secondaryঅন্য ঠাইত ব্যৱহৃত উপাদান পৰিবৰ্তক শ্ৰেণীসমূহৰ সৈতে মিলাবলৈ বাদ দিয়া হৈছে আৰু যোগ কৰা হৈছে।

পেনেল, থাম্বনেইল, আৰু কূপ

নতুন কাৰ্ড উপাদানৰ বাবে সম্পূৰ্ণৰূপে বাদ দিয়া হৈছে।

পেনেলসমূহ

  • .panelto .card, এতিয়া flexbox ৰ সৈতে নিৰ্মিত।
  • .panel-defaultআঁতৰোৱা হৈছে আৰু কোনো প্ৰতিস্থাপন কৰা হোৱা নাই।
  • .panel-groupআঁতৰোৱা হৈছে আৰু কোনো প্ৰতিস্থাপন কৰা হোৱা নাই। .card-groupপ্ৰতিস্থাপন নহয়, ই বেলেগ।
  • .panel-headingলৈ.card-header
  • .panel-titleto .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.
    • .item00:00:00 এতিয়া .carousel-item.
    • prev/next নিয়ন্ত্ৰণসমূহৰ বাবে, .carousel-control.rightআৰু .carousel-control.leftএতিয়া .carousel-control-nextআৰু আছে .carousel-control-prev, অৰ্থাৎ সিহতক আৰু এটা নিৰ্দিষ্ট ভিত্তি শ্ৰেণীৰ প্ৰয়োজন নাই।
  • সকলো প্ৰতিক্ৰিয়াশীল শৈলী আঁতৰোৱা হৈছে, সঁজুলিসমূহলৈ পিছুৱাই (যেনে, কিছুমান দৰ্শনপৰ্টসমূহত কেপচনসমূহ দেখুৱাই) আৰু প্ৰয়োজন অনুসৰি স্বনিৰ্বাচিত শৈলীসমূহ।
  • কেৰউজেল বস্তুসমূহত ছবিসমূহৰ বাবে প্ৰতিমুৰ্তি অভাৰৰাইড আঁতৰোৱা হৈছে, সঁজুলিসমূহলৈ পিছুৱাই।
  • নতুন মাৰ্কআপ আৰু শৈলীসমূহ অন্তৰ্ভুক্ত কৰিবলৈ Carousel উদাহৰণ টুইক কৰা হৈছে।

টেবুলসমূহ

  • শৈলীযুক্ত নেষ্টেড টেবুলসমূহৰ বাবে সমৰ্থন আঁতৰোৱা হৈছে। সকলো টেবুল শৈলী এতিয়া সৰল নিৰ্বাচকসমূহৰ বাবে v4 ত উত্তৰাধিকাৰী সূত্ৰে পোৱা যায়।
  • ওলোটা টেবুল ভেৰিয়েন্ট যোগ কৰা হৈছে।

উপযোগীতাসমূহ

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

বুটষ্ট্ৰেপ 3 ৰ বিক্ৰেতা উপসৰ্গ মিক্সিনসমূহ, যি v3.2.0 ত অবচিত আছিল, বুটষ্ট্ৰেপ 4 ত আঁতৰোৱা হৈছে। যিহেতু আমি Autoprefixer ব্যৱহাৰ কৰো , সিহত আৰু প্ৰয়োজনীয় নহয় ।

নিম্নলিখিত মিক্সিনসমূহ আঁতৰোৱা হৈছে : 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-transformtranslatetranslate3duser-select

নথিপত্ৰ

আমাৰ নথিপত্ৰই সমগ্ৰ ব’ৰ্ডতো উন্নীতকৰণ লাভ কৰিছিল। ইয়াত লো ডাউন আছে:

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

প্ৰতিক্ৰিয়াশীল উপযোগীতাসমূহ

v4.0.0 ত সকলো @screen-চলক আঁতৰোৱা হৈছে। ইয়াৰ পৰিবৰ্তে media-breakpoint-up(), media-breakpoint-down(), বা media-breakpoint-only()Sass মিক্সিন বা $grid-breakpointsSass মেপ ব্যৱহাৰ কৰক।

আমাৰ প্ৰতিক্ৰিয়াশীল উপযোগীতা শ্ৰেণীসমূহ স্পষ্ট উপযোগীতাৰ সপক্ষে বহুলাংশে আঁতৰোৱা হৈছে display।

  • আৰু শ্ৰেণীসমূহ আঁতৰোৱা হৈছে কাৰণ সিহঁতে jQuery's আৰু পদ্ধতিসমূহৰ সৈতে .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 ব্যৱহাৰ কৰিব লাগিব।