উত্তর:
2018 আপডেট করুন ...
card
প্রতিস্থাপন করেছে well
।
বুটস্ট্র্যাপ 4
<div class="card card-body bg-light">
Well
</div>
বা , দুটি ডিআইভি হিসাবে ...
<div class="card bg-light">
<div class="card-body">
...
</div>
</div>
(দ্রষ্টব্য: বুটস্ট্র্যাপ 4 আলফায় এগুলি এর card-block
পরিবর্তে card-body
এবং bg-faded
পরিবর্তে পরিচিত ছিল bg-light
)
বুটস্ট্র্যাপ থেকে সংস্করণ 4-এর কূপগুলি বাদ দেওয়া হয়েছে ।
ওয়েলসের পরিবর্তে কার্ড ব্যবহার করতে পারেন ।
নতুন কার্ড বৈশিষ্ট্য কীভাবে ব্যবহার করতে হয় তার জন্য এখানে একটি দ্রুত উদাহরণ রয়েছে:
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<div class="card-block">
<h3 class="card-title">Card Title</h3>
<p class="card-text">This text will be written on a grey background inside a Card.</p>
<a href="#" class="btn btn-primary">This is a Button</a>
</div>
</div>
এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে:
<div class="card bg-light p-3">
<p class="mb-0">Some text here</p>
</div>
কোনও উত্তরই বোতামগুলির সাথে ভালভাবে কাজ করছে বলে মনে হচ্ছে না। বুটস্ট্র্যাপ v4.1.1
<div class="card bg-light">
<div class="card-body">
<button type="submit" class="btn btn-primary">
Save
</button>
<a href="/" class="btn btn-secondary">
Cancel
</a>
</div>
</div>
নিশ্চিতভাবে আনুষ্ঠানিক সংস্করণে বলা হয়েছে যে কার্ডগুলি বুটস্ট্র্যাপ ওয়েলগুলির নতুন প্রতিস্থাপন। তবে কার্ডগুলি এখন বেশ বিস্তৃত বুটস্ট্র্যাপ উপাদান। সাধারণ কথায়, আপনি বুটস্ট্র্যাপ জুম্বট্রনও ব্যবহার করতে পারেন ।
আমি ক্লাস সতর্কতার জন্য আমার ক্লাসগুলি ভালভাবে সংযুক্ত করছি, আমার কাছে দেখে মনে হচ্ছে এটি দুর্দান্ত হচ্ছে, তবে প্রস্থকে ১০০% রাখার জন্য কিছুটা টুইটের প্রয়োজন হয়
<div class="alert alert-light" style="width:100%;">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
কার্ডটি "ফেলে দেওয়া" বলে মনে হচ্ছে, বুটস্ট্র্যাপ ৪.৩.১ এবং জিকুয়েরি v3.4.1 এর সাথে "ভাল" কাজ করছে না, বুটস্ট্র্যাপ ৪.৩.১ এবং জিকুয়েরি v3.3.1 দিয়ে ঠিক কাজ করছি । আশা করি এটা সাহায্য করবে.
একটি লাইনের বিকল্পের সন্ধান করা:
<div class="jumbotron bg-dark"> got a team? </div>
well
নতুন কার্ড উপাদানটির জন্য পুরোপুরি বাদ দেওয়া হয়েছে। v4-alpha.getbootstrap.com/migration