আরও ভাল, দ্রুত, শক্তিশালী ওয়েব ডেভেলপমেন্টের জন্য আমাদের পন্থা সহ বুটস্ট্র্যাপের পরিকাঠামোর মূল অংশগুলির উপর লোডাউন পান।

HTML5 ডকটাইপ

বুটস্ট্র্যাপ নির্দিষ্ট HTML উপাদান এবং CSS বৈশিষ্ট্য ব্যবহার করে যার জন্য HTML5 ডকটাইপ ব্যবহার করা প্রয়োজন। আপনার সমস্ত প্রকল্পের শুরুতে এটি অন্তর্ভুক্ত করুন।

<!DOCTYPE html>
<html lang="en">
  ...
</html>

প্রথমে মোবাইল

বুটস্ট্র্যাপ 2 এর সাথে, আমরা ফ্রেমওয়ার্কের মূল দিকগুলির জন্য ঐচ্ছিক মোবাইল বন্ধুত্বপূর্ণ শৈলী যুক্ত করেছি। বুটস্ট্র্যাপ 3 এর সাথে, আমরা শুরু থেকেই মোবাইল ফ্রেন্ডলি হতে প্রজেক্টটিকে আবার লিখেছি। ঐচ্ছিক মোবাইল শৈলী যোগ করার পরিবর্তে, তারা সরাসরি মূল মধ্যে বেক করা হয়. আসলে, বুটস্ট্র্যাপ প্রথম মোবাইল । মোবাইল ফার্স্ট স্টাইলগুলি আলাদা ফাইলের পরিবর্তে সমগ্র লাইব্রেরি জুড়ে পাওয়া যাবে।

সঠিক রেন্ডারিং এবং টাচ জুমিং নিশ্চিত করতে, আপনার তে ভিউপোর্ট মেটা ট্যাগ যোগ করুন <head>।

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noআপনি ভিউপোর্ট মেটা ট্যাগ যোগ করে মোবাইল ডিভাইসে জুম করার ক্ষমতা অক্ষম করতে পারেন । এটি জুমিং অক্ষম করে, যার অর্থ ব্যবহারকারীরা শুধুমাত্র স্ক্রোল করতে সক্ষম হয় এবং এর ফলে আপনার সাইটটি একটি নেটিভ অ্যাপ্লিকেশনের মতো অনুভব করে৷ সামগ্রিকভাবে, আমরা প্রতিটি সাইটে এটি সুপারিশ করি না, তাই সতর্কতা অবলম্বন করুন!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

টাইপোগ্রাফি এবং লিঙ্ক

বুটস্ট্র্যাপ মৌলিক গ্লোবাল ডিসপ্লে, টাইপোগ্রাফি এবং লিঙ্ক শৈলী সেট করে। বিশেষ করে, আমরা:

উপর সেট background-color: #fff;করুনbody
আমাদের টাইপোগ্রাফিক বেস হিসাবে @font-family-base, @font-size-base, এবং বৈশিষ্ট্যগুলি ব্যবহার করুন@line-height-base
এর মাধ্যমে বিশ্বব্যাপী লিঙ্কের রঙ সেট করুন @link-colorএবং শুধুমাত্র লিঙ্ক আন্ডারলাইন প্রয়োগ করুন:hover

এই শৈলী মধ্যে পাওয়া যাবে scaffolding.less.

Normalize.css

উন্নত ক্রস-ব্রাউজার রেন্ডারিংয়ের জন্য, আমরা Normalize.css ব্যবহার করি , Nicolas Gallagher এবং Jonathan Neal এর একটি প্রকল্প ৷

পাত্রে

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

.containerএকটি প্রতিক্রিয়াশীল নির্দিষ্ট প্রস্থ ধারক জন্য ব্যবহার করুন .

<div class="container">
  ...
</div>

.container-fluidআপনার ভিউপোর্টের পুরো প্রস্থ জুড়ে একটি পূর্ণ প্রস্থের পাত্রের জন্য ব্যবহার করুন।

<div class="container-fluid">
  ...
</div>

বুটস্ট্র্যাপে একটি প্রতিক্রিয়াশীল, মোবাইল ফার্স্ট ফ্লুইড গ্রিড সিস্টেম রয়েছে যা ডিভাইস বা ভিউপোর্টের আকার বৃদ্ধির সাথে সাথে যথাযথভাবে 12টি কলাম পর্যন্ত স্কেল করে। এতে সহজ লেআউট বিকল্পের জন্য পূর্বনির্ধারিত ক্লাস , সেইসাথে আরও শব্দার্থিক লেআউট তৈরির জন্য শক্তিশালী মিক্সন অন্তর্ভুক্ত রয়েছে ।

ভূমিকা

গ্রিড সিস্টেমগুলি সারি এবং কলামগুলির একটি সিরিজের মাধ্যমে পৃষ্ঠা লেআউট তৈরি করার জন্য ব্যবহৃত হয় যা আপনার সামগ্রীকে রাখে৷ বুটস্ট্র্যাপ গ্রিড সিস্টেম কীভাবে কাজ করে তা এখানে:

সঠিক প্রান্তিককরণ এবং প্যাডিংয়ের জন্য সারিগুলি অবশ্যই একটি .container(নির্দিষ্ট-প্রস্থ) বা (পূর্ণ-প্রস্থ) মধ্যে স্থাপন করতে হবে।.container-fluid
কলামের অনুভূমিক গোষ্ঠী তৈরি করতে সারি ব্যবহার করুন।
বিষয়বস্তু কলামের মধ্যে স্থাপন করা উচিত, এবং শুধুমাত্র কলামগুলি সারিগুলির অবিলম্বে সন্তান হতে পারে।
দ্রুত গ্রিড লেআউট তৈরির জন্য পূর্বনির্ধারিত গ্রিড ক্লাস পছন্দ .rowএবং উপলব্ধ। .col-xs-4আরও শব্দার্থিক বিন্যাসের জন্যও কম মিক্সিন ব্যবহার করা যেতে পারে।
কলামগুলি এর মাধ্যমে গটার (কলামের বিষয়বস্তুর মধ্যে ফাঁক) তৈরি করে padding। সেই প্যাডিংটি প্রথম এবং শেষ কলামের জন্য .rows-এ ঋণাত্মক মার্জিনের মাধ্যমে সারিতে অফসেট করা হয়েছে।
নেতিবাচক মার্জিন কেন নীচের উদাহরণগুলি আউটডেন্টেড। এটি যাতে গ্রিড কলামের মধ্যে থাকা সামগ্রীগুলি নন-গ্রিড সামগ্রীর সাথে সারিবদ্ধ থাকে৷
আপনি যে বারোটি উপলব্ধ কলাম স্প্যান করতে চান তার সংখ্যা উল্লেখ করে গ্রিড কলাম তৈরি করা হয়। উদাহরণস্বরূপ, তিনটি সমান কলাম তিনটি ব্যবহার করবে .col-xs-4।
যদি একটি একক সারির মধ্যে 12টির বেশি কলাম স্থাপন করা হয়, তবে অতিরিক্ত কলামের প্রতিটি গ্রুপ, একটি ইউনিট হিসাবে, একটি নতুন লাইনে মোড়ানো হবে।
ব্রেকপয়েন্ট আকারের চেয়ে বেশি বা সমান স্ক্রীন প্রস্থ সহ ডিভাইসগুলিতে গ্রিড ক্লাস প্রযোজ্য এবং ছোট ডিভাইসগুলিতে লক্ষ্য করা গ্রিড ক্লাসগুলিকে ওভাররাইড করে। অতএব, যেমন কোনো .col-md-*উপাদানে কোনো শ্রেণি প্রয়োগ করা শুধুমাত্র মাঝারি ডিভাইসে এর স্টাইলিংকে প্রভাবিত করবে না, বড় ডিভাইসেও যদি কোনো .col-lg-*শ্রেণি উপস্থিত না থাকে।

আপনার কোডে এই নীতিগুলি প্রয়োগ করার জন্য উদাহরণগুলি দেখুন।

মিডিয়া প্রশ্নের

আমরা আমাদের গ্রিড সিস্টেমে মূল ব্রেকপয়েন্ট তৈরি করতে আমাদের কম ফাইলগুলিতে নিম্নলিখিত মিডিয়া প্রশ্নগুলি ব্যবহার করি।

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

আমরা মাঝে মাঝে এই মিডিয়া ক্যোয়ারীগুলি সম্প্রসারিত করি max-widthযাতে একটি সংকীর্ণ ডিভাইসের সেটে CSS সীমাবদ্ধ করা যায়।

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

গ্রিড বিকল্প

বুটস্ট্র্যাপ গ্রিড সিস্টেমের দিকগুলি একটি সহজ টেবিলের সাথে একাধিক ডিভাইস জুড়ে কীভাবে কাজ করে তা দেখুন।

	অতিরিক্ত ছোট ডিভাইস ফোন (<768px)	ছোট ডিভাইস ট্যাবলেট (≥768px)	মাঝারি ডিভাইস ডেস্কটপ (≥992px)	বড় ডিভাইস ডেস্কটপ (≥1200px)
গ্রিড আচরণ	সব সময়ে অনুভূমিক	শুরু করতে সঙ্কুচিত, ব্রেকপয়েন্টের উপরে অনুভূমিক
ধারক প্রস্থ	কোনটিই নয় (স্বয়ংক্রিয়)	750px	970px	1170px
ক্লাস প্রিফিক্স	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# কলাম	12
কলাম প্রস্থ	অটো	~62px	~81px	~97px
নর্দমার প্রস্থ	30px (একটি কলামের প্রতিটি পাশে 15px)
নেস্টেবল	হ্যাঁ
অফসেট	হ্যাঁ
কলাম ক্রম	হ্যাঁ

উদাহরণ: স্তুপীকৃত-থেকে-অনুভূমিক

গ্রিড ক্লাসের একক সেট ব্যবহার করে .col-md-*, আপনি একটি মৌলিক গ্রিড সিস্টেম তৈরি করতে পারেন যা ডেস্কটপ (মাঝারি) ডিভাইসে অনুভূমিক হওয়ার আগে মোবাইল ডিভাইস এবং ট্যাবলেট ডিভাইসে (অতিরিক্ত ছোট থেকে ছোট পরিসরে) স্ট্যাক করা শুরু হয়। যে কোনোটিতে গ্রিড কলাম রাখুন .row।

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

উদাহরণ: তরল ধারক

যেকোন নির্দিষ্ট-প্রস্থ গ্রিড লেআউটকে পূর্ণ-প্রস্থ লেআউটে পরিণত করুন আপনার বহিঃস্থকে তে পরিবর্তন .containerকরে .container-fluid।

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

উদাহরণ: মোবাইল এবং ডেস্কটপ

আপনার কলামগুলি কেবল ছোট ডিভাইসগুলিতে স্ট্যাক করতে চান না? .col-xs-* .col-md-*আপনার কলামে যোগ করে অতিরিক্ত ছোট এবং মাঝারি ডিভাইস গ্রিড ক্লাস ব্যবহার করুন । এটি কীভাবে কাজ করে তার আরও ভাল ধারণার জন্য নীচের উদাহরণটি দেখুন।

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

উদাহরণ: মোবাইল, ট্যাবলেট, ডেস্কটপ

.col-sm-*ট্যাবলেট ক্লাসের সাথে আরও বেশি গতিশীল এবং শক্তিশালী লেআউট তৈরি করে আগের উদাহরণটি তৈরি করুন ।

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

উদাহরণ: কলাম মোড়ানো

যদি একটি একক সারির মধ্যে 12টির বেশি কলাম স্থাপন করা হয়, তবে অতিরিক্ত কলামের প্রতিটি গ্রুপ, একটি ইউনিট হিসাবে, একটি নতুন লাইনে মোড়ানো হবে।

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 থেকে, এই 4-কলাম-ওয়াইড ডিভটি একটি সংলগ্ন একক হিসাবে একটি নতুন লাইনে মোড়ানো হয়।

.col-xs-6
পরবর্তী কলামগুলি নতুন লাইন বরাবর চলতে থাকে।

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

প্রতিক্রিয়াশীল কলাম রিসেট

চারটি স্তরের গ্রিড উপলব্ধ থাকায় আপনি সমস্যায় পড়তে বাধ্য যেখানে, নির্দিষ্ট ব্রেকপয়েন্টে, আপনার কলামগুলি অন্যটির চেয়ে লম্বা হওয়ার কারণে সঠিকভাবে পরিষ্কার হয় না। এটি ঠিক করতে, a .clearfixএবং আমাদের প্রতিক্রিয়াশীল ইউটিলিটি ক্লাসের সংমিশ্রণ ব্যবহার করুন ।

.col-xs-6 .col-sm-3
আপনার ভিউপোর্টের আকার পরিবর্তন করুন বা একটি উদাহরণের জন্য আপনার ফোনে এটি পরীক্ষা করুন৷

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

প্রতিক্রিয়াশীল ব্রেকপয়েন্টে কলাম ক্লিয়ারিং ছাড়াও, আপনাকে অফসেট, পুশ বা টান রিসেট করতে হতে পারে । গ্রিড উদাহরণে এটি কর্মে দেখুন ।

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

অফসেটিং কলাম

.col-md-offset-*ক্লাস ব্যবহার করে ডানদিকে কলাম সরান । এই ক্লাসগুলি কলাম দ্বারা একটি কলামের বাম মার্জিন বৃদ্ধি করে *। উদাহরণস্বরূপ, চারটি কলামের উপর .col-md-offset-4চলে যায়।.col-md-4

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0এছাড়াও আপনি ক্লাস সহ নিম্ন গ্রিড টিয়ার থেকে অফসেট ওভাররাইড করতে পারেন ।

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

নেস্টিং কলাম

আপনার সামগ্রীকে ডিফল্ট গ্রিডের সাথে নেস্ট করতে, একটি বিদ্যমান কলামের মধ্যে একটি নতুন .rowএবং কলামের সেট যোগ করুন । নেস্টেড সারিগুলিতে 12 বা তার কম পর্যন্ত যোগ করা কলামগুলির একটি সেট অন্তর্ভুক্ত করা উচিত (এটি প্রয়োজনীয় নয় যে আপনি উপলব্ধ 12টি কলাম ব্যবহার করুন)৷.col-sm-*.col-sm-*

লেভেল 1: .col-sm-9

লেভেল 2: .col-xs-8 .col-sm-6

লেভেল 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

কলাম ক্রম

আমাদের অন্তর্নির্মিত গ্রিড কলামগুলির ক্রম .col-md-push-*এবং .col-md-pull-*সংশোধক ক্লাস সহ সহজেই পরিবর্তন করুন।

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

কম মিশ্রণ এবং ভেরিয়েবল

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

ভেরিয়েবল

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

মিক্সিন

মিক্সিনগুলি পৃথক গ্রিড কলামগুলির জন্য শব্দার্থিক CSS তৈরি করতে গ্রিড ভেরিয়েবলের সাথে একত্রে ব্যবহৃত হয়।

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

উদাহরণ ব্যবহার

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

শিরোনাম

সমস্ত এইচটিএমএল শিরোনাম, এর <h1>মাধ্যমে <h6>, উপলব্ধ। .h1ক্লাসের মাধ্যমেও .h6উপলব্ধ, যখন আপনি একটি শিরোনামের ফন্ট স্টাইলিংয়ের সাথে মেলে কিন্তু তারপরও আপনার পাঠ্য ইনলাইনে প্রদর্শিত হতে চান।

h1. বুটস্ট্র্যাপ শিরোনাম	সেমিবোল্ড 36px
h2. বুটস্ট্র্যাপ শিরোনাম	সেমিবোল্ড 30px
h3. বুটস্ট্র্যাপ শিরোনাম	সেমিবোল্ড 24px
h4. বুটস্ট্র্যাপ শিরোনাম	সেমিবোল্ড 18px
h5. বুটস্ট্র্যাপ শিরোনাম	সেমিবোল্ড 14px
h6. বুটস্ট্র্যাপ শিরোনাম	সেমিবোল্ড 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>একটি জেনেরিক ট্যাগ বা .smallক্লাস সহ যেকোনো শিরোনামে হালকা, মাধ্যমিক পাঠ্য তৈরি করুন ।

h1. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h2. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h3. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h4. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h5. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h6. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

শরীরের কপি

বুটস্ট্র্যাপের গ্লোবাল ডিফল্ট font-sizeহল 14pxline-height , যার একটি 1.428 । এটি <body>এবং সমস্ত অনুচ্ছেদে প্রয়োগ করা হয়। উপরন্তু, <p>(অনুচ্ছেদ) তাদের গণনাকৃত লাইন-উচ্চতার অর্ধেক নীচের মার্জিন পায় (ডিফল্টরূপে 10px)।

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

সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

লিড বডি কপি

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

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

<p class="lead">...</p>

কম দিয়ে নির্মিত

টাইপোগ্রাফিক স্কেলটি variables.less এ দুটি Less ভেরিয়েবলের উপর ভিত্তি করে তৈরি করা হয়েছে : @font-size-baseএবং @line-height-base. প্রথমটি সর্বত্র ব্যবহৃত বেস ফন্ট-আকার এবং দ্বিতীয়টি হল বেস লাইন-উচ্চতা। আমরা আমাদের সমস্ত ধরণের এবং আরও অনেক কিছুর মার্জিন, প্যাডিং এবং লাইন-উচ্চতা তৈরি করতে সেই ভেরিয়েবল এবং কিছু সাধারণ গণিত ব্যবহার করি। তাদের কাস্টমাইজ করুন এবং বুটস্ট্র্যাপ অ্যাডাপ্ট করে।

ইনলাইন টেক্সট উপাদান

চিহ্নি�� পাঠ্য

অন্য প্রসঙ্গে প্রাসঙ্গিকতার কারণে পাঠ্যের একটি রান হাইলাইট করার জন্য, <mark>ট্যাগটি ব্যবহার করুন।

আপনি মার্ক ট্যাগ ব্যবহার করতে পারেনলক্ষণীয় করাপাঠ্য

You can use the mark tag to <mark>highlight</mark> text.

পাঠ্য মুছে ফেলা হয়েছে

মুছে ফেলা পাঠ্যের ব্লকগুলি নির্দেশ করার জন্য <del>ট্যাগটি ব্যবহার করুন।

~~পাঠ্যের এই লাইনটি মুছে ফেলা পাঠ্য হিসাবে বিবেচনা করা হয়।~~

<del>This line of text is meant to be treated as deleted text.</del>

স্ট্রাইকথ্রু টেক্সট

পাঠ্যের ব্লকগুলি নির্দেশ করার জন্য যেগুলি আর প্রাসঙ্গিক নয় <s>ট্যাগটি ব্যবহার করুন৷

~~পাঠ্যের এই লাইনটিকে আর সঠিক হিসাবে বিবেচনা করা হয় না।~~

<s>This line of text is meant to be treated as no longer accurate.</s>

টেক্সট ঢোকানো

নথিতে সংযোজন নির্দেশ করার জন্য <ins>ট্যাগ ব্যবহার করুন।

পাঠ্যের এই লাইনটিকে নথিতে একটি সংযোজন হিসাবে বিবেচনা করা বোঝানো হয়েছে।

<ins>This line of text is meant to be treated as an addition to the document.</ins>

আন্ডারলাইন করা পাঠ্য

টেক্সট আন্ডারলাইন করতে <u>ট্যাগ ব্যবহার করুন.

পাঠ্যের এই লাইনটি আন্ডারলাইন হিসাবে রেন্ডার হবে

<u>This line of text will render as underlined</u>

লাইটওয়েট স্টাইল সহ HTML এর ডিফল্ট জোর ট্যাগ ব্যবহার করুন।

ছোট লেখা

ইনলাইন বা টেক্সট ব্লকের উপর জোর না <small>দেওয়ার জন্য, প্যারেন্টের আকারের 85% টেক্সট সেট করতে ট্যাগ ব্যবহার করুন। শিরোনাম উপাদান font-sizeনেস্টেড <small>উপাদানের জন্য তাদের নিজস্ব গ্রহণ.

আপনি বিকল্পভাবে .smallযেকোনো একটির জায়গায় একটি ইনলাইন উপাদান ব্যবহার করতে পারেন <small>।

পাঠ্যের এই লাইনটি সূক্ষ্ম মুদ্রণ হিসাবে বিবেচনা করা হয়।

<small>This line of text is meant to be treated as fine print.</small>

সাহসী

একটি ভারী ফন্ট-ওজন সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য।

টেক্সটের নিচের স্নিপেটটিকে বোল্ড টেক্সট হিসেবে রেন্ডার করা হয়েছে ।

<strong>rendered as bold text</strong>

তির্যক

তির্যক সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য।

পাঠ্যের নিম্নলিখিত স্নিপেটটি তির্যক টেক্সট হিসাবে রেন্ডার করা হয়েছে ।

<em>rendered as italicized text</em>

বিকল্প উপাদান

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

প্রান্তিককরণ ক্লাস

পাঠ্য সারিবদ্ধকরণ ক্লাস সহ উপাদানগুলিতে পাঠ্যকে সহজেই পুনরায় সাজান।

বাম প্রান্তিককৃত পাঠ্য।

কেন্দ্রে সারিবদ্ধ পাঠ্য।

ডান প্রান্তিককৃত পাঠ্য।

যুক্তিযুক্ত পাঠ্য।

কোন মোড়ানো লেখা নেই।

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

রূপান্তর ক্লাস

টেক্সট ক্যাপিটালাইজেশন ক্লাস সহ উপাদানে টেক্সট রূপান্তর করুন।

ছোট হাতের লেখা।

বড় হাতের লেখা।

ক্যাপিটালাইজড টেক্সট।

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

শব্দ সংক্ষেপ

<abbr>হোভারে প্রসারিত সংস্করণ দেখানোর জন্য সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত রূপের জন্য HTML এর উপাদানের স্টাইলাইজড বাস্তবায়ন । একটি titleবৈশিষ্ট্য সহ সংক্ষিপ্ত রূপগুলির একটি হালকা বিন্দুযুক্ত নীচের সীমানা এবং হোভারে একটি সহায়তা কার্সার রয়েছে, যা হোভারে এবং সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য অতিরিক্ত প্রসঙ্গ সরবরাহ করে।

মৌলিক সংক্ষেপণ

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

<abbr title="attribute">attr</abbr>

প্রাথমিকবাদ

.initialismসামান্য ছোট ফন্ট-আকারের জন্য একটি সংক্ষেপে যোগ করুন ।

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

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

ঠিকানা

নিকটতম পূর্বপুরুষ বা কাজের পুরো অংশের জন্য বর্তমান যোগাযোগের তথ্য। দিয়ে সমস্ত লাইন শেষ করে বিন্যাস সংরক্ষণ করুন <br>।

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

পুরো নাম
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ব্লককোট

আপনার নথির মধ্যে অন্য উৎস থেকে সামগ্রীর ব্লক উদ্ধৃত করার জন্য।

ডিফল্ট ব্লককোট

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

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ব্লককোট বিকল্প

একটি স্ট্যান্ডার্ডে সাধারণ বৈচিত্র্যের জন্য শৈলী এবং বিষয়বস্তু পরিবর্তন <blockquote>।

একটি উৎসের নামকরণ

<footer>উৎস শনাক্ত করার জন্য একটি যোগ করুন । সোর্স কাজের নাম লিখুন <cite>।

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

উৎস শিরোনামে বিখ্যাত কেউ

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

বিকল্প প্রদর্শন

.blockquote-reverseডান-সারিবদ্ধ বিষয়বস্তু সহ একটি ব্লককোট যোগ করুন ।

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

উৎস শিরোনামে বিখ্যাত কেউ

<blockquote class="blockquote-reverse">
  ...
</blockquote>

তালিকা

ক্রমহীন

আইটেমগুলির একটি তালিকা যেখানে অর্ডারটি স্পষ্টভাবে গুরুত্বপূর্ণ নয় ।

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

<ul>
  <li>...</li>
</ul>

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

আইটেমগুলির একটি তালিকা যেখানে অর্ডারটি স্পষ্টভাবে গুরুত্বপূর্ণ।

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

<ol>
  <li>...</li>
</ol>

স্টাইলবিহীন

তালিকা আইটেমগুলিতে ডিফল্ট list-styleএবং বাম মার্জিন সরান (শুধুমাত্র শিশুদের জন্য)। এটি শুধুমাত্র অবিলম্বে শিশুদের তালিকার আইটেমগুলিতে প্রযোজ্য , যার অর্থ আপনাকে যেকোনো নেস্টেড তালিকার জন্যও ক্লাস যোগ করতে হবে।

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

<ul class="list-unstyled">
  <li>...</li>
</ul>

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

সমস্ত তালিকা আইটেম একটি একক লাইনে রাখুন display: inline-block;এবং কিছু হালকা প্যাডিং সহ।

Lorem ipsum
ফ্যাসেলাস আইকুলিস
নুলা ভোল্টপাট

<ul class="list-inline">
  <li>...</li>
</ul>

বর্ণনা

তাদের সম্পর্কিত বর্ণনা সহ পদগুলির একটি তালিকা৷

বর্ণনা তালিকা: একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
ইউইসমোড: 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>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

<dl>পাশাপাশি লাইন আপ শর্তাবলী এবং বর্ণনা করুন . ডিফল্ট s এর মত স্ট্যাক করা শুরু হয় <dl>, কিন্তু যখন navbar প্রসারিত হয়, তাই এইগুলি করুন।

বর্ণনা তালিকা: একটি বর্ণনা তালিকা শর্তাবলী সংজ্ঞায়িত করার জন্য উপযুক্ত।
ইউইসমোড: 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: ফুস ড্যাপিবাস, টেলস এসি কার্সাস কমোডো, টর্টার মৌরিস কনডিমেন্টাম নিভ, ইউটি ফার্মেন্টাম ম্যাসা জাস্টো সিট অ্যামেট রিসাস।

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

স্বয়ংক্রিয়ভাবে কাটা

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

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

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

উদাহরণস্বরূপ, <section>ইনলাইন হিসাবে আবৃত করা উচিত.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ব্যবহারকারীর ইনপুট

<kbd>ইনপুট নির্দেশ করতে ব্যবহার করুন যা সাধারণত কীবোর্ডের মাধ্যমে প্রবেশ করা হয়।

ডিরেক্টরি স্যুইচ করতে, ডিরেক্টরির cdনাম অনুসরণ করে টাইপ করুন।
সেটিংস সম্পাদনা করতে, টিপুন ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

মৌলিক ব্লক

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

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

ভেরিয়েবল

ভেরিয়েবল নির্দেশ করার জন্য <var>ট্যাগ ব্যবহার করুন।

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

নমুনা আউটপুট

একটি প্রোগ্রাম থেকে ব্লক নমুনা আউটপুট নির্দেশ করার জন্য <samp>ট্যাগ ব্যবহার করুন.

এই টেক্সট একটি কম্পিউটার প্রোগ্রাম থেকে নমুনা আউটপুট হিসাবে বিবেচনা করা বোঝানো হয়.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

মৌলিক উদাহরণ

.tableবেসিক স্টাইলিং এর জন্য—হালকা প্যাডিং এবং শুধুমাত্র অনুভূমিক ডিভাইডার— যেকোনো একটিতে বেস ক্লাস যোগ করুন <table>। এটি অত্যন্ত অপ্রয়োজনীয় বলে মনে হতে পারে, কিন্তু ক্যালেন্ডার এবং তারিখ বাছাইকারীর মতো অন্যান্য প্লাগইনগুলির জন্য টেবিলের ব্যাপক ব্যবহারের কারণে, আমরা আমাদের কাস্টম টেবিল শৈলীগুলিকে বিচ্ছিন্ন করতে বেছে নিয়েছি।

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

<table class="table">
  ...
</table>

ডোরাকাটা সারি

.table-stripedএর মধ্যে যেকোনো টেবিল সারিতে জেব্রা-স্ট্রাইপিং যোগ করতে ব্যবহার করুন <tbody>।

ক্রস ব্রাউজার সামঞ্জস্য

ডোরাকাটা টেবিলগুলি CSS নির্বাচকের মাধ্যমে স্টাইল করা হয় :nth-child, যা Internet Explorer 8 এ উপলব্ধ নয়।

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

<table class="table table-striped">
  ...
</table>

সীমানাযুক্ত টেবিল

.table-borderedটেবিল এবং কক্ষের চারপাশে সীমানা যোগ করুন ।

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

<table class="table table-bordered">
  ...
</table>

হভার সারি

.table-hoverএকটি এর মধ্যে টেবিলের সারিতে একটি হোভার অবস্থা সক্ষম করতে যোগ করুন <tbody>।

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

<table class="table table-hover">
  ...
</table>

ঘনীভূত টেবিল

.table-condensedঅর্ধেক সেল প্যাডিং কাটা দ্বারা টেবিল আরো কম্প্যাক্ট করতে যোগ করুন .

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

<table class="table table-condensed">
  ...
</table>

প্রাসঙ্গিক ক্লাস

সারণি সারি বা পৃথক ঘর রঙ করতে প্রাসঙ্গিক ক্লাস ব্যবহার করুন।

ক্লাস	বর্ণনা
`.active`	একটি নির্দিষ্ট সারি বা ঘরে হোভার রঙ প্রয়োগ করে
`.success`	একটি সফল বা ইতিবাচক কর্ম নির্দেশ করে
`.info`	একটি নিরপেক্ষ তথ্যপূর্ণ পরিবর্তন বা কর্ম নির্দেশ করে
`.warning`	একটি সতর্কতা নির্দেশ করে যা মনোযোগের প্রয়োজন হতে পারে
`.danger`	একটি বিপজ্জনক বা সম্ভাব্য নেতিবাচক কর্ম নির্দেশ করে

#	কলাম শিরোনাম	কলাম শিরোনাম	কলাম শিরোনাম
1	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
2	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
3	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
4	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
5	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
6	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
7	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
8	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু
9	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু	কলাম বিষয়বস্তু

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

সহায়ক প্রযুক্তির অর্থ বোঝানো

একটি টেবিল সারি বা পৃথক কক্ষে অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত প্রদান করে, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে জানানো হবে না - যেমন স্ক্রিন রিডার। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকেই স্পষ্ট (প্রাসঙ্গিক টেবিল সারি/কক্ষে দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-onlyক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।

প্রতিক্রিয়াশীল টেবিল

ছোট ডিভাইসে (768px এর নিচে) অনুভূমিকভাবে স্ক্রোল করার জন্য যেকোনও র্যাপ .tableকরে প্রতিক্রিয়াশীল টেবিল তৈরি করুন । .table-responsive768px চওড়ার চেয়ে বড় কোনো কিছু দেখার সময়, আপনি এই টেবিলে কোনো পার্থক্য দেখতে পাবেন না।

উল্লম্ব ক্লিপিং/ছাঁটা

প্রতিক্রিয়াশীল টেবিলগুলি ব্যবহার করে overflow-y: hidden, যা টেবিলের নীচে বা উপরের প্রান্তের বাইরে যে কোনও সামগ্রীকে ক্লিপ করে। বিশেষ করে, এটি ড্রপডাউন মেনু এবং অন্যান্য তৃতীয় পক্ষের উইজেটগুলিকে ক্লিপ করতে পারে৷

ফায়ারফক্স এবং ফিল্ডসেট

ফায়ারফক্সের কিছু বিশ্রী ফিল্ডসেট স্টাইলিং রয়েছে widthযা প্রতিক্রিয়াশীল টেবিলে হস্তক্ষেপ করে। এটিকে ফায়ারফক্স-নির্দিষ্ট হ্যাক ছাড়া ওভাররাইড করা যাবে না যা আমরা বুটস্ট্র্যাপে প্রদান করি না :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

আরও তথ্যের জন্য, এই স্ট্যাক ওভারফ্লো উত্তরটি পড়ুন ।

#	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম
1	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল
2	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল
3	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল

#	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম	টেবিল শিরোনাম
1	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল
2	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল
3	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল	টেবিল সেল

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

মৌলিক উদাহরণ

স্বতন্ত্র ফর্ম নিয়ন্ত্রণগুলি স্বয়ংক্রিয়ভাবে কিছু বিশ্বব্যাপী স্টাইলিং গ্রহণ করে। সমস্ত পাঠ্য <input>, <textarea>, এবং এর <select>সাথে উপাদানগুলি ডিফল্টরূপে .form-controlসেট করা আছে ৷ সর্বোত্তম ব্যবধানের জন্য width: 100%;লেবেল এবং নিয়ন্ত্রণগুলি মোড়ানো ।.form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ইনপুট গ্রুপের সাথে ফর্ম গ্রুপগুলিকে মিশ্রিত করবেন না

ইনপুট গ্রুপের সাথে সরাসরি ফর্ম গ্রুপগুলিকে মিশ্রিত করবেন না । পরিবর্তে, ফর্ম গ্রুপের ভিতরে ইনপুট গ্রুপটি নেস্ট করুন।

ইনলাইন ফর্ম

বাম-সারিবদ্ধ এবং ইনলাইন-ব্লক নিয়ন্ত্রণের জন্য আপনার ফর্মে যোগ করুন .form-inline(যা একটি হতে হবে না )। এটি শুধুমাত্র ভিউপোর্টের মধ্যে থাকা ফর্মগুলির ক্ষেত্রে প্রযোজ্য যা কমপক্ষে 768px চওড়া।<form>

কাস্টম প্রস্থের প্রয়োজন হতে পারে

ইনপুট এবং নির্বাচন width: 100%;ডিফল্টরূপে বুটস্ট্র্যাপে প্রয়োগ করা হয়েছে। ইনলাইন ফর্মের মধ্যে, আমরা এটিকে পুনরায় সেট করি width: auto;যাতে একাধিক নিয়ন্ত্রণ একই লাইনে থাকতে পারে। আপনার লেআউটের উপর নির্ভর করে, অতিরিক্ত কাস্টম প্রস্থের প্রয়োজন হতে পারে।

সর্বদা লেবেল যোগ করুন

আপনি প্রতিটি ইনপুটের জন্য একটি লেবেল অন্তর্ভুক্ত না করলে স্ক্রীন রিডারদের আপনার ফর্মগুলির সাথে সমস্যা হবে৷ এই ইনলাইন ফর্মগুলির জন্য, আপনি .sr-onlyক্লাস ব্যবহার করে লেবেলগুলি লুকাতে পারেন৷ সহায়ক প্রযুক্তিগুলির জন্য একটি লেবেল প্রদানের আরও বিকল্প পদ্ধতি রয়েছে, যেমন aria-label, aria-labelledbyবা titleবৈশিষ্ট্য৷ যদি এইগুলির কোনোটিই উপস্থিত না থাকে, তাহলে স্ক্রীন রিডাররা placeholderঅ্যাট্রিবিউট ব্যবহার করতে পারেন, যদি উপস্থিত থাকে, তবে মনে রাখবেন যে placeholderঅন্যান্য লেবেলিং পদ্ধতির জন্য প্রতিস্থাপন হিসাবে ব্যবহার করার পরামর্শ দেওয়া হয় না।

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

অনুভূমিক ফর্ম

বুটস্ট্র্যাপের পূর্বনির্ধারিত গ্রিড ক্লাসগুলি ফর্মটিতে যোগ করে একটি অনুভূমিক বিন্যাসে ফর্ম নিয়ন্ত্রণগুলির লেবেল এবং গ্রুপগুলিকে সারিবদ্ধ করতে ব্যবহার করুন .form-horizontal(যা একটি হতে হবে না <form>)৷ এটি করার ফলে .form-groupগ্রিড সারি হিসাবে আচরণ করতে s পরিবর্তন হয়, তাই এর প্রয়োজন নেই .row।

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

সমর্থিত নিয়ন্ত্রণ

একটি উদাহরণ ফর্ম বিন্যাসে সমর্থিত আদর্শ ফর্ম নিয়ন্ত্রণের উদাহরণ৷

ইনপুট

সর্বাধিক সাধারণ ফর্ম নিয়ন্ত্রণ, পাঠ্য-ভিত্তিক ইনপুট ক্ষেত্র। সমস্ত HTML5 প্রকারের জন্য সমর্থন অন্তর্ভুক্ত করে: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, এবং color.

প্রকার ঘোষণা প্রয়োজন

ইনপুটগুলি শুধুমাত্র সম্পূর্ণরূপে স্টাইল করা হবে যদি তাদের typeসঠিকভাবে ঘোষণা করা হয়।

<input type="text" class="form-control" placeholder="Text input">

ইনপুট গ্রুপ

যেকোনো টেক্সট-ভিত্তিক এর আগে এবং/অথবা পরে ইন্টিগ্রেটেড টেক্সট বা বোতাম যোগ করতে <input>, ইনপুট গ্রুপ কম্পোনেন্ট দেখুন ।

Textarea

ফর্ম নিয়ন্ত্রণ যা পাঠ্যের একাধিক লাইন সমর্থন করে। rowsপ্রয়োজনে বৈশিষ্ট্য পরিবর্তন করুন ।

<textarea class="form-control" rows="3"></textarea>

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

চেকবক্সগুলি একটি তালিকার এক বা একাধিক বিকল্প নির্বাচন করার জন্য, যখন রেডিওগুলি অনেকগুলি থেকে একটি বিকল্প নির্বাচন করার জন্য।

অক্ষম চেকবক্স এবং রেডিও সমর্থিত, কিন্তু অভিভাবকের হোভারে একটি "অনুমোদিত" কার্সার প্রদান করতে , আপনাকে অভিভাবক , , , বা শ্রেণীতে <label>যোগ করতে হবে ৷.disabled.radio.radio-inline.checkbox.checkbox-inline

ডিফল্ট (স্ট্যাক করা)

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

বিকল্প দুই অক্ষম করা হয়েছে

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

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

বিকল্প তিনটি অক্ষম করা হয়েছে

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ইনলাইন চেকবক্স এবং রেডিও

একই লাইনে প্রদর্শিত নিয়ন্ত্রণগুলির জন্য চেকবক্স বা রেডিওগুলির একটি সিরিজে .checkbox-inlineবা ক্লাসগুলি ব্যবহার করুন ৷.radio-inline

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

লেবেল পাঠ্য ছাড়াই চেকবক্স এবং রেডিও

আপনার যদি তে কোনো টেক্সট না থাকে <label>, তাহলে ইনপুটটি আপনার প্রত্যাশা অনুযায়ী অবস্থান করা হবে। বর্তমানে শুধুমাত্র নন-ইনলাইন চেকবক্স এবং রেডিওতে কাজ করে। সহায়ক প্রযুক্তির জন্য এখনও কিছু লেবেল প্রদান করতে মনে রাখবেন (উদাহরণস্বরূপ, ব্যবহার করে aria-label)।

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

নির্বাচন করে

মনে রাখবেন যে অনেক নেটিভ বাছাই করা মেনু-যেমন Safari এবং Chrome-এ বৃত্তাকার কোণ রয়েছে যা border-radiusবৈশিষ্ট্যগুলির মাধ্যমে পরিবর্তন করা যায় না।

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>বৈশিষ্ট্য সহ নিয়ন্ত্রণের জন্য multiple, একাধিক বিকল্প ডিফল্টরূপে দেখানো হয়।

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

স্ট্যাটিক নিয়ন্ত্রণ

যখন আপনাকে একটি ফর্মের মধ্যে একটি ফর্ম লেবেলের পাশে প্লেইন টেক্সট স্থাপন করতে হবে, তখন একটি .form-control-staticতে ক্লাসটি ব্যবহার করুন <p>।

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ফোকাস অবস্থা

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

ডেমো `:focus`স্টেট

উপরের উদাহরণ ইনপুট আমাদের ডকুমেন্টেশনে কাস্টম শৈলী ব্যবহার :focusকরে একটি তে অবস্থা প্রদর্শন করতে .form-control।

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

disabledব্যবহারকারীর ইন্টারঅ্যাকশন প্রতিরোধ করতে একটি ইনপুটে বুলিয়ান অ্যাট্রিবিউট যোগ করুন । অক্ষম ইনপুট হালকা দেখায় এবং একটি not-allowedকার্সার যোগ করুন।

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

অক্ষম ফিল্ডসেট

একযোগে মধ্যে সমস্ত নিয়ন্ত্রণ নিষ্ক্রিয় করতে a- disabledতে অ্যাট্রিবিউট যোগ করুন ।<fieldset><fieldset>

লিঙ্ক কার্যকারিতা সম্পর্কে সতর্কতা`<a>`

ডিফল্টরূপে, ব্রাউজারগুলি একটি অভ্যন্তরে সমস্ত নেটিভ ফর্ম কন্ট্রোল ( <input>, <select>এবং <button>উপাদানগুলি) <fieldset disabled>কে অক্ষম হিসাবে বিবেচনা করবে, তাদের উপর কীবোর্ড এবং মাউস উভয়ের মিথস্ক্রিয়া প্রতিরোধ করবে৷ যাইহোক, যদি আপনার ফর্মটি <a ... class="btn btn-*">উপাদানগুলিও অন্তর্ভুক্ত করে, তবে এগুলিকে শুধুমাত্র একটি শৈলী দেওয়া হবে pointer-events: none। বোতামগুলির জন্য অক্ষম অবস্থা সম্পর্কে বিভাগে উল্লিখিত হিসাবে (এবং বিশেষত অ্যাঙ্কর উপাদানগুলির জন্য উপ-বিভাগে), এই CSS বৈশিষ্ট্যটি এখনও মানসম্মত নয় এবং Opera 18 এবং নীচে, বা Internet Explorer 11-এ সম্পূর্ণরূপে সমর্থিত নয় এবং জিতেছে কীবোর্ড ব্যবহারকারীদের এই লিঙ্কগুলিকে ফোকাস করতে বা সক্রিয় করতে সক্ষম হতে বাধা দেবেন না। তাই নিরাপদ হতে, এই ধরনের লিঙ্কগুলি নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।

ক্রস ব্রাউজার সামঞ্জস্য

যদিও বুটস্ট্র্যাপ সমস্ত ব্রাউজারে এই শৈলীগুলি প্রয়োগ করবে, ইন্টারনেট এক্সপ্লোরার 11 এবং নীচের disabledবৈশিষ্ট্যগুলিকে সম্পূর্ণরূপে সমর্থন করে না <fieldset>৷ এই ব্রাউজারগুলিতে ফিল্ডসেট নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

শুধুমাত্র পঠন রাষ্ট্র

readonlyইনপুটের মান পরিবর্তন রোধ করতে একটি ইনপুটে বুলিয়ান অ্যাট্রিবিউট যোগ করুন । শুধুমাত্র পঠনযোগ্য ইনপুটগুলি হালকা দেখায় (ঠিক অক্ষম ইনপুটগুলির মতো), তবে স্ট্যান্ডার্ড কার্সার ধরে রাখে।

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

সাহায্যকারী লেখা

ফর্ম নিয়ন্ত্রণের জন্য ব্লক স্তর সহায়তা পাঠ্য।

ফর্ম নিয়ন্ত্রণের সাথে সহায়তা পাঠ্য সংযুক্ত করা

সাহায্যের পাঠ্যটি স্পষ্টভাবে ফর্ম নিয়ন্ত্রণের সাথে যুক্ত হওয়া উচিত যা এটি aria-describedbyবৈশিষ্ট্য ব্যবহার করার সাথে সম্পর্কিত। এটি নিশ্চিত করবে যে সহায়ক প্রযুক্তিগুলি - যেমন স্ক্রিন রিডার - ব্যবহারকারী যখন ফোকাস করে বা নিয়ন্ত্রণে প্রবেশ করে তখন এই সহায়তা পাঠ্যটি ঘোষণা করবে৷

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

বৈধতা রাষ্ট্র

বুটস্ট্র্যাপে ত্রুটি, সতর্কতা, এবং ফর্ম নিয়ন্ত্রণের সাফল্যের অবস্থার জন্য বৈধতা শৈলী অন্তর্ভুক্ত রয়েছে। প্যারেন্ট এলিমেন্ট ব্যবহার করতে, যোগ করতে .has-warning, .has-error, বা ব্যবহার করতে। .has-successযে কোনো .control-label, .form-control, এবং .help-blockসেই উপাদানের মধ্যে বৈধতা শৈলী পাবে।

সহায়ক প্রযুক্তি এবং বর্ণান্ধ ব্যবহারকারীদের কাছে বৈধতার অবস্থা পৌঁছে দেওয়া

ফর্ম কন্ট্রোলের অবস্থা বোঝাতে এই বৈধতা শৈলীগুলি ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল, রঙ-ভিত্তিক ইঙ্গিত প্রদান করে, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডার - বা কালারব্লাইন্ড ব্যবহারকারীদের কাছে জানানো হবে না।

রাষ্ট্রের একটি বিকল্প ইঙ্গিত দেওয়া হয়েছে তা নিশ্চিত করুন। উদাহরণ স্বরূপ, আপনি ফর্ম কন্ট্রোলের টেক্সটে স্টেট সম্বন্ধে একটি ইঙ্গিত অন্তর্ভুক্ত করতে পারেন <label>(নিম্নলিখিত কোডের উদাহরণে যেমনটি করা হয়েছে), একটি Glyphicon অন্তর্ভুক্ত করতে পারেন (ক্লাস ব্যবহার করে উপযুক্ত বিকল্প পাঠ্য সহ .sr-only- Glyphicon উদাহরণগুলি দেখুন ), অথবা একটি প্রদান করে অতিরিক্ত সাহায্য পাঠ্য ব্লক। বিশেষত সহায়ক প্রযুক্তির জন্য, অবৈধ ফর্ম নিয়ন্ত্রণগুলিও একটি aria-invalid="true"বৈশিষ্ট্য বরাদ্দ করা যেতে পারে।

সাফল্যের সাথে ইনপুট সাহায্য পাঠ্যের একটি ব্লক যা একটি নতুন লাইনে ভেঙে যায় এবং একটি লাইনের বাইরে প্রসারিত হতে পারে।

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

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

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

সতর্কতা সহ চেকবক্স

ত্রুটি সহ চেকবক্স

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ঐচ্ছিক আইকন সহ

আপনি ঐচ্ছিক প্রতিক্রিয়া আইকন যোগ করতে পারেন এবং .has-feedbackসঠিক আইকন যোগ করে।

প্রতিক্রিয়া আইকন শুধুমাত্র পাঠ্য <input class="form-control">উপাদানের সাথে কাজ করে।

আইকন, লেবেল এবং ইনপুট গ্রুপ

একটি লেবেল ছাড়া ইনপুট এবং ডানদিকে একটি অ্যাড-অন সহ ইনপুট গোষ্ঠীগুলির জন্য প্রতিক্রিয়া আইকনগুলির ম্যানুয়াল পজিশনিং প্রয়োজন ৷ অ্যাক্সেসযোগ্যতার কারণে আপনাকে সমস্ত ইনপুটগুলির জন্য লেবেল সরবরাহ করার জন্য দৃঢ়ভাবে উত্সাহিত করা হচ্ছে৷ আপনি যদি লেবেলগুলিকে প্রদর্শন করা থেকে আটকাতে চান তবে সেগুলিকে .sr-onlyক্লাসের সাথে লুকান৷ যদি আপনাকে লেবেল ছাড়াই করতে topহয়, তাহলে প্রতিক্রিয়া আইকনের মান সামঞ্জস্য করুন। rightইনপুট গোষ্ঠীগুলির জন্য, আপনার অ্যাডনের প্রস্থের উপর নির্ভর করে একটি উপযুক্ত পিক্সেল মানের মানকে সামঞ্জস্য করুন ।

সহায়ক প্রযুক্তিতে আইকনের অর্থ বোঝানো

সহায়ক প্রযুক্তিগুলি - যেমন স্ক্রিন রিডার - সঠিকভাবে একটি আইকনের অর্থ বোঝায় তা নিশ্চিত করতে, অতিরিক্ত লুকানো পাঠ্যটি .sr-onlyক্লাসের সাথে অন্তর্ভুক্ত করা উচিত এবং এটি ব্যবহারের সাথে সম্পর্কিত ফর্ম নিয়ন্ত্রণের সাথে স্পষ্টভাবে যুক্ত করা উচিত aria-describedby৷ বিকল্পভাবে, নিশ্চিত করুন যে অর্থ (উদাহরণস্বরূপ, একটি নির্দিষ্ট পাঠ্য এন্ট্রি ক্ষেত্রের জন্য একটি সতর্কতা রয়েছে) অন্য কোনো আকারে জানানো হয়েছে, যেমন <label>ফর্ম নিয়ন্ত্রণের সাথে সম্পর্কিত প্রকৃত পাঠ্য পরিবর্তন করা।

যদিও নিম্নলিখিত উদাহরণগুলি ইতিমধ্যেই পাঠ্যের মধ্যেই তাদের নিজ নিজ ফর্ম নিয়ন্ত্রণের বৈধতা অবস্থার কথা উল্লেখ করেছে <label>, উপরের কৌশলটি ( .sr-onlyটেক্সট এবং aria-describedby) ব্যবহার করে উদাহরণের উদ্দেশ্যে অন্তর্ভুক্ত করা হয়েছে।

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

অনুভূমিক এবং ইনলাইন আকারে ঐচ্ছিক আইকন

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

`.sr-only`লুকানো লেবেল সহ ঐচ্ছিক আইকন

আপনি যদি .sr-onlyএকটি ফর্ম কন্ট্রোল লুকানোর জন্য ক্লাসটি ব্যবহার করেন <label>(অন্যান্য লেবেলিং বিকল্পগুলি ব্যবহার করার পরিবর্তে, যেমন aria-labelঅ্যাট্রিবিউট), বুটস্ট্র্যাপ আইকনটি যোগ করার পরে স্বয়ংক্রিয়ভাবে তার অবস্থান সামঞ্জস্য করবে।

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

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

এর মতো ক্লাস ব্যবহার করে উচ্চতা সেট করুন .input-lgএবং গ্রিড কলাম ক্লাসের মতো প্রস্থ সেট করুন .col-lg-*।

উচ্চতা মাপ

লম্বা বা খাটো ফর্ম কন্ট্রোল তৈরি করুন যা বোতামের আকারের সাথে মেলে।

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

অনুভূমিক ফর্ম গ্রুপ মাপ

দ্রুত আকার লেবেল এবং ফর্ম নিয়ন্ত্রণ মধ্যে .form-horizontalযোগ করে .form-group-lgবা .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

কলামের সাইজিং

সহজে পছন্দসই প্রস্থ প্রয়োগ করতে গ্রিড কলামে বা যেকোনো কাস্টম প্যারেন্ট উপাদানে ইনপুটগুলি মোড়ানো।

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

বোতাম ট্যাগ

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

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

প্রসঙ্গ-নির্দিষ্ট ব্যবহার

যদিও বাটন ক্লাসগুলি <a>এবং <button>উপাদানগুলিতে ব্যবহার করা যেতে পারে, শুধুমাত্র <button>উপাদানগুলি আমাদের এনএভি এবং নেভিবার উপাদানগুলির মধ্যে সমর্থিত।

লিঙ্কগুলি বোতাম হিসাবে কাজ করে

যদি <a>উপাদানগুলি বোতাম হিসাবে কাজ করতে ব্যবহৃত হয় - বর্তমান পৃষ্ঠার মধ্যে অন্য নথি বা বিভাগে নেভিগেট করার পরিবর্তে - ইন-পেজ কার্যকারিতা ট্রিগার করে - তাদেরও একটি উপযুক্ত দেওয়া উচিত role="button"।

ক্রস-ব্রাউজার রেন্ডারিং

একটি সর্বোত্তম অনুশীলন হিসাবে, আমরা ক্রস-ব্রাউজার রেন্ডারিং মিলে যাওয়া নিশ্চিত করতে যখনই সম্ভব উপাদানটি ব্যবহার করার পরামর্শ দিই ।<button>

অন্যান্য জিনিসের মধ্যে, ফায়ারফক্স <30-এ একটি বাগ রয়েছেline-height যা আমাদের -ভিত্তিক বোতামগুলি সেট করতে বাধা দেয় <input>, যার ফলে সেগুলি ফায়ারফক্সের অন্যান্য বোতামগুলির উচ্চতার সাথে ঠিক মেলে না।

অপশন

দ্রুত একটি স্টাইল করা বোতাম তৈরি করতে উপলব্ধ যে কোনো বোতাম ক্লাস ব্যবহার করুন।

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

সহায়ক প্রযুক্তির অর্থ বোঝানো

একটি বোতামে অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে জানানো হবে না - যেমন স্ক্রিন রিডার। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট (বোতামের দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-onlyক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।

মাপ

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

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

ব্লক লেভেল বোতাম তৈরি করুন—যেগুলি একটি অভিভাবকের সম্পূর্ণ প্রস্থে বিস্তৃত— যোগ করে .btn-block।

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

সক্রিয় অবস্থা

সক্রিয় থাকাকালীন বোতামগুলি টিপে প্রদর্শিত হবে (একটি গাঢ় পটভূমি, গাঢ় সীমানা এবং ইনসেট শ্যাডো সহ)। <button>উপাদানগুলির জন্য , এটি এর মাধ্যমে করা হয় :active। <a>উপাদানগুলির জন্য , এটি দিয়ে করা হয়েছে .active। যাইহোক, আপনি s ব্যবহার করতে পারেন .active( <button>এবং aria-pressed="true"অ্যাট্রিবিউট অন্তর্ভুক্ত করুন) যদি আপনাকে সক্রিয় অবস্থাটি প্রোগ্রাম্যাটিকভাবে প্রতিলিপি করতে হবে।

বোতাম উপাদান

এটি একটি ছদ্ম-শ্রেণি বলে যোগ করার দরকার নেই :active, তবে আপনার যদি একই চেহারা জোর করতে হয় তবে এগিয়ে যান এবং যোগ করুন .active।

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

অ্যাঙ্কর উপাদান

বোতামে .activeক্লাস যোগ করুন ।<a>

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

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

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

বোতামগুলিকে আবার বিবর্ণ করে দিয়ে ক্লিক করার অযোগ্য দেখান opacity৷

বোতাম উপাদান

disabledবাটনে অ্যাট্রিবিউট যোগ করুন <button>।

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ক্রস ব্রাউজার সামঞ্জস্য

আপনি যদি disabledএকটি , ইন্টারনেট এক্সপ্লোরার 9 এবং নীচের বৈশিষ্ট্যটি যুক্ত করেন তবে <button>একটি বাজে টেক্সট-শ্যাডো সহ পাঠ্য ধূসর হয়ে যাবে যা আমরা ঠিক করতে পারি না।

অ্যাঙ্কর উপাদান

বোতামে .disabledক্লাস যোগ করুন ।<a>

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

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

লিঙ্ক কার্যকারিতা সতর্কতা

এই ক্লাসটি s- pointer-events: noneএর লিঙ্ক কার্যকারিতা নিষ্ক্রিয় করার চেষ্টা করার জন্য ব্যবহার করে <a>, কিন্তু সেই CSS প্রপার্টিটি এখনও মানসম্মত নয় এবং Opera 18 এবং নীচের বা Internet Explorer 11-এ সম্পূর্ণরূপে সমর্থিত নয়৷ উপরন্তু, এমনকি ব্রাউজারগুলিতেও যা সমর্থন করে pointer-events: none, কীবোর্ড নেভিগেশন অপ্রভাবিত রয়ে গেছে, যার অর্থ হল দৃষ্টিশক্তিসম্পন্ন কীবোর্ড ব্যবহারকারী এবং সহায়ক প্রযুক্তির ব্যবহারকারীরা এখনও এই লিঙ্কগুলি সক্রিয় করতে সক্ষম হবেন। তাই নিরাপদ হতে, এই ধরনের লিঙ্কগুলি নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।

প্রতিক্রিয়াশীল ছবি

.img-responsiveবুটস্ট্র্যাপ 3-এ চিত্রগুলিকে ক্লাসের সংযোজনের মাধ্যমে প্রতিক্রিয়াশীল-বান্ধব করা যেতে পারে । এটি প্রযোজ্য max-width: 100%;, height: auto;এবং display: block;চিত্রের জন্য যাতে এটি মূল উপাদানের সাথে সুন্দরভাবে স্কেল করে।

.img-responsiveক্লাস ব্যবহার করে এমন চিত্রগুলিকে কেন্দ্রে রাখতে , .center-blockএর পরিবর্তে ব্যবহার করুন .text-center। ব্যবহার সম্পর্কে আরো বিস্তারিত জানার জন্য সহায়ক ক্লাস বিভাগ.center-block দেখুন ।

SVG ছবি এবং IE 8-10

ইন্টারনেট এক্সপ্লোরার 8-10-এ, এর সাথে SVG ছবিগুলি .img-responsiveঅসামঞ্জস্যপূর্ণ আকারের। width: 100% \9;এটি ঠিক করতে, যেখানে প্রয়োজন সেখানে যোগ করুন । বুটস্ট্র্যাপ এটি স্বয়ংক্রিয়ভাবে প্রয়োগ করে না কারণ এটি অন্যান্য চিত্র বিন্যাসে জটিলতা সৃষ্টি করে।

<img src="..." class="img-responsive" alt="Responsive image">

ছবির আকার

<img>যেকোন প্রজেক্টে সহজেই স্টাইল ইমেজ করার জন্য একটি উপাদানে ক্লাস যোগ করুন ।

ক্রস ব্রাউজার সামঞ্জস্য

মনে রাখবেন যে ইন্টারনেট এক্সপ্লোরার 8 বৃত্তাকার কোণগুলির জন্য সমর্থনের অভাব রয়েছে।

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

প্রাসঙ্গিক রং

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

Fusce dapibus, telus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

নির্দিষ্টতা সঙ্গে মোকাবিলা

কখনও কখনও অন্য নির্বাচকের নির্দিষ্টতার কারণে জোর ক্লাস প্রয়োগ করা যায় না। বেশিরভাগ ক্ষেত্রে, একটি পর্যাপ্ত সমাধান হল আপনার পাঠ্যকে <span>ক্লাসের সাথে মোড়ানো।

সহায়ক প্রযুক্তির অর্থ বোঝানো

অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকেই স্পষ্ট (প্রসঙ্গিক রঙগুলি কেবলমাত্র পাঠ্য/মার্কআপে বিদ্যমান অর্থকে শক্তিশালী করতে ব্যবহৃত হয়), বা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়, যেমন .sr-onlyক্লাসের সাথে অতিরিক্ত পাঠ্য লুকানো .

প্রাসঙ্গিক পটভূমি

প্রাসঙ্গিক টেক্সট রঙের ক্লাসের মতো, যেকোন প্রাসঙ্গিক ক্লাসে সহজেই একটি উপাদানের পটভূমি সেট করুন। টেক্সট ক্লাসের মতোই অ্যাঙ্কর উপাদানগুলি হোভারে অন্ধকার হয়ে যাবে।

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada Magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

নির্দিষ্টতা সঙ্গে মোকাবিলা

কখনও কখনও প্রাসঙ্গিক ব্যাকগ্রাউন্ড ক্লাস অন্য নির্বাচকের নির্দিষ্টতার কারণে প্রয়োগ করা যায় না। কিছু ক্ষেত্রে, একটি পর্যাপ্ত সমাধান হল আপনার উপাদানের বিষয়বস্তু <div>ক্লাসের সাথে মোড়ানো।

সহায়ক প্রযুক্তির অর্থ বোঝানো

প্রাসঙ্গিক রঙের মতো , নিশ্চিত করুন যে রঙের মাধ্যমে যে কোনো অর্থ প্রকাশ করা হয়েছে এমন একটি বিন্যাসে যা সম্পূর্ণরূপে উপস্থাপনামূলক নয়।

ক্লোজ আইকন

মডেল এবং সতর্কতার মত বিষয়বস্তু খারিজ করার জন্য জেনেরিক ক্লোজ আইকন ব্যবহার করুন।

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

ক্যারেটস

ড্রপডাউন কার্যকারিতা এবং দিক নির্দেশ করতে ক্যারেট ব্যবহার করুন। মনে রাখবেন যে ডিফল্ট ক্যারেট ড্রপআপ মেনুতে স্বয়ংক্রিয়ভাবে বিপরীত হয়ে যাবে ।

<span class="caret"></span>

দ্রুত floats

একটি ক্লাসের সাথে বাম বা ডানে একটি উপাদান ভাসুন। !importantনির্দিষ্টতা সমস্যা এড়াতে অন্তর্ভুক্ত করা হয়. ক্লাসগুলিও মিক্সিন হিসাবে ব্যবহার করা যেতে পারে।

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

কেন্দ্র বিষয়বস্তু ব্লক

এর মাধ্যমে একটি উপাদান display: blockএবং কেন্দ্রে সেট করুন margin। একটি mixin এবং ক্লাস হিসাবে উপলব্ধ.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ক্লিয়ারফিক্স

প্যারেন্ট এলিমেন্ট যোগ করে সহজে floats সাফ করুন । নিকোলাস গ্যালাঘের দ্বারা জনপ্রিয় মাইক্রো ক্লিয়ারফিক্স ব্যবহার করে। এছাড়াও একটি mixin হিসাবে ব্যবহার করা যেতে পারে..clearfix

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

বিষয়বস্তু দেখানো এবং লুকানো

একটি উপাদানকে দেখানো বা লুকিয়ে রাখতে বাধ্য করুন ( স্ক্রিন রিডার সহ ) .showএবং .hiddenক্লাস ব্যবহার করে। এই ক্লাসগুলি দ্রুত ফ্লোটের!important মতো নির্দিষ্টতার দ্বন্দ্ব এড়াতে ব্যবহার করে । এগুলি শুধুমাত্র ব্লক লেভেল টগলিংয়ের জন্য উপলব্ধ৷ এগুলি মিক্সিন হিসাবেও ব্যবহার করা যেতে পারে।

.hideউপলব্ধ, কিন্তু এটি সর্বদা স্ক্রীন পাঠকদের প্রভাবিত করে না এবং v3.0.1 হিসাবে অবচয়িত। ব্যবহার করুন .hiddenবা .sr-onlyপরিবর্তে.

উপরন্তু, .invisibleশুধুমাত্র একটি উপাদানের দৃশ্যমানতা টগল করতে ব্যবহার করা যেতে পারে, যার অর্থ এটি displayপরিবর্তন করা হয়নি এবং উপাদানটি এখনও নথির প্রবাহকে প্রভাবিত করতে পারে।

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

স্ক্রিন রিডার এবং কীবোর্ড নেভিগেশন সামগ্রী

স্ক্রিন রিডার ছাড়া সব ডিভাইসে একটি উপাদান লুকান .sr-only। যখন এটি ফোকাস করা হয় তখন উপাদানটিকে আবার দেখানোর জন্য এর .sr-onlyসাথে একত্রিত করুন (যেমন একটি কীবোর্ড-কেবল ব্যবহারকারী দ্বারা)। অ্যাক্সেসযোগ্যতার সর্বোত্তম অনুশীলনগুলি.sr-only-focusable অনুসরণ করার জন্য প্রয়োজনীয় । এছাড়াও mixins হিসাবে ব্যবহার করা যেতে পারে.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ছবি প্রতিস্থাপন

.text-hideএকটি পটভূমি চিত্রের সাথে একটি উপাদানের পাঠ্য বিষয়বস্তু প্রতিস্থাপন করতে সাহায্য করতে ক্লাস বা মিক্সিন ব্যবহার করুন ।

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

দ্রুত মোবাইল-বান্ধব বিকাশের জন্য, মিডিয়া ক্যোয়ারির মাধ্যমে ডিভাইস দ্বারা সামগ্রী দেখানো এবং লুকানোর জন্য এই ইউটিলিটি ক্লাসগুলি ব্যবহার করুন৷ মুদ্রিত হলে সামগ্রী টগল করার জন্য ইউটিলিটি ক্লাসগুলিও অন্তর্ভুক্ত রয়েছে।

সীমিত ভিত্তিতে এগুলি ব্যবহার করার চেষ্টা করুন এবং একই সাইটের সম্পূর্ণ ভিন্ন সংস্করণ তৈরি করা এড়ান। পরিবর্তে, প্রতিটি ডিভাইসের উপস্থাপনা পরিপূরক করতে তাদের ব্যবহার করুন।

উপলব্ধ ক্লাস

ভিউপোর্ট ব্রেকপয়েন্ট জুড়ে সামগ্রী টগল করার জন্য উপলব্ধ ক্লাসগুলির একটি একক বা সংমিশ্রণ ব্যবহার করুন।

	অতিরিক্ত ছোট ডিভাইসফোন (<768px)	ছোট ডিভাইসট্যাবলেট (≥768px)	মাঝারি ডিভাইসডেস্কটপ (≥992px)	বড় ডিভাইসডেস্কটপ (≥1200px)
`.visible-xs-*`	দৃশ্যমান	গোপন	গোপন	গোপন
`.visible-sm-*`	গোপন	দৃশ্যমান	গোপন	গোপন
`.visible-md-*`	গোপন	গোপন	দৃশ্যমান	গোপন
`.visible-lg-*`	গোপন	গোপন	গোপন	দৃশ্যমান
`.hidden-xs`	গোপন	দৃশ্যমান	দৃশ্যমান	দৃশ্যমান
`.hidden-sm`	দৃশ্যমান	গোপন	দৃশ্যমান	দৃশ্যমান
`.hidden-md`	দৃশ্যমান	দৃশ্যমান	গোপন	দৃশ্যমান
`.hidden-lg`	দৃশ্যমান	দৃশ্যমান	দৃশ্যমান	গোপন

v3.2.0 অনুযায়ী, .visible-*-*প্রতিটি ব্রেকপয়েন্টের জন্য ক্লাস তিনটি ভিন্নতায় আসে, displayনিচে তালিকাভুক্ত প্রতিটি CSS প্রপার্টির মানের জন্য একটি।

ক্লাসের গ্রুপ	সিএসএস`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

সুতরাং, অতিরিক্ত ছোট ( xs) স্ক্রিনের জন্য উদাহরণস্বরূপ, উপলব্ধ .visible-*-*ক্লাসগুলি হল: .visible-xs-block, .visible-xs-inline, এবং .visible-xs-inline-block.

ক্লাস .visible-xs, .visible-sm, .visible-md, এবং .visible-lgএছাড়াও বিদ্যমান, কিন্তু v3.2.0 হিসাবে অবচয়িত । টগল -সম্পর্কিত উপাদানগুলির .visible-*-blockজন্য অতিরিক্ত বিশেষ ক্ষেত্রে ছাড়া এগুলি প্রায় সমতুল্য ।<table>

প্রিন্ট ক্লাস

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

ক্লাস	ব্রাউজার	ছাপা
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	গোপন	দৃশ্যমান
`.hidden-print`	দৃশ্যমান	গোপন

শ্রেণীটিও .visible-printবিদ্যমান কিন্তু v3.2.0 হিসাবে অবহেলিত। এটি প্রায় সমতুল্য .visible-print-block, ব্যতীত অতিরিক্ত বিশেষ ক্ষেত্রে <table>সম্পর্কিত উপাদানগুলির জন্য৷

টেস্ট কেস

প্রতিক্রিয়াশীল ইউটিলিটি ক্লাস পরীক্ষা করতে আপনার ব্রাউজারের আকার পরিবর্তন করুন বা বিভিন্ন ডিভাইসে লোড করুন।

এতে দৃশ্যমান...

সবুজ চেকমার্কগুলি নির্দেশ করে যে উপাদানটি আপনার বর্তমান ভিউপোর্টে দৃশ্যমান ।

বেশি ছোট ✔ ছোট x-এ দৃশ্যমান

ছোট ✔ ছোট উপর দৃশ্যমান

মধ্যম ✔ মিডিয়ামে দৃশ্যমান

বড় ✔ বড় আকারে দৃশ্যমান

অতিরিক্ত ছোট ছোট ✔ ছোট এবং ছোট x-এ দৃশ্যমান

মাঝারি এবং বড় ✔ মাঝারি এবং বড় উভয় ক্ষেত্রে দৃশ্যমান

অতিরিক্ত ছোট এবং মাঝারি ✔ ছোট এবং মাঝারি x-এ দৃশ্যমান

ছোট বড় ✔ ছোট এবং বড় উভয় ক্ষেত্রেই দৃশ্যমান

অতিরিক্ত ছোট এবং বড় ✔ ছোট এবং বড় x-এ দৃশ্যমান

ছোট এবং মাঝারি ✔ ছোট এবং মাঝারি উভয় ক্ষেত্রেই দৃশ্যমান

লুকিয়ে আছে...

এখানে, সবুজ চেকমার্কগুলিও নির্দেশ করে যে উপাদানটি আপনার বর্তমান ভিউপোর্টে লুকানো আছে।

বেশি ছোট ✔ ছোট x-এ লুকানো

ছোট ✔ ছোট উপর লুকানো

মধ্যম ✔ মিডিয়াম লুকানো

বড় ✔ বড় উপর লুকানো

অতিরিক্ত ছোট ছোট ✔ x-ছোট এবং ছোটে লুকানো

মাঝারি এবং বড় ✔ মাঝারি এবং বড় লুকানো

অতিরিক্ত ছোট এবং মাঝারি ✔ ছোট এবং মাঝারি x-এ লুকানো

ছোট বড় ✔ ছোট এবং বড় লুকানো

অতিরিক্ত ছোট এবং বড় ✔ ছোট এবং বড় x-এ লুকানো

ছোট এবং মাঝারি ✔ ছোট এবং মাঝারি লুকানো

বুটস্ট্র্যাপের সিএসএস লেস-এর উপর তৈরি করা হয়েছে, একটি প্রিপ্রসেসর যা অতিরিক্ত কার্যকারিতা যেমন ভেরিয়েবল, মিক্সিন এবং সিএসএস কম্পাইল করার জন্য ফাংশন। যারা আমাদের কম্পাইল করা CSS ফাইলের পরিবর্তে সোর্স লেস ফাইল ব্যবহার করতে চাইছেন তারা ফ্রেমওয়ার্ক জুড়ে আমাদের ব্যবহার করা অসংখ্য ভেরিয়েবল এবং মিক্সিন ব্যবহার করতে পারেন।

গ্রিড ভেরিয়েবল এবং মিক্সিনগুলি গ্রিড সিস্টেম বিভাগের মধ্যে কভার করা হয় ।

বুটস্ট্র্যাপ কম্পাইল করা হচ্ছে

বুটস্ট্র্যাপ কমপক্ষে দুটি উপায়ে ব্যবহার করা যেতে পারে: কম্পাইল করা CSS বা সোর্স Less ফাইলের সাথে। কম ফাইল কম্পাইল করতে, প্রয়োজনীয় কমান্ড চালানোর জন্য কীভাবে আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করবেন তার জন্য শুরু করা বিভাগটি দেখুন।

তৃতীয় পক্ষের সংকলন সরঞ্জামগুলি বুটস্ট্র্যাপের সাথে কাজ করতে পারে, তবে সেগুলি আমাদের মূল দল দ্বারা সমর্থিত নয়।

ভেরিয়েবল

রঙ, ব্যবধান, বা ফন্ট স্ট্যাকের মতো সাধারণভাবে ব্যবহৃত মানগুলিকে কেন্দ্রীভূত এবং ভাগ করার উপায় হিসাবে পুরো প্রকল্প জুড়ে ভেরিয়েবলগুলি ব্যবহার করা হয়। সম্পূর্ণ ব্রেকডাউনের জন্য, অনুগ্রহ করে কাস্টমাইজার দেখুন ।

রং

সহজে দুটি রঙের স্কিম ব্যবহার করুন: গ্রেস্কেল এবং শব্দার্থিক। গ্রেস্কেল রঙগুলি সাধারণত ব্যবহৃত কালো শেডগুলিতে দ্রুত অ্যাক্সেস প্রদান করে যখন শব্দার্থক অর্থপূর্ণ প্রাসঙ্গিক মানগুলির জন্য নির্ধারিত বিভিন্ন রঙ অন্তর্ভুক্ত করে।

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

এই রঙের ভেরিয়েবলগুলির যেকোনও ব্যবহার করুন বা আপনার প্রকল্পের জন্য আরও অর্থপূর্ণ ভেরিয়েবলগুলিতে সেগুলিকে পুনরায় বরাদ্দ করুন৷

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ভারা

আপনার সাইটের কঙ্কালের মূল উপাদানগুলিকে দ্রুত কাস্টমাইজ করার জন্য মুষ্টিমেয় ভেরিয়েবল।

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

লিঙ্ক

শুধুমাত্র একটি মান সহ আপনার লিঙ্কগুলিকে সঠিক রঙ দিয়ে সহজেই স্টাইল করুন।

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

মনে রাখবেন যে @link-hover-colorএকটি ফাংশন ব্যবহার করে, কম থেকে আরেকটি দুর্দান্ত টুল, স্বয়ংক্রিয়ভাবে সঠিক হোভার রঙ তৈরি করতে। আপনি darken, lighten, saturate, এবং ব্যবহার করতে পারেন desaturate।

টাইপোগ্রাফি

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

আইকন

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

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

উপাদান

বুটস্ট্র্যাপ জুড়ে উপাদানগুলি সাধারণ মান সেট করার জন্য কিছু ডিফল্ট ভেরিয়েবল ব্যবহার করে। এখানে সবচেয়ে বেশি ব্যবহৃত হয়।

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

বিক্রেতা মিশ্রণ

আপনার কম্পাইল করা CSS-এ সমস্ত প্রাসঙ্গিক বিক্রেতা উপসর্গ অন্তর্ভুক্ত করে একাধিক ব্রাউজারকে সহায়তা করার জন্য ভেন্ডর মিক্সিনগুলি হল মিক্সিন।

বক্স-সাইজিং

একটি একক মিক্সিন দিয়ে আপনার উপাদানের বক্স মডেল রিসেট করুন। প্রসঙ্গের জন্য, Mozilla থেকে এই সহায়ক নিবন্ধটি দেখুন ।

অটোপ্রেফিক্সার প্রবর্তনের সাথে v3.2.0 হিসাবে মিক্সিনকে অবচয় করা হয়েছে । পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

বৃত্তাকার কোণ

আজ সব আধুনিক ব্রাউজার নন-প্রিফিক্সড সমর্থন করেborder-radius সম্পত্তি সমর্থন করে। যেমন, কোন .border-radius()মিক্সিন নেই, তবে বুটস্ট্র্যাপে একটি বস্তুর একটি নির্দিষ্ট দিকের দুটি কোণ দ্রুত বৃত্তাকার করার জন্য শর্টকাট অন্তর্ভুক্ত থাকে।

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

বক্স (ড্রপ) ছায়া

যদি আপনার টার্গেট শ্রোতারা সর্বশেষ এবং সর্বশ্রেষ্ঠ ব্রাউজার এবং ডিভাইসগুলি ব্যবহার করে থাকেন তবে শুধুমাত্র ব্যবহার করতে ভুলবেন নাbox-shadow নিজেরাই সম্পত্তিটি ব্যবহার করুন৷ আপনার যদি পুরানো অ্যান্ড্রয়েড (প্রি-ভি4) এবং iOS ডিভাইসগুলির (প্রি-আইওএস 5) জন্য সমর্থনের প্রয়োজন হয়, তাহলে প্রয়োজনীয় উপসর্গটি বেছে নিতে অবচয়িত মিক্সিন ব্যবহার করুন।-webkit

মিক্সিনটি v3.1.0 হিসাবে অবচয়িত হয়েছে, যেহেতু বুটস্ট্র্যাপ আনুষ্ঠানিকভাবে পুরানো প্ল্যাটফর্মগুলিকে সমর্থন করে না যা স্ট্যান্ডার্ড সম্পত্তি সমর্থন করে না। পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।

আপনার বাক্সের ছায়াগুলিতে রঙগুলি ব্যবহার করতে ভুলবেন না rgba()যাতে তারা ব্যাকগ্রাউন্ডের সাথে যতটা সম্ভব নির্বিঘ্নে মিশে যায়।

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

রূপান্তর

নমনীয়তার জন্য একাধিক মিশ্রণ। একটির সাথে সমস্ত রূপান্তর তথ্য সেট করুন বা প্রয়োজন অনুসারে একটি পৃথক বিলম্ব এবং সময়কাল নির্দিষ্ট করুন।

অটোপ্রেফিক্সার প্রবর্তনের সাথে v3.2.0 হিসাবে মিক্সিনগুলিকে অবমূল্যায়ন করা হয়েছে । পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

রূপান্তর

ঘোরান, স্কেল, অনুবাদ (সরানো), বা কোনো বস্তু তির্যক.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

অ্যানিমেশন

একটি ঘোষণায় CSS3 এর সমস্ত অ্যানিমেশন বৈশিষ্ট্য ব্যবহার করার জন্য একটি একক মিশ্রণ এবং পৃথক বৈশিষ্ট্যের জন্য অন্যান্য মিশ্রণ।

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

অস্বচ্ছতা

সমস্ত ব্রাউজারগুলির জন্য অস্বচ্ছতা সেট করুন এবং filterIE8 এর জন্য একটি ফলব্যাক প্রদান করুন৷

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

স্থানধারক পাঠ্য

প্রতিটি ক্ষেত্রের মধ্যে ফর্ম নিয়ন্ত্রণের জন্য প্রসঙ্গ প্রদান করুন।

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

কলাম

একটি একক উপাদানের মধ্যে CSS এর মাধ্যমে কলাম তৈরি করুন।

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

গ্রেডিয়েন্ট

যেকোনো দুটি রঙকে সহজেই একটি পটভূমি গ্রেডিয়েন্টে পরিণত করুন। আরও উন্নত হন এবং একটি দিকনির্দেশ সেট করুন, তিনটি রঙ ব্যবহার করুন বা একটি রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করুন৷ একটি একক মিশ্রণের সাথে আপনি আপনার প্রয়োজনীয় সমস্ত প্রিফিক্সড সিনট্যাক্স পাবেন।

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

আপনি একটি আদর্শ দুই-রঙের, রৈখিক গ্রেডিয়েন্টের কোণও নির্দিষ্ট করতে পারেন:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

পূর্বে উপরে এবং পরিবর্তে তিনটি রং ব্যবহার করুন. প্রথম রঙ, দ্বিতীয় রঙ, দ্বিতীয় রঙের রঙ স্টপ (25% এর মতো একটি শতাংশ মান), এবং এই মিশ্রণগুলির সাথে তৃতীয় রঙ সেট করুন:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

মাথা আপ! আপনার যদি কখনও গ্রেডিয়েন্ট মুছে ফেলার প্রয়োজন হয়, filterআপনার যোগ করা কোনো IE-নির্দিষ্ট অপসারণ করতে ভুলবেন না। .reset-filter()আপনি পাশাপাশি মিক্সিন ব্যবহার করে এটি করতে পারেন background-image: none;।

ইউটিলিটি মিক্সন

ইউটিলিটি মিক্সিন হল মিক্সিন যা একটি নির্দিষ্ট লক্ষ্য বা কাজ অর্জনের জন্য অন্যথায় সম্পর্কহীন CSS বৈশিষ্ট্যগুলিকে একত্রিত করে।

ক্লিয়ারফিক্স

class="clearfix"কোন উপাদান যোগ করতে ভুলবেন না এবং পরিবর্তে উপযুক্ত যেখানে মিক্সিন যোগ করুন .clearfix()। Nicolas Gallagher থেকে মাইক্রো ক্লিয়ারফিক্স ব্যবহার করে ।

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

অনুভূমিক কেন্দ্রীকরণ

যেকোন উপাদানকে তার পিতামাতার মধ্যে দ্রুত কেন্দ্রীভূত করুন। প্রয়োজন widthবা max-widthসেট করা.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

সাইজিং সহায়ক

একটি বস্তুর মাত্রা আরো সহজে নির্দিষ্ট করুন।

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

আকার পরিবর্তনযোগ্য পাঠ্যক্ষেত্র

যেকোনো টেক্সটেরিয়া বা অন্য কোনো উপাদানের জন্য রিসাইজ বিকল্পগুলি সহজেই কনফিগার করুন। সাধারণ ব্রাউজার আচরণে ডিফল্ট ( both)

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

টেক্সট কাটা

একটি একক মিক্সিন সহ একটি উপবৃত্ত সহ পাঠ্যকে সহজেই ছেঁটে ফেলুন৷ উপাদান হতে blockবা inline-blockস্তর প্রয়োজন.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

রেটিনার ছবি

দুটি চিত্র পাথ এবং @1x চিত্রের মাত্রা নির্দিষ্ট করুন এবং বুটস্ট্র্যাপ একটি @2x মিডিয়া ক্যোয়ারী প্রদান করবে। আপনার পরিবেশন করার জন্য অনেকগুলি ছবি থাকলে, একটি একক মিডিয়া ক্যোয়ারীতে ম্যানুয়ালি আপনার রেটিনা ইমেজ CSS লেখার কথা বিবেচনা করুন।

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

যদিও বুটস্ট্র্যাপ Less-এ নির্মিত, এটিতে একটি অফিসিয়াল Sass পোর্টও রয়েছে । আমরা এটি একটি পৃথক GitHub সংগ্রহস্থলে বজায় রাখি এবং একটি রূপান্তর স্ক্রিপ্টের সাথে আপডেটগুলি পরিচালনা করি।

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

যেহেতু সাস পোর্টের একটি পৃথক রেপো রয়েছে এবং এটি কিছুটা ভিন্ন দর্শকদের পরিবেশন করে, তাই প্রকল্পের বিষয়বস্তু মূল বুটস্ট্র্যাপ প্রকল্প থেকে অনেকটাই আলাদা। এটি নিশ্চিত করে যে Sass পোর্ট যতটা সম্ভব Sass-ভিত্তিক সিস্টেমের সাথে সামঞ্জস্যপূর্ণ।

পথ	বর্ণনা
`lib/`	রুবি জেম কোড (সাস কনফিগারেশন, রেল এবং কম্পাস ইন্টিগ্রেশন)
`tasks/`	রূপান্তরকারী স্ক্রিপ্ট (আপস্ট্রিম কম থেকে Sass এ পরিণত করা)
`test/`	সংকলন পরীক্ষা
`templates/`	কম্পাস প্যাকেজ ম্যানিফেস্ট
`vendor/assets/`	Sass, JavaScript, এবং ফন্ট ফাইল
`Rakefile`	অভ্যন্তরীণ কাজ, যেমন রেক এবং রূপান্তর

এই ফাইলগুলিকে কার্যকর দেখতে Sass পোর্টের GitHub সংগ্রহস্থলে যান।

স্থাপন

Sass এর জন্য বুটস্ট্র্যাপ কিভাবে ইন্সটল এবং ব্যবহার করবেন সে সম্পর্কে তথ্যের জন্য, গিটহাব রিপোজিটরি রিডমি -এর সাথে পরামর্শ করুন । এটি সবচেয়ে আপ টু ডেট উত্স এবং এতে রেল, কম্পাস এবং স্ট্যান্ডার্ড Sass প্রকল্পগুলির সাথে ব্যবহারের জন্য তথ্য রয়েছে৷

Sass জন্য বুটস্ট্র্যাপ

সিএসএস

ওভারভিউ

HTML5 ডকটাইপ

প্রথমে মোবাইল

টাইপোগ্রাফি এবং লিঙ্ক

Normalize.css

পাত্রে

গ্রিড সিস্টেম

ভূমিকা

মিডিয়া প্রশ্নের

গ্রিড বিকল্প

উদাহরণ: স্তুপীকৃত-থেকে-অনুভূমিক

উদাহরণ: তরল ধারক

উদাহরণ: মোবাইল এবং ডেস্কটপ

উদাহরণ: মোবাইল, ট্যাবলেট, ডেস্কটপ

উদাহরণ: কলাম মোড়ানো

প্রতিক্রিয়াশীল কলাম রিসেট

অফসেটিং কলাম

নেস্টিং কলাম

কলাম ক্রম

কম মিশ্রণ এবং ভেরিয়েবল

ভেরিয়েবল

মিক্সিন

উদাহরণ ব্যবহার

টাইপোগ্রাফি

শিরোনাম

h1. বুটস্ট্র্যাপ শিরোনাম

h2. বুটস্ট্র্যাপ শিরোনাম

h3. বুটস্ট্র্যাপ শিরোনাম

h4. বুটস্ট্র্যাপ শিরোনাম

h5. বুটস্ট্র্যাপ শিরোনাম

h6. বুটস্ট্র্যাপ শিরোনাম

h1. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h2. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h3. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h4. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h5. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

h6. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট

শরীরের কপি

লিড বডি কপি

কম দিয়ে নির্মিত

ইনলাইন টেক্সট উপাদান

চিহ্নি�� পাঠ্য

পাঠ্য মুছে ফেলা হয়েছে

স্ট্রাইকথ্রু টেক্সট

টেক্সট ঢোকানো

আন্ডারলাইন করা পাঠ্য

ছোট লেখা

সাহসী

তির্যক

বিকল্প উপাদান

প্রান্তিককরণ ক্লাস

রূপান্তর ক্লাস

শব্দ সংক্ষেপ

মৌলিক সংক্ষেপণ

প্রাথমিকবাদ

ঠিকানা

ব্লককোট

ডিফল্ট ব্লককোট

ব্লককোট বিকল্প

একটি উৎসের নামকরণ

বিকল্প প্রদর্শন

তালিকা

ক্রমহীন

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

স্টাইলবিহীন

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

বর্ণনা

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

স্বয়ংক্রিয়ভাবে কাটা

কোড

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

ব্যবহারকারীর ইনপুট

মৌলিক ব্লক

ভেরিয়েবল

নমুনা আউটপুট

টেবিল

মৌলিক উদাহরণ

ডোরাকাটা সারি

ক্রস ব্রাউজার সামঞ্জস্য

ডেমো `:focus`স্টেট

লিঙ্ক কার্যকারিতা সম্পর্কে সতর্কতা`<a>`

`.sr-only`লুকানো লেবেল সহ ঐচ্ছিক আইকন