v4 এ স্থানান্তরিত হচ্ছে
বুটস্ট্র্যাপ 4 পুরো প্রকল্পের একটি প্রধান পুনর্লিখন। সর্বাধিক উল্লেখযোগ্য পরিবর্তনগুলি নীচে সংক্ষিপ্ত করা হয়েছে, তারপরে প্রাসঙ্গিক উপাদানগুলিতে আরও নির্দিষ্ট পরিবর্তনগুলি অনুসরণ করা হয়েছে৷
স্থিতিশীল পরিবর্তন
বিটা 3 থেকে আমাদের স্থিতিশীল v4.x রিলিজে চলে যাওয়ায়, কোনও ব্রেকিং পরিবর্তন নেই, তবে কিছু উল্লেখযোগ্য পরিবর্তন রয়েছে।
প্রিন্টিং
-
স্থির ভাঙ্গা মুদ্রণ ইউটিলিটি. পূর্বে, একটি
.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-text
Sass ভেরিয়েবলে একটি পরিবর্তন পেয়েছে। এটি আর একটি নেস্টেড 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-content
pointer-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: true
SCSS ভেরিয়েবলের (যেমন, ) মাধ্যমে কনফিগারযোগ্য বিকল্পগুলির সাথে পৃথক ঐচ্ছিক থিম প্রতিস্থাপন করা হয়েছে ।- গ্রান্টের পরিবর্তে এনপিএম স্ক্রিপ্টের একটি সিরিজ ব্যবহার করার জন্য বিল্ড সিস্টেম ওভারহল করা হয়েছে। সমস্ত স্ক্রিপ্টের জন্য দেখুন
package.json
, অথবা স্থানীয় উন্নয়নের প্রয়োজনের জন্য আমাদের প্রকল্পের রিডমি দেখুন। - বুটস্ট্র্যাপের অ-প্রতিক্রিয়াশীল ব্যবহার আর সমর্থিত নয়।
- আরও বিস্তৃত সেটআপ ডকুমেন্টেশন এবং কাস্টমাইজড বিল্ডের পক্ষে অনলাইন কাস্টমাইজার বাদ দেওয়া হয়েছে।
- সাধারণ CSS সম্পত্তি-মান জোড়া এবং মার্জিন/প্যাডিং স্পেসিং শর্টকাটের জন্য কয়েক ডজন নতুন ইউটিলিটি ক্লাস যুক্ত করা হয়েছে।
গ্রিড সিস্টেম
- ফ্লেক্সবক্সে সরানো হয়েছে।
- গ্রিড মিক্সিন এবং পূর্বনির্ধারিত ক্লাসে ফ্লেক্সবক্সের জন্য সমর্থন যোগ করা হয়েছে।
- ফ্লেক্সবক্সের অংশ হিসাবে, উল্লম্ব এবং অনুভূমিক প্রান্তিককরণ ক্লাসের জন্য সমর্থন অন্তর্ভুক্ত।
- গ্রিড শ্রেণীর নাম এবং একটি নতুন গ্রিড স্তর আপডেট করা হয়েছে।
- আরও দানাদার নিয়ন্ত্রণের জন্য নীচে একটি নতুন
sm
গ্রিড স্তর যুক্ত করা হয়েছে৷768px
আমাদের এখন আছেxs
,sm
,md
,lg
, এবংxl
. এর অর্থ হল প্রতিটি স্তরকে এক স্তরে বাম্প করা হয়েছে (তাই.col-md-6
v3 তে এখন.col-lg-6
v4)। 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 আইকন ফন্ট বাদ দেওয়া হয়েছে. আপনার যদি আইকনগুলির প্রয়োজন হয় তবে কিছু বিকল্প হল:
- Glyphicons এর আপস্ট্রিম সংস্করণ
- অক্টিকনস
- অসাধারন ফন্ট
- বিকল্পগুলির একটি তালিকার জন্য প্রসারিত পৃষ্ঠাটি দেখুন । অতিরিক্ত পরামর্শ আছে? একটি সমস্যা বা PR খুলুন দয়া করে.
- 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
:disabled
fieldset[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-color
s সেট করে না; পরিবর্তে তারা মূলত শুধুমাত্র প্রভাবিতcolor
.- Navbars এখন কোনো ধরনের একটি পটভূমি ঘোষণা প্রয়োজন. আমাদের ব্যাকগ্রাউন্ড ইউটিলিটি ( ) থেকে বেছে নিন অথবা পাগল কাস্টমাইজেশনের জন্য
.bg-*
উপরে আলো/বিপরীত ক্লাসের সাথে আপনার নিজের সেট করুন । - প্রদত্ত ফ্লেক্সবক্স শৈলী, navbars এখন সহজ প্রান্তিককরণ বিকল্পের জন্য flexbox ইউটিলিটি ব্যবহার করতে পারে।
.navbar-toggle
এখন.navbar-toggler
আছে এবং বিভিন্ন শৈলী এবং অভ্যন্তরীণ মার্কআপ রয়েছে (তিনটি আর নয়<span>
)।.navbar-form
ক্লাস একেবারেই বাদ দিল । এটা আর প্রয়োজন নেই; পরিবর্তে,.form-inline
প্রয়োজনে শুধু মার্জিন ইউটিলিটি ব্যবহার করুন এবং প্রয়োগ করুন।- Navbars আর অন্তর্ভুক্ত
margin-bottom
বাborder-radius
ডিফল্টরূপে নয়। প্রয়োজনে ইউটিলিটি ব্যবহার করুন। - নতুন মার্কআপ অন্তর্ভুক্ত করার জন্য নেভিবার সমন্বিত সমস্ত উদাহরণ আপডেট করা হয়েছে।
পৃষ্ঠা সংখ্যা
- ফ্লেক্সবক্সের সাথে কম্পোনেন্ট পুনরায় লিখুন।
- স্পষ্ট শ্রেণী (
.page-item
,.page-link
) এখন.pagination
s-এর বংশধরদের জন্য প্রয়োজন .pager
কাস্টমাইজড আউটলাইন বোতামের চেয়ে একটু বেশি হওয়ায় কম্পোনেন্টটিকে সম্পূর্ণভাবে বাদ দেওয়া হয়েছে ।
ব্রেডক্রাম্বস
- একটি সুস্পষ্ট শ্রেণী,
.breadcrumb-item
, এখন.breadcrumb
s-এর বংশধরদের জন্য প্রয়োজন
লেবেল এবং ব্যাজ
- একত্রীকরণ
.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-এ উত্তরাধিকারসূত্রে পাওয়া যায়।
- বিপরীত টেবিল বৈকল্পিক যোগ করা হয়েছে.
ইউটিলিটিস
- প্রদর্শন, লুকানো, এবং আরও অনেক কিছু:
- ডিসপ্লে ইউটিলিটিগুলিকে প্রতিক্রিয়াশীল করে (যেমন,
.d-none
এবংd-{sm,md,lg,xl}-none
)। .hidden-*
নতুন ডিসপ্লে ইউটিলিটিগুলির জন্য বেশিরভাগ ইউটিলিটি বাদ দেওয়া হয়েছে । উদাহরণস্বরূপ, পরিবর্তে.hidden-sm-up
, ব্যবহার করুন.d-sm-none
।.hidden-print
ডিসপ্লে ইউটিলিটি নামকরণ স্কিম ব্যবহার করার জন্য ইউটিলিটিগুলির নাম পরিবর্তন করা হয়েছে। এই পৃষ্ঠার প্রতিক্রিয়াশীল ইউটিলিটি বিভাগের অধীনে আরও তথ্য ।.float-{sm,md,lg,xl}-{left,right,none}
প্রতিক্রিয়াশীল ফ্লোটগুলির জন্য ক্লাস যোগ করা হয়েছে এবং সরিয়ে দেওয়া হয়েছে.pull-left
এবং.pull-right
যেহেতু সেগুলি অপ্রয়োজনীয়.float-left
এবং.float-right
.
- ডিসপ্লে ইউটিলিটিগুলিকে প্রতিক্রিয়াশীল করে (যেমন,
- প্রকার:
- আমাদের পাঠ্য প্রান্তিককরণ ক্লাসে প্রতিক্রিয়াশীল বৈচিত্র যুক্ত করা হয়েছে
.text-{sm,md,lg,xl}-{left,center,right}
।
- আমাদের পাঠ্য প্রান্তিককরণ ক্লাসে প্রতিক্রিয়াশীল বৈচিত্র যুক্ত করা হয়েছে
- প্রান্তিককরণ এবং ব্যবধান:
- সব দিকের জন্য নতুন প্রতিক্রিয়াশীল মার্জিন এবং প্যাডিং ইউটিলিটি যোগ করা হয়েছে, সাথে উল্লম্ব এবং অনুভূমিক শর্টহ্যান্ড।
- ফ্লেক্সবক্স ইউটিলিটিগুলির বোটলোড যোগ করা হয়েছে ।
.center-block
নতুন.mx-auto
ক্লাসের জন্য বাদ পড়েছে ।
- পুরানো ব্রাউজার সংস্করণের জন্য সমর্থন বাদ দিতে ক্লিয়ারফিক্স আপডেট করা হয়েছে।
বিক্রেতা উপসর্গ 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-breakpoints
Sass মানচিত্র ব্যবহার করুন।
আমাদের প্রতিক্রিয়াশীল ইউটিলিটি ক্লাসগুলি মূলত স্পষ্ট 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
- v3 থেকে সরানো হয়েছে:
- প্রিন্ট ইউটিলিটিগুলি আর শুরু হয় না
.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 ব্যবহার করতে হবে।