উপাদানসমূহ

নেভিগেচন, সতৰ্কবাণী, পপঅভাৰ, আৰু বহুতো প্ৰদান কৰিবলে ডজন পুনৰ ব্যৱহাৰযোগ্য উপাদান Bootstrap ত নিৰ্মিত কৰা হৈছে।

বুটাম গোটসমূহ

একাধিক বুটামসমূহক এটা সংমিশ্ৰিত উপাদান হিচাপে একেলগে যোগ কৰিবলে বুটাম গোটসমূহ ব্যৱহাৰ কৰক। <a>বা <button>উপাদানৰ এটা শৃংখলাৰে সেইবোৰ নিৰ্মাণ কৰক ।

আপুনি অধিক জটিল প্ৰকল্পৰ বাবে <div class="btn-group">a ৰ ছেটসমূহ একত্ৰিত কৰিব পাৰে ।<div class="btn-toolbar">

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

ইয়াত HTML এ এংকৰ টেগ বুটামসমূহৰ সৈতে নিৰ্মিত এটা প্ৰামাণিক বুটাম গোট কেনেকৈ বিচাৰে:

<div শ্ৰেণী = "btn-গোট" > 
  <a class = "btn" href = "#" > ১ </a>  
  <a class = "btn" href = "#" > ২ </a>  
  <a class = "btn" href = "#" > ৩ </a>  
</div>

আৰু একাধিক গোটৰ বাবে এটা সঁজুলিদণ্ডীৰ সৈতে:

<div class = "btn-সঁজুলিবাৰ" > 
  <div শ্ৰেণী = "btn-গোট" > 
    ...
  </div>
</div>

চেকবক্স আৰু ৰেডিঅ'ৰ সোৱাদ

বুটাম গোটসমূহে ৰেডিঅ' হিচাপেও কাম কৰিব পাৰে, য'ত কেৱল এটা বুটাম সক্ৰিয় হ'ব পাৰে, বা চেকবাক্স, য'ত যিকোনো সংখ্যক বুটাম সক্ৰিয় হ'ব পাৰে। তাৰ বাবে জাভাস্ক্রিপ্ট নথিপত্ৰসমূহ চাওক ।

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

মুৰ ডাঙি

বুটাম গোটসমূহৰ বাবে CSS এটা পৃথক নথিপত্ৰত আছে, button-groups.less ।

বুটাম ড্ৰপডাউন

এটা ড্ৰপডাউন মেনু ট্ৰিগাৰ কৰিবলে যিকোনো বুটাম ব্যৱহাৰ কৰক ইয়াক এটাৰ ভিতৰত ৰাখি .btn-groupআৰু সঠিক মেনু মাৰ্কআপ প্ৰদান কৰি।

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

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

<div শ্ৰেণী = "btn-গোট" > 
  <a class = "btn ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" href = "#" >   
    কাৰ্য কৰা
    <span class = "কেৰেট" </span> 
  </a>
  <ul class = "ড্ৰপডাউন-মেনু" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

বিভাজিত বুটাম ড্ৰপডাউনসমূহ

বুটাম গ্ৰুপ ষ্টাইল আৰু মাৰ্কআপৰ ওপৰত নিৰ্মাণ কৰি আমি সহজেই এটা স্প্লিট বুটাম তৈয়াৰ কৰিব পাৰো। বিভক্ত বুটামসমূহে বাওঁফালে এটা প্ৰামাণিক কাৰ্য্য আৰু সোঁফালে এটা ড্ৰপডাউন টগল প্ৰসংগভিত্তিক সংযোগসমূহৰ সৈতে বৈশিষ্ট্য প্ৰদান কৰে।

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

আমি সাধাৰণ বুটাম ড্ৰপডাউনসমূহত এটা দ্বিতীয় বুটাম কাৰ্য্য প্ৰদান কৰিবলৈ সম্প্ৰসাৰণ কৰোঁ যি এটা পৃথক ড্ৰপডাউন ট্ৰিগাৰ হিচাপে কাম কৰে।

<div শ্ৰেণী = "btn-গোট" > 
  <a class = "btn" href = "#" > কাৰ্য্য </a>  
  <a class = "btn ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" href = "#" >   
    <span class = "কেৰেট" </span> 
  </a>
  <ul class = "ড্ৰপডাউন-মেনু" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

লঘু অবিকল্পিতসমূহ একেটা মাৰ্কআপ, বিভিন্ন শ্ৰেণীসমূহ

শক্তিশালী ভিত্তি শ্ৰেণী

ইয়াত সকলো nav উপাদান—টেব, বড়ি, আৰু তালিকাসমূহ— শ্ৰেণীৰ যোগেদি একেটা ভিত্তি মাৰ্কআপ আৰু শৈলীসমূহ অংশীদাৰী কৰে ।.nav

টেব আৰু বড়ি কিয়

বুটষ্ট্ৰেপত টেব আৰু পিলসমূহ <ul>একেটা মূল HTML ৰ সৈতে এটাত নিৰ্মিত, সংযোগসমূহৰ এটা তালিকা। কেৱল এটা ক্লাছৰ সৈতে টেব বা পিলৰ মাজত শ্বেপ কৰক।

দুয়োটা বিকল্প বিষয়বস্তুৰ উপ-অংশসমূহ বা সম্পৰ্কীয় বিষয়বস্তুৰ পৃষ্ঠাসমূহৰ মাজত নেভিগেট কৰাৰ বাবে অতি উত্তম।

মূল টেবসমূহ

<ul>লিংকসমূহৰ এটা নিয়মীয়া লওক আৰু যোগ কৰক .nav-tabs:

<ul class = "nav nav-টেবসমূহ" > 
  <li শ্ৰেণী = "সক্ৰিয়" > 
    <a href = "#" > ঘৰ </a> 
  </li>
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
</ul>

মৌলিক বড়ি

সেই একেটা HTML লওক, কিন্তু .nav-pillsইয়াৰ পৰিৱৰ্তে ব্যৱহাৰ কৰক:

<ul class = "নৱ নাভ-বড়ি" > 
  <li শ্ৰেণী = "সক্ৰিয়" > 
    <a href = "#" > ঘৰ </a> 
  </li>
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
  <li><a href = "#" > ... </a></li> ৰ দ্বাৰা প্ৰকাশিত 
</ul>

ষ্টেকযোগ্য টেব বা বড়ি উলম্ব কৰক

'em কেনেকৈ ষ্টেক কৰিব

টেব আৰু পিলসমূহ অবিকল্পিতভাৱে অনুভূমিক হোৱাৰ বাবে, মাত্ৰ এটা দ্বিতীয় শ্ৰেণী যোগ কৰক, .nav-stacked, সিহতক উলম্বভাৱে ষ্টেক কৰা যেন দেখুৱাবলৈ।

ষ্টেক কৰা টেবসমূহ

<ul class = "nav nav-tabs nav-ষ্টেক কৰা হৈছে" > 
  ...
</ul>

ষ্টেক কৰা বড়ি

<ul class = "nav nav-pills nav-ষ্টেক কৰা হৈছে" > 
  ...
</ul>

উন্নত nav উপাদানসমূহৰ বাবে ড্ৰপডাউনসমূহ

সহজ কৰি তোলা চহকী মেনু

বুটষ্ট্ৰেপ টেব আৰু পিলছত ড্ৰপডাউন মেনুসমূহ অতি সহজ আৰু মাত্ৰ অলপ অতিৰিক্ত HTML আৰু এটা লঘু jQuery প্লাগইনৰ প্ৰয়োজন।

বুটষ্ট্ৰেপত ড্ৰপডাউনসমূহ আৰম্ভ কৰাৰ নথিপত্ৰসমূহ পঢ়িবলৈ জাভাস্ক্রিপ্ট পৃষ্ঠালৈ যাওক ।

ড্ৰপডাউনৰ সৈতে টেবসমূহ

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

ড্ৰপডাউনৰ সৈতে বড়ি

<ul class = "নৱ নাভ-বড়ি" > 
  <li class = "ড্ৰপডাউন" > 
    <a class = "ড্ৰপডাউন-টগল" 
       data-toggle = "ড্ৰপডাউন"
       href = "#" >
        ড্ৰপডাউন
        <b class = "কেৰেট" </b> 
      </a>
    <ul class = "ড্ৰপডাউন-মেনু" > 
      <!-- সংযোগসমূহ -->
    </ul>
  </li>
</ul>

Nav তালিকাসমূহ সৰল ষ্টেক কৰা navs নিৰ্মাণ কৰক, চাইডবাৰসমূহৰ বাবে অতি উত্তম

এপ্লিকেচন-শৈলী নেভিগেচন

Nav তালিকাসমূহে বৈকল্পিক হেডাৰসমূহৰ সৈতে nav সংযোগসমূহৰ গোটসমূহ নিৰ্মাণ কৰাৰ এটা সহজ আৰু সহজ উপায় প্ৰদান কৰে। OS X ত Finder ৰ দৰে চাইডবাৰত ব্যৱহাৰ কৰাটো ভাল।

গাঁথনিগতভাৱে, সিহঁত টেব আৰু পিলৰ দৰে একেটা মূল নেভ শৈলীত নিৰ্মিত, গতিকে ব্যৱহাৰ আৰু স্বনিৰ্বাচন পোনপটীয়া।

আইকনসমূহৰ সৈতে

Nav তালিকাসমূহো আইকনৰ সৈতে সজ্জিত কৰাটো সহজ। ক্লাছৰ সৈতে সঠিক <i>টেগ যোগ কৰক আৰু আপুনি ছেট কৰা হৈছে।

উদাহৰণ nav তালিকা

লিংকৰ তালিকা এখন লওক আৰু যোগ কৰক class="nav nav-list":

<ul class = "nav nav-তালিকা" > 
  <li শ্ৰেণী = "nav-হেডাৰ" > 
    তালিকা হেডাৰ
  </li>
  <li শ্ৰেণী = "সক্ৰিয়" > 
    <a href = "#" > ঘৰ </a> 
  </li>
  <li>
    <a href = "#" > লাইব্ৰেৰী </a> 
  </li>
  ...
</ul>

আইকনৰ সৈতে উদাহৰণ

একে উদাহৰণ, কিন্তু <i>আইকনৰ বাবে টেগৰ সৈতে।

<ul class = "nav nav-তালিকা" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "আইকন-বুক" </i> 
      পুথিভঁৰাল
    </a>
  </li>
  ...
</ul>

Tabbable nav জাভাস্ক্রিপ্টৰ যোগেদি টেবসমূহক জীৱন্ত কৰি তোলক

কি অন্তৰ্ভুক্ত কৰা হৈছে

টেবসমূহৰ যোগেদি বিষয়বস্তুৰ মাজত টগল কৰিবলে এটা সৰল প্লাগইনৰ সৈতে আপোনাৰ টেবসমূহক জীৱন্ত কৰক। বুটষ্ট্ৰেপে টেবেবল টেবসমূহক চাৰিটা শৈলীত সংহতি কৰে: ওপৰ (অবিকল্পিত), সোঁ, তল, আৰু বাওঁ ।

ইহঁতৰ মাজত সলনি কৰাটো সহজ আৰু মাত্ৰ অতি কম মাৰ্কআপ সলনি কৰাৰ প্ৰয়োজন হয়।

টেবেবলৰ উদাহৰণ

টেবসমূহক টেবযোগ্য কৰিবলৈ, .nav-tabsclass ৰ সৈতে অন্য div ত ৰেপ কৰক .tabbable।

মই ১ নং খণ্ডত আছো।

হাউডি, মই ২ নং খণ্ডত আছো।

ৱাট আপ ছোৱালী, এইটো ছেকচন ৩।

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

সকলো টেবেবল টেব আমাৰ লঘু jQuery প্লাগইনৰ দ্বাৰা চালিত। javascript docs পৃষ্ঠাত tabbable টেবসমূহক কেনেকৈ জীৱন্ত কৰি তুলিব পাৰি তাৰ বিষয়ে অধিক পঢ়ক।

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

পোনপটীয়াকৈ মাৰ্কআপ

টেবযোগ্য টেবসমূহ ব্যৱহাৰ কৰাৰ বাবে এটা ৰেপিং div, টেবসমূহৰ এটা গোট, আৰু বিষয়বস্তুৰ টেবেবল পেনসমূহৰ এটা গোটৰ প্ৰয়োজন।

<div class = "টেববেবল" > 
  <ul class = "nav nav-টেবসমূহ" > 
    <li class = "সক্ৰিয়" ><a href = "#1" data-toggle = "টেব" > অংশ 1 </a></li>   
    <li><a href = "#2" data-toggle = "টেব" > অংশ ২ </a></li>  
  </ul>
  <div class = "টেব-সামগ্ৰী" > 
    <div class = "টেব-পেন সক্ৰিয়" id = "1" >  
      <p> মই ১ নং খণ্ডত আছো। </p>
    </div>
    <div শ্ৰেণী = "টেব-পেন" id = "2" >  
      <p> হাউডি, মই ২ নং খণ্ডত আছো। </p>
    </div>
  </div>
</div>

যিকোনো দিশত টেব কৰিব পৰা যায়

তলত টেবসমূহ

HTML ৰ ক্ৰম ফ্লিপ কৰক আৰু তলত টেব ৰাখিবলৈ এটা ক্লাছ যোগ কৰক।

মই ক ছেকচনত আছো।

হাউডি, মই ছেকচন বিত আছো।

কি আপ ছোৱালী, এইটো ছেকচন চি।

<div class = "টেববুল টেব-তলত" > 
  <div class = "টেব-সামগ্ৰী" > 
    ...
  </div>
  <ul class = "nav nav-টেবসমূহ" > 
    ...
  </ul>
</div>

বাওঁফালে থকা টেবসমূহ

বাওঁফালে টেব ৰাখিবলৈ ক্লাছটো শ্বেপ কৰক।

মই ক ছেকচনত আছো।

হাউডি, মই ছেকচন বিত আছো।

কি আপ ছোৱালী, এইটো ছেকচন চি।

<div class = "টেব কৰিব পৰা টেবসমূহ-বাওঁফালে" > 
  <ul class = "nav nav-টেবসমূহ" > 
    ...
  </ul>
  <div class = "টেব-সামগ্ৰী" > 
    ...
  </div>
</div>

সোঁফালে থকা টেববোৰ

সোঁফালে টেব ৰাখিবলৈ শ্ৰেণীটো শ্বেপ কৰক।

মই ক ছেকচনত আছো।

হাউডি, মই ছেকচন বিত আছো।

কি আপ ছোৱালী, এইটো ছেকচন চি।

<div class = "টেব কৰিব পৰা টেবসমূহ-সোঁফালে" > 
  <ul class = "nav nav-টেবসমূহ" > 
    ...
  </ul>
  <div class = "টেব-সামগ্ৰী" > 
    ...
  </div>
</div>

স্থিতিশীল navbar উদাহৰণ

প্ৰকল্পৰ নাম, নেভিগেচন, আৰু সন্ধান প্ৰপত্ৰৰ সৈতে এটা স্থিতিশীল (ওপৰত স্থিৰ নহয়) নেভবাৰৰ এটা উদাহৰণ।

নৱবৰ মৰাপাট

navbar ক স্থিতিশীল বা স্থিৰ প্ৰদৰ্শনৰ বাবে ইয়াক ভালদৰে গঠন কৰিবলে মাত্ৰ কেইটামান divs ৰ প্ৰয়োজন হয়।

<div class = "নৱবাৰ" > 
  <div class = "নৱবাৰ-অভ্যন্তৰীণ" > 
    <div class = "পাত্ৰ" > 
      ...
    </div>
  </div>
</div>

navbar ক দৰ্শনপৰ্টৰ ওপৰত স্থিৰ কৰিবলে, .navbar-fixed-topআটাইতকৈ বাহিৰৰ div ত যোগ কৰক, .navbar. padding-top: 40px;আপোনাৰ CSS ত, আপুনি আপোনাৰ ত যোগ কৰি ই সৃষ্টি কৰা ওভাৰলেপৰ বাবেও হিচাপ দিব লাগিব <body>।

<div class = "navbar navbar-নিৰ্দিষ্ট-শীৰ্ষ" > 
  ...
</div>

ব্ৰেণ্ড নাম

আপোনাৰ ব্ৰেণ্ড বা প্ৰজেক্টৰ নাম দেখুৱাবলৈ এটা সহজ লিংকৰ বাবে কেৱল এটা এংকৰ টেগৰ প্ৰয়োজন।

<a class = "ব্ৰেণ্ড" href = "#" >  
  প্ৰকল্পৰ নাম
</a>

সন্ধান ফৰ্ম

.navbar-searchসন্ধান প্ৰপত্ৰসমূহে শ্ৰেণীৰ সৈতে navbar ত স্বনিৰ্বাচিত শৈলীসমূহ গ্ৰহণ কৰে । ইয়াক প্ৰান্তিককৰণ কৰিবলৈ অন্তৰ্ভুক্ত কৰক .pull-leftবা .pull-rightতাৰ ওপৰত ।form

<form class = "navbar-অন্বেষণ টানি-বাওঁফালে" > 
  <input type = "text" class = "সন্ধান-প্ৰশ্ন" স্থানধাৰী = "সন্ধান" >   
</form>

ঐচ্ছিক প্ৰতিক্ৰিয়াশীল তাৰতম্য

আপোনাৰ শীৰ্ষবাৰত থকা বিষয়বস্তুৰ পৰিমাণৰ ওপৰত নিৰ্ভৰ কৰি, আপুনি সঁহাৰিজনক বিকল্পসমূহ প্ৰণয়ন কৰিব বিচাৰিব পাৰে। তেনে কৰিবলৈ, আপোনাৰ nav বিষয়বস্তু এটা ধাৰণকাৰী div, .nav-collapse.collapse, ত ৰেপ কৰক আৰু navbar টগল বুটাম যোগ কৰক, .btn-navbar.

<div class = "নৱবাৰ" > 
  <div class = "নৱবাৰ-অভ্যন্তৰীণ" > 
    <div class = "পাত্ৰ" > 
 
      <!-- .btn-navbar ক সংকুচিত navbar বিষয়বস্তুৰ বাবে টগল হিচাপে ব্যৱহাৰ কৰা হয় -->
      <a class = "btn btn-navbar" ডাটা-টগল = "সংকোচন" ডাটা-লক্ষ্য = ".nav-সংকোচন" >   
        <span class = "আইকন-বাৰ" </span> 
        <span class = "আইকন-বাৰ" </span> 
        <span class = "আইকন-বাৰ" </span> 
      </a>
 
      <!-- ব্ৰেণ্ডটো দেখুৱাব বিচাৰিলে নিশ্চয়কৈ বাহিৰত এৰি দিয়ক -->
      <a class = "brand" href = "#" > প্ৰকল্পৰ নাম </a>  
 
      <!-- আপুনি বিচৰা সকলো বস্তু 940px বা তাতকৈ কমত লুকুৱাই ৰাখিব, ইয়াৰ ভিতৰত ৰাখক -->
      <div class = "nav-সংকোচন" > 
        <!-- .নৱ, .নৱবাৰ-অন্বেষণ, .নৱবাৰ-ফৰ্ম, ইত্যাদি -->
      </div>
 
    </div>
  </div>
</div>

মুৰ ডাঙি! প্ৰতিক্ৰিয়াশীল navbar ৰ বাবে সংকুচিত প্লাগইনৰ প্ৰয়োজন ।

Nav লিংকসমূহ

Nav বস্তুসমূহ অক্ৰমবদ্ধ তালিকাৰ জৰিয়তে যোগ কৰাটো সহজ।

<ul শ্ৰেণী = "nav" > 
  <li শ্ৰেণী = "সক্ৰিয়" > 
    <a href = "#" > ঘৰ </a> 
  </li>
  <li><a href = "#" > সংযোগ </a></li> 
  <li><a href = "#" > সংযোগ </a></li> 
</ul>

ড্ৰপডাউনসমূহ যোগ কৰা হৈছে

nav ত ড্ৰপডাউন যোগ কৰাটো অতি সহজ, কিন্তু আমাৰ জাভাস্ক্রিপ্ট প্লাগইনৰ ব্যৱহাৰৰ প্ৰয়োজন ।

<ul শ্ৰেণী = "nav" > 
  <li class = "ড্ৰপডাউন" > 
    <a href = "#" 
          class = "ড্ৰপডাউন-টগল"
          data-toggle = "ড্ৰপডাউন" >
          একাউণ্ট
          <b class = "কেৰেট" </b> 
    </a>
    <ul class = "ড্ৰপডাউন-মেনু" > 
      ...
    </ul>
  </li>
</ul>

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

কিয় ব্যৱহাৰ কৰিব লাগে

ব্ৰেডক্ৰাম নেভিগেচনক ব্যৱহাৰকাৰীসকলক এটা এপ বা এটা চাইটৰ ভিতৰত ক’ত আছে তাক দেখুৱাবলৈ এটা উপায় হিচাপে ব্যৱহাৰ কৰা হয়, কিন্তু প্ৰাথমিক নেভিগেচনৰ বাবে নহয়। ইয়াৰ ব্যৱহাৰ অতি ফলপ্ৰসূ হ’বলৈ বিৰল আৰু সংক্ষিপ্ত কৰি ৰাখক।

উদাহৰণ

এটা উদাহৰণ দেখুওৱা হৈছে যিদৰে ই একাধিক পৃষ্ঠাত প্ৰদৰ্শিত হ'ব পাৰে।

মাৰ্কআপ

HTML হৈছে সংযোগসমূহৰ সৈতে আপোনাৰ প্ৰামাণিক অক্ৰমিত তালিকা।

<ul class = "ব্ৰেডক্ৰাম" > 
  <li>
    <a href = "#" > ঘৰ </a> <span class = "বিভাজক" > / </span>   
  </li>
  <li>
    <a href = "#" > লাইব্ৰেৰী </a> <span class = "বিভাজক" > / </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 = "#" > ১ </a> 
    </li>
    <li><a href = "#" > ২ </a></li> 
    <li><a href = "#" > ৩ </a></li> 
    <li><a href = "#" > ৪ </a></li> 
    <li><a href = "#" > পৰৱৰ্তী </a></li> 
  </ul>
</div>

Pager দ্ৰুত পূৰ্বৰ আৰু পৰৱৰ্তী লিংকৰ বাবে

পেজাৰৰ বিষয়ে

পেজাৰ উপাদান হৈছে পোহৰ মাৰ্কআপ আৰু তাতোকৈ লঘু শৈলীসমূহৰ সৈতে সৰল পৃষ্ঠাকৰণ প্ৰণয়নৰ বাবে সংযোগসমূহৰ এটা গোট। ব্লগ বা আলোচনীৰ দৰে সৰল চাইটৰ বাবে ই অতি উত্তম।

অবিকল্পিত উদাহৰণ

অবিকল্পিতভাৱে, পেজাৰে সংযোগসমূহক কেন্দ্ৰ কৰে।

<ul শ্ৰেণী = "পেজাৰ" > 
  <li>
    <a href = "#" > পূৰ্বৱৰ্তী </a> 
  </li>
  <li>
    <a href = "#" > পৰৱৰ্তী </a> 
  </li>
</ul>

প্ৰান্তিককৃত সংযোগসমূহ

বৈকল্পিকভাৱে, আপুনি প্ৰতিটো সংযোগক কাষলৈ প্ৰান্তিককৰণ কৰিব পাৰে:

<ul শ্ৰেণী = "পেজাৰ" > 
  <li class = "পূৰ্বৰ" > 
    <a href = "#" > ← পুৰণি </a> 
  </li>
  <li class = "পৰৱৰ্তী" > 
    <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>`

অবিকল্পিত থাম্বনেইলসমূহ

অবিকল্পিতভাৱে, Bootstrap ৰ থাম্বনেইলসমূহ নূন্যতম প্ৰয়োজনীয় মাৰ্কআপৰ সৈতে সংযুক্ত প্ৰতিমুৰ্তিসমূহ প্ৰদৰ্শন কৰিবলে ডিজাইন কৰা হৈছে।

অতি কাষ্টমাইজেবল

অলপ অতিৰিক্ত মাৰ্কআপৰ সৈতে, যিকোনো ধৰণৰ HTML বিষয়বস্তু যেনে শিৰোনাম, অনুচ্ছেদ, বা বুটাম থাম্বনেইলত যোগ কৰা সম্ভৱ।

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

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

কাৰ্য কৰা কাৰ্য কৰা
থাম্বনেইল লেবেল

ক্ৰাছ জাষ্টো অডিঅ', ডাপিবাছ এচি ফেচিলিচিছ ইন, এগেষ্টাছ এগেট কোৱাম। ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

কাৰ্য কৰা কাৰ্য কৰা

থাম্বনেইল কিয় ব্যৱহাৰ কৰিব লাগে

থাম্বনেইলসমূহ (পূৰ্বতে .media-gridv1.4 লৈকে) ফটো বা ভিডিঅ'ৰ গ্ৰীড, ছবি সন্ধান ফলাফল, খুচুৰা সামগ্ৰী, পৰ্টফলিঅ', আৰু বহুতোৰ বাবে অতি উত্তম। সেইবোৰ লিংক বা ষ্টেটিক কন্টেন্ট হ’ব পাৰে।

সৰল, নমনীয় মাৰ্কআপ

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

গ্ৰীড স্তম্ভৰ আকাৰ ব্যৱহাৰ কৰে

শেষত, থাম্বনেইলসমূহ উপাদানে বৰ্ত্তমানৰ গ্ৰীড চিস্টেম শ্ৰেণীসমূহ ব্যৱহাৰ কৰে—যেনে .span2বা .span3—থাম্বনেইল মাত্ৰাসমূহ নিয়ন্ত্ৰণৰ বাবে।

মাৰ্কআপটো

পূৰ্বে উল্লেখ কৰা অনুসৰি থাম্বনেইলৰ বাবে প্ৰয়োজনীয় মাৰ্কআপ লঘু আৰু পোনপটীয়া। ইয়াত সংযুক্ত ছবিসমূহৰ বাবে অবিকল্পিত প্ৰতিষ্ঠা চাওক :

<ul class = "থাম্বনেইলসমূহ" > 
  <li শ্ৰেণী = "span3" > 
    <a href = "#" শ্ৰেণী = "থাম্বনেইল" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

থাম্বনেইলত কাষ্টম HTML বিষয়বস্তুৰ বাবে, মাৰ্কআপ অলপ সলনি হয়। <a>যিকোনো ঠাইতে ব্লক স্তৰৰ বিষয়বস্তুৰ অনুমতি দিবলৈ, আমি এটা পছন্দৰ বাবে শ্বেপ কৰোঁ <div>:

<ul class = "থাম্বনেইলসমূহ" > 
  <li শ্ৰেণী = "span3" > 
    <div class = "থাম্বনেইল" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> থাম্বনেইল লেবেল </h5>
      <p> থাম্বনেইল কেপচন ইয়াতেই... </p>
    </div>
  </li>
  ...
</ul>

অধিক উদাহৰণ

আপোনাৰ বাবে উপলব্ধ বিভিন্ন গ্ৰীড শ্ৰেণীসমূহৰ সৈতে আপোনাৰ সকলো বিকল্পসমূহ অন্বেষণ কৰক। আপুনি বিভিন্ন আকাৰৰ মিহলাই মিলাইও কৰিব পাৰে।

লঘু অবিকল্পিতসমূহ

পুনৰ লিখা ভিত্তি শ্ৰেণী

Bootstrap 2 ৰ সৈতে, আমি ভিত্তি শ্ৰেণী সৰল কৰিছো: .alertৰ পৰিবৰ্তে .alert-message। আমি নূন্যতম প্ৰয়োজনীয় মাৰ্কআপো হ্ৰাস কৰিছো— <p>অবিকল্পিতভাৱে নাই প্ৰয়োজনীয়, কেৱল আউটাৰ<div> ।

একক সতৰ্কবাণী বাৰ্তা

কম ক'ডৰ সৈতে এটা অধিক টেকসই উপাদানৰ বাবে, আমি ব্লক সতৰ্কবাণী, অধিক পেডিং আৰু সাধাৰণতে অধিক লিখনীৰ সৈতে অহা বাৰ্তাসমূহৰ বাবে পাৰ্থক্যমূলক ৰূপ আঁতৰাই পেলাইছো। ক্লাছটোও সলনি হৈছে .alert-block৷

জাভাস্ক্রিপ্টৰ সৈতে অতি উত্তম যায়

বুটষ্ট্ৰেপ এটা ডাঙৰ jQuery প্লাগইনৰ সৈতে আহে যি সতৰ্কবাৰ্তাসমূহ সমৰ্থন কৰে, সিহতক বাতিল কৰাটো দ্ৰুত আৰু সহজ কৰি তোলে ।

প্লাগইন পান »

উদাহৰণ সতৰ্কবাণী

আপোনাৰ বাৰ্তা আৰু এটা বৈকল্পিক বন্ধ আইকন সৰল শ্ৰেণীৰ সৈতে এটা div ত ৰেপ কৰক।

× সতৰ্কবাণী! Best check yo self, আপুনি বেছি ভাল দেখা নাই।

<div শ্ৰেণী =  "সতৰ্কবাণী" >
  <a class = "বন্ধ কৰক" > × </a>
  <strong> সতৰ্কবাণী!</strong> বেষ্ট চেক ইয়ো চেল্ফ, আপুনি বেছি ভাল দেখা নাই।
</div>

দুটা বৈকল্পিক শ্ৰেণীৰ সৈতে প্ৰামাণিক সতৰ্কবাণী বাৰ্তা সহজে সম্প্ৰসাৰিত কৰক:.alert-block অধিক পেডিং আৰু লিখনী নিয়ন্ত্ৰণসমূহৰ .alert-headingবাবে আৰু এটা মিল থকা শিৰোনামৰ বাবে।

সতৰ্কবাণী!

Best check yo self, আপুনি বেছি ভাল দেখা নাই। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট।

<div class = "সতৰ্কবাণী-ব্লক" > 
  <a class = "বন্ধ কৰক" > × </a> 
  <h4 class = "সতৰ্কতা-শিৰোনামা" > সতৰ্কবাণী! </h4> 
  Best check yo self, আপনি নহয়...
</div>

এটা সতৰ্কবাণীৰ অৰ্থ সলনি কৰিবলে বৈকল্পিক শ্ৰেণীসমূহ যোগ কৰক

ভুল বা বিপদ

× অ' স্নেপ! কেইটামান কথা সলনি কৰি আকৌ জমা দিবলৈ চেষ্টা কৰক।

<div class = "সতৰ্কবাণী-ত্ৰুটি" > 
  ...
</div>

সফলতা

× বঢ়িয়া! আপুনি এই গুৰুত্বপূৰ্ণ সতৰ্কবাণী বাৰ্তাটো সফলতাৰে পঢ়িছে।

<div class = "সতৰ্কবাণী-সফলতা" > 
  ...
</div>

তথ্য

× মুৰ ডাঙি! এই সতৰ্কবাণী আপোনাৰ মনোযোগৰ প্ৰয়োজন, কিন্তু ই ছুপাৰ গুৰুত্বপূৰ্ণ নহয়।

<div class = "সতৰ্কবাণী-তথ্য" > 
  ...
</div>

উদাহৰণ আৰু মাৰ্কআপ

প্ৰাথমিক

এটা উলম্ব গ্ৰেডিয়েন্টৰ সৈতে অবিকল্পিত অগ্ৰগতি বাৰ।

<div class = "অগ্ৰগতি" > 
  <div শ্ৰেণী = "বাৰ" 
       style = " প্ৰস্থ : ৬০ %; " ></div> 
</div>

ডাঠ

এটা ষ্ট্ৰাইপড ইফেক্ট সৃষ্টি কৰিবলৈ এটা গ্ৰেডিয়েণ্ট ব্যৱহাৰ কৰে।

<div class = "অগ্ৰগতি-তথ্য।" 
     প্ৰগ্ৰেছ-ষ্ট্ৰাইপড" >
  <div শ্ৰেণী = "বাৰ" 
       style = " প্ৰস্থ : ২০ %; " ></div> 
</div>

এনিমেটেড

ডাঠ উদাহৰণটো লৈ ইয়াক সজীৱ কৰি তোলে।

<div class = "অগ্ৰগতি-বিপদ।" 
     প্ৰগ্ৰেছ-ষ্ট্ৰাইপড সক্ৰিয়" >
  <div শ্ৰেণী = "বাৰ" 
       style = " প্ৰস্থ : ৪০ %; " ></div> 
</div>

বিকল্পসমূহ আৰু ব্ৰাউজাৰ সমৰ্থন

অতিৰিক্ত ৰং

প্ৰগ্ৰেছ বাৰে একে ধৰণৰ ষ্টাইলিঙৰ বাবে বুটাম আৰু সতৰ্কবাণীৰ দৰে একে শ্ৰেণীৰ কিছুমান ব্যৱহাৰ কৰে।

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

বৈকল্পিকভাৱে, আপুনি LESS নথিপত্ৰসমূহ স্বনিৰ্বাচিত কৰিব পাৰে আৰু আপোনাৰ নিজৰ ৰং আৰু আকাৰসমূহ ৰোল কৰিব পাৰে।

ব্যৱহাৰ

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

যদি আপুনি .activeশ্ৰেণীটো ব্যৱহাৰ কৰে, আপোনাৰ .progress-stripedঅগ্ৰগতি বাৰসমূহে বাওঁফালৰ পৰা সোঁফাললৈ ষ্ট্ৰাইপসমূহক এনিমেট কৰিব।

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

প্ৰগ্ৰেছ বাৰসমূহে সিহতৰ সকলো প্ৰভাৱ লাভ কৰিবলে CSS3 গ্ৰেডিয়েন্টসমূহ, পৰিৱৰ্তনসমূহ, আৰু এনিমেচনসমূহ ব্যৱহাৰ কৰে। এই বৈশিষ্ট্যসমূহ IE7-8 বা Firefox ৰ পুৰণি সংস্কৰণসমূহত সমৰ্থিত নহয়।

Opera এ এই সময়ত এনিমেচন সমৰ্থন নকৰে।

ওৱেলছ

এটা উপাদানৰ ওপৰত এটা সৰল প্ৰভাৱ হিচাপে কুঁৱাটো ব্যৱহাৰ কৰি ইয়াক এটা ইনছেট প্ৰভাৱ দিব লাগে।

চাওক, মই এটা কুঁৱাত আছো!

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

বেজ

এটা অপঢ়া গণনাৰ বাবে বা এটা সৰল সূচক হিচাপে এটা উপাদানৰ ওপৰত এটা বেজ ব্যৱহাৰ কৰক।

<span class = "বেজ" > ৩ </div>

আইকন বন্ধ কৰক

মডাল আৰু সতৰ্কবাণীৰ দৰে বিষয়বস্তু বাতিল কৰাৰ বাবে সাধাৰণ বন্ধ আইকন ব্যৱহাৰ কৰক।

<a class = "বন্ধ কৰক" > × </a>

বুটাম গোটসমূহ অধিক সঁজুলিদণ্ডীৰ দৰে কাৰ্য্যকৰীতাৰ বাবে বুটামসমূহ যোগদান কৰক

বুটাম গোটসমূহ

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

চেকবক্স আৰু ৰেডিঅ'ৰ সোৱাদ

মুৰ ডাঙি

বুটাম ড্ৰপডাউনসমূহ বুটাম গোটসমূহত নিৰ্মিত প্ৰসংগভিত্তিক ড্ৰপডাউন মেনুসমূহ

বুটাম ড্ৰপডাউন

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

বিভাজিত বুটাম ড্ৰপডাউনসমূহ

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

নেভ, টেব, আৰু বড়িসমূহ অতি স্বনিৰ্বাচিত কৰিব পৰা তালিকা-শৈলী নেভিগেচন

লঘু অবিকল্পিতসমূহ একেটা মাৰ্কআপ, বিভিন্ন শ্ৰেণীসমূহ

শক্তিশালী ভিত্তি শ্ৰেণী

টেব আৰু বড়ি কিয়

মূল টেবসমূহ

মৌলিক বড়ি

ষ্টেকযোগ্য টেব বা বড়ি উলম্ব কৰক

'em কেনেকৈ ষ্টেক কৰিব

ষ্টেক কৰা টেবসমূহ

ষ্টেক কৰা বড়ি

উন্নত nav উপাদানসমূহৰ বাবে ড্ৰপডাউনসমূহ

সহজ কৰি তোলা চহকী মেনু

ড্ৰপডাউনৰ সৈতে টেবসমূহ

ড্ৰপডাউনৰ সৈতে বড়ি

Nav তালিকাসমূহ সৰল ষ্টেক কৰা navs নিৰ্মাণ কৰক, চাইডবাৰসমূহৰ বাবে অতি উত্তম

এপ্লিকেচন-শৈলী নেভিগেচন

আইকনসমূহৰ সৈতে

উদাহৰণ nav তালিকা

আইকনৰ সৈতে উদাহৰণ

Tabbable nav জাভাস্ক্রিপ্টৰ যোগেদি টেবসমূহক জীৱন্ত কৰি তোলক

কি অন্তৰ্ভুক্ত কৰা হৈছে

টেবেবলৰ উদাহৰণ

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

পোনপটীয়াকৈ মাৰ্কআপ

যিকোনো দিশত টেব কৰিব পৰা যায়

তলত টেবসমূহ

বাওঁফালে থকা টেবসমূহ

সোঁফালে থকা টেববোৰ

নৱবৰ

স্থিতিশীল navbar উদাহৰণ

নৱবৰ মৰাপাট

ব্ৰেণ্ড নাম

সন্ধান ফৰ্ম

ঐচ্ছিক প্ৰতিক্ৰিয়াশীল তাৰতম্য

Nav লিংকসমূহ

ড্ৰপডাউনসমূহ যোগ কৰা হৈছে

ব্ৰেডক্ৰামছ

কিয় ব্যৱহাৰ কৰিব লাগে

উদাহৰণ

মাৰ্কআপ

পেজিনেচন বিষয়বস্তুৰ মাজেৰে পেজিং কৰাৰ বাবে দুটা বিকল্প

মাল্টিকন-পৃষ্ঠা পৃষ্ঠাকৰণ

কেতিয়া ব্যৱহাৰ কৰিব লাগে

ষ্টেটফুল পৃষ্ঠাৰ সংযোগ

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

উদাহৰণ

মাৰ্কআপ

Pager দ্ৰুত পূৰ্বৰ আৰু পৰৱৰ্তী লিংকৰ বাবে

পেজাৰৰ বিষয়ে

অবিকল্পিত উদাহৰণ

প্ৰান্তিককৃত সংযোগসমূহ

ইনলাইন লেবেলসমূহ লেবেল আৰু লিখনী টীকা কৰক

থাম্বনেইলসমূহ ছবি, ভিডিঅ', লিখনী, আৰু অধিক গ্ৰীডসমূহ

অবিকল্পিত থাম্বনেইলসমূহ

অতি কাষ্টমাইজেবল

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

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

থাম্বনেইল কিয় ব্যৱহাৰ কৰিব লাগে

সৰল, নমনীয় মাৰ্কআপ

গ্ৰীড স্তম্ভৰ আকাৰ ব্যৱহাৰ কৰে

মাৰ্কআপটো

অধিক উদাহৰণ

সফলতা, সতৰ্কবাণী, আৰু ভুল বাৰ্তাৰ বাবে শৈলীসমূহ সতৰ্কবাণী কৰে

লঘু অবিকল্পিতসমূহ

পুনৰ লিখা ভিত্তি শ্ৰেণী

একক সতৰ্কবাণী বাৰ্তা

জাভাস্ক্রিপ্টৰ সৈতে অতি উত্তম যায়

উদাহৰণ সতৰ্কবাণী

সতৰ্কবাণী!

এটা সতৰ্কবাণীৰ অৰ্থ সলনি কৰিবলে বৈকল্পিক শ্ৰেণীসমূহ যোগ কৰক