নেভিগেচন, সতৰ্কবাণী, পপঅভাৰ, আৰু বহুতো প্ৰদান কৰিবলে ডজন পুনৰ ব্যৱহাৰযোগ্য উপাদান Bootstrap ত নিৰ্মিত কৰা হৈছে।
Rdio দ্বাৰা অনুপ্ৰাণিত আল্ট্ৰা সৰল আৰু নূন্যতম শৈলীৰ পৃষ্ঠাকৰণ, এপ আৰু সন্ধান ফলাফলৰ বাবে অতি উত্তম। ডাঙৰ ব্লকটো মিছ কৰাটো কঠিন, সহজে স্কেলেবল, আৰু ডাঙৰ ক্লিক এৰিয়া প্ৰদান কৰে।
লিংকসমূহ কাষ্টমাইজেবল আৰু সঠিক শ্ৰেণীৰ সৈতে কেইবাটাও পৰিস্থিতিত কাম কৰে। .disabled
ক্লিক কৰিব নোৱাৰা সংযোগসমূহৰ .active
বাবে আৰু বৰ্তমান পৃষ্ঠাৰ বাবে।
পৃষ্ঠা সংযোগসমূহৰ প্ৰান্তিককৰণ সলনি কৰিবলে দুটা বৈকল্পিক শ্ৰেণীৰ যিকোনো এটা যোগ কৰক: .pagination-centered
আৰু .pagination-right
.
অবিকল্পিত পৃষ্ঠাকৰণ উপাদান নমনীয় আৰু বহুতো ভিন্নতাত কাম কৰে।
এটা <div>
, পৃষ্ঠাকৰণ মাত্ৰ এটা <ul>
.
- <div class = "পৃষ্ঠাকৰণ" >
- <ul>
- <li><a href = "#" > পূৰ্বৰ </a></li>
- <li শ্ৰেণী = "সক্ৰিয়" >
- <a href = "#" > ১ </a>
- </li>
- <li><a href = "#" > ২ </a></li>
- <li><a href = "#" > ৩ </a></li>
- <li><a href = "#" > ৪ </a></li>
- <li><a href = "#" > পৰৱৰ্তী </a></li>
- </ul>
- </div>
পেজাৰ উপাদান হৈছে পোহৰ মাৰ্কআপ আৰু আনকি লঘু শৈলীসমূহৰ সৈতে সৰল পৃষ্ঠাকৰণ প্ৰণয়নসমূহৰ বাবে সংযোগসমূহৰ এটা গোট। ব্লগ বা আলোচনীৰ দৰে সৰল চাইটৰ বাবে ই অতি উত্তম।
অবিকল্পিতভাৱে, পেজাৰে সংযোগসমূহক কেন্দ্ৰ কৰে।
- <ul শ্ৰেণী = "পেজাৰ" >
- <li>
- <a href = "#" > পূৰ্বৱৰ্তী </a>
- </li>
- <li>
- <a href = "#" > পৰৱৰ্তী </a>
- </li>
- </ul>
লেবেলসমূহ | মাৰ্কআপ |
---|---|
ডিফল্ট | <span class="label">Default</span> |
সফলতা | <span class="label label-success">Success</span> |
সতৰ্কবাণী | <span class="label label-warning">Warning</span> |
গুৰুত্বপূৰ্ণ | <span class="label label-important">Important</span> |
তথ্য | <span class="label label-info">Info</span> |
বুটষ্ট্ৰেপে আপোনাৰ চাইটত বিষয়বস্তু প্ৰদৰ্শন কৰিবলে এটা নায়ক একক নামৰ এটা লঘু, নমনীয় উপাদান প্ৰদান কৰে। মাৰ্কেটিং আৰু কন্টেন্ট-হেভি চাইটত ই ভাল কাম কৰে।
আপোনাৰ বিষয়বস্তু এটা লাইকত ৰেপ কৰক div
যাতে:
- <div class = "হিৰো-ইউনিট" >
- <h1> শিৰোনাম </h1>
- <p> টেগলাইন </p>
- <p>
- <a class = "btn btn-প্ৰাথমিক btn-বৃহৎ" >
- অধিক জানক
- </a>
- </p>
- </div>
এইটো এটা সহজ নায়ক ইউনিট, বৈশিষ্ট্যযুক্ত বিষয়বস্তু বা তথ্যৰ প্ৰতি অতিৰিক্ত মনোযোগ আকৰ্ষণৰ বাবে এটা সহজ জাম্বট্ৰন-শৈলীৰ উপাদান।
h1
এটা পৃষ্ঠাত বিষয়বস্তুৰ অংশসমূহক উপযুক্তভাৱে স্পেচ আউট আৰু ছেগমেণ্ট কৰিবলৈ এটা সৰল শ্বেল । ই h1
's অবিকল্পিত small
, উপাদানৰ লগতে বেছিভাগ অন্য উপাদান (অতিৰিক্ত শৈলীৰ সৈতে) ব্যৱহাৰ কৰিব পাৰে।
- <div class = "পৃষ্ঠা-হেডাৰ" >
- <h1> উদাহৰণ পৃষ্ঠা হেডাৰ </h1>
- </div>
অবিকল্পিতভাৱে, Bootstrap ৰ থাম্বনেইলসমূহ নূন্যতম প্ৰয়োজনীয় মাৰ্কআপৰ সৈতে সংযুক্ত প্ৰতিমুৰ্তিসমূহ প্ৰদৰ্শন কৰিবলে ডিজাইন কৰা হৈছে।
অলপ অতিৰিক্ত মাৰ্কআপৰ সৈতে, যিকোনো ধৰণৰ HTML বিষয়বস্তু যেনে শিৰোনাম, অনুচ্ছেদ, বা বুটাম থাম্বনেইলত যোগ কৰা সম্ভৱ।
থাম্বনেইলসমূহ (পূৰ্বতে .media-grid
v1.4 লৈকে) ফটো বা ভিডিঅ'ৰ গ্ৰীড, ছবি সন্ধান ফলাফল, খুচুৰা সামগ্ৰী, পৰ্টফলিঅ', আৰু বহুতোৰ বাবে অতি উত্তম। সেইবোৰ লিংক বা ষ্টেটিক কন্টেন্ট হ’ব পাৰে।
থাম্বনেইল মাৰ্কআপ সহজ— ul
যিকোনো সংখ্যক li
উপাদানৰ সৈতে এটাই প্ৰয়োজনীয় সকলো। ই অতি নমনীয়, আপোনাৰ বিষয়বস্তু ৰেপ কৰিবলৈ মাত্ৰ অলপ বেছি মাৰ্কআপৰ সৈতে যিকোনো ধৰণৰ বিষয়বস্তুৰ অনুমতি দিয়ে।
শেষত, থাম্বনেইলসমূহ উপাদানে বৰ্ত্তমানৰ গ্ৰীড চিস্টেম শ্ৰেণীসমূহ ব্যৱহাৰ কৰে—যেনে .span2
বা .span3
—থাম্বনেইল মাত্ৰাসমূহ নিয়ন্ত্ৰণৰ বাবে।
পূৰ্বে উল্লেখ কৰা অনুসৰি থাম্বনেইলৰ বাবে প্ৰয়োজনীয় মাৰ্কআপ লঘু আৰু পোনপটীয়া। ইয়াত সংযুক্ত ছবিসমূহৰ বাবে অবিকল্পিত প্ৰতিষ্ঠা চাওক :
- <ul class = "থাম্বনেইলসমূহ" >
- <li শ্ৰেণী = "span3" >
- <a href = "#" শ্ৰেণী = "থাম্বনেইল" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
থাম্বনেইলত কাষ্টম HTML বিষয়বস্তুৰ বাবে, মাৰ্কআপ অলপ সলনি হয়। <a>
যিকোনো ঠাইতে ব্লক স্তৰৰ বিষয়বস্তুৰ অনুমতি দিবলৈ, আমি এটা পছন্দৰ বাবে শ্বেপ কৰোঁ <div>
:
- <ul class = "থাম্বনেইলসমূহ" >
- <li শ্ৰেণী = "span3" >
- <div class = "থাম্বনেইল" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> থাম্বনেইল লেবেল </h5>
- <p> থাম্বনেইল কেপচন ইয়াতেই... </p>
- </div>
- </li>
- ...
- </ul>
Bootstrap 2 ৰ সৈতে, আমি ভিত্তি শ্ৰেণী সৰল কৰিছো: .alert
ৰ পৰিবৰ্তে .alert-message
। আমি নূন্যতম প্ৰয়োজনীয় মাৰ্কআপো হ্ৰাস কৰিছো— <p>
অবিকল্পিতভাৱে নাই প্ৰয়োজনীয়, কেৱল বাহিৰৰ <div>
।
কম ক'ডৰ সৈতে এটা অধিক টেকসই উপাদানৰ বাবে, আমি ব্লক সতৰ্কবাণী, অধিক পেডিং আৰু সাধাৰণতে অধিক লিখনীৰ সৈতে অহা বাৰ্তাসমূহৰ বাবে পাৰ্থক্যমূলক ৰূপ আঁতৰাই পেলাইছো। ক্লাছটোও সলনি হৈছে .alert-block
৷
বুটষ্ট্ৰেপ এটা ডাঙৰ jQuery প্লাগইনৰ সৈতে আহে যি সতৰ্কবাৰ্তাসমূহ সমৰ্থন কৰে, সিহতক বাতিল কৰাটো দ্ৰুত আৰু সহজ কৰি তোলে ।
আপোনাৰ বাৰ্তা আৰু এটা বৈকল্পিক বন্ধ আইকন সৰল শ্ৰেণীৰ সৈতে এটা div ত ৰেপ কৰক।
- <div class = "সতৰ্কবাণী" >
- <a class = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" > × </a>
- <strong> সতৰ্কবাণী! </strong> বেষ্ট চেক ইয়ো চেল্ফ, আপুনি বেছি ভাল দেখা নাই।
- </div>
দুটা বৈকল্পিক শ্ৰেণীৰ সৈতে প্ৰামাণিক সতৰ্কবাণী বাৰ্তা সহজে সম্প্ৰসাৰিত কৰক: .alert-block
অধিক পেডিং আৰু লিখনী নিয়ন্ত্ৰণসমূহৰ .alert-heading
বাবে আৰু এটা মিল থকা শিৰোনামৰ বাবে।
Best check yo self, আপুনি বেছি ভাল দেখা নাই। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট।
- <div class = "সতৰ্কবাণী-ব্লক" >
- <a class = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" > × </a>
- <h4 class = "সতৰ্কতা-শিৰোনামা" > সতৰ্কবাণী! </h4>
- Best check yo self, আপনি নহয়...
- </div>
- <div class = "সতৰ্কবাণী-ত্ৰুটি" >
- ...
- </div>
- <div class = "সতৰ্কবাণী-সফলতা" >
- ...
- </div>
- <div class = "সতৰ্কবাণী-তথ্য" >
- ...
- </div>
এটা উলম্ব গ্ৰেডিয়েন্টৰ সৈতে অবিকল্পিত অগ্ৰগতি বাৰ।
- <div class = "অগ্ৰগতি" >
- <div শ্ৰেণী = "বাৰ"
- style = " প্ৰস্থ : ৬০ %; " ></div>
- </div>
এটা ষ্ট্ৰাইপড ইফেক্ট সৃষ্টি কৰিবলৈ এটা গ্ৰেডিয়েণ্ট ব্যৱহাৰ কৰে।
- <div class = "অগ্ৰগতি-তথ্য।"
- প্ৰগ্ৰেছ-ষ্ট্ৰাইপড" >
- <div শ্ৰেণী = "বাৰ"
- style = " প্ৰস্থ : ২০ %; " ></div>
- </div>
ডাঠ উদাহৰণটো লৈ ইয়াক সজীৱ কৰি তোলে।
- <div class = "অগ্ৰগতি-বিপদ।"
- প্ৰগ্ৰেছ-ষ্ট্ৰাইপড সক্ৰিয়" >
- <div শ্ৰেণী = "বাৰ"
- style = " প্ৰস্থ : ৪০ %; " ></div>
- </div>
প্ৰগ্ৰেছ বাৰে একে ধৰণৰ ষ্টাইলিঙৰ বাবে বুটাম আৰু সতৰ্কবাণীৰ দৰে একে শ্ৰেণীৰ কিছুমান ব্যৱহাৰ কৰে।
.progress-info
.progress-success
.progress-danger
বৈকল্পিকভাৱে, আপুনি LESS নথিপত্ৰসমূহ স্বনিৰ্বাচিত কৰিব পাৰে আৰু আপোনাৰ নিজৰ ৰং আৰু আকাৰসমূহ ৰোল কৰিব পাৰে।
প্ৰগ্ৰেছ বাৰসমূহে CSS3 পৰিবৰ্তনসমূহ ব্যৱহাৰ কৰে, গতিকে যদি আপুনি জাভাস্ক্রিপ্টৰ যোগেদি প্ৰস্থ পৰিবৰ্তনশীলভাৱে সামঞ্জস্য কৰে, ই মসৃণভাৱে আকাৰ সলনি কৰিব।
যদি আপুনি .active
শ্ৰেণীটো ব্যৱহাৰ কৰে, আপোনাৰ .progress-striped
অগ্ৰগতি বাৰসমূহে বাওঁফালৰ পৰা সোঁফাললৈ ষ্ট্ৰাইপসমূহক এনিমেট কৰিব।
প্ৰগ্ৰেছ বাৰসমূহে সিহতৰ সকলো প্ৰভাৱ লাভ কৰিবলে CSS3 গ্ৰেডিয়েন্টসমূহ, পৰিৱৰ্তনসমূহ, আৰু এনিমেচনসমূহ ব্যৱহাৰ কৰে। এই বৈশিষ্ট্যসমূহ IE7-8 বা Firefox ৰ পুৰণি সংস্কৰণসমূহত সমৰ্থিত নহয়।
Opera এ এই সময়ত এনিমেচন সমৰ্থন নকৰে।
এটা উপাদানৰ ওপৰত এটা সৰল প্ৰভাৱ হিচাপে কুঁৱাটো ব্যৱহাৰ কৰি ইয়াক এটা ইনছেট প্ৰভাৱ দিব লাগে।
- <div class = "ভাল" >
- ...
- </div>
মডাল আৰু সতৰ্কবাণীৰ দৰে বিষয়বস্তু বাতিল কৰাৰ বাবে সাধাৰণ বন্ধ আইকন ব্যৱহাৰ কৰক।
- <a class = "বন্ধ কৰক" > × </a>