সিএসএস
গ্লোবাল CSS সেটিংস, মৌলিক HTML উপাদানগুলি স্টাইল করা এবং এক্সটেনসিবল ক্লাসের সাথে উন্নত, এবং একটি উন্নত গ্রিড সিস্টেম।
গ্লোবাল CSS সেটিংস, মৌলিক HTML উপাদানগুলি স্টাইল করা এবং এক্সটেনসিবল ক্লাসের সাথে উন্নত, এবং একটি উন্নত গ্রিড সিস্টেম।
আরও ভাল, দ্রুত, শক্তিশালী ওয়েব ডেভেলপমেন্টের জন্য আমাদের পন্থা সহ বুটস্ট্র্যাপের পরিকাঠামোর মূল অংশগুলির উপর লোডাউন পান।
বুটস্ট্র্যাপ নির্দিষ্ট HTML উপাদান এবং CSS বৈশিষ্ট্য ব্যবহার করে যার জন্য HTML5 ডকটাইপ ব্যবহার করা প্রয়োজন। আপনার সমস্ত প্রকল্পের শুরুতে এটি অন্তর্ভুক্ত করুন।
<!DOCTYPE html>
<html lang="en">
...
</html>
বুটস্ট্র্যাপ 2 এর সাথে, আমরা ফ্রেমওয়ার্কের মূল দিকগুলির জন্য ঐচ্ছিক মোবাইল বন্ধুত্বপূর্ণ শৈলী যুক্ত করেছি। বুটস্ট্র্যাপ 3 এর সাথে, আমরা শুরু থেকেই মোবাইল ফ্রেন্ডলি হতে প্রজেক্টটিকে আবার লিখেছি। ঐচ্ছিক মোবাইল শৈলী যোগ করার পরিবর্তে, তারা সরাসরি মূল মধ্যে বেক করা হয়. আসলে, বুটস্ট্র্যাপ প্রথম মোবাইল । মোবাইল ফার্স্ট স্টাইলগুলি আলাদা ফাইলের পরিবর্তে সমগ্র লাইব্রেরি জুড়ে পাওয়া যাবে।
সঠিক রেন্ডারিং এবং টাচ জুমিং নিশ্চিত করতে, আপনার তে ভিউপোর্ট মেটা ট্যাগ যোগ করুন <head>
।
<meta name="viewport" content="width=device-width, initial-scale=1">
user-scalable=no
আপনি ভিউপোর্ট মেটা ট্যাগ যোগ করে মোবাইল ডিভাইসে জুম করার ক্ষমতা অক্ষম করতে পারেন । এটি জুমিং অক্ষম করে, যার অর্থ ব্যবহারকারীরা শুধুমাত্র স্ক্রোল করতে সক্ষম হয় এবং এর ফলে আপনার সাইটটি একটি নেটিভ অ্যাপ্লিকেশনের মতো অনুভব করে৷ সামগ্রিকভাবে, আমরা প্রতিটি সাইটে এটি সুপারিশ করি না, তাই সতর্কতা অবলম্বন করুন!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
বুটস্ট্র্যাপ মৌলিক গ্লোবাল ডিসপ্লে, টাইপোগ্রাফি এবং লিঙ্ক শৈলী সেট করে। বিশেষ করে, আমরা:
background-color: #fff;
করুনbody
@font-family-base
, @font-size-base
, এবং বৈশিষ্ট্যগুলি ব্যবহার করুন@line-height-base
@link-color
এবং শুধুমাত্র লিঙ্ক আন্ডারলাইন প্রয়োগ করুন:hover
এই শৈলী মধ্যে পাওয়া যাবে scaffolding.less
.
উন্নত ক্রস-ব্রাউজার রেন্ডারিংয়ের জন্য, আমরা Normalize.css ব্যবহার করি , 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-*
শ্রেণি উপস্থিত না থাকে।আপনার কোডে এই নীতিগুলি প্রয়োগ করার জন্য উদাহরণগুলি দেখুন।
আমরা আমাদের গ্রিড সিস্টেমে মূল ব্রেকপয়েন্ট তৈরি করতে আমাদের কম ফাইলগুলিতে নিম্নলিখিত মিডিয়া প্রশ্নগুলি ব্যবহার করি।
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
আমরা মাঝে মাঝে এই মিডিয়া ক্যোয়ারীগুলি সম্প্রসারিত করি max-width
যাতে একটি সংকীর্ণ ডিভাইসের সেটে CSS সীমাবদ্ধ করা যায়।
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
বুটস্ট্র্যাপ গ্রিড সিস্টেমের দিকগুলি একটি সহজ টেবিলের সাথে একাধিক ডিভাইস জুড়ে কীভাবে কাজ করে তা দেখুন।
অতিরিক্ত ছোট ডিভাইস ফোন (<768px) | ছোট ডিভাইস ট্যাবলেট (≥768px) | মাঝারি ডিভাইস ডেস্কটপ (≥992px) | বড় ডিভাইস ডেস্কটপ (≥1200px) | |
---|---|---|---|---|
গ্রিড আচরণ | সব সময়ে অনুভূমিক | শুরু করতে সঙ্কুচিত, ব্রেকপয়েন্টের উপরে অনুভূমিক | ||
ধারক প্রস্থ | কোনটিই নয় (স্বয়ংক্রিয়) | 750px | 970px | 1170px |
ক্লাস প্রিফিক্স | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# কলাম | 12 | |||
কলাম প্রস্থ | অটো | ~62px | ~81px | ~97px |
নর্দমার প্রস্থ | 30px (একটি কলামের প্রতিটি পাশে 15px) | |||
নেস্টেবল | হ্যাঁ | |||
অফসেট | হ্যাঁ | |||
কলাম ক্রম | হ্যাঁ |
গ্রিড ক্লাসের একক সেট ব্যবহার করে .col-md-*
, আপনি একটি মৌলিক গ্রিড সিস্টেম তৈরি করতে পারেন যা ডেস্কটপ (মাঝারি) ডিভাইসে অনুভূমিক হওয়ার আগে মোবাইল ডিভাইস এবং ট্যাবলেট ডিভাইসে (অতিরিক্ত ছোট থেকে ছোট পরিসরে) স্ট্যাক করা শুরু হয়। যে কোনোটিতে গ্রিড কলাম রাখুন .row
।
<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>
যদি একটি একক সারির মধ্যে 12টির বেশি কলাম স্থাপন করা হয়, তবে অতিরিক্ত কলামের প্রতিটি গ্রুপ, একটি ইউনিট হিসাবে, একটি নতুন লাইনে মোড়ানো হবে।
<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 > 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
এবং কলামের সেট যোগ করুন । নেস্টেড সারিগুলিতে 12 বা তার কম পর্যন্ত যোগ করা কলামগুলির একটি সেট অন্তর্ভুক্ত করা উচিত (এটি প্রয়োজনীয় নয় যে আপনি উপলব্ধ 12টি কলাম ব্যবহার করুন)৷.col-sm-*
.col-sm-*
<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>
দ্রুত লেআউটের জন্য প্রি- বিল্ট গ্রিড ক্লাস ছাড়াও , বুটস্ট্র্যাপে আপনার নিজের সহজ, শব্দার্থিক লেআউটগুলি দ্রুত তৈরি করার জন্য কম ভেরিয়েবল এবং মিক্সিন রয়েছে।
ভেরিয়েবলগুলি কলামের সংখ্যা, নর্দমার প্রস্থ এবং মিডিয়া ক্যোয়ারী পয়েন্ট নির্ধারণ করে যেখানে ভাসমান কলাম শুরু হবে। আমরা এগুলি উপরে নথিভুক্ত পূর্বনির্ধারিত গ্রিড ক্লাস তৈরি করতে ব্যবহার করি, সেইসাথে নীচে তালিকাভুক্ত কাস্টম মিক্সিনের জন্য।
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
মিক্সিনগুলি পৃথক গ্রিড কলামগুলির জন্য শব্দার্থিক CSS তৈরি করতে গ্রিড ভেরিয়েবলের সাথে একত্রে ব্যবহৃত হয়।
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
আপনি ভেরিয়েবলগুলিকে আপনার নিজস্ব কাস্টম মানগুলিতে পরিবর্তন করতে পারেন, অথবা শুধুমাত্র তাদের ডিফল্ট মানগুলির সাথে মিক্সিনগুলি ব্যবহার করতে পারেন। এর মধ্যে একটি ব্যবধান সহ একটি দ্বি-কলাম বিন্যাস তৈরি করতে ডিফল্ট সেটিংস ব্যবহার করার একটি উদাহরণ এখানে।
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
সমস্ত এইচটিএমএল শিরোনাম, এর <h1>
মাধ্যমে <h6>
, উপলব্ধ। .h1
ক্লাসের মাধ্যমেও .h6
উপলব্ধ, যখন আপনি একটি শিরোনামের ফন্ট স্টাইলিংয়ের সাথে মেলে কিন্তু তারপরও আপনার পাঠ্য ইনলাইনে প্রদর্শিত হতে চান।
h1. বুটস্ট্র্যাপ শিরোনাম |
সেমিবোল্ড 36px |
h2. বুটস্ট্র্যাপ শিরোনাম |
সেমিবোল্ড 30px |
h3. বুটস্ট্র্যাপ শিরোনাম |
সেমিবোল্ড 24px |
h4. বুটস্ট্র্যাপ শিরোনাম |
সেমিবোল্ড 18px |
h5. বুটস্ট্র্যাপ শিরোনাম |
সেমিবোল্ড 14px |
h6. বুটস্ট্র্যাপ শিরোনাম |
সেমিবোল্ড 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<small>
একটি জেনেরিক ট্যাগ বা .small
ক্লাস সহ যেকোনো শিরোনামে হালকা, মাধ্যমিক পাঠ্য তৈরি করুন ।
h1. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট |
h2. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট |
h3. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট |
h4. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট |
h5. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট |
h6. বুটস্ট্র্যাপ শিরোনাম সেকেন্ডারি টেক্সট |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
বুটস্ট্র্যাপের গ্লোবাল ডিফল্ট font-size
হল 14pxline-height
, যার একটি 1.428 । এটি <body>
এবং সমস্ত অনুচ্ছেদে প্রয়োগ করা হয়। উপরন্তু, <p>
(অনুচ্ছেদ) তাদের গণনাকৃত লাইন-উচ্চতার অর্ধেক নীচের মার্জিন পায় (ডিফল্টরূপে 10px)।
নুল্লাম কুইস রিসাস এগেট উর্না মলিস অর্নরে ভেল ইউ লিও। সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। নুল্লম আইডি ডলোর আইডি নিভ আলট্রিসিস যানবাহন।
সহ সামাজিক ন্যাটোক পেনাটিবাস এবং ম্যাগনিস ডিস পার্টুরিয়েন্ট মন্টেস, নতুন হাস্যকর মুস। Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, Nisi erat Porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
একটি অনুচ্ছেদ যোগ করে আলাদা করুন .lead
।
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ডুইস মলিস, এটি অ কমোডো লুকটাস।
<p class="lead">...</p>
টাইপোগ্রাফিক স্কেলটি variables.less এ দুটি Less ভেরিয়েবলের উপর ভিত্তি করে তৈরি করা হয়েছে : @font-size-base
এবং @line-height-base
. প্রথমটি সর্বত্র ব্যবহৃত বেস ফন্ট-আকার এবং দ্বিতীয়টি হল বেস লাইন-উচ্চতা। আমরা আমাদের সমস্ত ধরণের এবং আরও অনেক কিছুর মার্জিন, প্যাডিং এবং লাইন-উচ্চতা তৈরি করতে সেই ভেরিয়েবল এবং কিছু সাধারণ গণিত ব্যবহার করি। তাদের কাস্টমাইজ করুন এবং বুটস্ট্র্যাপ অ্যাডাপ্ট করে।
অন্য প্রসঙ্গে প্রাসঙ্গিকতার কারণে পাঠ্যের একটি রান হাইলাইট করার জন্য, <mark>
ট্যাগটি ব্যবহার করুন।
আপনি মার্ক ট্যাগ ব্যবহার করতে পারেনলক্ষণীয় করাপাঠ্য
You can use the mark tag to <mark>highlight</mark> text.
মুছে ফেলা পাঠ্যের ব্লকগুলি নির্দেশ করার জন্য <del>
ট্যাগটি ব্যবহার করুন।
পাঠ্যের এই লাইনটি মুছে ফেলা পাঠ্য হিসাবে বিবেচনা করা হয়।
<del>This line of text is meant to be treated as deleted text.</del>
পাঠ্যের ব্লকগুলি নির্দেশ করার জন্য যেগুলি আর প্রাসঙ্গিক নয় <s>
ট্যাগটি ব্যবহার করুন৷
পাঠ্যের এই লাইনটিকে আর সঠিক হিসাবে বিবেচনা করা হয় না।
<s>This line of text is meant to be treated as no longer accurate.</s>
নথিতে সংযোজন নির্দেশ করার জন্য <ins>
ট্যাগ ব্যবহার করুন।
পাঠ্যের এই লাইনটিকে নথিতে একটি সংযোজন হিসাবে বিবেচনা করা বোঝানো হয়েছে।
<ins>This line of text is meant to be treated as an addition to the document.</ins>
টেক্সট আন্ডারলাইন করতে <u>
ট্যাগ ব্যবহার করুন.
পাঠ্যের এই লাইনটি আন্ডারলাইন হিসাবে রেন্ডার হবে
<u>This line of text will render as underlined</u>
লাইটওয়েট স্টাইল সহ HTML এর ডিফল্ট জোর ট্যাগ ব্যবহার করুন।
ইনলাইন বা টেক্সট ব্লকের উপর জোর না <small>
দেওয়ার জন্য, প্যারেন্টের আকারের 85% টেক্সট সেট করতে ট্যাগ ব্যবহার করুন। শিরোনাম উপাদান font-size
নেস্টেড <small>
উপাদানের জন্য তাদের নিজস্ব গ্রহণ.
আপনি বিকল্পভাবে .small
যেকোনো একটির জায়গায় একটি ইনলাইন উপাদান ব্যবহার করতে পারেন <small>
।
পাঠ্যের এই লাইনটি সূক্ষ্ম মুদ্রণ হিসাবে বিবেচনা করা হয়।
<small>This line of text is meant to be treated as fine print.</small>
একটি ভারী ফন্ট-ওজন সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য।
টেক্সটের নিচের স্নিপেটটিকে বোল্ড টেক্সট হিসেবে রেন্ডার করা হয়েছে ।
<strong>rendered as bold text</strong>
তির্যক সহ পাঠ্যের একটি স্নিপেটে জোর দেওয়ার জন্য।
পাঠ্যের নিম্নলিখিত স্নিপেটটি তির্যক টেক্সট হিসাবে রেন্ডার করা হয়েছে ।
<em>rendered as italicized text</em>
নির্দ্বিধায় ব্যবহার করুন <b>
এবং <i>
HTML5 এ। <b>
শব্দ বা বাক্যাংশগুলিকে অতিরিক্ত গুরুত্ব না দিয়ে হাইলাইট করার জন্য বোঝানো হয় যখন <i>
বেশিরভাগই ভয়েস, প্রযুক্তিগত পদ ইত্যাদির জন্য।
পাঠ্য সারিবদ্ধকরণ ক্লাস সহ উপাদানগুলিতে পাঠ্যকে সহজেই পুনরায় সাজান।
বাম প্রান্তিককৃত পাঠ্য।
কেন্দ্রে সারিবদ্ধ পাঠ্য।
ডান প্রান্তিককৃত পাঠ্য।
যুক্তিযুক্ত পাঠ্য।
কোন মোড়ানো লেখা নেই।
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
টেক্সট ক্যাপিটালাইজেশন ক্লাস সহ উপাদানে টেক্সট রূপান্তর করুন।
ছোট হাতের লেখা।
বড় হাতের লেখা।
ক্যাপিটালাইজড টেক্সট।
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<abbr>
হোভারে প্রসারিত সংস্করণ দেখানোর জন্য সংক্ষিপ্ত রূপ এবং সংক্ষিপ্ত রূপের জন্য HTML এর উপাদানের স্টাইলাইজড বাস্তবায়ন । একটি title
বৈশিষ্ট্য সহ সংক্ষিপ্ত রূপগুলির একটি হালকা বিন্দুযুক্ত নীচের সীমানা এবং হোভারে একটি সহায়তা কার্সার রয়েছে, যা হোভারে এবং সহায়ক প্রযুক্তির ব্যবহারকারীদের জন্য অতিরিক্ত প্রসঙ্গ সরবরাহ করে।
অ্যাট্রিবিউট শব্দের একটি সংক্ষিপ্ত রূপ হল attr ।
<abbr title="attribute">attr</abbr>
.initialism
সামান্য ছোট ফন্ট-আকারের জন্য একটি সংক্ষেপে যোগ করুন ।
এইচটিএমএল স্লাইসড ব্রেড থেকে সেরা জিনিস।
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
নিকটতম পূর্বপুরুষ বা কাজের পুরো অংশের জন্য বর্তমান যোগাযোগের তথ্য। দিয়ে সমস্ত লাইন শেষ করে বিন্যাস সংরক্ষণ করুন <br>
।
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
আপনার নথির মধ্যে অন্য উৎস থেকে সামগ্রীর ব্লক উদ্ধৃত করার জন্য।
উদ্ধৃতি হিসাবে <blockquote>
যেকোনো HTML এর চারপাশে মোড়ানো । সোজা উদ্ধৃতি জন্য, আমরা একটি সুপারিশ <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
একটি স্ট্যান্ডার্ডে সাধারণ বৈচিত্র্যের জন্য শৈলী এবং বিষয়বস্তু পরিবর্তন <blockquote>
।
<footer>
উৎস শনাক্ত করার জন্য একটি যোগ করুন । সোর্স কাজের নাম লিখুন <cite>
।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. পূর্ণসংখ্যা posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
.blockquote-reverse
ডান-সারিবদ্ধ বিষয়বস্তু সহ একটি ব্লককোট যোগ করুন ।
<blockquote class="blockquote-reverse">
...
</blockquote>
আইটেমগুলির একটি তালিকা যেখানে অর্ডারটি স্পষ্টভাবে গুরুত্বপূর্ণ নয় ।
<ul>
<li>...</li>
</ul>
আইটেমগুলির একটি তালিকা যেখানে অর্ডারটি স্পষ্টভাবে গুরুত্বপূর্ণ।
<ol>
<li>...</li>
</ol>
তালিকা আইটেমগুলিতে ডিফল্ট list-style
এবং বাম মার্জিন সরান (শুধুমাত্র শিশুদের জন্য)। এটি শুধুমাত্র অবিলম্বে শিশুদের তালিকার আইটেমগুলিতে প্রযোজ্য , যার অর্থ আপনাকে যেকোনো নেস্টেড তালিকার জন্যও ক্লাস যোগ করতে হবে।
<ul class="list-unstyled">
<li>...</li>
</ul>
সমস্ত তালিকা আইটেম একটি একক লাইনে রাখুন display: inline-block;
এবং কিছু হালকা প্যাডিং সহ।
<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><section></code> should be wrapped as inline.
<kbd>
ইনপুট নির্দেশ করতে ব্যবহার করুন যা সাধারণত কীবোর্ডের মাধ্যমে প্রবেশ করা হয়।
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><p>Sample text here...</p></pre>
আপনি ঐচ্ছিকভাবে যোগ করতে পারেন.pre-scrollable
ক্লাস যোগ করতে পারেন, যা সর্বোচ্চ 350px উচ্চতা সেট করবে এবং একটি y-অক্ষ স্ক্রলবার প্রদান করবে।
ভেরিয়েবল নির্দেশ করার জন্য <var>
ট্যাগ ব্যবহার করুন।
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
একটি প্রোগ্রাম থেকে ব্লক নমুনা আউটপুট নির্দেশ করার জন্য <samp>
ট্যাগ ব্যবহার করুন.
এই টেক্সট একটি কম্পিউটার প্রোগ্রাম থেকে নমুনা আউটপুট হিসাবে বিবেচনা করা বোঝানো হয়.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
.table
বেসিক স্টাইলিং এর জন্য—হালকা প্যাডিং এবং শুধুমাত্র অনুভূমিক ডিভাইডার— যেকোনো একটিতে বেস ক্লাস যোগ করুন <table>
। এটি অত্যন্ত অপ্রয়োজনীয় বলে মনে হতে পারে, কিন্তু ক্যালেন্ডার এবং তারিখ বাছাইকারীর মতো অন্যান্য প্লাগইনগুলির জন্য টেবিলের ব্যাপক ব্যবহারের কারণে, আমরা আমাদের কাস্টম টেবিল শৈলীগুলিকে বিচ্ছিন্ন করতে বেছে নিয়েছি।
# | নামের প্রথম অংশ | নামের শেষাংশ | ব্যবহারকারীর নাম |
---|---|---|---|
1 | মার্ক | অটো | @এমডিও |
2 | জ্যাকব | থর্নটন | @ফ্যাট |
3 | ল্যারি | পাখি | @টুইটার |
<table class="table">
...
</table>
.table-striped
এর মধ্যে যেকোনো টেবিল সারিতে জেব্রা-স্ট্রাইপিং যোগ করতে ব্যবহার করুন <tbody>
।
ডোরাকাটা টেবিলগুলি CSS নির্বাচকের মাধ্যমে স্টাইল করা হয় :nth-child
, যা Internet Explorer 8 এ উপলব্ধ নয়।
# | নামের প্রথম অংশ | নামের শেষাংশ | ব্যবহারকারীর নাম |
---|---|---|---|
1 | মার্ক | অটো | @এমডিও |
2 | জ্যাকব | থর্নটন | @ফ্যাট |
3 | ল্যারি | পাখি | @টুইটার |
<table class="table table-striped">
...
</table>
.table-bordered
টেবিল এবং কক্ষের চারপাশে সীমানা যোগ করুন ।
# | নামের প্রথম অংশ | নামের শেষাংশ | ব্যবহারকারীর নাম |
---|---|---|---|
1 | মার্ক | অটো | @এমডিও |
2 | জ্যাকব | থর্নটন | @ফ্যাট |
3 | ল্যারি | পাখি | @টুইটার |
<table class="table table-bordered">
...
</table>
.table-hover
একটি এর মধ্যে টেবিলের সারিতে একটি হোভার অবস্থা সক্ষম করতে যোগ করুন <tbody>
।
# | নামের প্রথম অংশ | নামের শেষাংশ | ব্যবহারকারীর নাম |
---|---|---|---|
1 | মার্ক | অটো | @এমডিও |
2 | জ্যাকব | থর্নটন | @ফ্যাট |
3 | ল্যারি | পাখি | @টুইটার |
<table class="table table-hover">
...
</table>
.table-condensed
অর্ধেক সেল প্যাডিং কাটা দ্বারা টেবিল আরো কম্প্যাক্ট করতে যোগ করুন .
# | নামের প্রথম অংশ | নামের শেষাংশ | ব্যবহারকারীর নাম |
---|---|---|---|
1 | মার্ক | অটো | @এমডিও |
2 | জ্যাকব | থর্নটন | @ফ্যাট |
3 | ল্যারি দ্য বার্ড | @টুইটার |
<table class="table table-condensed">
...
</table>
সারণি সারি বা পৃথক ঘর রঙ করতে প্রাসঙ্গিক ক্লাস ব্যবহার করুন।
ক্লাস | বর্ণনা |
---|---|
.active |
একটি নির্দিষ্ট সারি বা ঘরে হোভার রঙ প্রয়োগ করে |
.success |
একটি সফল বা ইতিবাচক কর্ম নির্দেশ করে |
.info |
একটি নিরপেক্ষ তথ্যপূর্ণ পরিবর্তন বা কর্ম নির্দেশ করে |
.warning |
একটি সতর্কতা নির্দেশ করে যা মনোযোগের প্রয়োজন হতে পারে |
.danger |
একটি বিপজ্জনক বা সম্ভাব্য নেতিবাচক কর্ম নির্দেশ করে |
# | কলাম শিরোনাম | কলাম শিরোনাম | কলাম শিরোনাম |
---|---|---|---|
1 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
2 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
3 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
4 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
5 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
6 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
7 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
8 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
9 | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু | কলাম বিষয়বস্তু |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
একটি টেবিল সারি বা পৃথক কক্ষে অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত প্রদান করে, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে জানানো হবে না - যেমন স্ক্রিন রিডার। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকেই স্পষ্ট (প্রাসঙ্গিক টেবিল সারি/কক্ষে দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-only
ক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।
ছোট ডিভাইসে (768px এর নিচে) অনুভূমিকভাবে স্ক্রোল করার জন্য যেকোনও র্যাপ .table
করে প্রতিক্রিয়াশীল টেবিল তৈরি করুন । .table-responsive
768px চওড়ার চেয়ে বড় কোনো কিছু দেখার সময়, আপনি এই টেবিলে কোনো পার্থক্য দেখতে পাবেন না।
প্রতিক্রিয়াশীল টেবিলগুলি ব্যবহার করে overflow-y: hidden
, যা টেবিলের নীচে বা উপরের প্রান্তের বাইরে যে কোনও সামগ্রীকে ক্লিপ করে। বিশেষ করে, এটি ড্রপডাউন মেনু এবং অন্যান্য তৃতীয় পক্ষের উইজেটগুলিকে ক্লিপ করতে পারে৷
ফায়ারফক্সের কিছু বিশ্রী ফিল্ডসেট স্টাইলিং রয়েছে width
যা প্রতিক্রিয়াশীল টেবিলে হস্তক্ষেপ করে। এটিকে ফায়ারফক্স-নির্দিষ্ট হ্যাক ছাড়া ওভাররাইড করা যাবে না যা আমরা বুটস্ট্র্যাপে প্রদান করি না :
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
আরও তথ্যের জন্য, এই স্ট্যাক ওভারফ্লো উত্তরটি পড়ুন ।
# | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম |
---|---|---|---|---|---|---|
1 | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল |
2 | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল |
3 | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল |
# | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম | টেবিল শিরোনাম |
---|---|---|---|---|---|---|
1 | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল |
2 | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল |
3 | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল | টেবিল সেল |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
স্বতন্ত্র ফর্ম নিয়ন্ত্রণগুলি স্বয়ংক্রিয়ভাবে কিছু বিশ্বব্যাপী স্টাইলিং গ্রহণ করে। সমস্ত পাঠ্য <input>
, <textarea>
, এবং এর <select>
সাথে উপাদানগুলি ডিফল্টরূপে .form-control
সেট করা আছে ৷ সর্বোত্তম ব্যবধানের জন্য width: 100%;
লেবেল এবং নিয়ন্ত্রণগুলি মোড়ানো ।.form-group
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
ইনপুট গ্রুপের সাথে সরাসরি ফর্ম গ্রুপগুলিকে মিশ্রিত করবেন না । পরিবর্তে, ফর্ম গ্রুপের ভিতরে ইনপুট গ্রুপটি নেস্ট করুন।
বাম-সারিবদ্ধ এবং ইনলাইন-ব্লক নিয়ন্ত্রণের জন্য আপনার ফর্মে যোগ করুন .form-inline
(যা একটি হতে হবে না )। এটি শুধুমাত্র ভিউপোর্টের মধ্যে থাকা ফর্মগুলির ক্ষেত্রে প্রযোজ্য যা কমপক্ষে 768px চওড়া।<form>
ইনপুট এবং নির্বাচন width: 100%;
ডিফল্টরূপে বুটস্ট্র্যাপে প্রয়োগ করা হয়েছে। ইনলাইন ফর্মের মধ্যে, আমরা এটিকে পুনরায় সেট করি width: auto;
যাতে একাধিক নিয়ন্ত্রণ একই লাইনে থাকতে পারে। আপনার লেআউটের উপর নির্ভর করে, অতিরিক্ত কাস্টম প্রস্থের প্রয়োজন হতে পারে।
আপনি প্রতিটি ইনপুটের জন্য একটি লেবেল অন্তর্ভুক্ত না করলে স্ক্রীন রিডারদের আপনার ফর্মগুলির সাথে সমস্যা হবে৷ এই ইনলাইন ফর্মগুলির জন্য, আপনি .sr-only
ক্লাস ব্যবহার করে লেবেলগুলি লুকাতে পারেন৷ সহায়ক প্রযুক্তিগুলির জন্য একটি লেবেল প্রদানের আরও বিকল্প পদ্ধতি রয়েছে, যেমন aria-label
, aria-labelledby
বা title
বৈশিষ্ট্য৷ যদি এইগুলির কোনোটিই উপস্থিত না থাকে, তাহলে স্ক্রীন রিডাররা placeholder
অ্যাট্রিবিউট ব্যবহার করতে পারেন, যদি উপস্থিত থাকে, তবে মনে রাখবেন যে placeholder
অন্যান্য লেবেলিং পদ্ধতির জন্য প্রতিস্থাপন হিসাবে ব্যবহার করার পরামর্শ দেওয়া হয় না।
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
বুটস্ট্র্যাপের পূর্বনির্ধারিত গ্রিড ক্লাসগুলি ফর্মটিতে যোগ করে একটি অনুভূমিক বিন্যাসে ফর্ম নিয়ন্ত্রণগুলির লেবেল এবং গ্রুপগুলিকে সারিবদ্ধ করতে ব্যবহার করুন .form-horizontal
(যা একটি হতে হবে না <form>
)৷ এটি করার ফলে .form-group
গ্রিড সারি হিসাবে আচরণ করতে s পরিবর্তন হয়, তাই এর প্রয়োজন নেই .row
।
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
একটি উদাহরণ ফর্ম বিন্যাসে সমর্থিত আদর্শ ফর্ম নিয়ন্ত্রণের উদাহরণ৷
সর্বাধিক সাধারণ ফর্ম নিয়ন্ত্রণ, পাঠ্য-ভিত্তিক ইনপুট ক্ষেত্র। সমস্ত HTML5 প্রকারের জন্য সমর্থন অন্তর্ভুক্ত করে: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, এবং color
.
ইনপুটগুলি শুধুমাত্র সম্পূর্ণরূপে স্টাইল করা হবে যদি তাদের type
সঠিকভাবে ঘোষণা করা হয়।
<input type="text" class="form-control" placeholder="Text input">
যেকোনো টেক্সট-ভিত্তিক এর আগে এবং/অথবা পরে ইন্টিগ্রেটেড টেক্সট বা বোতাম যোগ করতে <input>
, ইনপুট গ্রুপ কম্পোনেন্ট দেখুন ।
ফর্ম নিয়ন্ত্রণ যা পাঠ্যের একাধিক লাইন সমর্থন করে। 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—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—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
একই লাইনে প্রদর্শিত নিয়ন্ত্রণগুলির জন্য চেকবক্স বা রেডিওগুলির একটি সিরিজে .checkbox-inline
বা ক্লাসগুলি ব্যবহার করুন ৷.radio-inline
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
আপনার যদি তে কোনো টেক্সট না থাকে <label>
, তাহলে ইনপুটটি আপনার প্রত্যাশা অনুযায়ী অবস্থান করা হবে। বর্তমানে শুধুমাত্র নন-ইনলাইন চেকবক্স এবং রেডিওতে কাজ করে। সহায়ক প্রযুক্তির জন্য এখনও কিছু লেবেল প্রদান করতে মনে রাখবেন (উদাহরণস্বরূপ, ব্যবহার করে aria-label
)।
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
মনে রাখবেন যে অনেক নেটিভ বাছাই করা মেনু-যেমন Safari এবং Chrome-এ বৃত্তাকার কোণ রয়েছে যা border-radius
বৈশিষ্ট্যগুলির মাধ্যমে পরিবর্তন করা যায় না।
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select>
বৈশিষ্ট্য সহ নিয়ন্ত্রণের জন্য multiple
, একাধিক বিকল্প ডিফল্টরূপে দেখানো হয়।
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
যখন আপনাকে একটি ফর্মের মধ্যে একটি ফর্ম লেবেলের পাশে প্লেইন টেক্সট স্থাপন করতে হবে, তখন একটি .form-control-static
তে ক্লাসটি ব্যবহার করুন <p>
।
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
outline
আমরা কিছু ফর্ম নিয়ন্ত্রণে ডিফল্ট শৈলীগুলি সরিয়ে দিই box-shadow
এবং এর জায়গায় একটি প্রয়োগ করি :focus
৷
:focus
স্টেটউপরের উদাহরণ ইনপুট আমাদের ডকুমেন্টেশনে কাস্টম শৈলী ব্যবহার :focus
করে একটি তে অবস্থা প্রদর্শন করতে .form-control
।
disabled
ব্যবহারকারীর ইন্টারঅ্যাকশন প্রতিরোধ করতে একটি ইনপুটে বুলিয়ান অ্যাট্রিবিউট যোগ করুন । অক্ষম ইনপুট হালকা দেখায় এবং একটি not-allowed
কার্সার যোগ করুন।
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
একযোগে মধ্যে সমস্ত নিয়ন্ত্রণ নিষ্ক্রিয় করতে a- disabled
তে অ্যাট্রিবিউট যোগ করুন ।<fieldset>
<fieldset>
<a>
ডিফল্টরূপে, ব্রাউজারগুলি একটি অভ্যন্তরে সমস্ত নেটিভ ফর্ম কন্ট্রোল ( <input>
, <select>
এবং <button>
উপাদানগুলি) <fieldset disabled>
কে অক্ষম হিসাবে বিবেচনা করবে, তাদের উপর কীবোর্ড এবং মাউস উভয়ের মিথস্ক্রিয়া প্রতিরোধ করবে৷ যাইহোক, যদি আপনার ফর্মটি <a ... class="btn btn-*">
উপাদানগুলিও অন্তর্ভুক্ত করে, তবে এগুলিকে শুধুমাত্র একটি শৈলী দেওয়া হবে pointer-events: none
। বোতামগুলির জন্য অক্ষম অবস্থা সম্পর্কে বিভাগে উল্লিখিত হিসাবে (এবং বিশেষত অ্যাঙ্কর উপাদানগুলির জন্য উপ-বিভাগে), এই CSS বৈশিষ্ট্যটি এখনও মানসম্মত নয় এবং Opera 18 এবং নীচে, বা Internet Explorer 11-এ সম্পূর্ণরূপে সমর্থিত নয় এবং জিতেছে কীবোর্ড ব্যবহারকারীদের এই লিঙ্কগুলিকে ফোকাস করতে বা সক্রিয় করতে সক্ষম হতে বাধা দেবেন না। তাই নিরাপদ হতে, এই ধরনের লিঙ্কগুলি নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।
যদিও বুটস্ট্র্যাপ সমস্ত ব্রাউজারে এই শৈলীগুলি প্রয়োগ করবে, ইন্টারনেট এক্সপ্লোরার 11 এবং নীচের disabled
বৈশিষ্ট্যগুলিকে সম্পূর্ণরূপে সমর্থন করে না <fieldset>
৷ এই ব্রাউজারগুলিতে ফিল্ডসেট নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
readonly
ইনপুটের মান পরিবর্তন রোধ করতে একটি ইনপুটে বুলিয়ান অ্যাট্রিবিউট যোগ করুন । শুধুমাত্র পঠনযোগ্য ইনপুটগুলি হালকা দেখায় (ঠিক অক্ষম ইনপুটগুলির মতো), তবে স্ট্যান্ডার্ড কার্সার ধরে রাখে।
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
ফর্ম নিয়ন্ত্রণের জন্য ব্লক স্তর সহায়তা পাঠ্য।
সাহায্যের পাঠ্যটি স্পষ্টভাবে ফর্ম নিয়ন্ত্রণের সাথে যুক্ত হওয়া উচিত যা এটি aria-describedby
বৈশিষ্ট্য ব্যবহার করার সাথে সম্পর্কিত। এটি নিশ্চিত করবে যে সহায়ক প্রযুক্তিগুলি - যেমন স্ক্রিন রিডার - ব্যবহারকারী যখন ফোকাস করে বা নিয়ন্ত্রণে প্রবেশ করে তখন এই সহায়তা পাঠ্যটি ঘোষণা করবে৷
<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
বুটস্ট্র্যাপে ত্রুটি, সতর্কতা, এবং ফর্ম নিয়ন্ত্রণের সাফল্যের অবস্থার জন্য বৈধতা শৈলী অন্তর্ভুক্ত রয়েছে। প্যারেন্ট এলিমেন্ট ব্যবহার করতে, যোগ করতে .has-warning
, .has-error
, বা ব্যবহার করতে। .has-success
যে কোনো .control-label
, .form-control
, এবং .help-block
সেই উপাদানের মধ্যে বৈধতা শৈলী পাবে।
ফর্ম কন্ট্রোলের অবস্থা বোঝাতে এই বৈধতা শৈলীগুলি ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল, রঙ-ভিত্তিক ইঙ্গিত প্রদান করে, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডার - বা কালারব্লাইন্ড ব্যবহারকারীদের কাছে জানানো হবে না।
রাষ্ট্রের একটি বিকল্প ইঙ্গিত দেওয়া হয়েছে তা নিশ্চিত করুন। উদাহরণ স্বরূপ, আপনি ফর্ম কন্ট্রোলের টেক্সটে স্টেট সম্বন্ধে একটি ইঙ্গিত অন্তর্ভুক্ত করতে পারেন <label>
(নিম্নলিখিত কোডের উদাহরণে যেমনটি করা হয়েছে), একটি Glyphicon অন্তর্ভুক্ত করতে পারেন (ক্লাস ব্যবহার করে উপযুক্ত বিকল্প পাঠ্য সহ .sr-only
- Glyphicon উদাহরণগুলি দেখুন ), অথবা একটি প্রদান করে অতিরিক্ত সাহায্য পাঠ্য ব্লক। বিশেষত সহায়ক প্রযুক্তির জন্য, অবৈধ ফর্ম নিয়ন্ত্রণগুলিও একটি aria-invalid="true"
বৈশিষ্ট্য বরাদ্দ করা যেতে পারে।
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
আপনি ঐচ্ছিক প্রতিক্রিয়া আইকন যোগ করতে পারেন এবং .has-feedback
সঠিক আইকন যোগ করে।
প্রতিক্রিয়া আইকন শুধুমাত্র পাঠ্য <input class="form-control">
উপাদানের সাথে কাজ করে।
একটি লেবেল ছাড়া ইনপুট এবং ডানদিকে একটি অ্যাড-অন সহ ইনপুট গোষ্ঠীগুলির জন্য প্রতিক্রিয়া আইকনগুলির ম্যানুয়াল পজিশনিং প্রয়োজন ৷ অ্যাক্সেসযোগ্যতার কারণে আপনাকে সমস্ত ইনপুটগুলির জন্য লেবেল সরবরাহ করার জন্য দৃঢ়ভাবে উত্সাহিত করা হচ্ছে৷ আপনি যদি লেবেলগুলিকে প্রদর্শন করা থেকে আটকাতে চান তবে সেগুলিকে .sr-only
ক্লাসের সাথে লুকান৷ যদি আপনাকে লেবেল ছাড়াই করতে top
হয়, তাহলে প্রতিক্রিয়া আইকনের মান সামঞ্জস্য করুন। right
ইনপুট গোষ্ঠীগুলির জন্য, আপনার অ্যাডনের প্রস্থের উপর নির্ভর করে একটি উপযুক্ত পিক্সেল মানের মানকে সামঞ্জস্য করুন ।
সহায়ক প্রযুক্তিগুলি - যেমন স্ক্রিন রিডার - সঠিকভাবে একটি আইকনের অর্থ বোঝায় তা নিশ্চিত করতে, অতিরিক্ত লুকানো পাঠ্যটি .sr-only
ক্লাসের সাথে অন্তর্ভুক্ত করা উচিত এবং এটি ব্যবহারের সাথে সম্পর্কিত ফর্ম নিয়ন্ত্রণের সাথে স্পষ্টভাবে যুক্ত করা উচিত aria-describedby
৷ বিকল্পভাবে, নিশ্চিত করুন যে অর্থ (উদাহরণস্বরূপ, একটি নির্দিষ্ট পাঠ্য এন্ট্রি ক্ষেত্রের জন্য একটি সতর্কতা রয়েছে) অন্য কোনো আকারে জানানো হয়েছে, যেমন <label>
ফর্ম নিয়ন্ত্রণের সাথে সম্পর্কিত প্রকৃত পাঠ্য পরিবর্তন করা।
যদিও নিম্নলিখিত উদাহরণগুলি ইতিমধ্যেই পাঠ্যের মধ্যেই তাদের নিজ নিজ ফর্ম নিয়ন্ত্রণের বৈধতা অবস্থার কথা উল্লেখ করেছে <label>
, উপরের কৌশলটি ( .sr-only
টেক্সট এবং aria-describedby
) ব্যবহার করে উদাহরণের উদ্দেশ্যে অন্তর্ভুক্ত করা হয়েছে।
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
.sr-only
লুকানো লেবেল সহ ঐচ্ছিক আইকনআপনি যদি .sr-only
একটি ফর্ম কন্ট্রোল লুকানোর জন্য ক্লাসটি ব্যবহার করেন <label>
(অন্যান্য লেবেলিং বিকল্পগুলি ব্যবহার করার পরিবর্তে, যেমন aria-label
অ্যাট্রিবিউট), বুটস্ট্র্যাপ আইকনটি যোগ করার পরে স্বয়ংক্রিয়ভাবে তার অবস্থান সামঞ্জস্য করবে।
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
এর মতো ক্লাস ব্যবহার করে উচ্চতা সেট করুন .input-lg
এবং গ্রিড কলাম ক্লাসের মতো প্রস্থ সেট করুন .col-lg-*
।
লম্বা বা খাটো ফর্ম কন্ট্রোল তৈরি করুন যা বোতামের আকারের সাথে মেলে।
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
দ্রুত আকার লেবেল এবং ফর্ম নিয়ন্ত্রণ মধ্যে .form-horizontal
যোগ করে .form-group-lg
বা .form-group-sm
.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
সহজে পছন্দসই প্রস্থ প্রয়োগ করতে গ্রিড কলামে বা যেকোনো কাস্টম প্যারেন্ট উপাদানে ইনপুটগুলি মোড়ানো।
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
<a>
একটি , <button>
বা <input>
উপাদানে বোতাম ক্লাস ব্যবহার করুন ।
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
যদিও বাটন ক্লাসগুলি <a>
এবং <button>
উপাদানগুলিতে ব্যবহার করা যেতে পারে, শুধুমাত্র <button>
উপাদানগুলি আমাদের এনএভি এবং নেভিবার উপাদানগুলির মধ্যে সমর্থিত।
যদি <a>
উপাদানগুলি বোতাম হিসাবে কাজ করতে ব্যবহৃত হয় - বর্তমান পৃষ্ঠার মধ্যে অন্য নথি বা বিভাগে নেভিগেট করার পরিবর্তে - ইন-পেজ কার্যকারিতা ট্রিগার করে - তাদেরও একটি উপযুক্ত দেওয়া উচিত role="button"
।
একটি সর্বোত্তম অনুশীলন হিসাবে, আমরা ক্রস-ব্রাউজার রেন্ডারিং মিলে যাওয়া নিশ্চিত করতে যখনই সম্ভব উপাদানটি ব্যবহার করার পরামর্শ দিই ।<button>
অন্যান্য জিনিসের মধ্যে, ফায়ারফক্স <30-এ একটি বাগ রয়েছেline-height
যা আমাদের -ভিত্তিক বোতামগুলি সেট করতে বাধা দেয় <input>
, যার ফলে সেগুলি ফায়ারফক্সের অন্যান্য বোতামগুলির উচ্চতার সাথে ঠিক মেলে না।
দ্রুত একটি স্টাইল করা বোতাম তৈরি করতে উপলব্ধ যে কোনো বোতাম ক্লাস ব্যবহার করুন।
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
একটি বোতামে অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের কাছে জানানো হবে না - যেমন স্ক্রিন রিডার। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট (বোতামের দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .sr-only
ক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।
অভিনব বড় বা ছোট বোতাম? যোগ করুন .btn-lg
, .btn-sm
বা .btn-xs
অতিরিক্ত আকারের জন্য।
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
ব্লক লেভেল বোতাম তৈরি করুন—যেগুলি একটি অভিভাবকের সম্পূর্ণ প্রস্থে বিস্তৃত— যোগ করে .btn-block
।
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
সক্রিয় থাকাকালীন বোতামগুলি টিপে প্রদর্শিত হবে (একটি গাঢ় পটভূমি, গাঢ় সীমানা এবং ইনসেট শ্যাডো সহ)। <button>
উপাদানগুলির জন্য , এটি এর মাধ্যমে করা হয় :active
। <a>
উপাদানগুলির জন্য , এটি দিয়ে করা হয়েছে .active
। যাইহোক, আপনি s ব্যবহার করতে পারেন .active
( <button>
এবং aria-pressed="true"
অ্যাট্রিবিউট অন্তর্ভুক্ত করুন) যদি আপনাকে সক্রিয় অবস্থাটি প্রোগ্রাম্যাটিকভাবে প্রতিলিপি করতে হবে।
এটি একটি ছদ্ম-শ্রেণি বলে যোগ করার দরকার নেই :active
, তবে আপনার যদি একই চেহারা জোর করতে হয় তবে এগিয়ে যান এবং যোগ করুন .active
।
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
বোতামে .active
ক্লাস যোগ করুন ।<a>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
বোতামগুলিকে আবার বিবর্ণ করে দিয়ে ক্লিক করার অযোগ্য দেখান opacity
৷
disabled
বাটনে অ্যাট্রিবিউট যোগ করুন <button>
।
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
আপনি যদি disabled
একটি , ইন্টারনেট এক্সপ্লোরার 9 এবং নীচের বৈশিষ্ট্যটি যুক্ত করেন তবে <button>
একটি বাজে টেক্সট-শ্যাডো সহ পাঠ্য ধূসর হয়ে যাবে যা আমরা ঠিক করতে পারি না।
বোতামে .disabled
ক্লাস যোগ করুন ।<a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
আমরা .disabled
এখানে একটি ইউটিলিটি ক্লাস হিসাবে ব্যবহার করি, সাধারণ শ্রেণীর অনুরূপ .active
, তাই কোন উপসর্গের প্রয়োজন নেই।
এই ক্লাসটি s- pointer-events: none
এর লিঙ্ক কার্যকারিতা নিষ্ক্রিয় করার চেষ্টা করার জন্য ব্যবহার করে <a>
, কিন্তু সেই CSS প্রপার্টিটি এখনও মানসম্মত নয় এবং Opera 18 এবং নীচের বা Internet Explorer 11-এ সম্পূর্ণরূপে সমর্থিত নয়৷ উপরন্তু, এমনকি ব্রাউজারগুলিতেও যা সমর্থন করে pointer-events: none
, কীবোর্ড নেভিগেশন অপ্রভাবিত রয়ে গেছে, যার অর্থ হল দৃষ্টিশক্তিসম্পন্ন কীবোর্ড ব্যবহারকারী এবং সহায়ক প্রযুক্তির ব্যবহারকারীরা এখনও এই লিঙ্কগুলি সক্রিয় করতে সক্ষম হবেন। তাই নিরাপদ হতে, এই ধরনের লিঙ্কগুলি নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।
.img-responsive
বুটস্ট্র্যাপ 3-এ চিত্রগুলিকে ক্লাসের সংযোজনের মাধ্যমে প্রতিক্রিয়াশীল-বান্ধব করা যেতে পারে । এটি প্রযোজ্য max-width: 100%;
, height: auto;
এবং display: block;
চিত্রের জন্য যাতে এটি মূল উপাদানের সাথে সুন্দরভাবে স্কেল করে।
.img-responsive
ক্লাস ব্যবহার করে এমন চিত্রগুলিকে কেন্দ্রে রাখতে , .center-block
এর পরিবর্তে ব্যবহার করুন .text-center
। ব্যবহার সম্পর্কে আরো বিস্তারিত জানার জন্য সহায়ক ক্লাস বিভাগ.center-block
দেখুন ।
ইন্টারনেট এক্সপ্লোরার 8-10-এ, এর সাথে SVG ছবিগুলি .img-responsive
অসামঞ্জস্যপূর্ণ আকারের। width: 100% \9;
এটি ঠিক করতে, যেখানে প্রয়োজন সেখানে যোগ করুন । বুটস্ট্র্যাপ এটি স্বয়ংক্রিয়ভাবে প্রয়োগ করে না কারণ এটি অন্যান্য চিত্র বিন্যাসে জটিলতা সৃষ্টি করে।
<img src="..." class="img-responsive" alt="Responsive image">
<img>
যেকোন প্রজেক্টে সহজেই স্টাইল ইমেজ করার জন্য একটি উপাদানে ক্লাস যোগ করুন ।
মনে রাখবেন যে ইন্টারনেট এক্সপ্লোরার 8 বৃত্তাকার কোণগুলির জন্য সমর্থনের অভাব রয়েছে।
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
মুষ্টিমেয় জোর ইউটিলিটি ক্লাসের সাথে রঙের মাধ্যমে অর্থ প্রকাশ করুন। এগুলি লিঙ্কগুলিতেও প্রয়োগ করা যেতে পারে এবং আমাদের ডিফল্ট লিঙ্ক শৈলীগুলির মতোই হোভারে অন্ধকার হয়ে যাবে।
Fusce dapibus, telus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada Magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
কখনও কখনও অন্য নির্বাচকের নির্দিষ্টতার কারণে জোর ক্লাস প্রয়োগ করা যায় না। বেশিরভাগ ক্ষেত্রে, একটি পর্যাপ্ত সমাধান হল আপনার পাঠ্যকে <span>
ক্লাসের সাথে মোড়ানো।
অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকেই স্পষ্ট (প্রসঙ্গিক রঙগুলি কেবলমাত্র পাঠ্য/মার্কআপে বিদ্যমান অর্থকে শক্তিশালী করতে ব্যবহৃত হয়), বা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়, যেমন .sr-only
ক্লাসের সাথে অতিরিক্ত পাঠ্য লুকানো .
প্রাসঙ্গিক টেক্সট রঙের ক্লাসের মতো, যেকোন প্রাসঙ্গিক ক্লাসে সহজেই একটি উপাদানের পটভূমি সেট করুন। টেক্সট ক্লাসের মতোই অ্যাঙ্কর উপাদানগুলি হোভারে অন্ধকার হয়ে যাবে।
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada Magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
কখনও কখনও প্রাসঙ্গিক ব্যাকগ্রাউন্ড ক্লাস অন্য নির্বাচকের নির্দিষ্টতার কারণে প্রয়োগ করা যায় না। কিছু ক্ষেত্রে, একটি পর্যাপ্ত সমাধান হল আপনার উপাদানের বিষয়বস্তু <div>
ক্লাসের সাথে মোড়ানো।
প্রাসঙ্গিক রঙের মতো , নিশ্চিত করুন যে রঙের মাধ্যমে যে কোনো অর্থ প্রকাশ করা হয়েছে এমন একটি বিন্যাসে যা সম্পূর্ণরূপে উপস্থাপনামূলক নয়।
মডেল এবং সতর্কতার মত বিষয়বস্তু খারিজ করার জন্য জেনেরিক ক্লোজ আইকন ব্যবহার করুন।
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</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
। একটি mixin এবং ক্লাস হিসাবে উপলব্ধ.
<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 সাফ করুন । নিকোলাস গ্যালাঘের দ্বারা জনপ্রিয় মাইক্রো ক্লিয়ারফিক্স ব্যবহার করে। এছাড়াও একটি mixin হিসাবে ব্যবহার করা যেতে পারে..clearfix
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
একটি উপাদানকে দেখানো বা লুকিয়ে রাখতে বাধ্য করুন ( স্ক্রিন রিডার সহ ) .show
এবং .hidden
ক্লাস ব্যবহার করে। এই ক্লাসগুলি দ্রুত ফ্লোটের!important
মতো নির্দিষ্টতার দ্বন্দ্ব এড়াতে ব্যবহার করে । এগুলি শুধুমাত্র ব্লক লেভেল টগলিংয়ের জন্য উপলব্ধ৷ এগুলি মিক্সিন হিসাবেও ব্যবহার করা যেতে পারে।
.hide
উপলব্ধ, কিন্তু এটি সর্বদা স্ক্রীন পাঠকদের প্রভাবিত করে না এবং v3.0.1 হিসাবে অবচয়িত। ব্যবহার করুন .hidden
বা .sr-only
পরিবর্তে.
উপরন্তু, .invisible
শুধুমাত্র একটি উপাদানের দৃশ্যমানতা টগল করতে ব্যবহার করা যেতে পারে, যার অর্থ এটি display
পরিবর্তন করা হয়নি এবং উপাদানটি এখনও নথির প্রবাহকে প্রভাবিত করতে পারে।
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
স্ক্রিন রিডার ছাড়া সব ডিভাইসে একটি উপাদান লুকান .sr-only
। যখন এটি ফোকাস করা হয় তখন উপাদানটিকে আবার দেখানোর জন্য এর .sr-only
সাথে একত্রিত করুন (যেমন একটি কীবোর্ড-কেবল ব্যবহারকারী দ্বারা)। অ্যাক্সেসযোগ্যতার সর্বোত্তম অনুশীলনগুলি.sr-only-focusable
অনুসরণ করার জন্য প্রয়োজনীয় । এছাড়াও mixins হিসাবে ব্যবহার করা যেতে পারে.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
.text-hide
একটি পটভূমি চিত্রের সাথে একটি উপাদানের পাঠ্য বিষয়বস্তু প্রতিস্থাপন করতে সাহায্য করতে ক্লাস বা মিক্সিন ব্যবহার করুন ।
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
দ্রুত মোবাইল-বান্ধব বিকাশের জন্য, মিডিয়া ক্যোয়ারির মাধ্যমে ডিভাইস দ্বারা সামগ্রী দেখানো এবং লুকানোর জন্য এই ইউটিলিটি ক্লাসগুলি ব্যবহার করুন৷ মুদ্রিত হলে সামগ্রী টগল করার জন্য ইউটিলিটি ক্লাসগুলিও অন্তর্ভুক্ত রয়েছে।
সীমিত ভিত্তিতে এগুলি ব্যবহার করার চেষ্টা করুন এবং একই সাইটের সম্পূর্ণ ভিন্ন সংস্করণ তৈরি করা এড়ান। পরিবর্তে, প্রতিটি ডিভাইসের উপস্থাপনা পরিপূরক করতে তাদের ব্যবহার করুন।
ভিউপোর্ট ব্রেকপয়েন্ট জুড়ে সামগ্রী টগল করার জন্য উপলব্ধ ক্লাসগুলির একটি একক বা সংমিশ্রণ ব্যবহার করুন।
অতিরিক্ত ছোট ডিভাইসফোন (<768px) | ছোট ডিভাইসট্যাবলেট (≥768px) | মাঝারি ডিভাইসডেস্কটপ (≥992px) | বড় ডিভাইসডেস্কটপ (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
দৃশ্যমান | গোপন | গোপন | গোপন |
.visible-sm-* |
গোপন | দৃশ্যমান | গোপন | গোপন |
.visible-md-* |
গোপন | গোপন | দৃশ্যমান | গোপন |
.visible-lg-* |
গোপন | গোপন | গোপন | দৃশ্যমান |
.hidden-xs |
গোপন | দৃশ্যমান | দৃশ্যমান | দৃশ্যমান |
.hidden-sm |
দৃশ্যমান | গোপন | দৃশ্যমান | দৃশ্যমান |
.hidden-md |
দৃশ্যমান | দৃশ্যমান | গোপন | দৃশ্যমান |
.hidden-lg |
দৃশ্যমান | দৃশ্যমান | দৃশ্যমান | গোপন |
v3.2.0 অনুযায়ী, .visible-*-*
প্রতিটি ব্রেকপয়েন্টের জন্য ক্লাস তিনটি ভিন্নতায় আসে, display
নিচে তালিকাভুক্ত প্রতিটি CSS প্রপার্টির মানের জন্য একটি।
ক্লাসের গ্রুপ | সিএসএসdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
সুতরাং, অতিরিক্ত ছোট ( xs
) স্ক্রিনের জন্য উদাহরণস্বরূপ, উপলব্ধ .visible-*-*
ক্লাসগুলি হল: .visible-xs-block
, .visible-xs-inline
, এবং .visible-xs-inline-block
.
ক্লাস .visible-xs
, .visible-sm
, .visible-md
, এবং .visible-lg
এছাড়াও বিদ্যমান, কিন্তু v3.2.0 হিসাবে অবচয়িত । টগল -সম্পর্কিত উপাদানগুলির .visible-*-block
জন্য অতিরিক্ত বিশেষ ক্ষেত্রে ছাড়া এগুলি প্রায় সমতুল্য ।<table>
রেগুলার রেসপন্সিভ ক্লাসের মতো, প্রিন্টের জন্য কন্টেন্ট টগল করার জন্য এগুলি ব্যবহার করুন।
ক্লাস | ব্রাউজার | ছাপা |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
গোপন | দৃশ্যমান |
.hidden-print |
দৃশ্যমান | গোপন |
শ্রেণীটিও .visible-print
বিদ্যমান কিন্তু v3.2.0 হিসাবে অবহেলিত। এটি প্রায় সমতুল্য .visible-print-block
, ব্যতীত অতিরিক্ত বিশেষ ক্ষেত্রে <table>
সম্পর্কিত উপাদানগুলির জন্য৷
প্রতিক্রিয়াশীল ইউটিলিটি ক্লাস পরীক্ষা করতে আপনার ব্রাউজারের আকার পরিবর্তন করুন বা বিভিন্ন ডিভাইসে লোড করুন।
সবুজ চেকমার্কগুলি নির্দেশ করে যে উপাদানটি আপনার বর্তমান ভিউপোর্টে দৃশ্যমান ।
এখানে, সবুজ চেকমার্কগুলিও নির্দেশ করে যে উপাদানটি আপনার বর্তমান ভিউপোর্টে লুকানো আছে।
বুটস্ট্র্যাপের সিএসএস লেস-এর উপর তৈরি করা হয়েছে, একটি প্রিপ্রসেসর যা অতিরিক্ত কার্যকারিতা যেমন ভেরিয়েবল, মিক্সিন এবং সিএসএস কম্পাইল করার জন্য ফাংশন। যারা আমাদের কম্পাইল করা CSS ফাইলের পরিবর্তে সোর্স লেস ফাইল ব্যবহার করতে চাইছেন তারা ফ্রেমওয়ার্ক জুড়ে আমাদের ব্যবহার করা অসংখ্য ভেরিয়েবল এবং মিক্সিন ব্যবহার করতে পারেন।
গ্রিড ভেরিয়েবল এবং মিক্সিনগুলি গ্রিড সিস্টেম বিভাগের মধ্যে কভার করা হয় ।
বুটস্ট্র্যাপ কমপক্ষে দুটি উপায়ে ব্যবহার করা যেতে পারে: কম্পাইল করা CSS বা সোর্স Less ফাইলের সাথে। কম ফাইল কম্পাইল করতে, প্রয়োজনীয় কমান্ড চালানোর জন্য কীভাবে আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেটআপ করবেন তার জন্য শুরু করা বিভাগটি দেখুন।
তৃতীয় পক্ষের সংকলন সরঞ্জামগুলি বুটস্ট্র্যাপের সাথে কাজ করতে পারে, তবে সেগুলি আমাদের মূল দল দ্বারা সমর্থিত নয়।
রঙ, ব্যবধান, বা ফন্ট স্ট্যাকের মতো সাধারণভাবে ব্যবহৃত মানগুলিকে কেন্দ্রীভূত এবং ভাগ করার উপায় হিসাবে পুরো প্রকল্প জুড়ে ভেরিয়েবলগুলি ব্যবহার করা হয়। সম্পূর্ণ ব্রেকডাউনের জন্য, অনুগ্রহ করে কাস্টমাইজার দেখুন ।
সহজে দুটি রঙের স্কিম ব্যবহার করুন: গ্রেস্কেল এবং শব্দার্থিক। গ্রেস্কেল রঙগুলি সাধারণত ব্যবহৃত কালো শেডগুলিতে দ্রুত অ্যাক্সেস প্রদান করে যখন শব্দার্থক অর্থপূর্ণ প্রাসঙ্গিক মানগুলির জন্য নির্ধারিত বিভিন্ন রঙ অন্তর্ভুক্ত করে।
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
এই রঙের ভেরিয়েবলগুলির যেকোনও ব্যবহার করুন বা আপনার প্রকল্পের জন্য আরও অর্থপূর্ণ ভেরিয়েবলগুলিতে সেগুলিকে পুনরায় বরাদ্দ করুন৷
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
আপনার সাইটের কঙ্কালের মূল উপাদানগুলিকে দ্রুত কাস্টমাইজ করার জন্য মুষ্টিমেয় ভেরিয়েবল।
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
শুধুমাত্র একটি মান সহ আপনার লিঙ্কগুলিকে সঠিক রঙ দিয়ে সহজেই স্টাইল করুন।
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
মনে রাখবেন যে @link-hover-color
একটি ফাংশন ব্যবহার করে, কম থেকে আরেকটি দুর্দান্ত টুল, স্বয়ংক্রিয়ভাবে সঠিক হোভার রঙ তৈরি করতে। আপনি darken
, lighten
, saturate
, এবং ব্যবহার করতে পারেন desaturate
।
কিছু দ্রুত ভেরিয়েবল সহ আপনার টাইপফেস, টেক্সট সাইজ, লিডিং এবং আরও অনেক কিছু সহজেই সেট করুন। বুটস্ট্র্যাপ সহজ টাইপোগ্রাফিক মিশ্রণ প্রদানের জন্য এগুলি ব্যবহার করে।
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
আপনার আইকনগুলির অবস্থান এবং ফাইলের নাম কাস্টমাইজ করার জন্য দুটি দ্রুত ভেরিয়েবল।
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
বুটস্ট্র্যাপ জুড়ে উপাদানগুলি সাধারণ মান সেট করার জন্য কিছু ডিফল্ট ভেরিয়েবল ব্যবহার করে। এখানে সবচেয়ে বেশি ব্যবহৃত হয়।
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
আপনার কম্পাইল করা CSS-এ সমস্ত প্রাসঙ্গিক বিক্রেতা উপসর্গ অন্তর্ভুক্ত করে একাধিক ব্রাউজারকে সহায়তা করার জন্য ভেন্ডর মিক্সিনগুলি হল মিক্সিন।
একটি একক মিক্সিন দিয়ে আপনার উপাদানের বক্স মডেল রিসেট করুন। প্রসঙ্গের জন্য, Mozilla থেকে এই সহায়ক নিবন্ধটি দেখুন ।
অটোপ্রেফিক্সার প্রবর্তনের সাথে v3.2.0 হিসাবে মিক্সিনকে অবচয় করা হয়েছে । পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
আজ সব আধুনিক ব্রাউজার নন-প্রিফিক্সড সমর্থন করেborder-radius
সম্পত্তি সমর্থন করে। যেমন, কোন .border-radius()
মিক্সিন নেই, তবে বুটস্ট্র্যাপে একটি বস্তুর একটি নির্দিষ্ট দিকের দুটি কোণ দ্রুত বৃত্তাকার করার জন্য শর্টকাট অন্তর্ভুক্ত থাকে।
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
যদি আপনার টার্গেট শ্রোতারা সর্বশেষ এবং সর্বশ্রেষ্ঠ ব্রাউজার এবং ডিভাইসগুলি ব্যবহার করে থাকেন তবে শুধুমাত্র ব্যবহার করতে ভুলবেন নাbox-shadow
নিজেরাই সম্পত্তিটি ব্যবহার করুন৷ আপনার যদি পুরানো অ্যান্ড্রয়েড (প্রি-ভি4) এবং iOS ডিভাইসগুলির (প্রি-আইওএস 5) জন্য সমর্থনের প্রয়োজন হয়, তাহলে প্রয়োজনীয় উপসর্গটি বেছে নিতে অবচয়িত মিক্সিন ব্যবহার করুন।-webkit
মিক্সিনটি v3.1.0 হিসাবে অবচয়িত হয়েছে, যেহেতু বুটস্ট্র্যাপ আনুষ্ঠানিকভাবে পুরানো প্ল্যাটফর্মগুলিকে সমর্থন করে না যা স্ট্যান্ডার্ড সম্পত্তি সমর্থন করে না। পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।
আপনার বাক্সের ছায়াগুলিতে রঙগুলি ব্যবহার করতে ভুলবেন না rgba()
যাতে তারা ব্যাকগ্রাউন্ডের সাথে যতটা সম্ভব নির্বিঘ্নে মিশে যায়।
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
নমনীয়তার জন্য একাধিক মিশ্রণ। একটির সাথে সমস্ত রূপান্তর তথ্য সেট করুন বা প্রয়োজন অনুসারে একটি পৃথক বিলম্ব এবং সময়কাল নির্দিষ্ট করুন।
অটোপ্রেফিক্সার প্রবর্তনের সাথে v3.2.0 হিসাবে মিক্সিনগুলিকে অবমূল্যায়ন করা হয়েছে । পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
ঘোরান, স্কেল, অনুবাদ (সরানো), বা কোনো বস্তু তির্যক.
অটোপ্রেফিক্সার প্রবর্তনের সাথে v3.2.0 হিসাবে মিক্সিনগুলিকে অবমূল্যায়ন করা হয়েছে । পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।
.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 এর সমস্ত অ্যানিমেশন বৈশিষ্ট্য ব্যবহার করার জন্য একটি একক মিশ্রণ এবং পৃথক বৈশিষ্ট্যের জন্য অন্যান্য মিশ্রণ।
অটোপ্রেফিক্সার প্রবর্তনের সাথে v3.2.0 হিসাবে মিক্সিনগুলিকে অবমূল্যায়ন করা হয়েছে । পিছনের-সামঞ্জস্যতা রক্ষা করার জন্য, বুটস্ট্র্যাপ বুটস্ট্র্যাপ v4 পর্যন্ত অভ্যন্তরীণভাবে মিক্সিন ব্যবহার করতে থাকবে।
.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;
}
সমস্ত ব্রাউজারগুলির জন্য অস্বচ্ছতা সেট করুন এবং filter
IE8 এর জন্য একটি ফলব্যাক প্রদান করুন৷
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
প্রতিটি ক্ষেত্রের মধ্যে ফর্ম নিয়ন্ত্রণের জন্য প্রসঙ্গ প্রদান করুন।
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
একটি একক উপাদানের মধ্যে CSS এর মাধ্যমে কলাম তৈরি করুন।
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
যেকোনো দুটি রঙকে সহজেই একটি পটভূমি গ্রেডিয়েন্টে পরিণত করুন। আরও উন্নত হন এবং একটি দিকনির্দেশ সেট করুন, তিনটি রঙ ব্যবহার করুন বা একটি রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করুন৷ একটি একক মিশ্রণের সাথে আপনি আপনার প্রয়োজনীয় সমস্ত প্রিফিক্সড সিনট্যাক্স পাবেন।
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
আপনি একটি আদর্শ দুই-রঙের, রৈখিক গ্রেডিয়েন্টের কোণও নির্দিষ্ট করতে পারেন:
#gradient > .directional(#333; #000; 45deg);
আপনার যদি নাপিত-স্ট্রাইপ স্টাইলের গ্রেডিয়েন্টের প্রয়োজন হয়, তবে এটিও সহজ। শুধু একটি একক রঙ নির্দিষ্ট করুন এবং আমরা একটি স্বচ্ছ সাদা স্ট্রাইপ ওভারলে করব।
#gradient > .striped(#333; 45deg);
পূর্বে উপরে এবং পরিবর্তে তিনটি রং ব্যবহার করুন. প্রথম রঙ, দ্বিতীয় রঙ, দ্বিতীয় রঙের রঙ স্টপ (25% এর মতো একটি শতাংশ মান), এবং এই মিশ্রণগুলির সাথে তৃতীয় রঙ সেট করুন:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
মাথা আপ! আপনার যদি কখনও গ্রেডিয়েন্ট মুছে ফেলার প্রয়োজন হয়, filter
আপনার যোগ করা কোনো IE-নির্দিষ্ট অপসারণ করতে ভুলবেন না। .reset-filter()
আপনি পাশাপাশি মিক্সিন ব্যবহার করে এটি করতে পারেন background-image: none;
।
ইউটিলিটি মিক্সিন হল মিক্সিন যা একটি নির্দিষ্ট লক্ষ্য বা কাজ অর্জনের জন্য অন্যথায় সম্পর্কহীন CSS বৈশিষ্ট্যগুলিকে একত্রিত করে।
class="clearfix"
কোন উপাদান যোগ করতে ভুলবেন না এবং পরিবর্তে উপযুক্ত যেখানে মিক্সিন যোগ করুন .clearfix()
। Nicolas Gallagher থেকে মাইক্রো ক্লিয়ারফিক্স ব্যবহার করে ।
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
যেকোন উপাদানকে তার পিতামাতার মধ্যে দ্রুত কেন্দ্রীভূত করুন। প্রয়োজন width
বা max-width
সেট করা.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
একটি বস্তুর মাত্রা আরো সহজে নির্দিষ্ট করুন।
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
যেকোনো টেক্সটেরিয়া বা অন্য কোনো উপাদানের জন্য রিসাইজ বিকল্পগুলি সহজেই কনফিগার করুন। সাধারণ ব্রাউজার আচরণে ডিফল্ট ( both
)
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
একটি একক মিক্সিন সহ একটি উপবৃত্ত সহ পাঠ্যকে সহজেই ছেঁটে ফেলুন৷ উপাদান হতে block
বা inline-block
স্তর প্রয়োজন.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
দুটি চিত্র পাথ এবং @1x চিত্রের মাত্রা নির্দিষ্ট করুন এবং বুটস্ট্র্যাপ একটি @2x মিডিয়া ক্যোয়ারী প্রদান করবে। আপনার পরিবেশন করার জন্য অনেকগুলি ছবি থাকলে, একটি একক মিডিয়া ক্যোয়ারীতে ম্যানুয়ালি আপনার রেটিনা ইমেজ CSS লেখার কথা বিবেচনা করুন।
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
যদিও বুটস্ট্র্যাপ Less-এ নির্মিত, এটিতে একটি অফিসিয়াল Sass পোর্টও রয়েছে । আমরা এটি একটি পৃথক GitHub সংগ্রহস্থলে বজায় রাখি এবং একটি রূপান্তর স্ক্রিপ্টের সাথে আপডেটগুলি পরিচালনা করি।
যেহেতু সাস পোর্টের একটি পৃথক রেপো রয়েছে এবং এটি কিছুটা ভিন্ন দর্শকদের পরিবেশন করে, তাই প্রকল্পের বিষয়বস্তু মূল বুটস্ট্র্যাপ প্রকল্প থেকে অনেকটাই আলাদা। এটি নিশ্চিত করে যে Sass পোর্ট যতটা সম্ভব Sass-ভিত্তিক সিস্টেমের সাথে সামঞ্জস্যপূর্ণ।
পথ | বর্ণনা |
---|---|
lib/ |
রুবি জেম কোড (সাস কনফিগারেশন, রেল এবং কম্পাস ইন্টিগ্রেশন) |
tasks/ |
রূপান্তরকারী স্ক্রিপ্ট (আপস্ট্রিম কম থেকে Sass এ পরিণত করা) |
test/ |
সংকলন পরীক্ষা |
templates/ |
কম্পাস প্যাকেজ ম্যানিফেস্ট |
vendor/assets/ |
Sass, JavaScript, এবং ফন্ট ফাইল |
Rakefile |
অভ্যন্তরীণ কাজ, যেমন রেক এবং রূপান্তর |
এই ফাইলগুলিকে কার্যকর দেখতে Sass পোর্টের GitHub সংগ্রহস্থলে যান।
Sass এর জন্য বুটস্ট্র্যাপ কিভাবে ইন্সটল এবং ব্যবহার করবেন সে সম্পর্কে তথ্যের জন্য, গিটহাব রিপোজিটরি রিডমি -এর সাথে পরামর্শ করুন । এটি সবচেয়ে আপ টু ডেট উত্স এবং এতে রেল, কম্পাস এবং স্ট্যান্ডার্ড Sass প্রকল্পগুলির সাথে ব্যবহারের জন্য তথ্য রয়েছে৷