চি এছ এছ
গোলকীয় CSS সংহতিসমূহ, সম্প্ৰসাৰণযোগ্য শ্ৰেণীসমূহৰ সৈতে শৈলী আৰু উন্নত কৰা মৌলিক HTML উপাদানসমূহ, আৰু এটা উন্নত গ্ৰীড ব্যৱস্থাপ্ৰণালী।
গোলকীয় CSS সংহতিসমূহ, সম্প্ৰসাৰণযোগ্য শ্ৰেণীসমূহৰ সৈতে শৈলী আৰু উন্নত কৰা মৌলিক HTML উপাদানসমূহ, আৰু এটা উন্নত গ্ৰীড ব্যৱস্থাপ্ৰণালী।
Bootstrap ৰ আন্তঃগাঁথনিৰ মূল টুকুৰাসমূহৰ ওপৰত lowdown পাওক, উন্নত, দ্ৰুত, শক্তিশালী ৱেব বিকাশৰ বাবে আমাৰ পদ্ধতি অন্তৰ্ভুক্ত কৰি।
বুটষ্ট্ৰেপে কিছুমান 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 ব্যৱহাৰ কৰো, 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-width
CSSক এটা সংকীৰ্ণ ডিভাইচসমূহৰ এটা গোটলৈ সীমিত কৰিবলৈ 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>
যদি এটা শাৰীৰ ভিতৰত ১২ টাতকৈ অধিক স্তম্ভ ৰখা হয়, অতিৰিক্ত স্তম্ভৰ প্ৰতিটো গোটে, এটা একক হিচাপে, এটা নতুন শাৰীত ৰেপ কৰিব।
<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
আৰু .col-sm-*
এটা বৰ্ত্তমানৰ স্তম্ভৰ ভিতৰত স্তম্ভসমূহৰ গোট যোগ কৰক .col-sm-*
। নেষ্টেড শাৰীসমূহে স্তম্ভসমূহৰ এটা গোট অন্তৰ্ভুক্ত কৰিব লাগে যি 12 বা তাতকৈ কম যোগ কৰে (আপুনি সকলো 12 উপলব্ধ স্তম্ভ ব্যৱহাৰ কৰাৰ প্ৰয়োজন নাই)।
<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 : @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>
।
<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.
<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 + খ
<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-child
CSS নিৰ্বাচকৰ যোগেদি শৈলী কৰা হয়, যি 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-responsive
768px বহলতকৈ ডাঙৰ যিকোনো বস্তুত চালে এই টেবুলসমূহত কোনো পাৰ্থক্য দেখা নাপাব।
প্ৰতিক্ৰিয়াশীল টেবুলসমূহে ব্যৱহাৰ কৰে 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-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>
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 কিবৰ্ড ব্যৱহাৰকাৰীসকলক এই সংযোগসমূহ ফ'কাচ বা সক্ৰিয় কৰিব পৰাত বাধা দিব নোৱাৰে। গতিকে সুৰক্ষিত হ’বলৈ, এনে সংযোগসমূহ নিষ্ক্ৰিয় কৰিবলৈ কাষ্টম জাভাস্ক্রিপ্ট ব্যৱহাৰ কৰক।
disabled
Bootstrap এ এই শৈলীসমূহ সকলো ব্ৰাউজাৰত প্ৰয়োগ কৰিব যদিও, 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
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">×</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>
আপোনাৰ ব্ৰাউজাৰৰ আকাৰ সলনি কৰক বা প্ৰতিক্ৰিয়াশীল সঁজুলি শ্ৰেণীসমূহ পৰীক্ষা কৰিবলে বিভিন্ন ডিভাইচসমূহত লোড কৰক।
সেউজীয়া পৰীক্ষাচিহ্নসমূহে আপোনাৰ বৰ্তমান দৰ্শনপৰ্টত উপাদান দৃশ্যমান হোৱাটো সূচায়।
ইয়াত, সেউজীয়া চেকমাৰ্কসমূহে আপোনাৰ বৰ্তমান দৰ্শনপৰ্টত উপাদানটো লুকুৱাই ৰখাটোও সূচায়।
বুটষ্ট্ৰেপৰ 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;
}
যিকোনো বস্তু ঘূৰাওক, স্কেল কৰক, অনুবাদ কৰক (চলন কৰক), বা তিৰ্যক কৰক।
মিক্সিনসমূহ v3.2.0 ৰ পৰা অবচিত কৰা হৈছে, Autoprefixer ৰ প্ৰৱৰ্তনৰ সৈতে। পিছলৈ-সুসংগততা সংৰক্ষণ কৰিবলে, Bootstrap এ Bootstrap 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 ৰ পৰা অবচিত কৰা হৈছে, Autoprefixer ৰ প্ৰৱৰ্তনৰ সৈতে। পিছলৈ-সুসংগততা সংৰক্ষণ কৰিবলে, Bootstrap এ Bootstrap 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 প্ৰতিমুৰ্তি মাত্ৰাসমূহ ধাৰ্য্য কৰক, আৰু 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 প্ৰকল্পসমূহৰ সৈতে ব্যৱহাৰৰ বাবে তথ্য অন্তৰ্ভুক্ত কৰা হৈছে।