বোতাম গ্রুপ

একটি যৌগিক উপাদান হিসাবে একসাথে একাধিক বোতামে যোগ দিতে বোতাম গোষ্ঠীগুলি ব্যবহার করুন। এগুলিকে একটি সিরিজ <a>বা <button>উপাদান দিয়ে তৈরি করুন।

সেরা অনুশীলন

আমরা বোতাম গ্রুপ এবং টুলবার ব্যবহার করার জন্য নিম্নলিখিত নির্দেশিকা সুপারিশ করি:

• সর্বদা একটি একক বোতাম গ্রুপে একই উপাদান ব্যবহার করুন, <a>বা <button>.
• একই বোতাম গ্রুপে বিভিন্ন রঙের বোতাম মিশ্রিত করবেন না।
• টেক্সট ছাড়াও বা পরিবর্তে আইকন ব্যবহার করুন, কিন্তু যেখানে উপযুক্ত সেখানে Alt এবং শিরোনাম টেক্সট অন্তর্ভুক্ত করতে ভুলবেন না।

ড্রপডাউন সহ সম্পর্কিত বোতাম গোষ্ঠীগুলিকে (নীচে দেখুন) আলাদাভাবে ডাকতে হবে এবং উদ্দেশ্যমূলক আচরণ নির্দেশ করার জন্য সর্বদা একটি ড্রপডাউন ক্যারেট অন্তর্ভুক্ত করতে হবে।

ডিফল্ট উদাহরণ

অ্যাঙ্কর ট্যাগ বোতামগুলির সাথে তৈরি একটি স্ট্যান্ডার্ড বোতাম গ্রুপের জন্য HTML কীভাবে দেখায় তা এখানে:

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

টুলবার উদাহরণ

আরো জটিল উপাদানের জন্য <div class="btn-group">a এর সেটগুলিকে একত্রিত করুন।<div class="btn-toolbar">

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

চেকবক্স এবং রেডিও স্বাদ

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

জাভাস্ক্রিপ্ট পান »

মাথা আপ

বোতাম গ্রুপের জন্য CSS একটি আলাদা ফাইলে রয়েছে, button-groups.less।

বোতাম ড্রপডাউন

একটি ড্রপডাউন মেনু ট্রিগার করার জন্য যেকোন বোতামটি একটি এর মধ্যে রেখে .btn-groupএবং সঠিক মেনু মার্কআপ প্রদান করে ব্যবহার করুন।

মাথা আপ! বোতাম ড্রপডাউনগুলির কাজ করার জন্য বুটস্ট্র্যাপ ড্রপডাউন প্লাগইন প্রয়োজন।

উদাহরণ মার্কআপ

একটি বোতাম গ্রুপের মতো, আমাদের মার্কআপ নিয়মিত বোতাম মার্কআপ ব্যবহার করে, তবে শৈলীকে পরিমার্জিত করতে এবং বুটস্ট্র্যাপের ড্রপডাউন jQuery প্লাগইনকে সমর্থন করার জন্য মুষ্টিমেয় সংযোজন সহ।

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "ড্রপডাউন" href = "#" >   
    কর্ম
    <span ক্লাস = "ক্যারেট" ></span> 
  </a>
  <ul class = "ড্রপডাউন-মেনু" > 
    <!-- ড্রপডাউন মেনু লিঙ্ক -->
  </ul>
</div>

স্প্লিট বোতাম ড্রপডাউন

বোতামের গ্রুপ শৈলী এবং মার্কআপের উপর ভিত্তি করে, আমরা সহজেই একটি বিভক্ত বোতাম তৈরি করতে পারি। স্প্লিট বোতামে প্রাসঙ্গিক লিঙ্ক সহ বাম দিকে একটি স্ট্যান্ডার্ড অ্যাকশন এবং ডানদিকে একটি ড্রপডাউন টগল রয়েছে৷

উদাহরণ মার্কআপ

একটি পৃথক ড্রপডাউন ট্রিগার হিসাবে কাজ করে এমন একটি দ্বিতীয় বোতাম অ্যাকশন প্রদান করতে আমরা সাধারণ বোতাম ড্রপডাউনগুলিতে প্রসারিত করি।

<div class = "btn-group" > 
  <a class = "btn" href = "#" > অ্যাকশন </a>  
  <a class = "btn dropdown-toggle" data-toggle = "ড্রপডাউন" href = "#" >   
    <span ক্লাস = "ক্যারেট" ></span> 
  </a>
  <ul class = "ড্রপডাউন-মেনু" > 
    <!-- ড্রপডাউন মেনু লিঙ্ক -->
  </ul>
</div>

শক্তিশালী বেস ক্লাস

এখানে সমস্ত নেভি কম্পোনেন্ট—ট্যাব, বড়ি এবং তালিকা— ক্লাসের মাধ্যমে একই বেস মার্কআপ এবং শৈলী শেয়ার করে.nav ।

কখন ব্যবহার করতে হবে

ট্যাব এবং বড়িগুলি বিষয়বস্তুর বিভাগগুলির জন্য বা সম্পর্কিত বিষয়বস্তুর পৃষ্ঠাগুলির মধ্যে নেভিগেট করার জন্য দুর্দান্ত৷

উপাদান প্রান্তিককরণ

নেভি লিঙ্কগুলি সারিবদ্ধ করতে, .pull-leftবা .pull-rightইউটিলিটি ক্লাসগুলি ব্যবহার করুন। উভয় ক্লাসই নির্দিষ্ট দিক দিয়ে একটি CSS ফ্লোট যোগ করবে।

মৌলিক ট্যাব

নিয়মিত <ul>লিঙ্ক নিন এবং যোগ করুন .nav-tabs:

• বাড়ি
• প্রোফাইল
• বার্তা

<ul class = "nav nav-tabs" > 
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > হোম </a> ৷ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

মৌলিক বড়ি

একই HTML নিন, কিন্তু .nav-pillsপরিবর্তে ব্যবহার করুন:

• বাড়ি
• প্রোফাইল
• বার্তা

<ul class = "nav nav-pills" > 
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > হোম </a> ৷ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

কিভাবে তাদের স্ট্যাক

যেহেতু ট্যাব এবং পিলগুলি ডিফল্টরূপে অনুভূমিক থাকে, .nav-stackedসেগুলিকে উল্লম্বভাবে স্ট্যাক করা দেখানোর জন্য শুধুমাত্র একটি দ্বিতীয় শ্রেণী যোগ করুন।

স্ট্যাক করা ট্যাব

• বাড়ি
• প্রোফাইল
• বার্তা

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

স্তুপীকৃত বড়ি

• বাড়ি
• প্রোফাইল
• বার্তা

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

সমৃদ্ধ মেনু সহজ করা

বুটস্ট্র্যাপ ট্যাব এবং পিলগুলিতে ড্রপডাউন মেনুগুলি অত্যন্ত সহজ এবং শুধুমাত্র সামান্য অতিরিক্ত HTML এবং একটি হালকা jQuery প্লাগইন প্রয়োজন৷

বুটস্ট্র্যাপে ড্রপডাউন শুরু করার বিষয়ে ডক্স পড়তে জাভাস্ক্রিপ্ট পৃষ্ঠায় যান ।

ড্রপডাউন সহ ট্যাব

• বাড়ি
• প্রোফাইল
• ড্রপডাউন
  • কর্ম
  • আরেকটি কর্ম
  • এখানে অন্য কিছু
  • পৃথক লিঙ্ক

<ul class = "nav nav-tabs" > 
  <li class = "ড্রপডাউন" > 
    <a ক্লাস = "ড্রপডাউন-টগল" 
       ডেটা-টগল = "ড্রপডাউন"
       href = "#" >
        ড্রপডাউন
        <b ক্লাস = "ক্যারেট" ></b> 
      </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      <!-- লিঙ্ক -->
    </ul>
  </li>
</ul>

ড্রপডাউন সহ বড়ি

• বাড়ি
• প্রোফাইল
• ড্রপডাউন
  • কর্ম
  • আরেকটি কর্ম
  • এখানে অন্য কিছু
  • পৃথক লিঙ্ক

<ul class = "nav nav-pills" > 
  <li class = "ড্রপডাউন" > 
    <a ক্লাস = "ড্রপডাউন-টগল" 
       ডেটা-টগল = "ড্রপডাউন"
       href = "#" >
        ড্রপডাউন
        <b ক্লাস = "ক্যারেট" ></b> 
      </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      <!-- লিঙ্ক -->
    </ul>
  </li>
</ul>

অ্যাপ্লিকেশন-শৈলী নেভিগেশন

এনভি তালিকা ঐচ্ছিক শিরোনাম সহ নেভি লিঙ্কের গ্রুপ তৈরি করার একটি সহজ এবং সহজ উপায় প্রদান করে। এগুলি ওএস এক্স-এর ফাইন্ডারের মতো সাইডবারে সবচেয়ে ভাল ব্যবহার করা হয়।

কাঠামোগতভাবে, এগুলি ট্যাব এবং পিলের মতো একই মূল নেভি শৈলীতে তৈরি করা হয়েছে, তাই ব্যবহার এবং কাস্টমাইজেশন সহজবোধ্য।

আইকন সহ

নেভিগেশন তালিকা আইকন দিয়ে সজ্জিত করা সহজ। ক্লাসের সাথে সঠিক <i>ট্যাগ যোগ করুন এবং আপনি সেট হয়ে গেছেন।

ন্যাভি তালিকার উদাহরণ

লিঙ্কগুলির একটি তালিকা নিন এবং যোগ করুন class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    তালিকা শিরোনাম
  </li>
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > হোম </a> ৷ _ 
  </li>
  <li>
    <a href="#" > লাইব্রেরি </a> _ _ 
  </li>
  ...
</ul>

আইকন সহ উদাহরণ

একই উদাহরণ, কিন্তু <i>আইকন জন্য ট্যাগ সঙ্গে.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      লাইব্রেরি
    </a>
  </li>
  ...
</ul>

কি অন্তর্ভুক্ত

ট্যাবের মাধ্যমে বিষয়বস্তুর মধ্যে টগল করার জন্য একটি সাধারণ প্লাগইন দিয়ে আপনার ট্যাবগুলিকে প্রাণবন্ত করুন৷ বুটস্ট্র্যাপ ট্যাবযোগ্য ট্যাবগুলিকে চারটি শৈলীতে সংহত করে: উপরে (ডিফল্ট), ডান, নীচে এবং বাম।

তাদের মধ্যে পরিবর্তন করা সহজ এবং শুধুমাত্র খুব সামান্য মার্কআপ পরিবর্তন করা প্রয়োজন।

ট্যাবযোগ্য উদাহরণ

ট্যাবগুলিকে ট্যাবযোগ্য করতে, .nav-tabsক্লাসের সাথে অন্য ডিভ-এ মোড়ানো .tabbable।

কাস্টম jQuery প্লাগইন

সমস্ত ট্যাবযোগ্য ট্যাব আমাদের লাইটওয়েট jQuery প্লাগইন দ্বারা চালিত হয়। জাভাস্ক্রিপ্ট ডক্স পৃষ্ঠায় ট্যাবযোগ্য ট্যাবগুলিকে কীভাবে প্রাণবন্ত করা যায় সে সম্পর্কে আরও পড়ুন।

জাভাস্ক্রিপ্ট পান →

নীচে ট্যাব

HTML এর ক্রমটি ফ্লিপ করুন এবং নীচে ট্যাব রাখতে একটি ক্লাস যুক্ত করুন।

<div ক্লাস = "ট্যাবেবল ট্যাব-নীচে" > 
  <div class = "ট্যাব-সামগ্রী" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

বাম দিকে ট্যাব

বাম দিকে ট্যাব রাখতে ক্লাস অদলবদল করুন।

<div ক্লাস = "ট্যাবেবল ট্যাব-বাম" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ট্যাব-সামগ্রী" > 
    ...
  </div>
</div>

ডানদিকে ট্যাব

ডানদিকে ট্যাব রাখতে ক্লাস অদলবদল করুন।

<div ক্লাস = "ট্যাবেবল ট্যাব-রাইট" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "ট্যাব-সামগ্রী" > 
    ...
  </div>
</div>

নববার ভারা

স্থির বা স্থির প্রদর্শনের জন্য এটিকে ভালভাবে গঠন করতে ন্যাভবারটির শুধুমাত্র কয়েকটি ডিভের প্রয়োজন।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

স্থির নববার

ভিউপোর্টের শীর্ষে নেভিবার স্থির করতে, .navbar-fixed-topসবচেয়ে বাইরের অংশে যোগ করুন, .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

আপনার CSS-এ, আপনার 40px বা তার বেশি প্যাডিং যোগ করার মাধ্যমে ওভারল্যাপের জন্য আপনাকে অ্যাকাউন্ট করতে হবে <body>। কোর বুটস্ট্র্যাপ CSS এর পরে এবং ঐচ্ছিক প্রতিক্রিয়াশীল CSS এর আগে এটি যোগ করতে ভুলবেন না।

পরিচিতিমুলক নাম

আপনার ব্র্যান্ড বা প্রকল্পের নাম দেখানোর জন্য একটি সহজ লিঙ্কের জন্য শুধুমাত্র একটি অ্যাঙ্কর ট্যাগ প্রয়োজন।

<a ক্লাস = "ব্র্যান্ড" href = "#" >  
  প্রকল্পের নাম
</a>

অনুসন্ধান ফর্ম

.navbar-searchঅনুসন্ধান ফর্মগুলি ক্লাসের সাথে নেভিবারে কাস্টম শৈলী গ্রহণ করে । এটি সারিবদ্ধ করতে অন্তর্ভুক্ত করুন .pull-leftবা .pull-rightঅন করুন ।form

<form class = "navbar-search pull-left" > 
  <ইনপুট প্রকার = "টেক্সট" ক্লাস = "সার্চ-কোয়েরি" স্থানধারক = "সার্চ" >   
</form>

ঐচ্ছিক প্রতিক্রিয়াশীল প্রকরণ

আপনার টপবারে সামগ্রীর পরিমাণের উপর নির্ভর করে, আপনি প্রতিক্রিয়াশীল বিকল্পগুলি প্রয়োগ করতে চাইতে পারেন। এটি করার জন্য, আপনার nav বিষয়বস্তু একটি div-এ মোড়ানো .nav-collapse.collapse, এবং navbar টগল বোতাম যোগ করুন .btn-navbar।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar ধসে পড়া navbar সামগ্রীর জন্য টগল হিসাবে ব্যবহৃত হয় -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span ক্লাস = "আইকন-বার" ></span> 
        <span ক্লাস = "আইকন-বার" ></span> 
        <span ক্লাস = "আইকন-বার" ></span> 
      </a>
 
      <!-- ব্র্যান্ডটিকে সেখানে রেখে যেতে ভুলবেন না যদি আপনি এটি প্রদর্শন করতে চান -->
      <a class = "brand" href = "#" > প্রকল্পের নাম </a>  
 
      <!-- আপনি যা কিছু লুকিয়ে রাখতে চান তা 940px বা তার কম, এখানে রাখুন -->
      <div class = "nav-collaps" > 
        <!-- .nav, .navbar-অনুসন্ধান, .navbar-ফর্ম, ইত্যাদি -->
      </div>
 
    </div>
  </div>
</div>

নেভি লিঙ্ক

ন্যাভি আইটেমগুলি সাজানো তালিকার মাধ্যমে যোগ করা সহজ।

<ul class = "nav" > 
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > হোম </a> ৷ _ 
  </li>
  <li><a href = "#" > লিঙ্ক </a></li> 
  <li><a href = "#" > লিঙ্ক </a></li> 
</ul>

আপনি একটি খালি তালিকা আইটেম এবং একটি সাধারণ ক্লাস সহ আপনার নেভি লিঙ্কগুলিতে সহজেই বিভাজক যুক্ত করতে পারেন। শুধু লিঙ্কগুলির মধ্যে এটি যোগ করুন:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

উপাদান প্রান্তিককরণ

একটি নেভি, সার্চ ফর্ম, বা টেক্সট সারিবদ্ধ করতে, .pull-leftবা .pull-rightইউটিলিটি ক্লাস ব্যবহার করুন। উভয় ক্লাসই নির্দিষ্ট দিক দিয়ে একটি CSS ফ্লোট যোগ করবে।

ড্রপডাউন যোগ করা হচ্ছে

নেভিতে ড্রপডাউন যোগ করা খুবই সহজ, কিন্তু আমাদের জাভাস্ক্রিপ্ট প্লাগইন ব্যবহার করতে হবে ।

<ul class = "nav" > 
  <li class = "ড্রপডাউন" > 
    <a href = "#" 
          ক্লাস = "ড্রপডাউন-টগল"
          data-toggle = "ড্রপডাউন" >
          হিসাব
          <b ক্লাস = "ক্যারেট" ></b> 
    </a>
    <ul class = "ড্রপডাউন-মেনু" > 
      ...
    </ul>
  </li>
</ul>

জাভাস্ক্রিপ্ট পান →

কেন তাদের ব্যবহার

ব্রেডক্রাম্ব নেভিগেশন ব্যবহারকারীদের একটি অ্যাপ বা সাইটের মধ্যে কোথায় আছে তা দেখানোর উপায় হিসেবে ব্যবহার করা হয়, কিন্তু প্রাথমিক নেভিগেশনের জন্য নয়। সবচেয়ে কার্যকর হওয়ার জন্য তাদের ব্যবহার বিক্ষিপ্ত এবং সংক্ষিপ্ত রাখুন।

উদাহরণ

এটি একাধিক পৃষ্ঠা জুড়ে প্রদর্শিত হতে পারে হিসাবে দেখানো একটি একক উদাহরণ।

• বাড়ি

• বাড়ি /
• লাইব্রেরি

• বাড়ি /
• লাইব্রেরি /
• ডেটা

মার্কআপ

এইচটিএমএল হল লিঙ্ক সহ আপনার স্ট্যান্ডার্ড ক্রমবিহীন তালিকা।

<ul class = "ব্রেডক্রাম্ব" > 
  <li>
    <a href = "#" > হোম </a> <span ক্লাস = "ডিভাইডার" > / </span>   
  </li>
  <li>
    <a href = "#" > লাইব্রেরি </a> <span class = "divider" > / </span>   
  </li>
  <li ক্লাস = "সক্রিয়" > 
    <a href="#" > ডেটা </a> ৷ _ 
  </li>
</ul>

কখন ব্যবহার করতে হবে

Rdio দ্বারা অনুপ্রাণিত অতি সরল এবং ন্যূনতম স্টাইলযুক্ত পৃষ্ঠা সংখ্যা, অ্যাপ এবং অনুসন্ধান ফলাফলের জন্য দুর্দান্ত। বড় ব্লক মিস করা কঠিন, সহজেই মাপযোগ্য, এবং বড় ক্লিক এলাকা প্রদান করে।

রাষ্ট্রীয় পৃষ্ঠা লিঙ্ক

লিঙ্কগুলি কাস্টমাইজযোগ্য এবং সঠিক শ্রেণীর সাথে বিভিন্ন পরিস্থিতিতে কাজ করে। .disabledআনক্লিকযোগ্য লিঙ্কের .activeজন্য এবং বর্তমান পৃষ্ঠার জন্য।

নমনীয় প্রান্তিককরণ

পেজিনেশন লিঙ্কের প্রান্তিককরণ পরিবর্তন করতে দুটি ঐচ্ছিক ক্লাসের যে কোনো একটি যোগ করুন: .pagination-centeredএবং .pagination-right।

উদাহরণ

ডিফল্ট পেজিনেশন কম্পোনেন্ট নমনীয় এবং বিভিন্ন বৈচিত্রের মধ্যে কাজ করে।

মার্কআপ

একটিতে মোড়ানো <div>, পৃষ্ঠা সংখ্যা শুধু একটি <ul>।

<div class = "পৃষ্ঠা সংখ্যা" > 
  <ul>
    <li><a href = "#" > আগের </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 = "#" > পরবর্তী </a></li> 
  </ul>
</div>

পেজার সম্পর্কে

পেজার কম্পোনেন্ট হল হালকা মার্কআপ এবং এমনকি হালকা শৈলী সহ সহজ পেজিনেশন বাস্তবায়নের জন্য লিঙ্কগুলির একটি সেট। এটি ব্লগ বা ম্যাগাজিনের মতো সাধারণ সাইটের জন্য দুর্দান্ত।

ডিফল্ট উদাহরণ

ডিফল্টরূপে, পেজার লিঙ্কগুলিকে কেন্দ্র করে।

• আগে
• পরবর্তী

<ul class = "পেজার" > 
  <li>
    <a href="#" > আগের </a> _ _ 
  </li>
  <li>
    <a href="#" > পরবর্তী </a> _ _ 
  </li>
</ul>

সারিবদ্ধ লিঙ্ক

বিকল্পভাবে, আপনি পাশের প্রতিটি লিঙ্ক সারিবদ্ধ করতে পারেন:

• ← পুরোনো
• নতুন →

<ul class = "পেজার" > 
  <li ক্লাস = "আগের" > 
    <a href = "#" > ← পুরাতন </a> 
  </li>
  <li ক্লাস = "পরবর্তী" > 
    <a href = "#" > নতুন → </a> 
  </li>
</ul>

বুটস্ট্র্যাপ আপনার সাইটে সামগ্রী প্রদর্শনের জন্য হিরো ইউনিট নামে একটি হালকা, নমনীয় উপাদান সরবরাহ করে। এটি মার্কেটিং এবং কন্টেন্ট-ভারী সাইটগুলিতে ভাল কাজ করে।

মার্কআপ

আপনার বিষয়বস্তুকে divএমনভাবে মোড়ানো:

<div class = "hero-unit" > 
  <h1> শিরোনাম </h1>
  <p> ট্যাগলাইন </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      আরও জানুন
    </a>
  </p>
</div>

h1একটি পৃষ্ঠার বিষয়বস্তুর অংশগুলিকে যথাযথভাবে স্পেস দেওয়ার জন্য একটি সাধারণ শেল । এটি h1এর ডিফল্ট small, উপাদানের পাশাপাশি বেশিরভাগ অন্যান্য উপাদান (অতিরিক্ত শৈলী সহ) ব্যবহার করতে পারে।

<div class = "page-haeder" > 
  <h1> উদাহরণ পৃষ্ঠা শিরোনাম </h1>
</div>

ডিফল্ট থাম্বনেল

ডিফল্টরূপে, বুটস্ট্র্যাপের থাম্বনেইলগুলি ন্যূনতম প্রয়োজনীয় মার্কআপ সহ লিঙ্কযুক্ত চিত্রগুলি প্রদর্শন করার জন্য ডিজাইন করা হয়েছে।

অত্যন্ত কাস্টমাইজযোগ্য

একটু অতিরিক্ত মার্কআপের সাহায্যে, থাম্বনেইলে শিরোনাম, অনুচ্ছেদ বা বোতামের মতো যেকোনো ধরনের HTML সামগ্রী যোগ করা সম্ভব।

• 

  থাম্বনেইল লেবেল

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  কর্ম কর্ম

• 

  থাম্বনেইল লেবেল

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  কর্ম কর্ম

কেন থাম্বনেইল ব্যবহার

থাম্বনেইলগুলি (আগে .media-gridv1.4 পর্যন্ত) ফটো বা ভিডিওগুলির গ্রিড, চিত্র অনুসন্ধান ফলাফল, খুচরা পণ্য, পোর্টফোলিও এবং আরও অনেক কিছুর জন্য দুর্দান্ত৷ এগুলি লিঙ্ক বা স্ট্যাটিক কন্টেন্ট হতে পারে।

সহজ, নমনীয় মার্কআপ

থাম্বনেইল মার্কআপ সহজ—এটি ulযেকোন সংখ্যক liউপাদান সহ যা প্রয়োজন। এটি অত্যন্ত নমনীয়, আপনার বিষয়বস্তুগুলিকে মোড়ানোর জন্য একটু বেশি মার্কআপ সহ যেকোনো ধরনের সামগ্রীর অনুমতি দেয়৷

গ্রিড কলামের আকার ব্যবহার করে

সবশেষে, থাম্বনেইল কম্পোনেন্ট বিদ্যমান গ্রিড সিস্টেম ক্লাস ব্যবহার করে—যেমন .span2বা .span3—থাম্বনেইলের মাত্রা নিয়ন্ত্রণের জন্য।

মার্কআপ

পূর্বে উল্লিখিত হিসাবে, থাম্বনেইলের জন্য প্রয়োজনীয় মার্কআপ হালকা এবং সোজা। এখানে লিঙ্ক করা ইমেজগুলির জন্য ডিফল্ট সেটআপটি দেখুন :

<ul class = "থাম্বনেল" > 
  <li class = "span3" > 
    <a href = "#" ক্লাস = "থাম্বনেল" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

থাম্বনেইলে কাস্টম HTML সামগ্রীর জন্য, মার্কআপ সামান্য পরিবর্তিত হয়। যেকোনো জায়গায় ব্লক লেভেল কন্টেন্টের অনুমতি দিতে, আমরা লাইকের <a>জন্য অদলবদল করি <div>:

<ul class = "থাম্বনেল" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> থাম্বনেইল লেবেল </h5>
      <p> থাম্বনেইল ক্যাপশন এখানে... </p>
    </div>
  </li>
  ...
</ul>

আরো উদাহরণ

আপনার জন্য উপলব্ধ বিভিন্ন গ্রিড ক্লাস সহ আপনার সমস্ত বিকল্পগুলি অন্বেষণ করুন৷ এছাড়াও আপনি বিভিন্ন আকার মিশ্রিত এবং মিলাতে পারেন।

পুনর্লিখিত বেস ক্লাস

বুটস্ট্র্যাপ 2 এর সাথে, আমরা বেস ক্লাসকে সরলীকৃত করেছি: .alertপরিবর্তে .alert-message। আমরা ন্যূনতম প্রয়োজনীয় মার্কআপও কমিয়ে দিয়েছি— <p>ডিফল্টরূপে কোনো প্রয়োজন নেই, শুধুমাত্র বাইরের <div>।

একক সতর্কতা বার্তা

কম কোড সহ আরও টেকসই উপাদানের জন্য, আমরা ব্লক সতর্কতা, আরও প্যাডিং এবং সাধারণত আরও পাঠ্য সহ আসা বার্তাগুলির জন্য পার্থক্যকারী চেহারা সরিয়ে দিয়েছি। শ্রেণীও পরিবর্তিত হয়েছে .alert-block।

জাভাস্ক্রিপ্টের সাথে দুর্দান্ত যায়

বুটস্ট্র্যাপ একটি দুর্দান্ত jQuery প্লাগইন সহ আসে যা সতর্কতা বার্তাগুলিকে সমর্থন করে, সেগুলি দ্রুত এবং সহজে খারিজ করে দেয়৷

প্লাগইন পান »

উদাহরণ সতর্কতা

আপনার বার্তা এবং একটি ঐচ্ছিক ক্লোজ আইকনকে সাধারণ ক্লাস সহ একটি ডিভিতে মোড়ানো।

<div class = "সতর্কতা" > 
  <a class = "close" data-dismiss = "সতর্কতা" > × </a>  
  <strong> সতর্কতা! </strong> সর্বোত্তম চেক ইয়ো নিজেকে, আপনি খুব ভাল দেখাচ্ছে না.
</div>

দুটি ঐচ্ছিক ক্লাস সহ স্ট্যান্ডার্ড সতর্কতা বার্তাটি সহজে প্রসারিত করুন: .alert-blockআরও প্যাডিং এবং পাঠ্য নিয়ন্ত্রণের .alert-headingজন্য এবং একটি মিল শিরোনামের জন্য।

<div ক্লাস = "সতর্ক সতর্কতা-ব্লক" > 
  <a class = "close" data-dismiss = "সতর্কতা" > × </a>  
  <h4 ক্লাস = "সতর্ক-শিরোনাম" > সতর্কতা! </h4> 
  নিজেকে পরীক্ষা করে দেখুন, আপনি নন...
</div>

ত্রুটি বা বিপদ

<div ক্লাস = "সতর্ক সতর্কতা-ত্রুটি" > 
  ...
</div>

সফলতা

<div class = "সতর্ক সতর্কতা-সাফল্য" > 
  ...
</div>

তথ্য

<div class = "সতর্ক সতর্কতা-তথ্য" > 
  ...
</div>

মৌলিক

একটি উল্লম্ব গ্রেডিয়েন্ট সহ ডিফল্ট অগ্রগতি বার।

<div ক্লাস = "প্রগতি" > 
  <div ক্লাস = "বার" 
       স্টাইল = " প্রস্থ : 60 %; " ></div> 
</div>

ডোরাকাটা

একটি ডোরাকাটা প্রভাব তৈরি করতে একটি গ্রেডিয়েন্ট ব্যবহার করে।

<div class = "অগ্রগতির অগ্রগতি-তথ্য 
     অগ্রগতি ডোরাকাটা" >
  <div ক্লাস = "বার" 
       স্টাইল = " প্রস্থ : 20 %; " ></div> 
</div>

অ্যানিমেটেড

ডোরাকাটা উদাহরণ নেয় এবং এটি অ্যানিমেট করে।

<div ক্লাস = "অগ্রগতি অগ্রগতি-বিপদ 
     অগ্রগতি-স্ট্রিপড সক্রিয়" >
  <div ক্লাস = "বার" 
       স্টাইল = " প্রস্থ : 40 %; " ></div> 
</div>

অতিরিক্ত রং

অগ্রগতি বার একই ধরনের স্টাইলিংয়ের জন্য বোতাম এবং সতর্কতা হিসাবে একই শ্রেণীর কিছু নাম ব্যবহার করে।

• .progress-info
• .progress-success
• .progress-danger

বিকল্পভাবে, আপনি কম ফাইল কাস্টমাইজ করতে পারেন এবং আপনার নিজস্ব রং এবং মাপ রোল করতে পারেন।

আচরণ

অগ্রগতি বারগুলি CSS3 ট্রানজিশন ব্যবহার করে, তাই আপনি যদি জাভাস্ক্রিপ্টের মাধ্যমে গতিশীলভাবে প্রস্থ সামঞ্জস্য করেন, তাহলে এটি মসৃণভাবে আকার পরিবর্তন করবে।

আপনি যদি .activeক্লাস ব্যবহার করেন, আপনার .progress-stripedঅগ্রগতি বারগুলি বাম থেকে ডানে স্ট্রাইপগুলিকে অ্যানিমেট করবে।

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

অগ্রগতি বারগুলি তাদের সমস্ত প্রভাব অর্জন করতে CSS3 গ্রেডিয়েন্ট, ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে। এই বৈশিষ্ট্যগুলি IE7-8 বা ফায়ারফক্সের পুরানো সংস্করণগুলিতে সমর্থিত নয়৷

অপেরা এই সময়ে অ্যানিমেশন সমর্থন করে না।

ওয়েলস

একটি ইনসেট প্রভাব দিতে একটি উপাদানের উপর একটি সাধারণ প্রভাব হিসাবে ভাল ব্যবহার করুন।

<div class = "ভাল" > 
  ...
</div>

ব্যাজ

একটি অপঠিত গণনা বা একটি সাধারণ সূচক হিসাবে একটি উপাদানের উপর একটি ব্যাজ ব্যবহার করুন৷

<span ক্লাস = "ব্যাজ" > 3 </div> 

ক্লোজ আইকন

মডেল এবং সতর্কতার মত বিষয়বস্তু খারিজ করার জন্য জেনেরিক ক্লোজ আইকন ব্যবহার করুন।

×

<a class = "close" > × </a>