টাইপোগ্রাফিক স্কেল

সম্পূর্ণ টাইপোগ্রাফিক গ্রিডটি আমাদের variables.less ফাইলের দুটি Less ভেরিয়েবলের উপর ভিত্তি করে: @baseFontSizeএবং @baseLineHeight. প্রথমটি সর্বত্র ব্যবহৃত বেস ফন্ট-আকার এবং দ্বিতীয়টি হল বেস লাইন-উচ্চতা।

আমরা আমাদের সকল প্রকারের মার্জিন, প্যাডিং এবং লাইন-উচ্চতা তৈরি করতে সেই ভেরিয়েবলগুলি এবং কিছু গণিত ব্যবহার করি।

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

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

লিড বডি কপি

একটি অনুচ্ছেদ যোগ করে আলাদা করুন .lead।

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ডুইস মলিস, এটি অ কমোডো লুকটাস।

জোর ব্যবহার করে

ফুস ড্যাপিবাস , টেলস এসি কার্সাস কমোডো , টরটর মৌরিস কনডিমেন্টাম নিভ , ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস। Maecenas faucibus mollis interdum. নুল্লা ভিটা এলিট লিবারো, একটা ফারেত্র আগু।

দ্রষ্টব্য: নির্দ্বিধায় ব্যবহার করুন <b>এবং <i>HTML5 এ, তবে তাদের ব্যবহার কিছুটা পরিবর্তিত হয়েছে। <b>শব্দ বা বাক্যাংশগুলিকে অতিরিক্ত গুরুত্ব না দিয়ে হাইলাইট করার জন্য বোঝানো হয় যখন <i>বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।

উদাহরণ ঠিকানা

<address>ট্যাগটি কীভাবে ব্যবহার করা যেতে পারে তার দুটি উদাহরণ এখানে রয়েছে :

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

পুরো নাম
[email protected]

উদাহরণ সংক্ষেপণ

অ্যাট্রিবিউট সহ titleসংক্ষিপ্ত রূপগুলির একটি হালকা বিন্দুযুক্ত নীচের সীমানা এবং হোভারে একটি সহায়তা কার্সার রয়েছে। এটি ব্যবহারকারীদের অতিরিক্ত ইঙ্গিত দেয় যে হোভারে কিছু দেখানো হবে।

initialismএকটু ছোট পাঠ্যের আকার দিয়ে টাইপোগ্রাফিক সামঞ্জস্য বাড়ানোর জন্য ক্লাসটিকে একটি সংক্ষেপে যুক্ত করুন ।

এইচটিএমএল স্লাইসড ব্রেড থেকে সেরা জিনিস।

অ্যাট্রিবিউট শব্দের একটি সংক্ষিপ্ত রূপ হল attr ।

একটি ব্লককোট অন্তর্ভুক্ত করতে, উদ্ধৃতি হিসাবে <blockquote>যেকোনো HTML এর চারপাশে মোড়ানো। সোজা উদ্ধৃতি জন্য আমরা একটি সুপারিশ <p>.

<small>আপনার উত্স উদ্ধৃত করার জন্য একটি ঐচ্ছিক উপাদান অন্তর্ভুক্ত করুন এবং আপনি —স্টাইলিং উদ্দেশ্যে এটির আগে একটি এম ড্যাশ পাবেন৷

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante venenatis. </p>
  <small> বিখ্যাত কেউ </small>
</blockquote>

ডিফল্ট ব্লককোট এইভাবে স্টাইল করা হয়:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante venenatis.

কাজের শরীরে বিখ্যাত কেউ

আপনার ব্লককোট ডানদিকে ভাসতে, যোগ করুন class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante venenatis.

কাজের শরীরে বিখ্যাত কেউ

ক্রমহীন

<ul>

• অ্যাডমিন সরবরাহকারী
• কনসেক্টেতুর অ্যাডিপিসিং এলিট
• ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
• প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
• নুল্লা ভোলুটপাট আলিকাম ভেলিট
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
  • এসি tristique libero volutpat এ
• Faucibus porta lacus fringilla vel
• Aenean বসে amet erat nunc
• এগেট পোর্টটিটর লোরেম

স্টাইলবিহীন

<ul class="unstyled">

• অ্যাডমিন সরবরাহকারী
• কনসেক্টেতুর অ্যাডিপিসিং এলিট
• ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
• প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
• নুল্লা ভোলুটপাট আলিকাম ভেলিট
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • ভেস্টিবুলম ল্যাওরেট পোর্টটিটর সেম
  • এসি tristique libero volutpat এ
• Faucibus porta lacus fringilla vel
• Aenean বসে amet erat nunc
• এগেট পোর্টটিটর লোরেম

আদেশ দিয়েছেন

<ol>

1. অ্যাডমিন সরবরাহকারী
2. কনসেক্টেতুর অ্যাডিপিসিং এলিট
3. ম্যাসা এ পূর্ণসংখ্যা মোলেস্টি লরেম
4. প্রিটিয়াম নিসল অ্যালিকুয়েটে ফ্যাসিলিসিস
5. নুল্লা ভোলুটপাট আলিকাম ভেলিট
6. Faucibus porta lacus fringilla vel
7. Aenean বসে amet erat nunc
8. এগেট পোর্টটিটর লোরেম

বর্ণনা

<dl>

বর্ণনা তালিকা

একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।

ইউইসমোড

Vestibulum id ligula Porta felis euismod Semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

মালেসুদা পোর্টা

Etiam porta sem malesuada Magna mollis euismod.

অনুভূমিক বর্ণনা

<dl class="dl-horizontal">

বর্ণনা তালিকা

একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।

ইউইসমোড

Vestibulum id ligula Porta felis euismod Semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

মালেসুদা পোর্টা

Etiam porta sem malesuada Magna mollis euismod.

Felis euismod Semper eget lacinia

ফুস ড্যাপিবাস, টেলস এসি কার্সাস কমোডো, টর্টার মৌরিস কনডিমেন্টাম নিভ, ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস।

---

মাথা আপ! অনুভূমিক বর্ণনা তালিকাগুলি বাম কলামের ফিক্সে ফিট করার জন্য খুব দীর্ঘ পদগুলিকে ছেঁটে ফেলবে text-overflow৷ সংকীর্ণ ভিউপোর্টে, তারা ডিফল্ট স্ট্যাক করা লেআউটে পরিবর্তিত হবে।

সঙ্গতিপূর্ণভাবে

কোডের ইনলাইন স্নিপেটগুলি দিয়ে মোড়ানো <code>।

উদাহরণস্বরূপ , <code> বিভাগ < / code > ইনলাইন হিসাবে মোড়ানো উচিত ।  

মৌলিক ব্লক

<pre>কোডের একাধিক লাইনের জন্য ব্যবহার করুন । সঠিক রেন্ডারিংয়ের জন্য কোডে যেকোন অ্যাঙ্গেল ব্র্যাকেট এড়িয়ে যেতে ভুলবেন না।

<p>এখানে নমুনা পাঠ্য...</p>

<প্রে>
  <p>এখানে নমুনা পাঠ্য...</p>
</pre>

দ্রষ্টব্য: ট্যাগের মধ্যে কোডটি <pre>যতটা সম্ভব বাম দিকে রাখতে ভুলবেন না; এটি সমস্ত ট্যাব রেন্ডার করবে।

আপনি ঐচ্ছিকভাবে .pre-scrollableক্লাস যোগ করতে পারেন যা সর্বোচ্চ 350px উচ্চতা সেট করবে এবং একটি y-অক্ষ স্ক্রলবার প্রদান করবে।

গুগল প্রিটিফাই

একই <pre>উপাদান নিন এবং উন্নত রেন্ডারিংয়ের জন্য দুটি ঐচ্ছিক ক্লাস যোগ করুন।

<p> এখানে নমুনা পাঠ্য... </p>

<প্রি ক্লাস = "প্রিটিপ্রিন্ট 
     লাইননামস" >
  <p>এখানে নমুনা পাঠ্য...</p>
</pre>

google-code-prettify ডাউনলোড করুন এবং কিভাবে ব্যবহার করবেন তার জন্য রিডমি দেখুন।

ট্যাগ	বর্ণনা
<table>	সারণী বিন্যাসে ডেটা প্রদর্শনের জন্য মোড়ানো উপাদান
<thead>	<tr>টেবিল কলাম লেবেল করার জন্য টেবিল হেডার সারি ( ) এর জন্য ধারক উপাদান
<tbody>	<tr>টেবিলের মূল অংশে টেবিল সারি ( ) এর জন্য ধারক উপাদান
<tr>	একটি একক সারিতে প্রদর্শিত টেবিল কক্ষের ( <td>বা ) সেটের জন্য ধারক উপাদান<th>
<td>	ডিফল্ট টেবিল সেল
<th>	কলামের জন্য বিশেষ টেবিল সেল (বা সারি, সুযোগ এবং স্থান নির্ধারণের উপর নির্ভর করে) লেবেলের মধ্যে ব্যবহার করা আবশ্যক<thead>
<caption>	টেবিলে যা আছে তার বর্ণনা বা সারাংশ, বিশেষ করে স্ক্রিন রিডারদের জন্য উপযোগী

<টেবিল>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ টেবিল>

পাঠযোগ্যতা নিশ্চিত করতে এবং গঠন বজায় রাখার জন্য টেবিলগুলি স্বয়ংক্রিয়ভাবে শুধুমাত্র কয়েকটি সীমানা দিয়ে স্টাইল করা হয়। 2.0 সহ, .tableক্লাস প্রয়োজন।

<টেবিল ক্লাস = "টেবিল" > 
  …
</ টেবিল>

#	নামের প্রথম অংশ	নামের শেষাংশ	ব্যবহারকারীর নাম
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

জেব্রা-স্ট্রাইপিং যোগ করে আপনার টেবিলের সাথে একটু অভিনব হয়ে উঠুন—শুধু .table-stripedক্লাস যোগ করুন।

দ্রষ্টব্য: স্ট্রিপড টেবিল :nth-childCSS সিলেক্টর ব্যবহার করে এবং IE7-IE8 এ উপলব্ধ নয়।

<টেবিল ক্লাস = "টেবিল টেবিল-স্ট্রিপড" > 
  …
</ টেবিল>

#	নামের প্রথম অংশ	নামের শেষাংশ	ব্যবহারকারীর নাম
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি	পাখি	@টুইটার

নান্দনিক উদ্দেশ্যে পুরো টেবিলের চারপাশে সীমানা এবং বৃত্তাকার কোণগুলি যোগ করুন।

<টেবিল ক্লাস = "টেবিল টেবিল-বর্ডারযুক্ত" > 
  …
</ টেবিল>

#	নামের প্রথম অংশ	নামের শেষাংশ	ব্যবহারকারীর নাম
1	মার্ক	অটো	@এমডিও
	মার্ক	অটো	@getbootstrap
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

.table-condensedঅর্ধেক (8px থেকে 4px পর্যন্ত) টেবিল সেল প্যাডিং কাটতে ক্লাস যোগ করে আপনার টেবিলগুলিকে আরও কমপ্যাক্ট করুন ।

<টেবিল ক্লাস = "টেবিল টেবিল-কন্ডেন্সড" > 
  …
</ টেবিল>

#	নামের প্রথম অংশ	নামের শেষাংশ	ব্যবহারকারীর নাম
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

যেকোনও উপলব্ধ ক্লাসকে কাজে লাগিয়ে ভিন্ন চেহারা অর্জনের জন্য যেকোনও টেবিল ক্লাস একত্রিত করতে নির্দ্বিধায়।

<টেবিল ক্লাস = "টেবিল টেবিল-স্ট্রিপড টেবিল-বর্ডারযুক্ত টেবিল-ঘন" > 
  ...
</ টেবিল>

	পুরো নাম
#	নামের প্রথম অংশ	নামের শেষাংশ	ব্যবহারকারীর নাম
1	মার্ক	অটো	@এমডিও
2	জ্যাকব	থর্নটন	@ফ্যাট
3	ল্যারি দ্য বার্ড		@টুইটার

নমনীয় HTML এবং CSS

বুটস্ট্র্যাপের ফর্মগুলির সবচেয়ে ভাল অংশ হল যে আপনার সমস্ত ইনপুট এবং নিয়ন্ত্রণগুলি আপনি আপনার মার্কআপে যেভাবেই তৈরি করুন না কেন তা দুর্দান্ত দেখায়। কোন অপ্রয়োজনীয় HTML এর প্রয়োজন নেই, তবে যাদের প্রয়োজন তাদের জন্য আমরা নিদর্শন প্রদান করি।

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

চার লেআউট অন্তর্ভুক্ত

বুটস্ট্র্যাপ চার ধরনের ফর্ম লেআউটের জন্য সমর্থন সহ আসে:

• উল্লম্ব (ডিফল্ট)
• অনুসন্ধান করুন
• সঙ্গতিপূর্ণভাবে
• অনুভূমিক

বিভিন্ন ধরনের ফর্ম লেআউটের মার্কআপে কিছু পরিবর্তনের প্রয়োজন হয়, কিন্তু নিয়ন্ত্রণগুলি নিজেরাই থাকে এবং একই আচরণ করে।

নিয়ন্ত্রণ রাজ্য এবং আরো

বুটস্ট্র্যাপের ফর্মগুলিতে ইনপুট, টেক্সটেরিয়া, এবং আপনি আশা করতে চান এমন সমস্ত বেস ফর্ম নিয়ন্ত্রণের শৈলী অন্তর্ভুক্ত করে। তবে এটি বেশ কয়েকটি কাস্টম উপাদানের সাথে আসে যেমন সংযুক্ত এবং আগে থেকে যুক্ত ইনপুট এবং চেকবক্সের তালিকার জন্য সমর্থন।

প্রতিটি ধরণের ফর্ম নিয়ন্ত্রণের জন্য ত্রুটি, সতর্কতা এবং সাফল্যের মতো রাজ্যগুলি অন্তর্ভুক্ত করা হয়েছে। এছাড়াও অক্ষম নিয়ন্ত্রণের জন্য শৈলী অন্তর্ভুক্ত.

মৌলিক ফর্ম

অতিরিক্ত মার্কআপ ছাড়াই স্মার্ট এবং লাইটওয়েট ডিফল্ট।

লেবেলের নাম

উদাহরণ ব্লক-স্তরের সহায়তা পাঠ্য এখানে।

আমার চেক আউট জমা দিন

<ফর্ম ক্লাস = "ভাল" > 
  <label> লেবেলের নাম </ label>
  <ইনপুট প্রকার = "টেক্সট" ক্লাস = "span3" স্থানধারক = "কিছু টাইপ করুন..." >   
  <span class = "help-block" > উদাহরণ ব্লক-লেভেল সাহায্য পাঠ্য এখানে। </span> 
  <লেবেল ক্লাস = "চেকবক্স" > 
    <ইনপুট প্রকার = "চেকবক্স" > আমাকে চেক আউট করুন 
  </ label>
  <button type = "submit" class = "btn" > জমা দিন </button>  
</form>

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

.form-searchফর্ম এবং তে যোগ .search-queryকরুন input।

অনুসন্ধান করুন

<ফর্ম ক্লাস = "ওয়েল ফর্ম-সার্চ" > 
  <ইনপুট প্রকার = "টেক্সট" ক্লাস = "ইনপুট-মাঝারি অনুসন্ধান-কোয়েরি" >  
  <button type = "submit" class = "btn" > অনুসন্ধান </ বোতাম>  
</form>

ইনলাইন ফর্ম

.form-inlineফর্ম নিয়ন্ত্রণের উল্লম্ব প্রান্তিককরণ এবং ব্যবধানকে সূক্ষ্মভাবে যোগ করুন ।

আমাকে মনে কর সাইন ইন করুন

<ফর্ম ক্লাস = "ওয়েল ফর্ম-ইনলাইন" > 
  <ইনপুট প্রকার = "টেক্সট" ক্লাস = "ইনপুট-ছোট" স্থানধারক = "ইমেল" >   
  <ইনপুট প্রকার = "পাসওয়ার্ড" ক্লাস = "ইনপুট-ছোট" স্থানধারক = "পাসওয়ার্ড" >   
  <লেবেল ক্লাস = "চেকবক্স" > 
    <ইনপুট প্রকার = "চেকবক্স" > আমাকে মনে রাখবেন 
  </ label>
  <button type = "submit" class = "btn" > সাইন ইন করুন </button>  
</form>

ডানদিকে দেখানো হয়েছে সমস্ত ডিফল্ট ফর্ম নিয়ন্ত্রণ যা আমরা সমর্থন করি। এখানে বুলেটেড তালিকা রয়েছে:

• পাঠ্য ইনপুট (টেক্সট, পাসওয়ার্ড, ইমেল, ইত্যাদি)
• চেকবক্স
• রেডিও
• নির্বাচন করুন
• একাধিক নির্বাচন
• ফাইল ইনপুট
• textarea

টেক্সট ইনপুট

ফ্রিফর্ম টেক্সট ছাড়াও, যেকোন HTML5 টেক্সট-ভিত্তিক ইনপুট এরকম দেখায়।

চেকবক্স

বিকল্প একটি হল এটি এবং এটি - কেন এটি দুর্দান্ত তা অন্তর্ভুক্ত করতে ভুলবেন না

তালিকা নির্বাচন করুন

কিছু 2 3 4 5

মাল্টিকন-সিলেক্ট

1 2 3 4 5

ফাইল ইনপুট

Textarea

পরিবর্তনগুলোর সংরক্ষন বাতিল করুন

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

উপরের উদাহরণ ফর্ম লেআউট দেওয়া, এখানে প্রথম ইনপুট এবং নিয়ন্ত্রণ গ্রুপের সাথে যুক্ত মার্কআপ আছে। , .control-group, .control-labelএবং .controlsক্লাস সবই স্টাইলিংয়ের জন্য প্রয়োজনীয়৷

<ফর্ম ক্লাস = "ফর্ম-অনুভূমিক" > 
  <ফিল্ডসেট>
    <লেজেন্ড> লেজেন্ড টেক্সট </ legend>
    <div ক্লাস = "কন্ট্রোল-গ্রুপ" > 
      <label class = "control-label" for = "input01" > টেক্সট ইনপুট </label>  
      <div ক্লাস = "নিয়ন্ত্রণ" > 
        <ইনপুট প্রকার = "টেক্সট" ক্লাস = "ইনপুট-এক্সলার্জ" আইডি = "ইনপুট 01" >   
        <p class = "help-block" > সহায়ক সহায়তা পাঠ্য </p> 
      </div>
    </div>
  </fieldset>
</form>

বুটস্ট্র্যাপ ব্রাউজার-সমর্থিত ফোকাসড এবং স্টেটের জন্য শৈলী বৈশিষ্ট্য disabled। আমরা ডিফল্ট ওয়েবকিট মুছে ফেলি এবং এর জায়গায় outlineএকটি প্রয়োগ করি ৷box-shadow:focus

---

ফর্ম বৈধতা

এতে ত্রুটি, সতর্কতা এবং সাফল্যের জন্য বৈধতা শৈলীও অন্তর্ভুক্ত রয়েছে। ব্যবহার করতে, চারপাশে ত্রুটি শ্রেণী যোগ করুন .control-group।

<ক্ষেত্রসেট
  ক্লাস = "কন্ট্রোল-গ্রুপ ত্রুটি" >
  …
</fieldset>

ফোকাস ইনপুট

অসম্পাদনযোগ্য ইনপুট

এখানে কিছু মান

নিষ্ক্রিয় ইনপুট

অক্ষম চেকবক্স

এটি একটি অক্ষম চেকবক্স

সতর্কতা সহ ইনপুট

কিছু ভুল হয়ে যেতে পারে

ত্রুটি সহ ইনপুট

দয়া করে ত্রুটি সংশোধন করুন

সাফল্যের সাথে ইনপুট

উহু!

সফলতার সাথে নির্বাচন করুন

1 2 3 4 5 উহু!

পরিবর্তনগুলোর সংরক্ষন বাতিল করুন

প্রিপেন্ড এবং ইনপুট যোগ করুন

ইনপুট গোষ্ঠীগুলি-সংযুক্ত বা প্রিপেন্ড করা পাঠ্য সহ-আপনার ইনপুটগুলির জন্য আরও প্রসঙ্গ দেওয়ার একটি সহজ উপায় প্রদান করে। দুর্দান্ত উদাহরণগুলির মধ্যে রয়েছে টুইটার ব্যবহারকারীর নামের জন্য @ চিহ্ন বা অর্থের জন্য $।

---

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

v1.4 পর্যন্ত, বুটস্ট্র্যাপের জন্য চেকবক্স এবং রেডিওগুলিকে স্ট্যাক করার জন্য অতিরিক্ত মার্কআপের প্রয়োজন। এখন, এটি পুনরাবৃত্তি করার একটি সহজ বিষয় <label class="checkbox">যা মোড়ানো হয় <input type="checkbox">।

ইনলাইন চেকবক্স এবং রেডিও সমর্থিত. শুধু .inlineকোনো যোগ করুন .checkboxবা .radioএবং আপনি সম্পন্ন.

---

ইনলাইন ফর্ম এবং যোগ/প্রিপেন্ড করুন

ইনলাইন আকারে প্রিপেন্ড বা যুক্ত ইনপুটগুলি ব্যবহার করতে, ফাঁকা জায়গা ছাড়াই এবং একই লাইনে রাখতে ভুলবেন .add-onনা input।

---

ফর্ম সাহায্য পাঠ্য

আপনার ফর্ম ইনপুটগুলির জন্য সহায়তা পাঠ্য যোগ করতে , ইনপুট উপাদানের পরে সহ ইনলাইন সহায়তা পাঠ্য <span class="help-inline">বা সাহায্য পাঠ্য ব্লক অন্তর্ভুক্ত করুন।<p class="help-block">

ফর্ম গ্রিড মাপ

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

.span*ইনপুট আকারের জন্য গ্রিড সিস্টেম থেকে একই ক্লাস ব্যবহার করুন।

বিকল্প মাপ

আপনি স্ট্যাটিক ক্লাসগুলিও ব্যবহার করতে পারেন যেগুলি গ্রিডে ম্যাপ করে না, প্রতিক্রিয়াশীল CSS শৈলীগুলির সাথে খাপ খাইয়ে নেয় বা বিভিন্ন ধরণের নিয়ন্ত্রণের জন্য অ্যাকাউন্ট (যেমন, inputবনাম select)।

প্রিপেন্ড করা টেক্সট

@

এখানে কিছু সাহায্য পাঠ্য আছে

সংযোজিত পাঠ্য

.00

এখানে আরো সাহায্য টেক্সট আছে

সংযোজন এবং প্রিপেন্ড করুন

$ .00

বোতাম দিয়ে যুক্ত করুন

যাওয়া!

দুই-বোতাম যুক্ত করুন

অনুসন্ধান করুন অপশন

ইনলাইন চেকবক্স

1 2 3

চেকবক্স

বিকল্প একটি হল এটি এবং এটি - কেন এটি দুর্দান্ত তা অন্তর্ভুক্ত করতে ভুলবেন না বিকল্প দুই চেক করা যেতে পারে এবং ফর্ম ফলাফল অন্তর্ভুক্ত করা যেতে পারে তিনটি বিকল্প হতে পারে—হ্যাঁ, আপনি অনুমান করেছেন—এছাড়াও পরীক্ষা করা হবে এবং ফর্মের ফলাফলে অন্তর্ভুক্ত করা হবে

দ্রষ্টব্য: লেবেলগুলি অনেক বৃহত্তর ক্লিক এলাকা এবং আরও ব্যবহারযোগ্য ফর্মের জন্য সমস্ত বিকল্পকে ঘিরে থাকে।

রেডিওর বোতামগুলি

বিকল্প একটি হল এটি এবং এটি - কেন এটি দুর্দান্ত তা অন্তর্ভুক্ত করতে ভুলবেন না বিকল্প দুটি অন্য কিছু হতে পারে এবং এটি নির্বাচন করলে বিকল্প একটি অনির্বাচন করা হবে

পরিবর্তনগুলোর সংরক্ষন বাতিল করুন

কর্মের জন্য বোতাম

একটি নিয়ম হিসাবে, বোতামগুলি শুধুমাত্র অ্যাকশনের জন্য ব্যবহার করা উচিত যখন হাইপারলিঙ্কগুলি বস্তুর জন্য ব্যবহার করা হবে। উদাহরণস্বরূপ, "ডাউনলোড" একটি বোতাম হওয়া উচিত যখন "সাম্প্রতিক কার্যকলাপ" একটি লিঙ্ক হওয়া উচিত।

বোতাম শৈলী প্রয়োগ করা .btnক্লাস সঙ্গে যেকোনো কিছুতে প্রয়োগ করা যেতে পারে। <a>যাইহোক, সাধারণত আপনি এইগুলি শুধুমাত্র এবং <button>উপাদানগুলিতে প্রয়োগ করতে চাইবেন ।

ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ

IE9 বৃত্তাকার কোণে ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট ক্রপ করে না, তাই আমরা এটি সরিয়ে ফেলি। সম্পর্কিত, IE9 অক্ষম buttonউপাদানগুলিকে জাঙ্কিফাই করে, একটি বাজে টেক্সট-শ্যাডো দিয়ে পাঠ্য ধূসর রেন্ডার করে যা আমরা ঠিক করতে পারি না।

একাধিক মাপ

অভিনব বড় বা ছোট বোতাম? যোগ করুন .btn-large, .btn-small, বা .btn-miniদুটি অতিরিক্ত আকারের জন্য।

প্রাথমিক কর্ম কর্ম

প্রাথমিক কর্ম কর্ম

প্রাথমিক কর্ম কর্ম

প্রতিবন্ধী রাষ্ট্র

অক্ষম বোতামগুলির জন্য, .disabledলিঙ্কগুলিতে ক্লাস এবং উপাদানগুলির disabledজন্য বৈশিষ্ট্য যুক্ত করুন৷<button>

প্রাথমিক লিঙ্ক লিঙ্ক

প্রাথমিক বোতাম বোতাম

মাথা আপ! আমরা .disabledএখানে একটি ইউটিলিটি ক্লাস হিসাবে ব্যবহার করি, সাধারণ শ্রেণীর অনুরূপ .active, তাই কোন উপসর্গের প্রয়োজন নেই।

এক ক্লাস, একাধিক ট্যাগ

একটি , , বা উপাদানে .btnক্লাসটি ব্যবহার করুন ।<a><button><input>

লিঙ্ক বোতাম

<a class="btn" href=""> লিঙ্ক </a> _ _ _ _ _  
<বাটন ক্লাস = "বিটিএন" টাইপ = "জমা দিন" >  
  বোতাম
</ বোতাম>
<ইনপুট ক্লাস = "বিটিএন" টাইপ = "বোতাম"  
         মান = "ইনপুট" >
<ইনপুট ক্লাস = "বিটিএন" টাইপ = "জমা দিন"  
         মান = "জমা দিন" >

একটি সর্বোত্তম অনুশীলন হিসাবে, ক্রস-ব্রাউজার রেন্ডারিং মিলে যাওয়া নিশ্চিত করতে আপনার প্রসঙ্গের উপাদানটি মেলানোর চেষ্টা করুন। আপনার যদি একটি থাকে তবে আপনার বোতামের জন্য inputএকটি ব্যবহার করুন।<input type="submit">

• আইকন-গ্লাস
• আইকন-সঙ্গীত
• আইকন-অনুসন্ধান
• আইকন-খাম
• আইকন-হার্ট
• আইকন-তারকা
• আইকন-স্টার-খালি
• আইকন-ব্যবহারকারী
• আইকন-ফিল্ম
• আইকন-ম-বড়
• icon-th
• আইকন-ম-তালিকা
• আইকন-ঠিক আছে
• আইকন-মুছে ফেলুন
• আইকন-জুম-ইন
• আইকন-জুম-আউট
• আইকন-অফ
• আইকন-সংকেত
• আইকন-কগ
• আইকন-ট্র্যাশ
• আইকন-হোম
• আইকন-ফাইল
• আইকন-সময়
• আইকন-রোড
• icon-download-alt
• আইকন-ডাউনলোড
• আইকন-আপলোড
• আইকন-ইনবক্স
• আইকন-প্লে-সার্কেল
• আইকন-পুনরাবৃত্তি
• আইকন-রিফ্রেশ
• icon-list-alt
• আইকন-লক
• আইকন-পতাকা
• আইকন-হেডফোন

• আইকন-ভলিউম-বন্ধ
• আইকন-ভলিউম-ডাউন
• আইকন-ভলিউম-আপ
• আইকন-কিউআরকোড
• আইকন-বারকোড
• আইকন-ট্যাগ
• আইকন-ট্যাগ
• আইকন-বই
• আইকন-বুকমার্ক
• আইকন-প্রিন্ট
• আইকন-ক্যামেরা
• আইকন-ফন্ট
• আইকন-বোল্ড
• আইকন-ইটালিক
• আইকন-টেক্সট-উচ্চতা
• আইকন-টেক্সট-প্রস্থ
• আইকন-সারিবদ্ধ-বাম
• আইকন-সারিবদ্ধ-কেন্দ্র
• আইকন-সারিবদ্ধ-ডান
• আইকন-সারিবদ্ধ-ন্যায্যতা
• আইকন-তালিকা
• আইকন-ইন্ডেন্ট-বাম
• আইকন-ইন্ডেন্ট-ডান
• আইকন-ফেসটাইম-ভিডিও
• আইকন-ছবি
• আইকন-পেন্সিল
• আইকন-ম্যাপ-মার্কার
• আইকন-সামঞ্জস্য করুন
• আইকন-আভা
• আইকন-সম্পাদনা
• আইকন-শেয়ার
• আইকন-চেক
• আইকন-সরানো
• আইকন-ধাপ-পিছিয়ে
• আইকন-দ্রুত-পিছিয়ে

• আইকন-পশ্চাদপদ
• আইকন-প্লে
• আইকন-পজ
• আইকন-স্টপ
• আইকন-ফরওয়ার্ড
• আইকন-ফাস্ট-ফরওয়ার্ড
• আইকন-ধাপ এগিয়ে
• আইকন-নিষ্কাশন
• আইকন-শেভরন-বাম
• আইকন-শেভরন-ডান
• আইকন-প্লাস-চিহ্ন
• আইকন-বিয়োগ-চিহ্ন
• icon-remove-sign
• আইকন-ঠিক-চিহ্ন
• আইকন-প্রশ্ন-চিহ্ন
• আইকন-তথ্য-চিহ্ন
• আইকন-স্ক্রিনশট
• আইকন-সরানো-বৃত্ত
• আইকন-ঠিক-বৃত্ত
• আইকন-ব্যান-বৃত্ত
• আইকন-তীর-বাম
• আইকন-তীর-ডান
• আইকন-তীর-আপ
• আইকন-তীর-নিচে
• icon-share-alt
• আইকন-রিসাইজ-পূর্ণ
• icon-resize-small
• আইকন-প্লাস
• আইকন-মাইনাস
• আইকন-তারকা
• আইকন-বিস্ময়বোধক-চিহ্ন
• আইকন-উপহার
• আইকন-পাতা
• আইকন-ফায়ার
• আইকন-চোখ-খোলা

• আইকন-চোখ-বন্ধ
• আইকন-সতর্কতা-চিহ্ন
• আইকন-বিমান
• আইকন-ক্যালেন্ডার
• আইকন-এলোমেলো
• আইকন-মন্তব্য
• আইকন-চুম্বক
• আইকন-শেভরন-আপ
• আইকন-শেভরন-ডাউন
• আইকন-রিটুইট
• আইকন-শপিং-কার্ট
• আইকন-ফোল্ডার-ক্লোজ
• আইকন-ফোল্ডার-খোলা
• আইকন-রিসাইজ-উল্লম্ব
• আইকন-রিসাইজ-অনুভূমিক
• আইকন-এইচডিডি
• আইকন-বুলহর্ন
• icon-bell
• আইকন সার্টিফিকেট
• আইকন-থাম্বস-আপ
• আইকন-থাম্বস-ডাউন
• আইকন-হ্যান্ড-ডান
• আইকন-হাত-বাম
• আইকন-হ্যান্ড-আপ
• আইকন-হ্যান্ড-ডাউন
• আইকন-বৃত্ত-তীর-ডান
• আইকন-বৃত্ত-তীর-বাম
• আইকন-বৃত্ত-তীর-উপর
• আইকন-বৃত্ত-তীর-নিচে
• আইকন-গ্লোব
• আইকন-রেঞ্চ
• আইকন-টাস্ক
• আইকন-ফিল্টার
• আইকন-ব্রীফকেস
• আইকন-পূর্ণ স্ক্রীন

একটি স্প্রাইট হিসাবে নির্মিত

প্রতিটি আইকনকে একটি অতিরিক্ত অনুরোধ করার পরিবর্তে, আমরা সেগুলিকে একটি স্প্রাইট-এ কম্পাইল করেছি—একটি ফাইলে একগুচ্ছ ছবি যা সিএসএস ব্যবহার করে ছবিগুলিকে স্থির করতে background-position। এটি একই পদ্ধতি যা আমরা Twitter.com এ ব্যবহার করি এবং এটি আমাদের জন্য ভাল কাজ করেছে।

সমস্ত আইকন ক্লাস .icon-সঠিক নামস্থান এবং স্কোপিংয়ের জন্য উপসর্গযুক্ত, অনেকটা আমাদের অন্যান্য উপাদানগুলির মতো। এটি অন্যান্য সরঞ্জামগুলির সাথে দ্বন্দ্ব এড়াতে সহায়তা করবে।

Glyphicons আমাদের ওপেন-সোর্স টুলকিটে হাফলিংস সেট ব্যবহার করার অনুমতি দিয়েছে যতক্ষণ না আমরা এখানে ডক্সে একটি লিঙ্ক এবং ক্রেডিট প্রদান করি। আপনার প্রকল্পে একই কাজ বিবেচনা করুন.

ব্যবহারবিধি

বুটস্ট্র্যাপ <i>সমস্ত আইকনগুলির জন্য একটি ট্যাগ ব্যবহার করে, তবে তাদের কোনও কেস ক্লাস নেই - শুধুমাত্র একটি ভাগ করা উপসর্গ৷ ব্যবহার করতে, নিচের কোডটি প্রায় যেকোনো জায়গায় রাখুন:

<i ক্লাস = "আইকন-সার্চ" ></i> 

উল্টানো (সাদা) আইকনগুলির জন্যও শৈলী উপলব্ধ রয়েছে, একটি অতিরিক্ত শ্রেণী দিয়ে প্রস্তুত করা হয়েছে:

<i class = "icon-search icon-white" ></i> 

আপনার আইকনগুলির জন্য বেছে নেওয়ার জন্য 140টি ক্লাস রয়েছে৷ শুধু <i>সঠিক ক্লাসের সাথে একটি ট্যাগ যোগ করুন এবং আপনি সেট হয়ে গেছেন। আপনি সম্পূর্ণ তালিকা sprites.less- এ বা ঠিক এই নথিতে খুঁজে পেতে পারেন।

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

ব্যবহারের ক্ষেত্রে

আইকনগুলি দুর্দান্ত, তবে কেউ সেগুলি কোথায় ব্যবহার করবে? এখানে কয়েকটি ধারনা:

• আপনার সাইডবার নেভিগেশন জন্য ভিজ্যুয়াল হিসাবে
• একটি বিশুদ্ধভাবে আইকন চালিত নেভিগেশন জন্য
• একটি কর্মের অর্থ বোঝাতে সাহায্য করার জন্য বোতামগুলি
• ব্যবহারকারীর গন্তব্যে প্রসঙ্গ শেয়ার করার লিঙ্ক সহ

মূলত, যে কোন জায়গায় আপনি একটি <i>ট্যাগ লাগাতে পারেন, আপনি একটি আইকন রাখতে পারেন।

রিফ্রেশ চেকআউট মুছে ফেলা

মন্তব্য করুন সেটিংস অধিক তথ্য

ইমেইল ঠিকানা