উপাদান

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

বোতাম গ্রুপ

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

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

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

অ্যাঙ্কর ট্যাগ বোতামগুলির সাথে তৈরি একটি স্ট্যান্ডার্ড বোতাম গ্রুপের জন্য 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-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 ।

কেন ট্যাব এবং বড়ি

বুটস্ট্র্যাপে ট্যাব এবং পিলগুলি <ul>একই মূল এইচটিএমএল, লিঙ্কগুলির একটি তালিকা সহ একটিতে তৈরি করা হয়। শুধুমাত্র একটি ক্লাস সহ ট্যাব বা বড়ির মধ্যে অদলবদল করুন।

উভয় বিকল্পই বিষয়বস্তুর উপ-বিভাগ বা সম্পর্কিত বিষয়বস্তুর পৃষ্ঠাগুলির মধ্যে নেভিগেট করার জন্য দুর্দান্ত।

মৌলিক ট্যাব

নিয়মিত <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>

Tabbable nav জাভাস্ক্রিপ্টের মাধ্যমে ট্যাবগুলিকে প্রাণবন্ত করে তুলুন

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

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

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

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

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

আমি সেকশন 1 এ আছি।

হাওডি, আমি সেকশন 2-এ আছি।

কি খবর মেয়ে, এটা ধারা 3।

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

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

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

সোজা মার্কআপ

ট্যাবযোগ্য ট্যাব ব্যবহার করার জন্য একটি মোড়ানো ডিভ, ট্যাবের একটি সেট এবং বিষয়বস্তুর ট্যাবেবল প্যানের একটি সেট প্রয়োজন।

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > বিভাগ 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > বিভাগ 2 </a></li>  
  </ul>
  <div class = "ট্যাব-সামগ্রী" > 
    <div class = "ট্যাব-প্যান সক্রিয়" id = "1" >  
      <p> আমি সেকশন 1 এ আছি। </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> হাউডি, আমি সেকশন 2 এ আছি। </p>
    </div>
  </div>
</div>

যে কোন দিকে ট্যাব করা যায়

নীচে ট্যাব

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. padding-top: 40px;আপনার CSS-এ, আপনার যোগ করার মাধ্যমে এটি যে ওভারল্যাপ সৃষ্টি করে তার জন্যও আপনাকে অ্যাকাউন্ট করতে হবে <body>।

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

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

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

<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 = "ড্রপডাউন" > 
    <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>

লেবেল	মার্কআপ
ডিফল্ট	`<span class="label">Default</span>`
নতুন	`<span class="label label-success">New</span>`
সতর্কতা	`<span class="label label-warning">Warning</span>`
গুরুত্বপূর্ণ	`<span class="label label-important">Important</span>`
তথ্য	`<span class="label label-info">Info</span>`

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

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

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

একটু অতিরিক্ত মার্কআপের সাহায্যে, থাম্বনেইলে শিরোনাম, অনুচ্ছেদ বা বোতামের মতো যেকোনো ধরনের 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" > × </a> 
  <strong> সতর্কতা! </strong> সর্বোত্তম চেক ইয়ো নিজেকে, আপনি খুব ভাল দেখাচ্ছে না.
</div>

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

সতর্কতা !

নিজেকে ভালো করে দেখুন, আপনি খুব ভালো দেখাচ্ছেন না। নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু। প্রেজেন্ট কমোডো কার্সাস ম্যাগনা, vel scelerisque nisl consectetur et.

<div ক্লাস = "সতর্ক সতর্কতা-ব্লক" > 
  <a class = "close" > × </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>

বোতাম গোষ্ঠী আরও টুলবারের মতো কার্যকারিতার জন্য বোতামগুলিতে যোগ দিন

বোতাম গ্রুপ

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

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

মাথা আপ

বোতাম ড্রপডাউন প্রাসঙ্গিক ড্রপডাউন মেনু বোতাম গোষ্ঠীর উপর নির্মিত

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

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

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

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

নেভিগেশন, ট্যাব এবং বড়িগুলি অত্যন্ত কাস্টমাইজযোগ্য তালিকা-শৈলী নেভিগেশন

লাইটওয়েট ডিফল্ট একই মার্কআপ, বিভিন্ন ক্লাস

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

কেন ট্যাব এবং বড়ি

মৌলিক ট্যাব

মৌলিক বড়ি

স্ট্যাকযোগ্য ট্যাব বা বড়ি উল্লম্ব করুন

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

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

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

উন্নত নেভি উপাদানগুলির জন্য ড্রপডাউন

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

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

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

নেভি তালিকাগুলি সাধারণ স্ট্যাকড ন্যাভিস তৈরি করুন, সাইডবারগুলির জন্য দুর্দান্ত৷

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

আইকন সহ

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

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

Tabbable nav জাভাস্ক্রিপ্টের মাধ্যমে ট্যাবগুলিকে প্রাণবন্ত করে তুলুন

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

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

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

সোজা মার্কআপ

যে কোন দিকে ট্যাব করা যায়

নীচে ট্যাব

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

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

নববার

স্ট্যাটিক নববারের উদাহরণ

নববার ভারা

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

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

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

নেভি লিঙ্ক

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

ব্রেডক্রাম্বস

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

উদাহরণ

মার্কআপ

পেজিনেশন বিষয়বস্তুর মাধ্যমে পেজ করার জন্য দুটি বিকল্প

মাল্টিকন-পেজ পেজিনেশন

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

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

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

উদাহরণ

মার্কআপ

দ্রুত পূর্ববর্তী এবং পরবর্তী লিঙ্কগুলির জন্য পেজার

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

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

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

ইনলাইন লেবেল লেবেল এবং টেক্সট টীকা

ছবি, ভিডিও, পাঠ্য এবং আরও অনেক কিছুর থাম্বনেইল গ্রিড

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

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

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

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

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

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

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

মার্কআপ

আরো উদাহরণ

সাফল্য, সতর্কতা, এবং ত্রুটি বার্তার জন্য সতর্কতা শৈলী

লাইটওয়েট ডিফল্ট

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

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

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

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

সতর্কতা !

প্রাসঙ্গিক বিকল্প একটি সতর্কতার অর্থ পরিবর্তন করতে ঐচ্ছিক ক্লাস যোগ করুন