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

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

উত্তম পদ্ধতি

বুটাম গোট আৰু সঁজুলিদণ্ডিকা ব্যৱহাৰ কৰাৰ বাবে আমি নিম্নলিখিত নিৰ্দেশনাসমূহৰ পৰামৰ্শ দিওঁ:

• সদায় একেটা উপাদান এটা বুটাম গোটত ব্যৱহাৰ কৰক, <a>বা <button>.
• একেটা বুটাম গ্ৰুপত বিভিন্ন ৰঙৰ বুটাম মিহলি নকৰিব।
• লিখনীৰ অতিৰিক্ত বা তাৰ পৰিবৰ্তে আইকনসমূহ ব্যৱহাৰ কৰক, কিন্তু য'ত উপযুক্ত তাত alt আৰু শিৰোনাম লিখনী অন্তৰ্ভুক্ত কৰাটো নিশ্চিত কৰক।

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

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

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

<div শ্ৰেণী = "btn-গোট" > 
  <বুটাম শ্ৰেণী = "btn" > 1 </button> 
  <বুটাম শ্ৰেণী = "btn" > 2 </button> 
  <বুটাম শ্ৰেণী = "btn" > 3 </button> 
</div>

সঁজুলিদণ্ডিকাৰ উদাহৰণ

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

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

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

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

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

বুটাম গোটসমূহত ড্ৰপডাউনসমূহ

মুৰ ডাঙি! ড্ৰপডাউনৰ সৈতে বুটামসমূহক সঠিক ৰেণ্ডাৰৰ বাবে .btn-groupএটাৰ ভিতৰত পৃথকে পৃথকে নিজৰ মাজত ৰেপ কৰিব লাগিব ।.btn-toolbar

আভাস আৰু উদাহৰণ

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

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

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

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

সকলো বুটামৰ আকাৰৰ সৈতে কাম কৰে

বুটাম ড্ৰপডাউনে যিকোনো আকাৰত কাম কৰে। আপোনাৰ বুটামৰ আকাৰ .btn-large, .btn-small, বা .btn-mini.

জাভাস্ক্রিপ্টৰ প্ৰয়োজন

বুটাম ড্ৰপডাউনসমূহক কাৰ্য্য কৰিবলে বুটষ্ট্ৰেপ ড্ৰপডাউন প্লাগইনৰ প্ৰয়োজন ।

কিছুমান ক্ষেত্ৰত—মোবাইলৰ দৰে—ড্ৰপডাউন মেনুসমূহ ভিউপ’ৰ্টৰ বাহিৰত বিস্তৃত হ’ব। আপুনি প্ৰান্তিককৰণ হস্তচালিতভাৱে বা স্বনিৰ্বাচিত জাভাস্ক্রিপ্টৰ সৈতে সমাধান কৰিব লাগিব ।

আভাস আৰু উদাহৰণ

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

আকাৰসমূহ

অতিৰিক্ত বুটাম শ্ৰেণীসমূহ ব্যৱহাৰ কৰক .btn-mini, .btn-small, বা .btn-largeআকাৰ নিৰ্ধাৰণৰ বাবে।

<div শ্ৰেণী = "btn-গোট" > 
  ...
  <ul class = "ড্ৰপডাউন-মেনু টানি-সোঁফালে" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

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

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

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

ড্ৰপআপ মেনুসমূহ

ড্ৰপডাউন মেনুসমূহক তলৰ পৰা ওপৰলৈ টগল কৰিব পাৰি ৰ তাৎক্ষণিক অভিভাৱকত এটা শ্ৰেণী যোগ কৰি .dropdown-menu। ই ৰ দিশটো উলটিব .caretআৰু মেনুটো নিজেই পুনৰ স্থাপন কৰিব যাতে ওপৰৰ পৰা তললৈ যোৱাৰ পৰিৱৰ্তে তলৰ পৰা ওপৰলৈ যাব পাৰে।

<div class = "btn-গোট ড্ৰপআপ" > 
  <button class = "btn" > ড্ৰপআপ </button> 
  <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >  
    <span class = "কেৰেট" </span> 
  </বুটাম>
  <ul class = "ড্ৰপডাউন-মেনু" > 
    <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  </ul>
</div>

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

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

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

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

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

nav সংযোগসমূহ প্ৰান্তিককৰণ কৰিবলে, .pull-leftবা .pull-rightসঁজুলি শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। দুয়োটা শ্ৰেণীয়ে নিৰ্দিষ্ট দিশত এটা CSS ফ্ল'ট যোগ কৰিব।

মূল টেবসমূহ

<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>

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

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

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

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

• গৃহ
• সহায়
• ড্ৰপডাউন
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• গৃহ
• সহায়
• ড্ৰপডাউন
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

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

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

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

অনুভূমিক বিভাজক

শ্ৰেণীৰ সৈতে এটা খালী তালিকা বস্তু সৃষ্টি কৰি এটা অনুভূমিক বিভাজক যোগ কৰক .divider, যেনে:

<ul class = "nav nav-তালিকা" > 
  ...
  <li class = "বিভাজক" </li> 
  ...
</ul>

উদাহৰণ 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>

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

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

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

টেবসমূহত ম্লান কৰক

টেবসমূহ ফেইড ইন .fadeকৰিবলৈ, প্ৰতিটো ত যোগ কৰক .tab-pane।

jQuery প্লাগইনৰ প্ৰয়োজন

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

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

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

টেবসমূহক টেবযোগ্য কৰিবলৈ, .tab-paneপ্ৰতিটো টেবৰ বাবে একক ID ৰ সৈতে এটা সৃষ্টি কৰক আৰু সিহতক ত ৰেপ কৰক .tab-content।

সোঁ বা বাওঁ প্ৰান্তিককৃত টেবৰ বাবে, .nav-tabsআৰু .tab-contentত মোহাৰিব .tabbable।

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

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

<div class = "tabbable" > <!-- কেৱল বাওঁ/সোঁ টেবৰ বাবে প্ৰয়োজনীয় -->  
  <ul class = "nav nav-টেবসমূহ" > 
    <li class = "সক্ৰিয়" ><a href = "#tab1" data-toggle = "টেব" > অংশ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "টেব" > অংশ ২ </a></li>  
  </ul>
  <div class = "টেব-সামগ্ৰী" > 
    <div class = "টেব-পেন সক্ৰিয়" id = "টেব1" >  
      <p> মই ১ নং খণ্ডত আছো। </p>
    </div>
    <div class = "টেব-পেন" 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 ক স্থিতিশীল বা স্থিৰ প্ৰদৰ্শনৰ বাবে ইয়াক ভালদৰে গঠন কৰিবলে মাত্ৰ কেইটামান divs ৰ প্ৰয়োজন হয়।

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

স্থিৰ কৰা হৈছে navbar

navbar ক দৰ্শনপৰ্টৰ ওপৰত বা তললৈ ঠিক কৰক আটাইতকৈ বাহিৰৰ div ত এটা অতিৰিক্ত শ্ৰেণীৰ সৈতে, .navbar.

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

<div class = "নৱবাৰ নৱবাৰ-নিৰ্দিষ্ট-তল" > 
  ...
</div>

যেতিয়া আপুনি navbar সংলগ্ন কৰে, তলৰ লুকাই থকা অঞ্চলটোৰ বাবে হিচাপ দিবলৈ মনত ৰাখিব। 40px বা তাতকৈ অধিক পেডিং যোগ কৰক <body>। এইটো মূল Bootstrap CSS ৰ পিছত আৰু বৈকল্পিক প্ৰতিক্ৰিয়াশীল CSS ৰ আগত যোগ কৰাটো নিশ্চিত কৰক ।

ব্ৰেণ্ড নাম

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

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

navbar ত ফৰ্মসমূহ

navbar ৰ ভিতৰত এটা ফৰ্ম সঠিকভাৱে শৈলী আৰু অৱস্থান কৰিবলে, তলত দেখুওৱাৰ দৰে উপযুক্ত শ্ৰেণীসমূহ যোগ কৰক। এটা অবিকল্পিত প্ৰপত্ৰৰ বাবে, অন্তৰ্ভুক্ত কৰক .navbar-formআৰু হয় .pull-leftবা .pull-rightইয়াক সঠিকভাৱে প্ৰান্তিককৰণ কৰিবলৈ ।

<form class = "navbar-ফৰ্ম টানি-বাওঁফালে" > 
  <ইনপুট ধৰণ = "পাঠ" শ্ৰেণী = "span2" >  
</form>

এটা অধিক স্বনিৰ্বাচিত সন্ধান প্ৰপত্ৰৰ বাবে, navbar ত বিশেষ শৈলীসমূহৰ বাবে ইনপুটত আৰু যোগ .navbar-searchকৰক ।form.search-query

<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>

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 = "বিভাজক-উলম্ব" </li> 
  ...
</ul>

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

এটা nav, সন্ধান প্ৰপত্ৰ, বা লিখনী প্ৰান্তিককৰণ কৰিবলে, .pull-leftবা .pull-rightসঁজুলি শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। দুয়োটা শ্ৰেণীয়ে নিৰ্দিষ্ট দিশত এটা CSS ফ্ল'ট যোগ কৰিব।

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

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

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

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

নাভবাৰত লিখা

লিখনীৰ ষ্ট্ৰিংসমূহ এটা ত ৰেপ কৰক <.navbar-text>, সাধাৰণতে <p>সঠিক লিডিং আৰু ৰঙৰ বাবে এটা টেগত।

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

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

উদাহৰণ

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

• গৃহ

• Home /
• পুথিভঁৰাল

• Home /
• লাইব্ৰেৰী /
• তথ্য

মাৰ্কআপ

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

<ul class = "ব্ৰেডক্ৰাম" > 
  <li>
    <a href = "#" > ঘৰ </a> <span class = "বিভাজক" > / </span>   
  </li>
  <li>
    <a href = "#" > লাইব্ৰেৰী </a> <span class = "বিভাজক" > / </span>   
  </li>
  <li class = "সক্ৰিয়" > তথ্য </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>

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

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

বৈকল্পিক নিষ্ক্ৰিয় অৱস্থা

পেজাৰ লিংকসমূহেও .disabledপৃষ্ঠাকৰণৰ পৰা সাধাৰণ শ্ৰেণীটো ব্যৱহাৰ কৰে।

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

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

• পূৰ্ৱবৰ্তী
• এটাৰ পাচৰ

<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>

বিষয়ে

বেজসমূহ হৈছে কোনো ধৰণৰ সূচক বা গণনা প্ৰদৰ্শনৰ বাবে সৰু, সৰল উপাদান। ইয়াক সাধাৰণতে Mail.app ৰ দৰে ইমেইল ক্লায়েণ্টত বা পুছ নোটিফিকেচনৰ বাবে মোবাইল এপত পোৱা যায়।

উপলব্ধ শ্ৰেণীসমূহ

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

মাৰ্কআপ

আপোনাৰ বিষয়বস্তু এটা লাইকত ৰেপ কৰক divযাতে:

<div class = "হিৰো-ইউনিট" > 
  <h1> শিৰোনাম </h1>
  <p> টেগলাইন </p>
  <p>
    <a class = "btn btn-প্ৰাথমিক btn-বৃহৎ" > 
      অধিক জানক
    </a>
  </p>
</div>

h1এটা পৃষ্ঠাত বিষয়বস্তুৰ অংশসমূহ উপযুক্তভাৱে স্পেচ আউট আৰু ছেগমেণ্ট কৰিবলৈ এটাৰ বাবে এটা সৰল শ্বেল । ই h1's অবিকল্পিত small, উপাদানৰ লগতে বেছিভাগ অন্য উপাদান (অতিৰিক্ত শৈলীৰ সৈতে) ব্যৱহাৰ কৰিব পাৰে।

<div class = "পৃষ্ঠা-হেডাৰ" > 
  <h1> উদাহৰণ পৃষ্ঠা হেডাৰ </h1>
</div>

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

অবিকল্পিতভাৱে, 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 ত ৰেপ কৰক।

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

মুৰ ডাঙি! iOS ডিভাইচসমূহৰ href="#"সতৰ্কবাণীসমূহ খাৰিজ কৰাৰ বাবে এটাৰ প্ৰয়োজন। ইয়াক আৰু এংকৰ বন্ধ আইকনসমূহৰ বাবে ডাটা বৈশিষ্ট্য অন্তৰ্ভুক্ত কৰাটো নিশ্চিত কৰক। বৈকল্পিকভাৱে, আপুনি <button>ডাটা বৈশিষ্ট্যৰ সৈতে এটা উপাদান ব্যৱহাৰ কৰিব পাৰে, যিটো আমি আমাৰ নথিপত্ৰসমূহৰ বাবে কৰিবলৈ বাছি লৈছো। ব্যৱহাৰ কৰাৰ <button>সময়ত আপুনি অন্তৰ্ভুক্ত কৰিব লাগিব type="button"বা আপোনাৰ প্ৰ-পত্ৰসমূহ জমা নিদিবও পাৰে।

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

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

ভুল বা বিপদ

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

সফলতা

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

তথ্য

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

প্ৰাথমিক

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

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

ডাঠ

এটা ষ্ট্ৰাইপড ইফেক্ট সৃষ্টি কৰিবলে এটা গ্ৰেডিয়েন্ট ব্যৱহাৰ কৰে (কোনো IE নাই)।

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

এনিমেটেড

ডাঠ উদাহৰণ লয় আৰু ইয়াক এনিমেট কৰে (কোনো IE নাই)।

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

অতিৰিক্ত ৰং

প্ৰগ্ৰেছ বাৰসমূহে একে বুটাম আৰু সতৰ্কতা শ্ৰেণীসমূহৰ কিছুমান ব্যৱহাৰ কৰে সামঞ্জস্যপূৰ্ণ শৈলীসমূহৰ বাবে।

ডাঠ বাৰ

কঠিন ৰঙৰ দৰেই আমাৰ ওচৰত বিভিন্ন ধৰণৰ ডাঠ প্ৰগ্ৰেছ বাৰ আছে।

ব্যৱহাৰ

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

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

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

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

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

ওৱেলছ

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

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

আইকন বন্ধ কৰক

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

×

<button class = "বন্ধ কৰক" > × </বুটাম> 

iOS ডিভাইচসমূহক ক্লিক ইভেন্টসমূহৰ বাবে এটা href="#" ৰ প্ৰয়োজন যদি আপুনি এটা এংকৰ ব্যৱহাৰ কৰে।

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