উপাদান
আইকনোগ্রাফি, ড্রপডাউন, ইনপুট গ্রুপ, নেভিগেশন, সতর্কতা এবং আরও অনেক কিছু প্রদানের জন্য তৈরি এক ডজনেরও বেশি পুনঃব্যবহারযোগ্য উপাদান।
আইকনোগ্রাফি, ড্রপডাউন, ইনপুট গ্রুপ, নেভিগেশন, সতর্কতা এবং আরও অনেক কিছু প্রদানের জন্য তৈরি এক ডজনেরও বেশি পুনঃব্যবহারযোগ্য উপাদান।
Glyphicon Halflings সেট থেকে ফন্ট বিন্যাসে 250 টিরও বেশি গ্লিফ অন্তর্ভুক্ত করে। Glyphicons Halflings সাধারণত বিনামূল্যে পাওয়া যায় না, কিন্তু তাদের স্রষ্টা তাদের বিনামূল্যে বুটস্ট্র্যাপের জন্য উপলব্ধ করেছেন। আপনাকে ধন্যবাদ হিসাবে, আমরা শুধুমাত্র যখনই সম্ভব Glyphicons-এ একটি লিঙ্ক অন্তর্ভুক্ত করার জন্য অনুরোধ করছি ।
পারফরম্যান্সের কারণে, সমস্ত আইকনের একটি বেস ক্লাস এবং পৃথক আইকন ক্লাস প্রয়োজন। ব্যবহার করতে, নিচের কোডটি প্রায় যেকোনো জায়গায় রাখুন। সঠিক প্যাডিংয়ের জন্য আইকন এবং পাঠ্যের মধ্যে একটি স্থান ছেড়ে দিতে ভুলবেন না।
আইকন ক্লাস সরাসরি অন্যান্য উপাদানের সাথে একত্রিত করা যাবে না। এগুলি একই উপাদানে অন্যান্য শ্রেণীর সাথে ব্যবহার করা উচিত নয়। পরিবর্তে, একটি নেস্টেড যোগ করুন <span>
এবং আইকন ক্লাসগুলি প্রয়োগ করুন <span>
।
আইকন ক্লাসগুলি শুধুমাত্র এমন উপাদানগুলিতে ব্যবহার করা উচিত যাতে কোনও পাঠ্য সামগ্রী নেই এবং কোনও শিশু উপাদান নেই৷
../fonts/
বুটস্ট্র্যাপ অনুমান করে যে আইকন ফন্ট ফাইলগুলি কম্পাইল করা CSS ফাইলগুলির সাথে সম্পর্কিত ডিরেক্টরিতে অবস্থিত হবে । এই ফন্ট ফাইলগুলি সরানো বা পুনঃনামকরণের অর্থ হল তিনটি উপায়ের একটিতে CSS আপডেট করা:
@icon-font-path
এবং/অথবা ভেরিয়েবল পরিবর্তন করুন ।@icon-font-name
url()
কম্পাইল করা CSS এ পাথ পরিবর্তন করুন ।আপনার নির্দিষ্ট ডেভেলপমেন্ট সেটআপের জন্য সবচেয়ে উপযুক্ত যে কোন বিকল্প ব্যবহার করুন।
সহায়ক প্রযুক্তির আধুনিক সংস্করণগুলি CSS উৎপন্ন সামগ্রীর পাশাপাশি নির্দিষ্ট ইউনিকোড অক্ষর ঘোষণা করবে। স্ক্রীন রিডারগুলিতে অনাকাঙ্ক্ষিত এবং বিভ্রান্তিকর আউটপুট এড়াতে (বিশেষ করে যখন আইকনগুলি সম্পূর্ণরূপে সাজসজ্জার জন্য ব্যবহার করা হয়), আমরা এগুলিকে aria-hidden="true"
বৈশিষ্ট্য দিয়ে লুকিয়ে রাখি।
আপনি যদি অর্থ বোঝাতে একটি আইকন ব্যবহার করেন (শুধুমাত্র একটি আলংকারিক উপাদান হিসাবে নয়), নিশ্চিত করুন যে এই অর্থটি সহায়ক প্রযুক্তিতেও জানানো হয়েছে – উদাহরণস্বরূপ, .sr-only
ক্লাসের সাথে দৃশ্যত লুকানো অতিরিক্ত সামগ্রী অন্তর্ভুক্ত করুন।
আপনি যদি অন্য কোন পাঠ্য ছাড়াই নিয়ন্ত্রণ তৈরি করেন (যেমন <button>
শুধুমাত্র একটি আইকন থাকে), তাহলে নিয়ন্ত্রণের উদ্দেশ্য সনাক্ত করার জন্য আপনাকে সর্বদা বিকল্প সামগ্রী প্রদান করা উচিত, যাতে এটি সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে উপলব্ধি করতে পারে। এই ক্ষেত্রে, আপনি aria-label
নিয়ন্ত্রণ নিজেই একটি বৈশিষ্ট্য যোগ করতে পারেন.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
একটি টুলবার, নেভিগেশন, বা প্রিপেন্ড করা ফর্ম ইনপুটগুলির জন্য বোতাম, বোতাম গ্রুপগুলিতে এগুলি ব্যবহার করুন।
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে এই ইঙ্গিতটি জানাতে অতিরিক্ত পাঠ্য সহ এটি একটি ত্রুটি বার্তা বোঝাতে একটি সতর্কতায় ব্যবহৃত একটি আইকন ৷.sr-only
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
লিঙ্কের তালিকা প্রদর্শনের জন্য টগলযোগ্য, প্রাসঙ্গিক মেনু। ড্রপডাউন জাভাস্ক্রিপ্ট প্লাগইন দিয়ে ইন্টারেক্টিভ তৈরি করা হয়েছে ।
ড্রপডাউনের ট্রিগার এবং ড্রপডাউন মেনুর মধ্যে মোড়ানো .dropdown
, বা অন্য একটি উপাদান যা ঘোষণা করে position: relative;
। তারপর মেনুর HTML যোগ করুন।
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropup
ড্রপডাউন মেনুগুলিকে প্যারেন্টে যোগ করে উপরের দিকে প্রসারিত করতে পরিবর্তন করা যেতে পারে (নীচের পরিবর্তে) ।
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ডিফল্টরূপে, একটি ড্রপডাউন মেনু স্বয়ংক্রিয়ভাবে 100% উপরে থেকে এবং তার পিতামাতার বাম পাশে অবস্থান করে। ড্রপডাউন মেনুটি ডানদিকে সারিবদ্ধ করুন এ যোগ করুন .dropdown-menu-right
।.dropdown-menu
ড্রপডাউনগুলি স্বয়ংক্রিয়ভাবে নথির স্বাভাবিক প্রবাহের মধ্যে CSS এর মাধ্যমে অবস্থান করে। এর মানে হল ড্রপডাউনগুলি নির্দিষ্ট বৈশিষ্ট্য সহ অভিভাবকদের দ্বারা ক্রপ করা হতে পারে overflow
বা ভিউপোর্টের সীমার বাইরে প্রদর্শিত হতে পারে৷ আপনার নিজের থেকে এই সমস্যাগুলি যেমন তারা উদ্ভূত হয় তা সমাধান করুন।
.pull-right
প্রান্তিককরণv3.1.0 অনুযায়ী, আমরা .pull-right
ড্রপডাউন মেনুতে অবমূল্যায়ন করেছি। একটি মেনু ডান-সারিবদ্ধ করতে, ব্যবহার করুন .dropdown-menu-right
। ন্যাভবারে ডান-সারিবদ্ধ ন্যাভি উপাদানগুলি মেনুটিকে স্বয়ংক্রিয়ভাবে সারিবদ্ধ করতে এই শ্রেণীর একটি মিক্সিন সংস্করণ ব্যবহার করে। এটি ওভাররাইড করতে, ব্যবহার করুন .dropdown-menu-left
।
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
যেকোন ড্রপডাউন মেনুতে কর্মের লেবেল বিভাগের জন্য একটি শিরোনাম যোগ করুন।
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
একটি ড্রপডাউন মেনুতে লিঙ্কগুলির পৃথক সিরিজে একটি বিভাজক যোগ করুন।
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
লিঙ্কটি নিষ্ক্রিয় করতে ড্রপডাউনে .disabled
একটি যোগ করুন।<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
বোতাম গোষ্ঠীর সাথে একক লাইনে একসাথে বোতামগুলির একটি সিরিজ গ্রুপ করুন। আমাদের বোতাম প্লাগইনের সাথে ঐচ্ছিক জাভাস্ক্রিপ্ট রেডিও এবং চেকবক্স শৈলী আচরণ যোগ করুন ।
একটি এর মধ্যে থাকা উপাদানগুলিতে টুলটিপ বা পপওভার ব্যবহার করার .btn-group
সময়, আপনাকে অবাঞ্ছিত পার্শ্বপ্রতিক্রিয়াগুলি এড়াতে বিকল্পটি নির্দিষ্ট করতে হবে container: 'body'
(যেমন উপাদানটি আরও প্রশস্ত হওয়া এবং/অথবা টুলটিপ বা পপওভার ট্রিগার করা হলে তার গোলাকার কোণগুলি হারানো)।
role
এবং একটি লেবেল প্রদান নিশ্চিত করুনসহায়ক প্রযুক্তির জন্য - যেমন স্ক্রিন রিডার - বোঝাতে যে বোতামগুলির একটি সিরিজ গ্রুপ করা হয়েছে, একটি উপযুক্ত role
বৈশিষ্ট্য প্রদান করা প্রয়োজন। বোতাম গ্রুপের জন্য, এটি হবে role="group"
, যখন টুলবারে একটি থাকা উচিত role="toolbar"
।
একটি ব্যতিক্রম হল এমন গোষ্ঠী যেখানে শুধুমাত্র একটি একক নিয়ন্ত্রণ থাকে (উদাহরণস্বরূপ উপাদান সহ ন্যায্য বোতাম গ্রুপ<button>
) বা একটি ড্রপডাউন।
উপরন্তু, গ্রুপ এবং টুলবারগুলিকে একটি সুস্পষ্ট লেবেল দেওয়া উচিত, কারণ বেশিরভাগ সহায়ক প্রযুক্তি অন্যথায় সঠিক role
বৈশিষ্ট্য থাকা সত্ত্বেও তাদের ঘোষণা করবে না। এখানে প্রদত্ত উদাহরণগুলিতে, আমরা ব্যবহার করি aria-label
, কিন্তু বিকল্পগুলি যেমন aria-labelledby
ব্যবহার করা যেতে পারে।
.btn
সঙ্গে বোতাম একটি সিরিজ মোড়ানো .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
আরো জটিল উপাদানের জন্য <div class="btn-group">
a এর সেটগুলিকে একত্রিত করুন।<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
একটি গ্রুপের প্রতিটি বোতামে বোতাম সাইজিং ক্লাস প্রয়োগ করার পরিবর্তে, একাধিক গ্রুপ নেস্ট করার সময় সহ .btn-group-*
প্রতিটিতে যোগ করুন।.btn-group
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
আপনি যখন বোতামগুলির একটি সিরিজের সাথে মিশ্রিত ড্রপডাউন মেনু চান তখন .btn-group
অন্যটির মধ্যে একটি রাখুন ।.btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
বোতামগুলির একটি সেট অনুভূমিকভাবে না করে উল্লম্বভাবে স্ট্যাক করা প্রদর্শিত করুন। স্প্লিট বোতাম ড্রপডাউন এখানে সমর্থিত নয়।
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
এর প্যারেন্টের পুরো প্রস্থকে বিস্তৃত করার জন্য বোতামগুলির একটি গ্রুপ সমান আকারে প্রসারিত করুন। বোতাম গ্রুপের মধ্যে বোতাম ড্রপডাউনগুলির সাথেও কাজ করে।
বোতামগুলিকে ন্যায্যতা দেওয়ার জন্য ব্যবহৃত নির্দিষ্ট HTML এবং CSS এর কারণে (যেমন display: table-cell
), তাদের মধ্যে সীমানা দ্বিগুণ হয়। নিয়মিত বোতাম গোষ্ঠীতে, margin-left: -1px
সীমানাগুলি সরানোর পরিবর্তে স্ট্যাক করতে ব্যবহৃত হয়। যাইহোক, margin
এর সাথে কাজ করে না display: table-cell
। ফলস্বরূপ, বুটস্ট্র্যাপে আপনার কাস্টমাইজেশনের উপর নির্ভর করে, আপনি সীমানা অপসারণ বা পুনরায় রঙ করতে চাইতে পারেন।
ইন্টারনেট এক্সপ্লোরার 8 একটি ন্যায্য বোতাম গ্রুপে বোতামগুলিতে সীমানা রেন্ডার করে না, তা চালু হোক <a>
বা <button>
উপাদান। এটি কাছাকাছি পেতে, প্রতিটি বোতাম অন্য একটি মধ্যে মোড়ানো .btn-group
.
আরও তথ্যের জন্য #12476 দেখুন ।
<a>
উপাদান সঙ্গেশুধু .btn
s এর একটি সিরিজ মোড়ানো .btn-group.btn-group-justified
।
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
যদি <a>
উপাদানগুলি বোতাম হিসাবে কাজ করতে ব্যবহৃত হয় - বর্তমান পৃষ্ঠার মধ্যে অন্য নথি বা বিভাগে নেভিগেট করার পরিবর্তে - ইন-পেজ কার্যকারিতা ট্রিগার করে - তাদেরও একটি উপযুক্ত দেওয়া উচিত role="button"
।
<button>
উপাদান সঙ্গে<button>
উপাদানগুলির সাথে ন্যায্য বোতাম গোষ্ঠীগুলি ব্যবহার করতে , আপনাকে অবশ্যই প্রতিটি বোতামকে একটি বোতাম গ্রুপে মোড়ানো উচিত । বেশিরভাগ ব্রাউজার উপাদানগুলির ন্যায্যতার জন্য আমাদের CSS সঠিকভাবে প্রয়োগ করে না <button>
, কিন্তু যেহেতু আমরা বোতাম ড্রপডাউন সমর্থন করি, তাই আমরা এটিকে ঘিরে কাজ করতে পারি।
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
একটি ড্রপডাউন মেনু ট্রিগার করার জন্য যেকোন বোতামটি একটি এর মধ্যে রেখে .btn-group
এবং সঠিক মেনু মার্কআপ প্রদান করে ব্যবহার করুন।
বোতাম ড্রপডাউনগুলির জন্য আপনার বুটস্ট্র্যাপের সংস্করণে ড্রপডাউন প্লাগইন অন্তর্ভুক্ত করা প্রয়োজন।
কিছু মৌলিক মার্কআপ পরিবর্তনের সাথে একটি বোতামকে ড্রপডাউন টগলে পরিণত করুন।
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
একইভাবে, একই মার্কআপ পরিবর্তন সহ স্প্লিট বোতাম ড্রপডাউন তৈরি করুন, শুধুমাত্র একটি পৃথক বোতাম দিয়ে।
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
বোতাম ড্রপডাউনগুলি সমস্ত আকারের বোতামগুলির সাথে কাজ করে৷
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
.dropup
অভিভাবক যোগ করে উপাদানের উপরে ড্রপডাউন মেনু ট্রিগার করুন।
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
যেকোনো টেক্সট-ভিত্তিক এর আগে, পরে বা উভয় পাশে টেক্সট বা বোতাম যোগ করে ফর্ম নিয়ন্ত্রণ প্রসারিত করুন <input>
। .input-group
একটির সাথে ব্যবহার করুন .input-group-addon
বা .input-group-btn
একটি একক উপাদানের সাথে প্রিপেন্ড বা যুক্ত করুন .form-control
।
<input>
এস শুধুমাত্র<select>
এখানে উপাদানগুলি ব্যবহার করা এড়িয়ে চলুন কারণ সেগুলি ওয়েবকিট ব্রাউজারগুলিতে সম্পূর্ণরূপে স্টাইল করা যায় না৷
<textarea>
এখানে উপাদানগুলি ব্যবহার করা এড়িয়ে চলুন rows
কারণ কিছু ক্ষেত্রে তাদের বৈশিষ্ট্যকে সম্মান করা হবে না।
একটি এর মধ্যে থাকা উপাদানগুলিতে টুলটিপ বা পপওভার ব্যবহার করার .input-group
সময়, আপনাকে অবাঞ্ছিত পার্শ্বপ্রতিক্রিয়াগুলি এড়াতে বিকল্পটি নির্দিষ্ট করতে হবে container: 'body'
(যেমন উপাদানটি আরও প্রশস্ত হওয়া এবং/অথবা টুলটিপ বা পপওভার ট্রিগার করা হলে তার গোলাকার কোণগুলি হারানো)।
ফর্ম গ্রুপ বা গ্রিড কলাম ক্লাস সরাসরি ইনপুট গ্রুপের সাথে মিশ্রিত করবেন না। পরিবর্তে, ফর্ম গ্রুপ বা গ্রিড-সম্পর্কিত উপাদানের ভিতরে ইনপুট গ্রুপটি নেস্ট করুন।
আপনি প্রতিটি ইনপুটের জন্য একটি লেবেল অন্তর্ভুক্ত না করলে স্ক্রীন রিডারদের আপনার ফর্মগুলির সাথে সমস্যা হবে৷ এই ইনপুট গোষ্ঠীগুলির জন্য, নিশ্চিত করুন যে কোনও অতিরিক্ত লেবেল বা কার্যকারিতা সহায়ক প্রযুক্তিগুলিতে পৌঁছে দেওয়া হয়েছে।
সঠিক কৌশলটি ব্যবহার করা হবে (দৃশ্যমান <label>
উপাদান, ক্লাস <label>
ব্যবহার করে লুকানো উপাদান , বা , , বা বৈশিষ্ট্যের ব্যবহার ) এবং কী অতিরিক্ত তথ্য জানাতে হবে তা আপনি যে ইন্টারফেস উইজেট প্রয়োগ করছেন তার উপর নির্ভর করে পরিবর্তিত হবে। এই বিভাগের উদাহরণগুলি কয়েকটি প্রস্তাবিত, কেস-নির্দিষ্ট পন্থা প্রদান করে।.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
একটি ইনপুটের উভয় পাশে একটি অ্যাড-অন বা বোতাম রাখুন। আপনি একটি ইনপুটের উভয় পাশে একটি স্থাপন করতে পারেন।
আমরা একক দিকে একাধিক অ্যাড-অন ( .input-group-addon
বা ) সমর্থন করি না।.input-group-btn
আমরা একক ইনপুট গ্রুপে একাধিক ফর্ম-নিয়ন্ত্রণ সমর্থন করি না।
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
আপেক্ষিক ফর্ম সাইজিং ক্লাসগুলি .input-group
নিজেই যোগ করুন এবং এর মধ্যে থাকা বিষয়বস্তুগুলি স্বয়ংক্রিয়ভাবে আকার পরিবর্তন করবে - প্রতিটি উপাদানে ফর্ম নিয়ন্ত্রণ আকারের ক্লাসগুলি পুনরাবৃত্তি করার প্রয়োজন নেই৷
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
পাঠ্যের পরিবর্তে একটি ইনপুট গ্রুপের অ্যাডঅনের মধ্যে যেকোনো চেকবক্স বা রেডিও বিকল্প রাখুন।
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
ইনপুট গোষ্ঠীর বোতামগুলি কিছুটা আলাদা এবং এর জন্য একটি অতিরিক্ত স্তরের নেস্টিং প্রয়োজন৷ এর পরিবর্তে , আপনাকে বোতামগুলি মোড়ানোর .input-group-addon
জন্য ব্যবহার করতে হবে । .input-group-btn
ডিফল্ট ব্রাউজার শৈলীর কারণে এটি প্রয়োজন যা ওভাররাইড করা যাবে না।
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
যদিও আপনার প্রতি পাশে শুধুমাত্র একটি অ্যাড-অন থাকতে পারে, তবে একটির ভিতরে একাধিক বোতাম থাকতে পারে .input-group-btn
।
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
বুটস্ট্র্যাপে উপলব্ধ Navs শেয়ার্ড মার্কআপ, বেস .nav
ক্লাস থেকে শুরু করে, সেইসাথে শেয়ার্ড স্টেট। প্রতিটি শৈলীর মধ্যে স্যুইচ করতে মডিফায়ার ক্লাস অদলবদল করুন।
নোট করুন .nav-tabs
ক্লাসের জন্য .nav
বেস ক্লাস প্রয়োজন।
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
একই HTML নিন, কিন্তু .nav-pills
পরিবর্তে ব্যবহার করুন:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
বড়িগুলিও উল্লম্বভাবে স্ট্যাকযোগ্য। শুধু যোগ করুন .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
এর সাথে 768px এর চেয়ে চওড়া স্ক্রীনে সহজেই ট্যাব বা বড়িগুলি তাদের অভিভাবকের সমান প্রস্থের তৈরি করুন .nav-justified
৷ ছোট স্ক্রিনে, নেভি লিঙ্কগুলি স্ট্যাক করা হয়।
ন্যায়সঙ্গত নেভিবার নেভি লিঙ্কগুলি বর্তমানে সমর্থিত নয়৷
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
যেকোন নেভি কম্পোনেন্টের জন্য (ট্যাব বা বড়ি), ধূসর লিঙ্কের .disabled
জন্য যোগ করুন এবং কোনো হোভার ইফেক্ট নেই ।
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
একটু অতিরিক্ত HTML এবং ড্রপডাউন জাভাস্ক্রিপ্ট প্লাগইন সহ ড্রপডাউন মেনু যোগ করুন ।
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navbars হল প্রতিক্রিয়াশীল মেটা উপাদান যা আপনার অ্যাপ্লিকেশন বা সাইটের নেভিগেশন হেডার হিসেবে কাজ করে। মোবাইল ভিউতে এগুলি সঙ্কুচিত হতে শুরু করে (এবং টগলযোগ্য) এবং উপলব্ধ ভিউপোর্টের প্রস্থ বৃদ্ধির সাথে সাথে অনুভূমিক হয়ে যায়।
ন্যায়সঙ্গত নেভিবার নেভি লিঙ্কগুলি বর্তমানে সমর্থিত নয়৷
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
একটি এর জন্য টেক্সট অদলবদল করে আপনার নিজের ইমেজ দিয়ে navbar ব্র্যান্ডটি প্রতিস্থাপন করুন <img>
। যেহেতু .navbar-brand
এর নিজস্ব প্যাডিং এবং উচ্চতা রয়েছে, তাই আপনাকে আপনার ছবির উপর নির্ভর করে কিছু CSS ওভাররাইড করতে হতে পারে।
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
.navbar-form
সংকীর্ণ ভিউপোর্টে যথাযথ উল্লম্ব সারিবদ্ধকরণ এবং ভেঙে পড়া আচরণের জন্য ফর্মের সামগ্রী রাখুন । এটি navbar বিষয়বস্তুর মধ্যে কোথায় থাকে তা নির্ধারণ করতে প্রান্তিককরণ বিকল্পগুলি ব্যবহার করুন৷
হেড আপ হিসাবে, মিক্সিনের মাধ্যমে .navbar-form
এর বেশিরভাগ কোড শেয়ার করে । কিছু ফর্ম কন্ট্রোল, যেমন ইনপুট গ্রুপ, একটি নেভিবারে সঠিকভাবে দেখানোর জন্য নির্দিষ্ট প্রস্থের প্রয়োজন হতে পারে।.form-inline
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
ন্যাভবারে উল্লম্বভাবে কেন্দ্রীভূত করতে a-তে না থাকা উপাদানগুলিতে .navbar-btn
ক্লাস যুক্ত করুন ।<button>
<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
সঠিক অগ্রণী এবং রঙের জন্য .navbar-text
সাধারণত একটি ট্যাগের সাথে একটি উপাদানে পাঠ্যের স্ট্রিংগুলি মোড়ানো ।<p>
<p class="navbar-text">Signed in as Mark Otto</p>
সাধারণ ন্যাভিবার নেভিগেশন কম্পোনেন্টের মধ্যে নয় এমন স্ট্যান্ডার্ড লিঙ্কগুলি ব্যবহার করার .navbar-link
জন্য, ডিফল্ট এবং ইনভার্স নেভিগেশন বিকল্পগুলির জন্য সঠিক রং যোগ করতে ক্লাসটি ব্যবহার করুন।
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
.navbar-left
বা .navbar-right
ইউটিলিটি ক্লাস ব্যবহার করে নেভি লিঙ্ক, ফর্ম, বোতাম বা পাঠ্য সারিবদ্ধ করুন । উভয় ক্লাসই নির্দিষ্ট দিক দিয়ে একটি CSS ফ্লোট যোগ করবে। উদাহরণস্বরূপ, নেভি লিঙ্কগুলিকে সারিবদ্ধ করতে, সেগুলিকে <ul>
সংশ্লিষ্ট ইউটিলিটি ক্লাস প্রয়োগের সাথে আলাদা করে রাখুন।
এই ক্লাসগুলি এবং এর মিক্সিন-এড সংস্করণ , কিন্তু .pull-left
ডিভাইসের .pull-right
আকার জুড়ে নেভিবার উপাদানগুলির সহজে পরিচালনা করার জন্য এগুলি মিডিয়া কোয়েরির সুযোগ রয়েছে৷
একটি বা কেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করুন .navbar-fixed-top
এবং অন্তর্ভুক্ত করুন।.container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
একটি বা কেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করুন .navbar-fixed-bottom
এবং অন্তর্ভুক্ত করুন।.container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
একটি পূর্ণ-প্রস্থ ন্যাভিবার তৈরি করুন যা .navbar-static-top
একটি .container
বা .container-fluid
কেন্দ্রে এবং প্যাড নেভিবার সামগ্রী যোগ করে পৃষ্ঠার সাথে স্ক্রোল করে।
ক্লাসের বিপরীতে .navbar-fixed-*
, আপনাকে কোনো প্যাডিং পরিবর্তন করতে হবে না body
।
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
যোগ করে নববারের চেহারা পরিবর্তন করুন .navbar-inverse
।
<nav class="navbar navbar-inverse">
...
</nav>
একটি নেভিগেশনাল অনুক্রমের মধ্যে বর্তমান পৃষ্ঠার অবস্থান নির্দেশ করুন৷
বিভাজক স্বয়ংক্রিয়ভাবে CSS-এ :before
এবং এর মাধ্যমে যুক্ত হয় content
।
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
মাল্টি-পেজ পেজিনেশন কম্পোনেন্ট বা সহজ পেজার বিকল্প সহ আপনার সাইট বা অ্যাপের জন্য পেজিনেশন লিঙ্ক প্রদান করুন ।
Rdio দ্বারা অনুপ্রাণিত সহজ পৃষ্ঠা সংখ্যা, অ্যাপ এবং অনুসন্ধান ফলাফলের জন্য দুর্দান্ত। বড় ব্লক মিস করা কঠিন, সহজেই মাপযোগ্য, এবং বড় ক্লিক এলাকা প্রদান করে।
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
স্ক্রীন রিডার এবং অন্যান্য সহায়ক প্রযুক্তির জন্য একটি নেভিগেশন বিভাগ হিসাবে চিহ্নিত করার জন্য পেজিনেশন উপাদানটিকে একটি উপাদানে মোড়ানো উচিত । উপরন্তু, যেহেতু একটি পৃষ্ঠায় ইতিমধ্যেই এমন একাধিক নেভিগেশন সেকশন থাকতে পারে (যেমন হেডারে প্রাথমিক ন্যাভিগেশন, বা সাইডবার নেভিগেশন), এটির উদ্দেশ্য প্রতিফলিত করে এমন aria-label
একটি বর্ণনামূলক প্রদান করা বাঞ্ছনীয়। <nav>
উদাহরণস্বরূপ, সার্চ ফলাফলের একটি সেটের মধ্যে নেভিগেট করার জন্য যদি পেজিনেশন উপাদান ব্যবহার করা হয়, তাহলে একটি উপযুক্ত লেবেল হতে পারে aria-label="Search results pages"
।
লিঙ্কগুলি বিভিন্ন পরিস্থিতিতে কাস্টমাইজযোগ্য। আনক্লিকযোগ্য .disabled
লিঙ্কগুলির জন্য এবং .active
বর্তমান পৃষ্ঠাটি নির্দেশ করতে ব্যবহার করুন।
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
আমরা সুপারিশ করছি যে আপনি সক্রিয় বা অক্ষম অ্যাঙ্করগুলিকে অদলবদল করুন <span>
, অথবা পূর্ববর্তী/পরবর্তী তীরগুলির ক্ষেত্রে অ্যাঙ্করটি বাদ দিন, উদ্দেশ্যযুক্ত শৈলীগুলি বজায় রেখে ক্লিক কার্যকারিতা অপসারণ করতে৷
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
বৃহত্তর বা ছোট পৃষ্ঠা সংখ্যা অভিনব? যোগ করুন .pagination-lg
বা .pagination-sm
অতিরিক্ত মাপের জন্য.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
হালকা মার্কআপ এবং শৈলী সহ সহজ পৃষ্ঠা সংখ্যা বাস্তবায়নের জন্য দ্রুত পূর্ববর্তী এবং পরবর্তী লিঙ্ক। এটি ব্লগ বা ম্যাগাজিনের মতো সাধারণ সাইটের জন্য দুর্দান্ত৷
ডিফল্টরূপে, পেজার লিঙ্কগুলিকে কেন্দ্র করে।
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
বিকল্পভাবে, আপনি পাশের প্রতিটি লিঙ্ক সারিবদ্ধ করতে পারেন:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
পেজার লিঙ্কগুলিও পেজিনেশন .disabled
থেকে সাধারণ ইউটিলিটি ক্লাস ব্যবহার করে।
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
একটি লেবেলের চেহারা পরিবর্তন করতে নীচের উল্লিখিত সংশোধক শ্রেণীগুলির মধ্যে যেকোনো একটি যোগ করুন।
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
রেন্ডারিং সমস্যা দেখা দিতে পারে যখন আপনার একটি সংকীর্ণ পাত্রের মধ্যে কয়েক ডজন ইনলাইন লেবেল থাকে, যার প্রতিটিতে নিজস্ব inline-block
উপাদান থাকে (একটি আইকনের মতো)। এই চারপাশে পথ সেটিং হয় display: inline-block;
. প্রসঙ্গ এবং একটি উদাহরণের জন্য, #13219 দেখুন ।
<span class="badge">
লিঙ্ক, বুটস্ট্র্যাপ নেভিস এবং আরও অনেক কিছুতে যোগ করে সহজেই নতুন বা অপঠিত আইটেম হাইলাইট করুন।
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
যখন কোনও নতুন বা অপঠিত আইটেম না থাকে, তখন ব্যাজগুলি কেবল ধসে পড়বে (সিএসএস :empty
নির্বাচকের মাধ্যমে) যদি এর মধ্যে কোনও সামগ্রী বিদ্যমান না থাকে।
ইন্টারনেট এক্সপ্লোরার 8-এ ব্যাজগুলি স্বতঃস্ফূর্ত হবে না কারণ এতে :empty
নির্বাচকের সমর্থনের অভাব রয়েছে।
পিল নেভিগেশনে সক্রিয় অবস্থায় ব্যাজ রাখার জন্য অন্তর্নির্মিত শৈলী অন্তর্ভুক্ত করা হয়েছে।
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
একটি হালকা ওজনের, নমনীয় উপাদান যা ঐচ্ছিকভাবে আপনার সাইটে মূল বিষয়বস্তু প্রদর্শনের জন্য সমগ্র ভিউপোর্টকে প্রসারিত করতে পারে।
এটি একটি সাধারণ নায়ক ইউনিট, বৈশিষ্ট্যযুক্ত বিষয়বস্তু বা তথ্যের প্রতি অতিরিক্ত মনোযোগ দেওয়ার জন্য একটি সাধারণ জাম্বোট্রন-স্টাইলের উপাদান।
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
জাম্বোট্রনকে পূর্ণ প্রস্থ করতে, এবং গোলাকার কোণ ছাড়াই, এটিকে সমস্ত .container
s-এর বাইরে রাখুন এবং পরিবর্তে একটি .container
ভিতরে যোগ করুন।
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
একটি পৃষ্ঠার বিষয়বস্তুর যথাযথভাবে স্থান বের করতে এবং সেগমেন্ট করার জন্য একটি সাধারণ শেল । এটি h1
এর ডিফল্ট small
উপাদান, সেইসাথে অন্যান্য উপাদান (অতিরিক্ত শৈলী সহ) ব্যবহার করতে পারে।
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
বুটস্ট্র্যাপের গ্রিড সিস্টেমকে থাম্বনেইল কম্পোনেন্ট সহ প্রসারিত করুন সহজেই ইমেজ, ভিডিও, টেক্সট এবং আরও অনেক কিছুর গ্রিড প্রদর্শন করতে।
আপনি যদি বিভিন্ন উচ্চতা এবং/অথবা প্রস্থের থাম্বনেইলের Pinterest-এর মতো উপস্থাপনা খুঁজছেন, তাহলে আপনাকে একটি তৃতীয় পক্ষের প্লাগইন ব্যবহার করতে হবে যেমন ম্যাসনরি , আইসোটোপ , বা সালভাটোর ৷
ডিফল্টরূপে, বুটস্ট্র্যাপের থাম্বনেইলগুলি ন্যূনতম প্রয়োজনীয় মার্কআপ সহ লিঙ্কযুক্ত চিত্রগুলি প্রদর্শন করার জন্য ডিজাইন করা হয়েছে।
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
একটু অতিরিক্ত মার্কআপের সাহায্যে, থাম্বনেইলে শিরোনাম, অনুচ্ছেদ বা বোতামের মতো যেকোনো ধরনের HTML সামগ্রী যোগ করা সম্ভব।
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
মুষ্টিমেয় ��পলব্ধ এবং নমনীয় সতর্কতা বার্তা সহ সাধারণ ব্যবহারকারীর ক্রিয়াকলাপের জন্য প্রাসঙ্গিক প্রতিক্রিয়া বার্তা প্রদান করুন।
মৌলিক সতর্কতা বার্তাগুলির জন্য যেকোন পাঠ্য এবং একটি ঐচ্ছিক খারিজ বোতাম এবং .alert
চারটি প্রাসঙ্গিক ক্লাসের মধ্যে একটি (যেমন, ) মোড়ানো।.alert-success
সতর্কতার ডিফল্ট ক্লাস নেই, শুধুমাত্র বেস এবং মডিফায়ার ক্লাস। একটি ডিফল্ট ধূসর সতর্কতা খুব বেশি অর্থবোধ করে না, তাই আপনাকে প্রাসঙ্গিক ক্লাসের মাধ্যমে একটি প্রকার নির্দিষ্ট করতে হবে। সাফল্য, তথ্য, সতর্কতা বা বিপদ থেকে বেছে নিন।
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
একটি ঐচ্ছিক .alert-dismissible
এবং বন্ধ বোতাম যোগ করে যেকোনো সতর্কতা তৈরি করুন।
সম্পূর্ণরূপে কাজ করার জন্য, বাতিলযোগ্য সতর্কতা, আপনাকে অবশ্যই সতর্কতা JavaScript প্লাগইন ব্যবহার করতে হবে ।
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
ডেটা অ্যাট্রিবিউট <button>
সহ উপাদানটি ব্যবহার করতে ভুলবেন না ।data-dismiss="alert"
.alert-link
যেকোনো সতর্কতার মধ্যে দ্রুত মিলিত রঙিন লিঙ্কগুলি প্রদান করতে ইউটিলিটি ক্লাস ব্যবহার করুন ।
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
সহজ কিন্তু নমনীয় অগ্রগতি বার সহ একটি কর্মপ্রবাহ বা কর্মের অগ্রগতি সম্পর্কে আপ-টু-ডেট প্রতিক্রিয়া প্রদান করুন।
অগ্রগতি বারগুলি তাদের কিছু প্রভাব অর্জন করতে CSS3 রূপান্তর এবং অ্যানিমেশন ব্যবহার করে। এই বৈশিষ্ট্যগুলি ইন্টারনেট এক্সপ্লোরার 9 এবং ফায়ারফক্সের নীচের বা পুরানো সংস্করণগুলিতে সমর্থিত নয়। Opera 12 অ্যানিমেশন সমর্থন করে না।
যদি আপনার ওয়েবসাইটে একটি বিষয়বস্তু নিরাপত্তা নীতি (CSP) থাকে যা অনুমতি দেয় না , তাহলে আপনি নীচের উদাহরণগুলিতে দেখানো হিসাবে প্রগতি বারের প্রস্থ সেট করতে ইনলাইন বৈশিষ্ট্যগুলি style-src 'unsafe-inline'
ব্যবহার করতে পারবেন না ৷ style
কঠোর সিএসপিগুলির সাথে সামঞ্জস্যপূর্ণ প্রস্থগুলি সেট করার বিকল্প পদ্ধতিগুলির মধ্যে রয়েছে সামান্য কাস্টম জাভাস্ক্রিপ্ট (সেটি সেট element.style.width
করে) বা কাস্টম CSS ক্লাস ব্যবহার করা।
ডিফল্ট অগ্রগতি বার।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
একটি দৃশ্যমান শতাংশ দেখানোর জন্য অগ্রগতি বারের মধ্যে থেকে ক্লাস <span>
সহ সরান ।.sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
লেবেল পাঠ্যটি কম শতাংশের জন্যও সুস্পষ্ট থাকে তা নিশ্চিত করতে min-width
, অগ্রগতি বারে একটি যোগ করার কথা বিবেচনা করুন।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
অগ্রগতি বারগুলি সামঞ্জস্যপূর্ণ শৈলীর জন্য একই বোতাম এবং সতর্কতা ক্লাসের কিছু ব্যবহার করে।
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
একটি ডোরাকাটা প্রভাব তৈরি করতে একটি গ্রেডিয়েন্ট ব্যবহার করে। IE9 এবং নীচে উপলব্ধ নয়।
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
ডান থেকে বামে স্ট্রাইপগুলি অ্যানিমেট করতে .active
যোগ করুন । .progress-bar-striped
IE9 এবং নীচে উপলব্ধ নয়।
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
.progress
তাদের স্ট্যাক করতে একই মধ্যে একাধিক বার রাখুন ।
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
বিভিন্ন ধরণের উপাদান (যেমন ব্লগ মন্তব্য, টুইট ইত্যাদি) তৈরির জন্য বিমূর্ত বস্তু শৈলী যা পাঠ্য বিষয়বস্তুর পাশাপাশি বাম-বা ডান-সারিবদ্ধ চিত্র বৈশিষ্ট্যযুক্ত।
ডিফল্ট মিডিয়া একটি বিষয়বস্তু ব্লকের বাম বা ডানে একটি মিডিয়া বস্তু (ছবি, ভিডিও, অডিও) প্রদর্শন করে।
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
ক্লাস .pull-left
এবং .pull-right
এছাড়াও বিদ্যমান এবং পূর্বে মিডিয়া উপাদানের অংশ হিসাবে ব্যবহার করা হয়েছিল, কিন্তু v3.3.0 হিসাবে সেই ব্যবহারের জন্য বঞ্চিত করা হয়েছে। এগুলি প্রায় সমতুল্য .media-left
এবং এইচটিএমএল-এর পরে স্থাপন .media-right
করা .media-right
উচিত ।.media-body
ইমেজ বা অন্যান্য মিডিয়া উপরে, মাঝখানে বা নীচে সারিবদ্ধ করা যেতে পারে। ডিফল্ট শীর্ষ সারিবদ্ধ.
Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।
Donec sed odio dui. নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস।
Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।
Donec sed odio dui. নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস।
Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ডনেক ল্যাসিনিয়া কঙ্গু ফেলিস ইন ফ্যাসিবাস।
Donec sed odio dui. নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস।
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
একটু অতিরিক্ত মার্কআপ দিয়ে, আপনি তালিকার ভিতরে মিডিয়া ব্যবহার করতে পারেন (মন্তব্য থ্রেড বা নিবন্ধের তালিকার জন্য দরকারী)।
Cras বসে amet nibh libero, in gravida nulla. নুলা ভেল মেটাস স্কেলরিস্ক অ্যান্টি সোলিসিটুডিন কমোডো। Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
তালিকা গোষ্ঠীগুলি কেবল উপাদানগুলির সাধারণ তালিকাই নয়, কাস্টম সামগ্রী সহ জটিলগুলি প্রদর্শনের জন্য একটি নমনীয় এবং শক্তিশালী উপাদান।
সবচেয়ে মৌলিক তালিকা গোষ্ঠীটি কেবল তালিকা আইটেম এবং যথাযথ ক্লাস সহ একটি ক্রমবিহীন তালিকা। অনুসরণ করা বিকল্পগুলি বা প্রয়োজন অনুসারে আপনার নিজস্ব CSS দিয়ে এটি তৈরি করুন।
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
যেকোনো তালিকা গ্রুপ আইটেমে ব্যাজ উপাদান যোগ করুন এবং এটি স্বয়ংক্রিয়ভাবে ডানদিকে অবস্থান করবে।
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
তালিকার আইটেমগুলির পরিবর্তে অ্যাঙ্কর ট্যাগ ব্যবহার করে তালিকাভুক্ত আইটেমগুলিকে লিঙ্ক করুন (যার <div>
পরিবর্তে একটি অভিভাবকও বোঝায় <ul>
)। প্রতিটি উপাদানের চারপাশে পৃথক পিতামাতার প্রয়োজন নেই।
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
তালিকা গোষ্ঠীর আইটেমগুলি তালিকা আইটেমগুলির পরিবর্তে বোতাম হতে পারে (এর অর্থ একটি <div>
এর পরিবর্তে একটি অভিভাবকও <ul>
)। প্রতিটি উপাদানের চারপাশে পৃথক পিতামাতার প্রয়োজন নেই। এখানে স্ট্যান্ডার্ড .btn
ক্লাস ব্যবহার করবেন না।
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
অক্ষম দেখাতে এটিকে ধূসর .disabled
করতে a এ যোগ করুন ।.list-group-item
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
স্টাইল তালিকা আইটেম, ডিফল্ট বা লিঙ্ক করা প্রাসঙ্গিক ক্লাস ব্যবহার করুন. এছাড়াও .active
রাজ্য অন্তর্ভুক্ত.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
এর মধ্যে প্রায় যেকোনো HTML যোগ করুন, এমনকি নিচের মতো লিঙ্ক করা তালিকার গোষ্ঠীর জন্যও।
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
যদিও সবসময় প্রয়োজন হয় না, মাঝে মাঝে আপনাকে আপনার DOM একটি বাক্সে রাখতে হবে। এই পরিস্থিতিতে, প্যানেল উপাদান চেষ্টা করুন.
ডিফল্টরূপে, .panel
কিছু বিষয়বস্তু ধারণ করার জন্য কিছু মৌলিক সীমানা এবং প্যাডিং প্রয়োগ করা হয়।
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
সহজেই আপনার প্যানেলে একটি শিরোনাম ধারক যোগ করুন .panel-heading
। আপনি যেকোনও অন্তর্ভুক্ত করতে পারেন <h1>
- একটি প্রি-স্টাইল করা শিরোনাম যোগ করতে <h6>
একটি ক্লাস সহ । যাইহোক, - এর .panel-title
ফন্টের আকারগুলি দ্বারা ওভাররাইড করা হয়েছে ।<h1>
<h6>
.panel-heading
সঠিক লিঙ্ক রঙের জন্য, শিরোনামের মধ্যে লিঙ্কগুলি স্থাপন করতে ভুলবেন না .panel-title
।
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
মোড়ানো বোতাম বা সেকেন্ডারি .panel-footer
টেক্সট মনে রাখবেন যে প্যানেল ফুটারগুলি প্রাসঙ্গিক বৈচিত্রগুলি ব্যবহার করার সময় রঙ এবং সীমানা উত্তরাধিকারী হয় না কারণ সেগুলি অগ্রভাগে থাকার জন্য নয়৷
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
অন্যান্য উপাদানগুলির মতো, যেকোনও প্রাসঙ্গিক স্টেট ক্লাস যোগ করে একটি প্যানেলকে এ��টি নির্দিষ্ট প্রসঙ্গে আরও অর্থবহ করে তোলে৷
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
একটি বিজোড় নকশার জন্য একটি প্যানেলের মধ্যে যেকোন অ-সীমানা যুক্ত করুন ৷ যদি একটি থাকে .panel-body
, আমরা আলাদা করার জন্য টেবিলের শীর্ষে একটি অতিরিক্ত সীমানা যোগ করি।
কিছু ডিফল্ট প্যানেল বিষয়বস্তু এখানে। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | নামের প্রথম অংশ | নামের শেষাংশ | ব্যবহারকারীর নাম |
---|---|---|---|
1 | মার্ক | অটো | @এমডিও |
2 | জ্যাকব | থর্নটন | @ফ্যাট |
3 | ল্যারি | পাখি | @টুইটার |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
যদি কোন প্যানেল বডি না থাকে, তাহলে উপাদানটি প্যানেল হেডার থেকে টেবিলে কোনো বাধা ছাড়াই চলে যায়।
# | নামের প্রথম অংশ | নামের শেষাংশ | ব্যবহারকারীর নাম |
---|---|---|---|
1 | মার্ক | অটো | @এমডিও |
2 | জ্যাকব | থর্নটন | @ফ্যাট |
3 | ল্যারি | পাখি | @টুইটার |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
যেকোনো প্যানেলের মধ্যে পূর্ণ-প্রস্থের তালিকার গোষ্ঠীগুলিকে সহজেই অন্তর্ভুক্ত করুন।
কিছু ডিফল্ট প্যানেল বিষয়বস্তু এখানে। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare Sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
ব্রাউজারগুলিকে তাদের থাকা ব্লকের প্রস্থের উপর ভিত্তি করে ভিডিও বা স্লাইডশোর মাত্রা নির্ধারণ করার অনুমতি দেয় একটি অভ্যন্তরীণ অনুপাত তৈরি করে যা যেকোনো ডিভাইসে সঠিকভাবে স্কেল করবে।
নিয়মগুলি সরাসরি <iframe>
, <embed>
, <video>
, এবং <object>
উপাদানগুলিতে প্রয়োগ করা হয়; .embed-responsive-item
আপনি যখন অন্যান্য গুণাবলীর জন্য স্টাইলিং মেলতে চান তখন ঐচ্ছিকভাবে একটি স্পষ্ট বংশধর শ্রেণী ব্যবহার করুন।
প্রো-টিপ! আমরা আপনার জন্য এটি ওভাররাইড করার কারণে আপনাকে frameborder="0"
আপনার গুলি অন্তর্ভুক্ত করার দরকার নেই ৷<iframe>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
একটি ইনসেট প্রভাব দিতে একটি উপাদানের উপর একটি সাধারণ প্রভাব হিসাবে ভাল ব্যবহার করুন।
<div class="well">...</div>
দুটি ঐচ্ছিক পরিবর্তনকারী ক্লাস সহ প্যাডিং এবং বৃত্তাকার কোণগুলি নিয়ন্ত্রণ করুন।
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>