দ্ৰুত-আৰম্ভ উদাহৰণ

কিছুমান দ্ৰুত সাঁচৰ প্ৰয়োজন নেকি? আমি একেলগে ৰখা এই মূল উদাহৰণসমূহ চাওক:

অবিকল্পিত গ্ৰীড

বুটষ্ট্ৰেপৰ অংশ হিচাপে প্ৰদান কৰা অবিকল্পিত গ্ৰীড ব্যৱস্থাপ্ৰণালী এটা 940px বহল 16-স্তম্ভ গ্ৰীড । ই জনপ্ৰিয় ৯৬০ গ্ৰীড ব্যৱস্থাৰ এটা সোৱাদ, কিন্তু বাওঁ আৰু সোঁফালে অতিৰিক্ত মাৰ্জিন/পেডিং নোহোৱাকৈ।

উদাহৰণ গ্ৰীড মাৰ্কআপ

ইয়াত দেখুওৱাৰ দৰে, দুটা "স্তম্ভ"ৰ সৈতে এটা মূল পৰিকল্পনা সৃষ্টি কৰিব পাৰি, প্ৰত্যেকেই আমি আমাৰ গ্ৰীড ব্যৱস্থাৰ অংশ হিচাপে সংজ্ঞায়িত কৰা ১৬টা মূল স্তম্ভৰ এটা সংখ্যাক সামৰি লৈছে। অধিক ভিন্নতাৰ বাবে তলৰ উদাহৰণসমূহ চাওক।

<div শ্ৰেণী = "শাৰী" > 
  <div শ্ৰেণী = "span6" > 
    ...
  </div>
  <div শ্ৰেণী = "span10" > 
    ...
  </div>
</div>

বাহ সজা স্তম্ভ

.rowএটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত এটা সৃষ্টি কৰি যদি আপুনি কৰিবলগীয়া হয় তেন্তে আপোনাৰ বিষয়বস্তু নেষ্ট কৰক ।

নেষ্টেড স্তম্ভৰ উদাহৰণ

<div শ্ৰেণী = "শাৰী" > 
  <div শ্ৰেণী = "span12" > 
    স্তম্ভৰ স্তৰ ১
    <div শ্ৰেণী = "শাৰী" > 
      <div শ্ৰেণী = "span6" > 
        স্তৰ ২
      </div>
      <div শ্ৰেণী = "span6" > 
        স্তৰ ২
      </div>
    </div>
  </div>
</div>

নিজৰ গ্ৰীডটো ৰোল কৰক

বুটষ্ট্ৰেপত নিৰ্মিত হৈছে অবিকল্পিত 940px গ্ৰীড ব্যৱস্থাপ্ৰণালী স্বনিৰ্বাচিত কৰাৰ বাবে এটা মুষ্টিমেয় চলক। অলপ স্বনিৰ্বাচনৰ সৈতে, আপুনি স্তম্ভসমূহৰ আকাৰ, সিহতৰ নালাসমূহ, আৰু সিহঁতে বাস কৰা পাত্ৰ পৰিবৰ্তন কৰিব পাৰিব।

গ্ৰীডৰ ভিতৰত

গ্ৰীড ব্যৱস্থাপ্ৰণালী পৰিবৰ্তন কৰিবলে প্ৰয়োজনীয় চলকসমূহ বৰ্তমান সকলো variables.less.

এতিয়া কাষ্টমাইজ কৰিবলৈ

গ্ৰীড পৰিবৰ্তন কৰাৰ অৰ্থ হ'ল তিনিটা @grid-*চলক সলনি কৰা আৰু কম নথিপত্ৰসমূহ পুনৰ কম্পাইলিং কৰা।

বুটষ্ট্ৰেপ ২৪ টা স্তম্ভলৈকে এটা গ্ৰীড ব্যৱস্থাপ্ৰণালী নিয়ন্ত্ৰণ কৰিবলে সজ্জিত আহে; অবিকল্পিত মাত্ৰ 16। ইয়াত আপোনাৰ গ্ৰীড চলকসমূহ এটা 24-স্তম্ভ গ্ৰীডলৈ স্বনিৰ্বাচিত কৰা কেনেকৈ দেখা যাব।

@gridColumns : ২৪ ;       
@গ্ৰিডস্তম্ভৰ প্ৰস্থ : ২০px ;   
@গ্ৰিডগাটাৰপ্ৰস্থ : ২০px ;   

এবাৰ পুনৰ কম্পাইল কৰিলে, আপুনি ছেট হ’ব!

স্থিৰ বিন্যাস

এটাই প্ৰদান কৰা প্ৰায় যিকোনো ৱেবছাইট বা পৃষ্ঠাৰ বাবে অবিকল্পিত আৰু সহজ 940px-ব্যাপী, কেন্দ্ৰীভূত বিন্যাস <div.container>।

<শৰীৰ>
  <div class = "পাত্ৰ" > 
    ...
  </div>
</body>

তৰল পদাৰ্থৰ বিন্যাস

নূন্যতম আৰু সৰ্বোচ্চ-প্ৰস্থ আৰু এটা বাওঁফালৰ কাষবাৰৰ সৈতে এটা বিকল্প, নমনীয় তৰল পৃষ্ঠা গঠন। এপ আৰু ডক্সৰ বাবে অতি উত্তম।

<শৰীৰ>
  <div class = "পাত্ৰ-তৰল" > 
    <div class = "চাইডবাৰ" > 
      ...
    </div>
    <div class = "সামগ্ৰী" > 
      ...
    </div>
  </div>
</body>

শিৰোনাম আৰু কপি

আপোনাৰ ৱেবপৃষ্ঠাসমূহ গঠন কৰাৰ বাবে এটা প্ৰামাণিক টাইপোগ্ৰাফিক হাইৰাৰ্কি।

সম্পূৰ্ণ টাইপোগ্ৰাফিক গ্ৰীডটো আমাৰ variables.less ফাইলত দুটা Less চলকৰ ওপৰত ভিত্তি কৰি তৈয়াৰ কৰা হৈছে: @basefontআৰু @baseline. প্ৰথমটো হৈছে গোটেইখিনিতে ব্যৱহৃত ভিত্তি ফন্ট-আকাৰ আৰু দ্বিতীয়টো হৈছে ভিত্তি ৰেখা-উচ্চতা।

আমি সেই চলকসমূহ ব্যৱহাৰ কৰো, আৰু কিছুমান গণিত, আমাৰ সকলো ধৰণৰ আৰু অধিক মাৰ্জিন, পেডিং, আৰু লাইন-উচ্চতা সৃষ্টি কৰিবলৈ।

h1. শিৰোনাম ১

h2. শিৰোনাম ২

h3. শিৰোনাম ৩

h4. শিৰোনাম ৪

h৫. শিৰোনাম ৫

h6. শিৰোনাম ৬

উদাহৰণ অনুচ্ছেদ

নুল্লম কুইছ ৰিছুছ এগেট উৰ্না মলিছ অৰ্নাৰে ভেল ইউ লিও। Cum sociis natoque পেনাটিবাছ এট মেগনিছ ডি পাৰ্চুৰিয়েন্ট মন্টেছ, নাচেটাৰ ৰিডিকুলাছ মুছ। নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

উদাহৰণ শিৰোনাম উপ-শিৰোনামা আছে...

Misc. উপাদানসমূহ

জোৰ, ঠিকনা, & সংক্ষিপ্তকৰণ ব্যৱহাৰ কৰা

<strong> <em> <address> <abbr>

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

এটা শব্দ বা বাক্যাংশৰ চাৰিওফালৰ কপিৰ তুলনাত অতিৰিক্ত গুৰুত্ব বা গুৰুত্ব সূচাবলৈ জোৰ দিয়া টেগ ( <strong>আৰু ) ব্যৱহাৰ কৰিব লাগে। গুৰুত্বৰ বাবে আৰু মানসিক চাপৰ<em> ওপৰত গুৰুত্ব দিয়াৰ বাবে ব্যৱহাৰ কৰক ।<strong><em>

এটা অনুচ্ছেদত গুৰুত্ব দিয়া হৈছে

Fusce dapibus , tellus ac cursus commodo , tortor mauris কণ্ডিমেণ্টাম নিভ , উট ফাৰ্মেণ্টাম মাছা জষ্টো বহি আমেত ৰিছুছ। মেচেনাছ ফ’চিবাছ মলিছ ইন্টাৰডাম। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু।

টোকা:<b> HTML5 ত আৰু টেগ ব্যৱহাৰ কৰাটো এতিয়াও ঠিকেই আছে <i>আৰু সেইবোৰ ক্ৰমে গাঢ় আৰু ইটালিক ষ্টাইল কৰিব নালাগে (যদিও যদি অধিক অৰ্থবোধক উপাদান আছে, ইয়াক ব্যৱহাৰ কৰক)। <b>অতিৰিক্ত গুৰুত্ব নিদিয়াকৈ শব্দ বা বাক্যাংশক উজ্জ্বল কৰিবলৈ বুজায়, আনহাতে <i>ই বেছিভাগেই কণ্ঠ, কাৰিকৰী শব্দ আদিৰ বাবে।

ঠিকনাসমূহ

মৌলটো ইয়াৰ <address>ওচৰৰ পূৰ্বপুৰুষৰ বাবে যোগাযোগৰ তথ্যৰ বাবে ব্যৱহাৰ কৰা হয়, বা সমগ্ৰ কামৰ শৰীৰটোৰ বাবে। ইয়াক কেনেকৈ ব্যৱহাৰ কৰিব পাৰি তাৰ দুটা উদাহৰণ দিলোঁ:

টোকা: এটা শাৰীৰ প্ৰতিটো শাৰী <address>এটা শাৰী-বিৰতি ( <br />) ৰে শেষ কৰিব লাগিব বা এটা ব্লক-স্তৰৰ টেগত (যেনে, <p>) ৰেপ কৰিব লাগিব বিষয়বস্তু সঠিকভাৱে গঠন কৰিবলে।

সংক্ষিপ্ত ৰূপ

সংক্ষিপ্তকৰণ আৰু সংক্ষিপ্ত ৰূপৰ বাবে, <abbr>টেগ ব্যৱহাৰ কৰক ( HTML5<acronym> ত অবচিত )। টেগৰ ভিতৰত চৰ্টহেণ্ড ফৰ্মটো ৰাখক আৰু সম্পূৰ্ণ নামৰ বাবে এটা শিৰোনাম নিৰ্ধাৰণ কৰক।

ব্লককোটসমূহ

<blockquote> <p> <small>

কেনেকৈ উদ্ধৃতি দিব

এটা ব্লককোট অন্তৰ্ভুক্ত কৰিবলৈ, ৰেপ কৰক আৰু <blockquote>টেগ কৰক। আপোনাৰ উৎস উদ্ধৃতি দিবলৈ উপাদানটো ব্যৱহাৰ কৰক আৰু আপুনি ইয়াৰ আগতে এটা em ডেচ পাব।<p><small><small>&mdash;

লৰেম ইপ্সম ডলৰ বহা আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante venenatis dapibus posuere velit alicet.

ডাঃ জুলিয়াছ হিবাৰ্ট

<ব্লককোট>
  <p> লৰেম ইপচুম ডলৰ বহি আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট। পূৰ্ণসংখ্যা posuere erat এটা ante venenatis dapibus posuere velit alicet. </p>
  <small> ডাঃ জুলিয়াছ হিবাৰ্ট </small>
</blockquote> ৰ দ্বাৰা প্ৰকাশিত

অনাৰ্ডাৰেড<ul>

• লৰেম ইপচুম ডলৰ বহি আমেট
• Consectetur adipiscing অভিজাত
• পূৰ্ণসংখ্যা molestie lorem এ massa
• প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
• নুল্লা ভলুটপট এলিকুৱাম ভেলিট
  • ফেচেলাছ ইয়াকুলিছ নেক
  • Purus sodales ultricies
  • ভেষ্টিবুলুম লাওৰিট পৰ্টিটৰ চেম
  • 'এক ট্ৰিষ্টিক লিবেৰ' volutpat at
• ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
• Aenean বহি আমেট এৰত nunc
• এগেট পৰ্টটিটৰ লৰেম

আনষ্টাইল কৰা<ul.unstyled>

• লৰেম ইপচুম ডলৰ বহি আমেট
• Consectetur adipiscing অভিজাত
• পূৰ্ণসংখ্যা molestie lorem এ massa
• প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
• নুল্লা ভলুটপট এলিকুৱাম ভেলিট
  • ফেচেলাছ ইয়াকুলিছ নেক
  • Purus sodales ultricies
  • ভেষ্টিবুলুম লাওৰিট পৰ্টিটৰ চেম
  • 'এক ট্ৰিষ্টিক লিবেৰ' volutpat at
• ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
• Aenean বহি আমেট এৰত nunc
• এগেট পৰ্টটিটৰ লৰেম

অৰ্ডাৰ দিয়া হৈছে<ol>

1. লৰেম ইপচুম ডলৰ বহি আমেট
2. Consectetur adipiscing অভিজাত
3. পূৰ্ণসংখ্যা molestie lorem এ massa
4. প্ৰিটিয়াম নিছল এলিকেটত ফেচিলিচিছ
5. নুল্লা ভলুটপট এলিকুৱাম ভেলিট
6. ফ'চিবাছ পৰ্টা লেকাছ ফ্ৰিংজিলা ভেল
7. Aenean বহি আমেট এৰত nunc
8. এগেট পৰ্টটিটৰ লৰেম

বিৱৰণdl

বিৱৰণ তালিকাসমূহ

শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।

ইউইস্মোড

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

ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ।

মালেসুয়াডা পোর্টা

ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড।

ক'ড

<code> <pre>

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

ক'ড উপস্থাপন কৰা

ক'ড, ব্লকসমূহ বা কেৱল ইনলাইন স্নিপেটসমূহ, সঠিক টেগত ৰেপিং কৰি শৈলীৰ সৈতে প্ৰদৰ্শন কৰিব পাৰি। একাধিক শাৰীত বিস্তৃত ক'ডৰ ব্লকৰ বাবে, <pre>উপাদানটো ব্যৱহাৰ কৰক। ইনলাইন ক'ডৰ বাবে, <code>উপাদানটো ব্যৱহাৰ কৰক।

<div>
  <h1>শিৰোনামা</h1>
  <p>ইয়াত কিবা এটা...</p>
</div>

<div> <h1> শিৰোনাম </h1> <p> ইয়াত ঠিক কিবা এটা... </p> </div>
  
  

ইনলাইন লেবেলসমূহ

<span class="label">

আপোনাৰ শৰীৰৰ লিখনিত যিকোনো বাক্যাংশৰ প্ৰতি মনোযোগ আকৰ্ষণ কৰক বা ফ্লেগ কৰক।

যিকোনো বস্তু লেবেল লগাওক

কেতিয়াবা সেই আড়ম্বৰপূৰ্ণ New! বা ক'ড লিখাৰ সময়ত গুৰুত্বপূৰ্ণ ফ্লেগসমূহ? বাৰু, এতিয়া তোমাৰ হাতত সেইবোৰ আছে। ইয়াত অবিকল্পিতভাৱে কি অন্তৰ্ভুক্ত কৰা হৈছে:

মিডিয়া গ্ৰীড

কম HTML ফুটপ্ৰিণ্ট আৰু নূন্যতম শৈলীৰ সৈতে পৃষ্ঠাসমূহত বিভিন্ন আকাৰৰ থাম্বনেইলসমূহ প্ৰদৰ্শন কৰক।

উদাহৰণ থাম্বনেইল

থাম্বনেইলসমূহ .media-gridযিকোনো আকাৰৰ হ'ব পাৰে, কিন্তু সিহঁতে সৰ্বোত্তম কাম কৰে যেতিয়া অন্তৰ্নিৰ্মিত বুটষ্ট্ৰেপ গ্ৰীড ব্যৱস্থাপ্ৰণালীলৈ প্ৰত্যক্ষভাৱে মেপ কৰা হয় । .span290, 210, আৰু 330 ৰ দৰে ছবিৰ প্ৰস্থই , .span4, আৰু .span6স্তম্ভৰ আকাৰ সমান কৰিবলৈ পেডিঙৰ কেইটামান পিক্সেলৰ সৈতে একত্ৰিত হয় ।

ডাঙৰ

মাধ্যম

সৰু

তেওঁলোকক ক’ডিং কৰা

মিডিয়া গ্ৰীডসমূহ ব্যৱহাৰ কৰাটো সহজ আৰু মাৰ্কআপ ফালে যথেষ্ট সহজ। ইহঁতৰ মাত্ৰাসমূহ বিশুদ্ধভাৱে অন্তৰ্ভুক্ত কৰা ছবিসমূহৰ আকাৰৰ ওপৰত ভিত্তি কৰি কৰা হয়।

<ul class = "মিডিয়া-গ্ৰিড" > 
  <li>
    <a href = "#" > 
      <img class = "থাম্বনেইল" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "থাম্বনেইল" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

টেবুল নিৰ্মাণ কৰা

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

টেবুলবোৰ বৰ ভাল—বহু কামৰ বাবে। গ্ৰেট টেবুলসমূহ, অৱশ্যে, উপযোগী, স্কেলেবল, আৰু পঢ়িব পৰা (ক'ড স্তৰত) হ'বলৈ অলপ মাৰ্কআপ প্ৰেমৰ প্ৰয়োজন। সহায়ক হোৱাকৈ কেইটামান টিপছ আগবঢ়োৱা হ’ল।

আপোনাৰ স্তম্ভ হেডাৰসমূহ সদায় <thead>এনেদৰে ৰেপ কৰক যে হাইৰাৰ্কি <thead>> <tr>> হয় <th>।

স্তম্ভ হেডাৰসমূহৰ দৰেই, আপোনাৰ টেবুলৰ সকলো মূখ্য বিষয়বস্তু এটা ত ৰেপ কৰিব লাগে <tbody>যাতে আপোনাৰ হাইৰাৰ্কি <tbody>> <tr>> হয় <td>।

উদাহৰণ: অবিকল্পিত টেবুল শৈলীসমূহ

সকলো টেবুল স্বয়ংক্ৰিয়ভাৱে কেৱল প্ৰয়োজনীয় সীমাসমূহৰ সৈতে ষ্টাইল কৰা হ'ব যাতে পঠনযোগ্যতা নিশ্চিত কৰিব পাৰি আৰু গঠন ৰক্ষণাবেক্ষণ কৰিব পাৰি। অতিৰিক্ত শ্ৰেণী বা বৈশিষ্ট্য যোগ কৰাৰ প্ৰয়োজন নাই।

<টেবুল>
  ...
</table>

উদাহৰণ: ঘনীভূত টেবুল

টান ঠাইত অধিক তথ্যৰ প্ৰয়োজন হোৱা টেবুলৰ বাবে, পেডিং আধালৈ কাটি পেলোৱা ঘনীভূত সোৱাদ ব্যৱহাৰ কৰক। ইয়াক সীমা আৰু জেব্ৰা-ষ্ট্ৰাইপৰ সৈতেও ব্যৱহাৰ কৰিব পাৰি, ঠিক অবিকল্পিত টেবুল শৈলীসমূহৰ দৰে।

উদাহৰণ: সীমাবদ্ধ টেবুল

আপোনাৰ টেবুলবোৰক চুকবোৰ ঘূৰণীয়া কৰি আৰু সকলো ফালে সীমা যোগ কৰি মাত্ৰ অলপ চিকচিকিয়া দেখাওক।

<table class = "সীমাযুক্ত-টেবুল" > 
  ...
</table>

উদাহৰণ: জেব্ৰা-ষ্ট্ৰাইপড

জেব্ৰা-ষ্ট্ৰাইপিং যোগ কৰি আপোনাৰ টেবুলসমূহৰ সৈতে অলপ আড়ম্বৰপূৰ্ণ হওক—মাত্ৰ .zebra-stripedক্লাছটো যোগ কৰক।

টোকা: Zebra-striping এটা প্ৰগতিশীল উন্নয়ন IE8 আৰু তলৰ দৰে পুৰণি ব্ৰাউজাৰৰ বাবে উপলব্ধ নহয়।

<table class = "জেব্ৰা-ষ্ট্ৰাইপড" > 
  ...
</table>

উদাহৰণ: জেব্ৰা-ষ্ট্ৰাইপড w/ TableSorter.js

পূৰ্বৰ উদাহৰণটো লৈ, আমি jQuery আৰু Tablesorter প্লাগইনৰ যোগেদি সজাই পৰাই তোলা কাৰ্য্যকৰীতা প্ৰদান কৰি আমাৰ টেবুলসমূহৰ উপযোগিতা উন্নত কৰোঁ । সজাই পৰাই তুলিবলৈ যিকোনো স্তম্ভৰ হেডাৰত ক্লিক কৰক।

<script src = "js/jquery/jquery.টেবুলসৰ্টাৰ.মিন.জেএছ" ></script> 
<স্ক্রিপ্ট > 
  $ ( ফাংচন () { 
    $ ( "টেবুল#sortটেবুলউদাহৰণ" ). টেবুলছৰ্টাৰ ({ সৰ্টলিষ্ট : [[ 1 , 0 ]] });  
  });
</script>
<table class = "জেব্ৰা-ষ্ট্ৰাইপড" > 
  ...
</table>

অবিকল্পিত শৈলীসমূহ

সকলো প্ৰপত্ৰক অবিকল্পিত শৈলী দিয়া হৈছে সিহতক এটা পঢ়িব পৰা আৰু স্কেলেবল ধৰণে উপস্থাপন কৰিবলে। লিখনী ইনপুটসমূহ, নিৰ্ব্বাচন তালিকাসমূহ, লিখনী অঞ্চলসমূহ, ৰেডিঅ' বুটামসমূহ আৰু চেকবাকচসমূহ, আৰু বুটামসমূহৰ বাবে শৈলীসমূহ প্ৰদান কৰা হৈছে।

ষ্টেক কৰা ফৰ্ম

আপোনাৰ প্ৰপত্ৰৰ HTML ত যোগ কৰক .form-stackedআৰু আপুনি তেওঁলোকৰ বাওঁফালে নহয়, তেওঁলোকৰ ক্ষেত্ৰসমূহৰ ওপৰত লেবেলসমূহ পাব। আপোনাৰ প্ৰপত্ৰসমূহ চুটি হ'লে বা গধুৰ প্ৰপত্ৰসমূহৰ বাবে আপোনাৰ ইনপুটৰ দুটা স্তম্ভ থাকিলে ই অতি উত্তম কাম কৰে।

ক্ষেত্ৰৰ আকাৰসমূহ গঠন কৰক

আপোনাৰ মাৰ্কআপত মাত্ৰ কেইটামান শ্ৰেণী যোগ কৰি যিকোনো প্ৰপত্ৰ input, select, বা প্ৰস্থ স্বনিৰ্বাচিত কৰক।textarea

v1.3.0 ৰ পৰা, আমি ফৰ্ম উপাদানসমূহৰ বাবে গ্ৰীড-ভিত্তিক আকাৰ নিৰ্ধাৰণ শ্ৰেণীসমূহ যোগ কৰিছো। অনুগ্ৰহ কৰি বৰ্তমানৰ .mini, .small, ইত্যাদি শ্ৰেণীসমূহৰ ওপৰত এইবোৰ ব্যৱহাৰ কৰক।

বুটামসমূহ

এটা নিয়ম হিচাপে, বুটামসমূহ কাৰ্য্যসমূহৰ বাবে ব্যৱহাৰ কৰা হয় আনহাতে সংযোগসমূহ বস্তুসমূহৰ বাবে ব্যৱহাৰ কৰা হয়। উদাহৰণস্বৰূপে, "ডাউনলোড" এটা বুটাম হ'ব পাৰে আৰু "শেহতীয়া কাৰ্য্যকলাপ" এটা সংযোগ হ'ব পাৰে।

সকলো বুটাম অবিকল্পিতভাৱে এটা পাতল ধূসৰ শৈলীলৈ, কিন্তু বিভিন্ন ৰঙৰ শৈলীৰ বাবে বহুতো কাৰ্য্যকৰী শ্ৰেণী প্ৰয়োগ কৰিব পাৰি। এই শ্ৰেণীসমূহৰ ভিতৰত আছে নীলা .primaryশ্ৰেণী, পাতল নীলা .infoশ্ৰেণী, সেউজীয়া .successশ্ৰেণী, ৰঙা .dangerশ্ৰেণী।

উদাহৰণ বুটাম

বুটাম শৈলীসমূহ প্ৰয়োগ কৰা যিকোনো বস্তুত প্ৰয়োগ কৰিব পাৰি .btn। <a>সাধাৰণতে আপুনি এইবোৰ কেৱল , <button>, আৰু নিৰ্ব্বাচন <input>উপাদানসমূহত প্ৰয়োগ কৰিব বিচাৰিব । ইয়াত কেনেকুৱা দেখা যায়:

বিকল্প আকাৰ

ডাঙৰ বা সৰু বুটামৰ আড়ম্বৰপূৰ্ণ? ইয়াত আছে!

অক্ষম অৱস্থা

যিবোৰ বুটাম সক্ৰিয় নহয় বা এটা বা আন এটা কাৰণত এপটোৱে নিষ্ক্ৰিয় কৰিছে, সেইবোৰৰ বাবে নিষ্ক্ৰিয় অৱস্থা ব্যৱহাৰ কৰক। সেইটো .disabledলিংকৰ বাবে আৰু উপাদানৰ :disabledবাবে ।<button>

লিংকসমূহ

বুটামসমূহ

কি হৈছে

আমাৰ টপবাৰ হৈছে এটা স্থিৰ বাৰ য'ত এটা ৱেবছাইটৰ ল'গ' বা নাম, প্ৰাথমিক নেভিগেচন, আৰু সন্ধান প্ৰপত্ৰ থাকে।

কাষ্টমাইজেবল

ভিতৰৰ সকলো উপাদান, আৰু সম্পূৰ্ণ টপবাৰটোও, বৈকল্পিক। আপুনি এটা ল'গ'/নাম, nav, সন্ধান, আৰু এটা গৌণ nav—বা তাৰ যিকোনো সংমিশ্ৰণ অন্তৰ্ভুক্ত কৰিবলৈ নিৰ্ব্বাচন কৰিব পাৰে।

ড্ৰপডাউন অন্তৰ্ভুক্ত

মূল নেভিগেচনৰ অংশ হিচাপে, আমি আপোনাৰ বাবে আপোনাৰ নেভত ড্ৰপডাউন যোগ কৰাৰ ক্ষমতা অন্তৰ্ভুক্ত কৰিছো। ওপৰৰ গৌণ navটো চাওক (সোঁফালে প্ৰান্তিককৃত) কেনেকৈ কৰা হৈছে চাবলৈ। ড্ৰপডাউন টেগসমূহে বৰ্তমান পৃষ্ঠা নিৰ্বাচন দেখুৱাবলৈও liসমৰ্থন কৰে।.active

টেব আৰু বড়ি

এটা ৰ সৈতে সৰল গৌণ নেভিগেচন সৃষ্টি কৰক <ul>। উপযুক্ত শ্ৰেণী যোগ কৰি টেব বা বড়িৰ মাজত শ্বেপ কৰক।

আমাৰ একাউণ্ট ছেটিংছ পৃষ্ঠা আৰু একে ধৰণৰ বিষয়বস্তুৰ পৃষ্ঠাৰ মাজত টগল কৰাৰ বাবে ব্যৱহাৰকাৰীৰ সময়ৰেখাৰ দৰে বিষয়বস্তুৰ উপ-অংশসমূহৰ বাবে অতি উত্তম। টেবযুক্ত বা পিল শৈলীত উপলব্ধ।

মূল টেবসমূহৰ উদাহৰণ

টেবসমূহক নিয়মীয়া নেভিগেচন হিচাপে ব্যৱহাৰ কৰিব পাৰি (একেটা টেবত বাহ্যিক পৃষ্ঠাসমূহ লোড কৰা) বা বিষয়বস্তুৰ পেনসমূহ শ্বেপ কৰাৰ বাবে টেব কৰিব পৰা বিষয়বস্তু অঞ্চল হিচাপে ব্যৱহাৰ কৰিব পাৰি। আমাৰ এটা টেবছ প্লাগইন আছে যিটো ব্যৱহাৰ কৰি পিছৰটোক একত্ৰিত কৰিব পাৰি।

• গৃহ
• ৰূপৰেখা
• বাৰ্তাসমূহ
• ছেটিংছ
• যোগাযোগ কৰক
• ড্ৰপডাউন
  • গৌণ সংযোগ
  • ইয়াত আৰু কিবা এটা
  • আন এটা লিংক

<ul শ্ৰেণী = "টেবসমূহ" > 
  <li class = "সক্ৰিয়" ><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>

মৌলিক বড়িৰ উদাহৰণ

• গৃহ
• ৰূপৰেখা
• বাৰ্তাসমূহ
• ছেটিংছ
• যোগাযোগ কৰক

<ul class = "বড়ি" > 
  <li class = "সক্ৰিয়" ><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>

ব্ৰেডক্ৰামছ

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

• গৃহ

• Home /
• মাজৰ পৃষ্ঠা

• Home /
• মাজৰ পৃষ্ঠা /
• আনটো

• Home /
• মাজৰ পৃষ্ঠা /
• আন এটা /
• তুমি ইয়াত আছা

<ul class = "ব্ৰেডক্ৰাম" > 
  <li><a href = "#" > ঘৰ </a> <span class = "বিভাজক" > / </span></li>   
  <li><a href = "#" > মধ্য পৃষ্ঠা </a> <span class = "বিভাজক" > / </span></li>   
  <li><a href = "#" > আন এটা </a> <span class = "divider" > / </span></li>   
  <li class = "active" > আপুনি ইয়াত আছে </li> 
</ul>

পেজিনেচন

Rdio দ্বাৰা অনুপ্ৰাণিত আল্ট্ৰা সৰল আৰু নূন্যতম শৈলীৰ পৃষ্ঠাকৰণ। ডাঙৰ ব্লকটো মিছ কৰাটো কঠিন, সহজে স্কেলেবল, আৰু ডাঙৰ ক্লিক এৰিয়া প্ৰদান কৰে।

<div class = "পৃষ্ঠাকৰণ" > 
  <ul>
    <li class = "পূৰ্বৰ নিষ্ক্ৰিয় কৰা হৈছে" ><a href = "#" > ← পূৰ্বৰ </a></li>  
    <li class = "সক্ৰিয়" ><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 class = "পৰৱৰ্তী" ><a href = "#" > পৰৱৰ্তী → </a></li>  
  </ul>
</div>

মূল সতৰ্কবাণীসমূহ

.alert-message

এটা কাৰ্য্যৰ বিফলতা, সম্ভাৱ্য বিফলতা, বা সফলতা আলোকপাত কৰাৰ বাবে এক-শাৰী বাৰ্তাসমূহ। বিশেষকৈ ফৰ্মৰ বাবে উপযোগী।

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

উদাহৰণ ক'ড

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

বাৰ্তাসমূহ ব্লক কৰক

.alert-message.block-message

যিবোৰ বাৰ্তাৰ বাবে অলপ ব্যাখ্যাৰ প্ৰয়োজন হয়, সেইবোৰৰ বাবে আমাৰ ওচৰত অনুচ্ছেদ শৈলী সতৰ্কবাণী আছে। এইবোৰ দীঘলীয়া ভুল বাৰ্তাসমূহ বাবল আপ কৰাৰ বাবে, এটা ব্যৱহাৰকাৰীক এটা বাকী থকা কাৰ্য্যৰ বিষয়ে সতৰ্ক কৰি দিয়াৰ বাবে, বা কেৱল পৃষ্ঠাত অধিক জোৰ দিয়াৰ বাবে তথ্য উপস্থাপন কৰাৰ বাবে নিখুঁত।

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

উদাহৰণ ক'ড

<div class = "সতৰ্কতা-বাৰ্তা ব্লক-বাৰ্তা সতৰ্কবাণী" > 
  <a class = "বন্ধ কৰক" href = "#" > × </a>  
  <p><strong> পবিত্ৰ গুয়াকামোল! এইটো এটা সতৰ্কবাণী! </strong> বেষ্ট চেক ইয়ো চেল্ফ, আপুনি বেছি ভাল দেখা নাই। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট। </p>
  <div class = "সতৰ্কতা-কাৰ্য্যসমূহ" > 
    <a class = "btn small" href = "#" > এই কাৰ্য্য কৰক </a> <a class = "btn small" href = "#" > বা এইটো কৰক </a>     
  </div>
</div>

মডালসমূহ

মডালসমূহ—সংলাপসমূহ বা লাইটবক্সসমূহ—প্ৰসংগভিত্তিক কাৰ্য্যসমূহৰ বাবে অতি উত্তম যিবোৰ পৰিস্থিতিত পটভূমি প্ৰসংগ ৰক্ষণাবেক্ষণ কৰাটো গুৰুত্বপূৰ্ণ।

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

সঁজুলিৰ টিপছ

Twipsies এটা বিভ্ৰান্ত ব্যৱহাৰকাৰীক সহায় আৰু সঠিক দিশত আঙুলিয়াই দিয়াৰ বাবে ছুপাৰ উপযোগী।

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

Popovers

বিন্যাসত কোনো প্ৰভাৱ নেপেলোৱাকৈ এটা পৃষ্ঠালৈ উপপাঠ্য তথ্য প্ৰদান কৰিবলৈ popovers ব্যৱহাৰ কৰক।

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

আৰম্ভ কৰা

Bootstrap লাইব্ৰেৰীৰ সৈতে javascript সংহতি কৰাটো অতি সহজ। তলত আমি মূল কথাবোৰলৈ যাওঁ আৰু আপোনাক আৰম্ভ কৰিবলৈ কিছুমান ভয়ংকৰ প্লাগইন প্ৰদান কৰোঁ!

জাভাস্ক্রিপ্ট ডক্স দেখুন »

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

Bootstrap ৰ কিছুমান প্ৰাথমিক উপাদানক নতুন স্বনিৰ্বাচিত প্লাগইনসমূহৰ সৈতে জীৱন্ত কৰক যি jQuery আৰু Ender ৰ সৈতে কাম কৰে । আমি আপোনাক আপোনাৰ নিৰ্দিষ্ট বিকাশৰ প্ৰয়োজনীয়তা অনুসৰি সেইবোৰ সম্প্ৰসাৰণ আৰু পৰিৱৰ্তন কৰিবলৈ উৎসাহিত কৰোঁ।

জাভাস্ক্রিপ্টৰ প্রয়োজন আছেনে?

নহয়! বুটষ্ট্ৰেপক প্ৰথম আৰু প্ৰধানকৈ এটা CSS লাইব্ৰেৰী হ'বলৈ ডিজাইন কৰা হৈছে । এই জাভাস্ক্রিপ্টে অন্তৰ্ভুক্ত শৈলীসমূহৰ ওপৰত এটা মূল পাৰস্পৰিক স্তৰ প্ৰদান কৰে।

কিন্তু, যিসকলক জাভাস্ক্রিপ্টৰ প্ৰয়োজন, আমি ওপৰৰ প্লাগইনসমূহ প্ৰদান কৰিছো যাতে আপোনাক জাভাস্ক্রিপ্টৰ সৈতে বুটষ্ট্ৰেপ কেনেকৈ সংহত কৰিব লাগে বুজিবলৈ সহায় কৰে আৰু আপোনাক তৎক্ষণাত মূল কাৰ্য্যকৰীতাৰ বাবে এটা দ্ৰুত, লঘু বিকল্প দিয়ে।

অধিক তথ্যৰ বাবে আৰু কিছুমান লাইভ ডেমো চাবলৈ, অনুগ্ৰহ কৰি আমাৰ প্লাগইন আলেখ্যন পৃষ্ঠা চাওক ।