Bootstrap ৰ আন্তঃগাঁথনিৰ মূল টুকুৰাসমূহৰ ওপৰত lowdown পাওক, উন্নত, দ্ৰুত, শক্তিশালী ৱেব বিকাশৰ বাবে আমাৰ পদ্ধতি অন্তৰ্ভুক্ত কৰি।

HTML5 ডক্টটাইপ

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

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

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

Bootstrap 2 ৰ সৈতে, আমি ফ্ৰেমৱৰ্কৰ মূল দিশসমূহৰ বাবে বৈকল্পিক মোবাইল অনুকূল শৈলীসমূহ যোগ কৰিলোঁ। Bootstrap 3 ৰ সৈতে আমি প্ৰকল্পটো আৰম্ভণিৰে পৰাই মোবাইল অনুকূল হ'বলৈ পুনৰ লিখিছো। ঐচ্ছিক মোবাইল শৈলীত যোগ কৰাৰ পৰিৱৰ্তে, সেইবোৰ মূলত বেক কৰা হয়। আচলতে, Bootstrap হৈছে মোবাইল প্ৰথম ৷ মোবাইল প্ৰথম শৈলীসমূহ পৃথক ফাইলত নহয়, সমগ্ৰ লাইব্ৰেৰীতে পোৱা যাব।

সঠিক ৰেণ্ডাৰ আৰু স্পৰ্শ জুমিং সুনিশ্চিত কৰিবলে, আপোনাৰ দৰ্শনপৰ্ট মেটা টেগ যোগ কৰক <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। .rowসেই পেডিংটো s ত ঋণাত্মক মাৰ্জিনৰ জৰিয়তে প্ৰথম আৰু শেষ স্তম্ভৰ বাবে শাৰীত অফছেট কৰা হয় ।
ঋণাত্মক মাৰ্জিনটোৰ বাবেই তলৰ উদাহৰণবোৰ আউটডেণ্ট কৰা হৈছে। ই যাতে গ্ৰীড স্তম্ভসমূহৰ ভিতৰৰ বিষয়বস্তু নন-গ্ৰিড বিষয়বস্তুৰ সৈতে শাৰীবদ্ধ কৰা হয়।
আপুনি স্পেন কৰিব বিচৰা বাৰটা উপলব্ধ স্তম্ভৰ সংখ্যা ধাৰ্য্য কৰি গ্ৰীড স্তম্ভসমূহ সৃষ্টি কৰা হয়। উদাহৰণস্বৰূপে, তিনিটা সমান স্তম্ভই তিনিটা ব্যৱহাৰ কৰিব .col-xs-4।
যদি এটা শাৰীৰ ভিতৰত ১২ টাতকৈ অধিক স্তম্ভ ৰখা হয়, অতিৰিক্ত স্তম্ভৰ প্ৰতিটো গোটে, এটা একক হিচাপে, এটা নতুন শাৰীত ৰেপ কৰিব।
গ্ৰীড শ্ৰেণীসমূহ ব্ৰেকপইন্ট আকাৰসমূহতকৈ অধিক বা সমান পৰ্দাৰ প্ৰস্থৰ সৈতে ডিভাইচসমূহলে প্ৰযোজ্য হয়, আৰু সৰু ডিভাইচসমূহত লক্ষ্য কৰি গ্ৰীড শ্ৰেণীসমূহ অভাৰৰাইড কৰে। গতিকে, যেনে, .col-md-*এটা উপাদানত যিকোনো শ্ৰেণী প্ৰয়োগ কৰিলে কেৱল মধ্যমীয়া ডিভাইচসমূহত ইয়াৰ ষ্টাইলিঙত প্ৰভাৱ পেলোৱাই নহয় কিন্তু এটা .col-lg-*শ্ৰেণী উপস্থিত নাথাকিলে বৃহৎ ডিভাইচসমূহতো প্ৰভাৱ পেলাব।

আপোনাৰ ক'ডত এই নীতিসমূহ প্ৰয়োগ কৰাৰ বাবে উদাহৰণসমূহ চাওক।

মিডিয়াৰ প্ৰশ্ন

আমি আমাৰ গ্ৰীড চিস্টেমত মূল ব্ৰেকপইন্টসমূহ সৃষ্টি কৰিবলে আমাৰ Less ফাইলসমূহত নিম্নলিখিত মিডিয়া প্ৰশ্নসমূহ ব্যৱহাৰ কৰো।

/* 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-widthCSSক এটা সংকীৰ্ণ ডিভাইচসমূহৰ এটা গোটলৈ সীমিত কৰিবলৈ a অন্তৰ্ভুক্ত কৰিবলৈ সম্প্ৰসাৰিত কৰোঁ।

@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)
গ্ৰীড আচৰণ	সকলো সময়তে অনুভূমিক	আৰম্ভ কৰিবলৈ সংকুচিত কৰা হৈছে, ব্ৰেকপইণ্টৰ ওপৰত অনুভূমিক
পাত্ৰৰ প্ৰস্থ	কোনো নাই (অটো)	৭৫০পিক্সেল	৯৭০px	১১৭০পিক্সেল
শ্ৰেণী উপসৰ্গ	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# স্তম্ভৰ	১২
স্তম্ভৰ প্ৰস্থ	অটো	~৬২px	~৮১px	~৯৭px
নালাৰ প্ৰস্থ	30px (এটা স্তম্ভৰ প্ৰতিটো ফালে ১৫px)
নেষ্টেবল	হয়
অফছেটসমূহ	হয়
স্তম্ভ অৰ্ডাৰ দিয়া	হয়

উদাহৰণ: ষ্টেক কৰা-ৰ পৰা অনুভূমিকলৈ

গ্ৰীড শ্ৰেণীসমূহৰ এটা গোট ব্যৱহাৰ কৰি .col-md-*, আপুনি এটা মূল গ্ৰীড ব্যৱস্থাপ্ৰণালী সৃষ্টি কৰিব পাৰে যি ডেস্কটপ (মধ্যমীয়া) ডিভাইচসমূহত অনুভূমিক হোৱাৰ আগতে মোবাইল ডিভাইচসমূহ আৰু টেবলেট ডিভাইচসমূহত (অতিৰিক্ত সৰুৰ পৰা সৰু পৰিসীমা) ষ্টেক কৰি আৰম্ভ কৰে। যিকোনো ত গ্ৰীড স্তম্ভ ৰাখক .row।

.কল-মড-১

.কল-মড-৮

.কল-মড-৪

.কল-মড-৬

<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-*আপোনাৰ স্তম্ভসমূহত যোগ কৰি অতিৰিক্ত সৰু আৰু মধ্যমীয়া ডিভাইচ গ্ৰীড শ্ৰেণীসমূহ ব্যৱহাৰ কৰক । এই সকলোবোৰ কেনেকৈ কাম কৰে তাৰ উন্নত ধাৰণাৰ বাবে তলৰ উদাহৰণটো চাওক।

.কল-এক্সএছ-১২ .কল-এমডি-৮

.কল-এক্সএছ-৬ .কল-এমডি-৪

.কল-এক্সএছ-৬

<!-- 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-*টেবলেট শ্ৰেণীসমূহৰ সৈতে আৰু অধিক গতিশীল আৰু শক্তিশালী পৰিকল্পনা সৃষ্টি কৰি পূৰ্বৰ উদাহৰণৰ ওপৰত নিৰ্মাণ কৰক ।

.কল-এক্সএছ-১২ .কল-এছএম-৬ .কল-এমডি-৮

.কল-এক্সএছ-৬ .কল-এমডি-৪

.কল-এক্সএছ-৬ .কল-এছএম-৪

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

উদাহৰণ: স্তম্ভ ৰেপিং কৰা

যদি এটা শাৰীৰ ভিতৰত ১২ টাতকৈ অধিক স্তম্ভ ৰখা হয়, অতিৰিক্ত স্তম্ভৰ প্ৰতিটো গোটে, এটা একক হিচাপে, এটা নতুন শাৰীত ৰেপ কৰিব।

.কল-এক্সএছ-৯

.col-xs-4
যিহেতু 9 + 4 = 13 > 12, এই 4-স্তম্ভ-বহল div এটা সংলগ্ন একক হিচাপে এটা নতুন ৰেখাত মেৰিয়াই দিয়া হয়।

.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আৰু আমাৰ প্ৰতিক্ৰিয়াশীল সঁজুলি শ্ৰেণীসমূহৰ এটা সংমিশ্ৰণ ব্যৱহাৰ কৰক ।

আপোনাৰ ভিউপৰ্টৰ
আকাৰ সলনি কৰক বা এটা উদাহৰণৰ বাবে আপোনাৰ ফোনত পৰীক্ষা কৰক।

.কল-এক্সএছ-৬ .কল-এছএম-৩

<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

.কল-মড-৪

.কল-এমডি-৪ .কল-এমডি-অফছেট-৪

.কল-এমডি-৩ .কল-এমডি-অফছেট-৩

.কল-এমডি-৬ .কল-এমডি-অফছেট-৩

<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আৰু .col-sm-*এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত স্তম্ভসমূহৰ গোট যোগ কৰক .col-sm-*। নেষ্টেড শাৰীসমূহে স্তম্ভসমূহৰ এটা গোট অন্তৰ্ভুক্ত কৰিব লাগে যি 12 বা তাতকৈ কম যোগ কৰে (আপুনি সকলো 12 উপলব্ধ স্তম্ভ ব্যৱহাৰ কৰাৰ প্ৰয়োজন নাই)।

স্তৰ ১: .col-sm-9

স্তৰ ২: .col-xs-8 .col-sm-6

স্তৰ ২: .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-*পৰিবৰ্তক শ্ৰেণীসমূহৰ সৈতে সলনি কৰক।

.কল-মড-৯ .কল-মড-পুছ-৩

.কল-মড-৩ .কল-মড-পুল-৯

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

কম মিক্সিন আৰু ভেৰিয়েবল

দ্ৰুত পৰিকল্পনাসমূহৰ বাবে পূৰ্বনিৰ্মিত গ্ৰীড শ্ৰেণীসমূহৰ উপৰিও , Bootstrap এ আপোনাৰ নিজৰ সৰল, অৰ্থগত পৰিকল্পনাসমূহ দ্ৰুতভাৱে সৃষ্টি কৰিবলে কম চলকসমূহ আৰু মিক্সিনসমূহ অন্তৰ্ভুক্ত কৰে।

চলকসমূহ

চলকসমূহে স্তম্ভসমূহৰ সংখ্যা, নালাৰ প্ৰস্থ, আৰু মাধ্যম প্ৰশ্ন বিন্দু নিৰ্ধাৰণ কৰে য'ত ভাসমান স্তম্ভসমূহ আৰম্ভ কৰিব লাগে। আমি ওপৰত নথিভুক্ত কৰা পূৰ্বনিৰ্ধাৰিত গ্ৰীড শ্ৰেণীসমূহ সৃষ্টি কৰিবলৈ, লগতে তলত তালিকাভুক্ত স্বনিৰ্বাচিত মিক্সিনসমূহৰ বাবে এইবোৰ ব্যৱহাৰ কৰো।

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

শিৰোনামসমূহ

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

h1. বুটষ্ট্ৰেপ হেডিং	অৰ্ধবল্ড ৩৬px
h2. বুটষ্ট্ৰেপ হেডিং	ছেমিবল্ড ৩০px
h3. বুটষ্ট্ৰেপ হেডিং	ছেমিবল্ড ২৪px
h4. বুটষ্ট্ৰেপ হেডিং	অৰ্ধবল্ড ১৮পিক্সেল
h৫. বুটষ্ট্ৰেপ হেডিং	ছেমিবল্ড ১৪পিক্সেল
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. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

h৫. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

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হৈছে 14px , এটা 1.428line-height ৰ সৈতে । এইটো আৰু সকলো অনুচ্ছেদৰ ক্ষেত্ৰত প্ৰযোজ্য। ইয়াৰ উপৰিও, (অনুচ্ছেদসমূহে) তেওঁলোকৰ গণনা কৰা ৰেখা-উচ্চতাৰ আধা (অবিকল্পিতভাৱে 10px) এটা তলৰ মাৰ্জিন লাভ কৰে।<body><p>

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

Cum sociis natoque পেনাটিবাছ এট মেগনিছ ডি পাৰ্চুৰিয়েন্ট মন্টেছ, নাচেটাৰ ৰিডিকুলাছ মুছ। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা। ডুইছ মলিছ, এষ্ট নন কমোডো লুক্টাছ, নিচি এৰাট পৰ্টিট'ৰ লিগুলা, এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট। ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।

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

<p>...</p>

লিড বডি কপি

যোগ কৰি এটা অনুচ্ছেদ আঁতৰাই ৰাখক .lead।

ভিভামাছ চেজিটিছ লেকাছ ভেল অগু লাওৰিট ৰুট্ৰাম ফ'চিবাছ ডলৰ অক্টৰ। ডুইছ মলিছ, এষ্ট নন কমোডো লুক্টাছ।

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

Less ৰ সৈতে নিৰ্মিত

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

ইনলাইন লিখনী উপাদানসমূহ

চিহ্নিত কৰা লিখনী

অন্য প্ৰসংগত ইয়াৰ প্ৰাসংগিকতাৰ বাবে লিখনীৰ এটা ৰান হাইলাইট কৰাৰ বাবে, <mark>টেগ ব্যৱহাৰ কৰক।

আপুনি মাৰ্ক টেগ ব্যৱহাৰ কৰিব পাৰে to...গুৰুত্বপূৰ্ণ অংশপাঠ্য.

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>লিখনীক অভিভাৱকৰ আকাৰৰ ৮৫% ত সংহতি কৰিবলে টেগ ব্যৱহাৰ কৰক। 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অলপ সৰু ফন্ট-আকাৰৰ বাবে এটা সংক্ষিপ্ত ৰূপত যোগ কৰক ।

ৰুটি টুকুৰা টুকুৰ কৰাৰ পিছত HTML হৈছে আটাইতকৈ ভাল বস্তু।

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

ঠিকনাসমূহ

ওচৰৰ পূৰ্বপুৰুষ বা সমগ্ৰ কামৰ বাবে যোগাযোগৰ তথ্য উপস্থাপন কৰা। সকলো শাৰী ৰ সৈতে শেষ কৰি ফৰ্মেটিং সংৰক্ষণ কৰক <br>।

টুইটাৰ, ইনকৰ্পৰেটেড
১৩৫৫ মাৰ্কেট ষ্ট্ৰীট, ছুইট ৯০০
ছান ফ্ৰান্সিস্কো, কে এ ৯৪১০৩
পি: (১২৩) ৪৫৬-৭৮৯০

সম্পূৰ্ণ নাম
[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>.

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

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

ব্লককোট বিকল্পসমূহ

এটা প্ৰামাণিকত সৰল তাৰতম্যৰ বাবে শৈলী আৰু বিষয়বস্তু পৰিবৰ্তন <blockquote>।

এটা উৎসৰ নামকৰণ কৰা

<footer>উৎস চিনাক্ত কৰাৰ বাবে এটা যোগ কৰক । উৎস কাৰ্য্যৰ নাম ত ৰেপ কৰক <cite>।

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

Source Title ত কোনোবা বিখ্যাত

<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সোঁ-প্ৰান্তিককৃত বিষয়বস্তুৰ সৈতে এটা ব্লককোটৰ বাবে যোগ কৰক ।

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

Source Title ত কোনোবা বিখ্যাত

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

তালিকাসমূহ

অনাৰ্ডাৰেড

যিবোৰ বস্তুৰ ক্ৰমটোৱে স্পষ্টভাৱে গুৰুত্বপূৰ্ণ নহয় তাৰ তালিকা।

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

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

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

যিবোৰ বস্তুত ক্ৰমটোৱে স্পষ্টভাৱে গুৰুত্ব দিয়ে তাৰ তালিকা ।

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

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

আনষ্টাইল কৰা

তালিকা বস্তুসমূহত অবিকল্পিত list-styleআৰু বাওঁ প্ৰান্ত আঁতৰাওক (কেৱল তাৎক্ষণিক শিশু)। এইটো কেৱল তাৎক্ষণিক শিশু তালিকা বস্তুসমূহৰ বাবে প্ৰযোজ্য , অৰ্থাৎ আপুনি যিকোনো নেষ্টেড তালিকাৰ বাবেও শ্ৰেণী যোগ কৰিব লাগিব।

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

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

শাৰীত

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

লৰেম ইপছুম
ফেচেলাছ ইয়াকুলিছ
নুল্লা volutpat

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

বিৱৰণ

শব্দৰ তালিকা আৰু ইয়াৰ লগত জড়িত বিৱৰণ।

বিৱৰণ তালিকাসমূহ: শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
ইউইস্মোড: ভেষ্টিবুলাম আইডি লিগুলা পৰ্টা ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট।; ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ।
মালেসুয়াডা পোর্টা: ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড।

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

অনুভূমিক বিৱৰণ

<dl>কাষে কাষে শাৰী পাতি চৰ্ত আৰু বিৱৰণ বনাওক । অবিকল্পিত s ৰ দৰে ষ্টেক কৰি আৰম্ভ <dl>কৰে, কিন্তু যেতিয়া navbar প্ৰসাৰিত হয়, গতিকে এইবোৰ কৰক।

বিৱৰণ তালিকাসমূহ: শব্দ সংজ্ঞায়িত কৰাৰ বাবে এটা বিৱৰণ তালিকা নিখুঁত।
ইউইস্মোড: ভেষ্টিবুলাম আইডি লিগুলা পৰ্টা ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া অডিঅ' চেম নেক এলিট।; ডনেক আইডি এলিট নন মি পৰ্টা গ্ৰেভিডা এট এগেট মেটাছ।
মালেসুয়াডা পোর্টা: ইটিয়াম পৰ্টা ছেম মালেছুয়াডা মেগনা মলিছ ইউইস্মোড।
ফেলিছ ইউইজমড চেম্পাৰ এগেট লেচিনিয়া: ফুচ ডাপিবাছ, টেলাছ এ চি কাৰ্ছাছ কমোডো, টৰ্টৰ মৌৰিছ কণ্ডিমেণ্টাম নিভ, উট ফাৰ্মেণ্টাম মাছা জষ্টো বহা আমেট ৰিছুছ।

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

<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>। ইয়াক অতি অতিৰিক্ত যেন লাগিব পাৰে, কিন্তু কেলেণ্ডাৰ আৰু তাৰিখ পিকাৰৰ দৰে অন্য প্লাগইনসমূহৰ বাবে টেবুলসমূহৰ ব্যাপক ব্যৱহাৰৰ প্ৰতি লক্ষ্য ৰাখি, আমি আমাৰ স্বনিৰ্বাচিত টেবুল শৈলীসমূহ পৃথক কৰিবলৈ বাছনি কৰিছো।

ঐচ্ছিক টেবুল কেপচন।
#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী	চৰাইটো	@টুইটাৰত

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

ডাঠ শাৰী

.table-stripedৰ ভিতৰত যিকোনো টেবুল শাৰীত জেব্ৰা-ষ্ট্ৰাইপিং যোগ কৰিবলৈ ব্যৱহাৰ কৰক <tbody>।

ক্ৰছ-ব্ৰাউজাৰ সামঞ্জস্যতা

ষ্ট্ৰাইপড টেবুলসমূহক :nth-childCSS নিৰ্বাচকৰ যোগেদি শৈলী কৰা হয়, যি Internet Explorer 8 ত উপলব্ধ নহয়।

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী	চৰাইটো	@টুইটাৰত

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

সীমাৰেখাযুক্ত টেবুল

.table-borderedটেবুল আৰু ঘৰৰ সকলো ফালে থকা সীমাৰ বাবে যোগ কৰক ।

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী	চৰাইটো	@টুইটাৰত

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

শাৰীসমূহ হোভাৰ কৰক

.table-hoverএটা ৰ ভিতৰত টেবুল শাৰীসমূহত এটা হ'ভাৰ অৱস্থা সামৰ্থবান কৰিবলে যোগ কৰক <tbody>।

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী	চৰাইটো	@টুইটাৰত

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

ঘনীভূত টেবুল

.table-condensedচেল পেডিং আধা কাটি টেবুলবোৰ অধিক কম্পেক্ট কৰিবলৈ যোগ কৰক ।

#	প্ৰথম নাম	উপাধি	ব্যৱহাৰকাৰীৰ নাম
১	মাৰ্ক	অট্টো	@mdo
২	যাকোব	থৰ্ণ্টন	@শকত
৩	লেৰী দ্য বাৰ্ড		@টুইটাৰত

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

প্ৰসংগভিত্তিক শ্ৰেণীসমূহ

টেবুল শাৰী বা ব্যক্তিগত ঘৰসমূহ ৰং কৰিবলৈ প্ৰসংগভিত্তিক শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।

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

#	স্তম্ভৰ শিৰোনাম	স্তম্ভৰ শিৰোনাম	স্তম্ভৰ শিৰোনাম
১	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
২	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
৩	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
৪	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
৫	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
৬	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
৭	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
৮	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু
৯	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু	স্তম্ভৰ বিষয়বস্তু

<!-- 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আছে যিয়ে প্ৰতিক্ৰিয়াশীল টেবুলৰ সৈতে হস্তক্ষেপ কৰে। ইয়াক এটা Firefox-নিৰ্দিষ্ট হেক অবিহনে অভাৰৰাইড কৰিব নোৱাৰি যি আমি Bootstrap ত প্ৰদান নকৰো :

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

অধিক তথ্যৰ বাবে, এই ষ্টেক অভাৰফ্ল' উত্তৰ পঢ়ক ।

#	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম
১	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ
২	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ
৩	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ

#	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম	টেবুলৰ শিৰোনাম
১	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ
২	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ
৩	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ	টেবুল কোষ

<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-groupsক গ্ৰীড শাৰী হিচাপে আচৰণ কৰিবলৈ সলনি হয়, গতিকে ৰ প্ৰয়োজন নাই .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>, নিবেশ গোট অংশ পৰীক্ষা কৰক ।

টেক্সট এৰিয়া

ফৰ্ম নিয়ন্ত্ৰণ যিয়ে লিখনীৰ একাধিক শাৰী সমৰ্থন কৰে। 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>

নিৰ্বাচন কৰে

border-radiusমন কৰিব যে বহুতো স্থানীয় নিৰ্বাচিত মেনুত—যেনে Safari আৰু Chrome ত—গোল চুক আছে যি বৈশিষ্ট্যসমূহৰ যোগেদি পৰিবৰ্তন কৰিব নোৱাৰি ।

<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ইয়াৰ ঠাইত a প্ৰয়োগ কৰো :focus।

ডেমো `:focus`ৰাজ্য

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

অক্ষম অৱস্থা

disabledব্যৱহাৰকাৰীৰ পাৰস্পৰিক ক্ৰিয়াসমূহ প্ৰতিৰোধ কৰিবলে এটা ইনপুটত বুলিয়ান বৈশিষ্ট্য যোগ কৰক । নিষ্ক্ৰিয় ইনপুটসমূহ পাতল দেখা যায় আৰু এটা not-allowedকাৰ্চাৰ যোগ কৰক।

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

��িষ্ক্ৰিয় কৰা ফিল্ডছেটসমূহ

একেলগে সকলো নিয়ন্ত্ৰণ নিষ্ক্ৰিয় disabledকৰিবলৈ a ত বৈশিষ্ট্য যোগ কৰক ।<fieldset><fieldset>

লিংক কাৰ্য্যক্ষমতাৰ বিষয়ে সতৰ্কবাণী`<a>`

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

ক্ৰছ-ব্ৰাউজাৰ সামঞ্জস্যতা

disabledBootstrap এ এই শৈলীসমূহ সকলো ব্ৰাউজাৰত প্ৰয়োগ কৰিব যদিও, Internet Explorer 11 আৰু তলৰ এ এটা ত বৈশিষ্ট্য সম্পূৰ্ণৰূপে সমৰ্থন নকৰে <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বৈশিষ্ট্য), Bootstrap এ স্বয়ংক্ৰিয়ভাৱে আইকনৰ অৱস্থান সমন্বয় কৰিব এবাৰ ইয়াক যোগ কৰাৰ পিছত ।

<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>উপাদানসমূহ আমাৰ nav আৰু navbar উপাদানসমূহৰ ভিতৰত সমৰ্থিত।

বুটাম হিচাপে কাম কৰা লিংকসমূহ

যদি <a>উপাদানসমূহক বুটাম হিচাপে কাম কৰিবলে ব্যৱহাৰ কৰা হয় – পৃষ্ঠাৰ ভিতৰৰ কাৰ্য্যকৰীতা ট্ৰিগাৰ কৰা, বৰ্তমান পৃষ্ঠাৰ ভিতৰত অন্য দস্তাবেজ বা অংশলৈ নেভিগেট কৰাৰ পৰিবৰ্তে – সিহতক এটা উপযুক্ত role="button".

ক্ৰছ-ব্ৰাউজাৰ ৰেণ্ডাৰ

এটা উত্তম অনুশীলন হিচাপে, আমি ক্ৰছ-ব্ৰাউজাৰ ৰেণ্ডাৰ মিল থকাটো নিশ্চিত কৰিবলৈ যেতিয়াই সম্ভৱ উপাদানটো ব্যৱহাৰ কৰিবলৈ অতিশয় পৰামৰ্শ দিওঁ ।<button>

অন্যান্য বিষয়ৰ লগতে, Firefox <30 ত এটা বাগ আছেline-height যিয়ে আমাক of -based বুটামসমূহ সংহতি কৰাত বাধা দিয়ে <input>, যাৰ ফলত সিহঁত Firefox ৰ অন্য বুটামসমূহৰ উচ্চতাৰ সৈতে সঠিকভাৱে মিল নাথাকে।

বিকল্পসমূহ

এটা শৈলীযুক্ত বুটাম দ্ৰুতভাৱে সৃষ্টি কৰিবলে উপলব্ধ বুটাম শ্ৰেণীসমূহৰ যিকোনো এটা ব্যৱহাৰ কৰক।

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

ক্ৰছ-ব্ৰাউজাৰ সামঞ্জস্যতা

যদি আপুনি a ত disabledবৈশিষ্ট্যটো যোগ কৰে <button>, Internet Explorer 9 আৰু তলত এটা জঘন্য লিখনী-ছাঁৰ সৈতে লিখনী ধূসৰ ৰেণ্ডাৰ কৰিব যিটো আমি ঠিক কৰিব নোৱাৰো।

লংঘন উপাদান

বুটামত .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শ্ৰেণীৰ সংযোজনৰ জৰিয়তে সঁহাৰি-বন্ধুত্বপূৰ্ণ কৰি তুলিব পাৰি। এইটো প্ৰযোজ্য max-width: 100%;, height: auto;আৰু display: block;ছবিৰ বাবে যাতে ই মূল উপাদানলৈ সুন্দৰকৈ স্কেল কৰে।

.img-responsiveশ্ৰেণী ব্যৱহাৰ কৰা ছবিসমূহক কেন্দ্ৰ কৰিবলৈ , .center-blockৰ পৰিবৰ্তে ব্যৱহাৰ কৰক .text-center। ব্যৱহাৰৰ বিষয়ে অধিক বিৱৰণৰ বাবে সহায়ক শ্ৰেণীসমূহ অংশ চাওক ।.center-block

SVG ছবি আৰু IE 8-10

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

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

ছবিৰ আকৃতি

<img>যিকোনো প্ৰকল্পত ছবিসমূহ সহজে ষ্টাইল কৰিবলৈ এটা উপাদানত শ্ৰেণীসমূহ যোগ কৰক ।

ক্ৰছ-ব্ৰাউজাৰ সামঞ্জস্যতা

মনত ৰাখিব যে Internet Explorer 8 ত ঘূৰণীয়া কোণৰ বাবে সমৰ্থনৰ অভাৱ।

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

প্ৰসংগভিত্তিক ৰং

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

ফুচে ডাপিবাছ, টেলাছ এ চি কাৰ্ছাছ কমোডো, টৰ্টৰ মৌৰিছ নিভ।

নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

ডুইছ মলিছ, এষ্ট নন কমোডো লুক্টাছ, নিচি এৰাট পৰ্টিট'ৰ লিগুলা।

'মেচেনাছ' চেড ডাইম এগেট ৰিছাছ ভেৰিয়াছ ব্লেণ্ডিট চিট আমেট নন মেগনা।

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

ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।

<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>শ্ৰেণীৰ সৈতে a ত ৰেপ কৰা।

সহায়ক প্ৰযুক্তিসমূহলৈ অৰ্থ প্ৰদান কৰা

অৰ্থ যোগ কৰিবলৈ ৰং ব্যৱহাৰ কৰিলে কেৱল এটা দৃশ্যমান ইংগিতহে পোৱা যায়, যিটো সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলক প্ৰেৰণ কৰা নহ’ব – যেনে স্ক্ৰীণ ৰিডাৰ। নিশ্চিত কৰক যে ৰঙৰ দ্বাৰা চিহ্নিত তথ্য হয় বিষয়বস্তুৰ পৰা নিজেই স্পষ্ট (প্ৰসংগভিত্তিক ৰংসমূহ কেৱল লিখনী/মাৰ্কআপত ইতিমধ্যে উপস্থিত থকা অৰ্থ শক্তিশালী কৰিবলৈ ব্যৱহাৰ কৰা হয়), বা বিকল্�� উপায়ৰ দ্বাৰা অন্তৰ্ভুক্ত কৰা হয়, যেনে .sr-onlyশ্ৰেণীৰ সৈতে লুকুৱাই ৰখা অতিৰিক্ত লিখনী .

প্ৰসংগভিত্তিক পটভূমি

প্ৰসংগভিত্তিক লিখনী ৰঙৰ শ্ৰেণীসমূহৰ দৰেই, এটা উপাদানৰ পটভূমি যিকোনো প্ৰসংগভিত্তিক শ্ৰেণীত সহজে ছেট কৰক। এংকৰ উপাদানসমূহ হ'ভাৰত আন্ধাৰ হ'ব, ঠিক লিখনী শ্ৰেণীসমূহৰ দৰেই।

নুল্লাম আইডি ডোলৰ আইডি নিভ উল্ট্ৰিচিয়েছ ভেহিকুলা উট আইডি এলিট।

ডুইছ মলিছ, এষ্ট নন কমোডো লুক্টাছ, নিচি এৰাট পৰ্টিট'ৰ লিগুলা।

'মেচেনাছ' চেড ডাইম এগেট ৰিছাছ ভেৰিয়াছ ব্লেণ্ডিট চিট আমেট নন মেগনা।

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

ডনেক উলামকৰ্পাৰ নুলা নন মেটাছ অক্টৰ ফ্ৰিংগিলা।

<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>শ্ৰেণীৰ সৈতে a ত ৰেপ কৰা।

সহায়ক প্ৰযুক্তিসমূহলৈ অৰ্থ প্ৰদান কৰা

প্ৰসংগভিত্তিক ৰঙৰ দৰেই , নিশ্চিত কৰক যে ৰঙৰ জৰিয়তে প্ৰকাশ কৰা যিকোনো অৰ্থও এনে এটা বিন্যাসত প্ৰকাশ কৰা হয় যিটো কেৱল উপস্থাপনমূলক নহয়।

আইকন বন্ধ কৰক

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

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

কেৰেট

ড্ৰপডাউন কাৰ্য্যকৰীতা আৰু দিশ দেখুৱাবলৈ কেৰেট ব্যৱহাৰ কৰক। মন কৰিব যে অবিকল্পিত কেৰেট ড্ৰপআপ মেনুসমূহত স্বয়ংক্ৰিয়ভাৱে ওলোটা হ'ব ।

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

দ্ৰুত ভাসমান

এটা ক্লাছৰ সৈতে এটা উপাদান বাওঁফালে বা সোঁফালে ওপঙি দিয়ক। !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। মিক্সিন আৰু ক্লাছ হিচাপে উপলব্ধ।

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

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

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

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

মূল উপাদানতfloat যোগ কৰি s সহজে পৰিষ্কাৰ কৰক । Nicolas Gallagher দ্বাৰা জনপ্ৰিয় কৰা মাইক্ৰ' ক্লিয়াৰফিক্স ব্যৱহাৰ কৰে। মিক্সিন হিচাপেও ব্যৱহাৰ কৰিব পাৰি।.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 অনুসৰণ কৰাৰ বাবে প্ৰয়োজনীয় । মিক্সিন হিচাপেও ব্যৱহাৰ কৰিব পাৰি।

<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-small ত দেখা যায়

সৰু ✔ সৰুত দেখা যায়

মাধ্যম ✔ মাধ্যমত দৃশ্যমান

ডাঙৰ ✔ ডাঙৰ ওপৰত দৃশ্যমান

অতিৰিক্ত সৰু আৰু সৰু ✔ x-সৰু আৰু সৰুত দেখা যায়

মধ্যমীয়া আৰু বৃহৎ ✔ মধ্যমীয়া আৰু বৃহৎ ৰ ওপৰত দৃশ্যমান

অতিৰিক্ত সৰু আৰু মধ্যমীয়া ✔ x-সৰু আৰু মধ্যমীয়াত দেখা যায়

সৰু আৰু ডাঙৰ ✔ সৰু-ডাঙৰ ওপৰত দেখা যায়

অতিৰিক্ত সৰু আৰু ডাঙৰ ✔ x-ত দেখা যায়-সৰু আৰু ডাঙৰ

সৰু আৰু মধ্যমীয়া ✔ সৰু আৰু মজলীয়া ৰঙৰ ওপৰত দেখা যায়

লুকানো উপর...

ইয়াত, সেউজীয়া চেকমাৰ্কসমূহে আপোনাৰ বৰ্তমান দৰ্শনপৰ্টত উপাদানটো লুকুৱাই ৰখাটোও সূচায়।

অতিৰিক্ত সৰু ✔ x-small ত লুকাই আছে

সৰু ✔ সৰুৰ ওপৰত লুকুৱাই ৰখা

মাধ্যম ✔ মাধ্যমত লুকুৱাই ৰখা

ডাঙৰ ✔ ডাঙৰ ওপৰত লুকুৱাই ৰখা

অতিৰিক্ত সৰু আৰু সৰু ✔ x-সৰু আৰু সৰুত লুকাই আছে

মধ্যমীয়া আৰু বৃহৎ ✔ মধ্যমীয়া আৰু ডাঙৰ ওপৰত লুকুৱাই ৰখা

অতিৰিক্ত সৰু আৰু মধ্যমীয়া ✔ x-সৰু আৰু মধ্যমীয়াত লুকাই আছে

সৰু আৰু ডাঙৰ ✔ সৰু-ডাঙৰ ওপৰত লুকুৱাই ৰখা

অতিৰিক্ত সৰু আৰু ডাঙৰ ✔ x-সৰু আৰু ডাঙৰ ত লুকাই আছে

সৰু আৰু মধ্যমীয়া ✔ সৰু আৰু মজলীয়া ৰঙৰ ওপৰত লুকুৱাই ৰখা

বুটষ্ট্ৰেপৰ CSS কমত নিৰ্মিত, এটা প্ৰিপ্ৰচেছৰৰ সৈতে অতিৰিক্ত কাৰ্য্যকৰীতা যেনে চলকসমূহ, মিক্সিনসমূহ, আৰু CSS কমপাইল কৰাৰ বাবে ফলনসমূহ। আমাৰ কম্পাইল কৰা CSS ফাইলসমূহৰ পৰিৱৰ্তে উৎস Less ফাইলসমূহ ব্যৱহাৰ কৰিব বিচৰাসকলে আমি সমগ্ৰ ফ্ৰেমৱৰ্কত ব্যৱহাৰ কৰা অসংখ্য চলক আৰু মিক্সিনসমূহ ব্যৱহাৰ কৰিব পাৰে।

গ্ৰীড চলকসমূহ আৰু মিক্সিনসমূহ গ্ৰীড ব্যৱস্থাপ্ৰণালী অংশৰ ভিতৰত সামৰি লোৱা হৈছে ।

বুটষ্ট্ৰেপ কম্পাইলিং কৰা

বুটষ্ট্ৰেপক অন্ততঃ দুটা ধৰণে ব্যৱহাৰ কৰিব পাৰি: কমপাইল কৰা CSS ৰ সৈতে বা উৎস কম নথিপত্ৰসমূহৰ সৈতে । কম নথিপত্ৰসমূহ কমপাইল কৰিবলে, আৰম্ভ কৰা অংশ চাওক প্ৰয়োজনীয় আদেশসমূহ চলাবলৈ আপোনাৰ বিকাশ পৰিৱেশ কেনেকৈ প্ৰতিষ্ঠা কৰিব লাগে তাৰ বাবে

তৃতীয় পক্ষৰ সংকলন সঁজুলিসমূহে Bootstrap ৰ সৈতে কাম কৰিব পাৰে, কিন্তু সিহত আমাৰ মূল দলৰ দ্বাৰা সমৰ্থিত নহয়।

চলকসমূহ

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

ৰং

সহজেই দুটা ৰঙৰ আঁচনিৰ ব্যৱহাৰ কৰক: ধূসৰ আৰু অৰ্থবোধক। ধূসৰ ৰঙে সাধাৰণতে ব্যৱহৃত ক'লাৰ শ্বেডসমূহলৈ দ্ৰুত অভিগম প্ৰদান কৰে আনহাতে অৰ্থগতভাৱে অৰ্থপূৰ্ণ প্ৰসংগভিত্তিক মানসমূহলৈ নিযুক্ত বিভিন্ন ৰংসমূহ অন্তৰ্ভুক্ত কৰা হয়।

@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";

উপাদানসমূহ

গোটেই Bootstrap ৰ উপাদানসমূহে সাধাৰণ মানসমূহ সংহতি কৰিবলে কিছুমান অবিকল্পিত চলকসমূহ ব্যৱহাৰ কৰে। ইয়াত আটাইতকৈ বেছি ব্যৱহৃত সমূহ উল্লেখ কৰা হৈছে।

@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 ৰ পৰা অবচিত কৰা হৈছে, Autoprefixer ৰ প্ৰৱৰ্তনৰ সৈতে। পিছলৈ-সুসংগততা সংৰক্ষণ কৰিবলে, Bootstrap এ Bootstrap v4 লৈকে mixin আভ্যন্তৰীণভাৱে ব্যৱহাৰ কৰি থাকিব ।

.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বৈশিষ্ট্যটো নিজাববীয়াকৈ ব্যৱহাৰ কৰক। যদি আপুনি পুৰণি Android (প্ৰাক-v4) আৰু iOS ডিভাইচসমূহৰ বাবে সমৰ্থনৰ প্ৰয়োজন (প্ৰাক-iOS 5), প্ৰয়োজনীয়সমূহ ল'বলৈ অবচিত মিক্সিন ব্যৱহাৰ কৰক-webkit প্ৰয়োজনীয় উপসৰ্গটো

মিক্সিন v3.1.0 ৰ পৰা অবচিত , যিহেতু Bootstrap এ আনুষ্ঠানিকভাৱে পুৰণি প্লেটফৰ্মসমূহ সমৰ্থন নকৰে যি প্ৰামাণিক বৈশিষ্ট্য সমৰ্থন নকৰে । পিছলৈ-সুসংগততা সংৰক্ষণ কৰিবলে, Bootstrap এ Bootstrap v4 লৈকে mixin আভ্যন্তৰীণভাৱে ব্যৱহাৰ কৰি থাকিব ।

আপোনাৰ বাকচ ছাঁত ৰং ব্যৱহাৰ কৰাটো নিশ্চিত কৰক 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 ৰ পৰা অবচিত কৰা হৈছে, Autoprefixer ৰ প্ৰৱৰ্তনৰ সৈতে। পিছলৈ-সুসংগততা সংৰক্ষণ কৰিবলে, Bootstrap এ Bootstrap 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 প্ৰতিমুৰ্তি মাত্ৰাসমূহ ধাৰ্য্য কৰক, আৰু Bootstrap এ এটা @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);
}

Bootstrap Less ত নিৰ্মিত হ'লেও, ইয়াৰ এটা অফিচিয়েল Sass পৰ্ট আছে । আমি ইয়াক এটা পৃথক GitHub ভঁৰালত ৰক্ষণাবেক্ষণ কৰোঁ আৰু এটা ৰূপান্তৰ স্ক্ৰিপ্টৰ সৈতে আপডেইটসমূহ নিয়ন্ত্ৰণ কৰোঁ।

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

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

পথ	বিৱৰণ
`lib/`	ৰুবি ৰত্ন ক'ড (Sass কনফিগাৰেচন, ৰেল আৰু কম্পাছ সংহতিসমূহ)
`tasks/`	ৰূপান্তৰক লিপিসমূহ (আপষ্ট্ৰিম কমক Sass লৈ ঘূৰাই দিয়া)
`test/`	সংকলন পৰীক্ষা
`templates/`	কম্পাছ পেকেজ মেনিফেষ্ট
`vendor/assets/`	Sass, JavaScript, আৰু ফন্ট ফাইলসমূহ
`Rakefile`	আভ্যন্তৰীণ কাম, যেনে ৰেক আৰু কনভাৰ্ট

এই নথিপত্ৰসমূহ কাৰ্য্যত চাবলৈ Sass পৰ্টেৰ GitHub ভঁৰাল চাওক ।

সংস্থাপন

Sass ৰ বাবে Bootstrap কেনেকৈ সংস্থাপন আৰু ব্যৱহাৰ কৰিব লাগে তাৰ বিষয়ে তথ্যৰ বাবে, GitHub ভঁৰাল readme চাওক । ই আটাইতকৈ আপডেইট উৎস আৰু ইয়াত ৰেল, কম্পাছ, আৰু প্ৰামাণিক Sass প্ৰকল্পসমূহৰ সৈতে ব্যৱহাৰৰ বাবে তথ্য অন্তৰ্ভুক্ত কৰা হৈছে।

Sass ৰ বাবে বুটষ্ট্ৰেপ

চি এছ এছ

অভাৰভিউ

HTML5 ডক্টটাইপ

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

টাইপোগ্ৰাফী আৰু লিংক

Normalize.css

পাত্ৰসমূহ

গ্ৰীড ব্যৱস্থা

পাতনি

মিডিয়াৰ প্ৰশ্ন

গ্ৰীড বিকল্পসমূহ

উদাহৰণ: ষ্টেক কৰা-ৰ পৰা অনুভূমিকলৈ

উদাহৰণ: তৰল পদাৰ্থৰ পাত্ৰ

উদাহৰণ: মোবাইল আৰু ডেস্কটপ

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

উদাহৰণ: স্তম্ভ ৰেপিং কৰা

প্ৰতিক্ৰিয়াশীল স্তম্ভ পুনৰায় সেট কৰা হয়

স্তম্ভসমূহ অফছেটিং কৰা

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

স্তম্ভ অৰ্ডাৰ দিয়া

কম মিক্সিন আৰু ভেৰিয়েবল

চলকসমূহ

মিক্সিন

উদাহৰণ ব্যৱহাৰ

টাইপোগ্ৰাফী

শিৰোনামসমূহ

h1. বুটষ্ট্ৰেপ হেডিং

h2. বুটষ্ট্ৰেপ হেডিং

h3. বুটষ্ট্ৰেপ হেডিং

h4. বুটষ্ট্ৰেপ হেডিং

h৫. বুটষ্ট্ৰেপ হেডিং

h6. বুটষ্ট্ৰেপ হেডিং

h1. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

h2. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

h3. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

h4. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

h৫. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

h6. বুটষ্ট্ৰেপ শিৰোনাম গৌণ লিখনী

বডি কপি

লিড বডি কপি

Less ৰ সৈতে নিৰ্মিত

ইনলাইন লিখনী উপাদানসমূহ

চিহ্নিত কৰা লিখনী

মচি পেলোৱা লিখনী

ষ্ট্ৰাইকথ্ৰু টেক্সট

সন্নিৱিষ্ট কৰা লিখনী

আণ্ডাৰলাইন কৰা লিখনী

সৰু লিখনী

সাহসী

ইটালিক

বিকল্প মৌলসমূহ

প্ৰান্তিককৰণ শ্ৰেণীসমূহ

ৰূপান্তৰ শ্ৰেণীসমূহ

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

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

প্ৰাৰম্ভিকতা

ঠিকনাসমূহ

ব্লককোটসমূহ

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

ব্লককোট বিকল্পসমূহ

এটা উৎসৰ নামকৰণ কৰা

বিকল্প প্ৰদৰ্শনসমূহ

তালিকাসমূহ

অনাৰ্ডাৰেড

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

আনষ্টাইল কৰা

শাৰীত

বিৱৰণ

অনুভূমিক বিৱৰণ

স্বয়ংক্ৰিয় ছেদ কৰা

ক'ড

শাৰীত

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

মূল ব্লক

চলকসমূহ

নমুনা আউটপুট

টেবুলসমূহ

মূল উদাহৰণ

ডাঠ শাৰী

ক্ৰছ-ব্ৰাউজাৰ সামঞ্জস্যতা

ডেমো `:focus`ৰাজ্য

��িষ্ক্ৰিয় কৰা ফিল্ডছেটসমূহ

লিংক কাৰ্য্যক্ষমতাৰ বিষয়ে সতৰ্কবাণী`<a>`

লুকাই থকা `.sr-only`লেবেলসমূহৰ সৈতে বৈকল্পিক আইকনসমূহ