উপাদানসমূহ

নেভিগেচন, সতৰ্কবাণী, পপঅভাৰ, আৰু বহুতো প্ৰদান কৰিবলে ডজন পুনৰ ব্যৱহাৰযোগ্য উপাদান Bootstrap ত নিৰ্মিত কৰা হৈছে।

বুটাম গোটসমূহ

একাধিক বুটামসমূহক এটা সংমিশ্ৰিত উপাদান হিচাপে একেলগে যোগ কৰিবলে বুটাম গোটসমূহ ব্যৱহাৰ কৰক। <a>বা <button>উপাদানৰ এটা শৃংখলাৰে সেইবোৰ নিৰ্মাণ কৰক ।

উত্তম পদ্ধতি

বুটাম গোট আৰু সঁজুলিদণ্ডিকা ব্যৱহাৰ কৰাৰ বাবে আমি নিম্নলিখিত নিৰ্দেশনাসমূহৰ পৰামৰ্শ দিওঁ:

  • সদায় একেটা উপাদান এটা বুটাম গোটত ব্যৱহাৰ কৰক, <a>বা <button>.
  • একেটা বুটাম গ্ৰুপত বিভিন্ন ৰঙৰ বুটাম মিহলি নকৰিব।
  • লিখনীৰ অতিৰিক্ত বা তাৰ পৰিবৰ্তে আইকনসমূহ ব্যৱহাৰ কৰক, কিন্তু য'ত উপযুক্ত তাত alt আৰু শিৰোনাম লিখনী অন্তৰ্ভুক্ত কৰাটো নিশ্চিত কৰক।

ড্ৰপডাউনসমূহৰ সৈতে সম্পৰ্কীয় বুটাম গোটসমূহক (তলত চাওক) পৃথকে কল আউট কৰিব লাগে আৰু সদায় উদ্দেশ্যপ্ৰণোদিত আচৰণ সূচনা কৰিবলে এটা ড্ৰপডাউন কেৰেট অন্তৰ্ভুক্ত কৰিব লাগে।

অবিকল্পিত উদাহৰণ

ইয়াত HTML এ এংকৰ টেগ বুটামসমূহৰ সৈতে নিৰ্মিত এটা প্ৰামাণিক বুটাম গোট কেনেকৈ বিচাৰে:

  1. <div শ্ৰেণী = "btn-গোট" >
  2. <বুটাম শ্ৰেণী = "btn" > 1 </button>
  3. <বুটাম শ্ৰেণী = "btn" > 2 </button>
  4. <বুটাম শ্ৰেণী = "btn" > 3 </button>
  5. </div>

সঁজুলিদণ্ডিকাৰ উদাহৰণ

অধিক জটিল উপাদানসমূহৰ বাবে <div class="btn-group">এটাত ৰ ছেটসমূহ একত্ৰিত কৰক ।<div class="btn-toolbar">

  1. <div class = "btn-সঁজুলিবাৰ" >
  2. <div শ্ৰেণী = "btn-গোট" >
  3. ...
  4. </div>
  5. </div>

চেকবক্স আৰু ৰেডিঅ'ৰ সোৱাদ

বুটাম গোটসমূহে ৰেডিঅ' হিচাপেও কাম কৰিব পাৰে, য'ত কেৱল এটা বুটাম সক্ৰিয় হ'ব পাৰে, বা চেকবাক্স, য'ত যিকোনো সংখ্যক বুটাম সক্ৰিয় হ'ব পাৰে। তাৰ বাবে জাভাস্ক্রিপ্ট নথিপত্ৰসমূহ চাওক ।

জাভাস্ক্রিপ্ট পান »

বুটাম গোটসমূহত ড্ৰপডাউনসমূহ

মুৰ ডাঙি! ড্ৰপডাউনৰ সৈতে বুটামসমূহক সঠিক ৰেণ্ডাৰৰ বাবে .btn-groupএটাৰ ভিতৰত পৃথকে পৃথকে নিজৰ মাজত ৰেপ কৰিব লাগিব ।.btn-toolbar

বুটাম ড্ৰপডাউন

আভাস আৰু উদাহৰণ

এটা ড্ৰপডাউন মেনু ট্ৰিগাৰ কৰিবলে যিকোনো বুটাম ব্যৱহাৰ কৰক ইয়াক এটাৰ ভিতৰত ৰাখি .btn-groupআৰু সঠিক মেনু মাৰ্কআপ প্ৰদান কৰি।

উদাহৰণ মাৰ্কআপ

এটা বুটাম গোটৰ দৰেই, আমাৰ মাৰ্কআপে নিয়মীয়া বুটাম মাৰ্কআপ ব্যৱহাৰ কৰে, কিন্তু শৈলী পৰিশোধন কৰিবলে আৰু Bootstrap ৰ ড্ৰপডাউন jQuery প্লাগইন সমৰ্থন কৰিবলে মুষ্টিমেয় সংযোজনৰ সৈতে।

  1. <div শ্ৰেণী = "btn-গোট" >
  2. <a class = "btn ড্ৰপডাউন-টগল" data-toggle = "ড্ৰপডাউন" href = "#" >
  3. কাৰ্য কৰা
  4. <span class = "কেৰেট" </span>
  5. </a>
  6. <ul class = "ড্ৰপডাউন-মেনু" >
  7. <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  8. </ul>
  9. </div>

সকলো বুটামৰ আকাৰৰ সৈতে কাম কৰে

বুটাম ড্ৰপডাউনে যিকোনো আকাৰত কাম কৰে। আপোনাৰ বুটামৰ আকাৰ .btn-large, .btn-small, বা .btn-mini.

জাভাস্ক্রিপ্টৰ প্ৰয়োজন

বুটাম ড্ৰপডাউনসমূহক কাৰ্য্য কৰিবলে বুটষ্ট্ৰেপ ড্ৰপডাউন প্লাগইনৰ প্ৰয়োজন ।

কিছুমান ক্ষেত্ৰত—মোবাইলৰ দৰে—ড্ৰপডাউন মেনুসমূহ ভিউপ’ৰ্টৰ বাহিৰত বিস্তৃত হ’ব। আপুনি প্ৰান্তিককৰণ হস্তচালিতভাৱে বা স্বনিৰ্বাচিত জাভাস্ক্রিপ্টৰ সৈতে সমাধান কৰিব লাগিব ।


বিভাজিত বুটাম ড্ৰপডাউনসমূহ

আভাস আৰু উদাহৰণ

বুটাম গ্ৰুপ ষ্টাইল আৰু মাৰ্কআপৰ ওপৰত নিৰ্মাণ কৰি আমি সহজেই এটা স্প্লিট বুটাম তৈয়াৰ কৰিব পাৰো। বিভক্ত বুটামসমূহে বাওঁফালে এটা প্ৰামাণিক কাৰ্য্য আৰু সোঁফালে এটা ড্ৰপডাউন টগল প্ৰসংগভিত্তিক সংযোগসমূহৰ সৈতে বৈশিষ্ট্য প্ৰদান কৰে।

আকাৰসমূহ

অতিৰিক্ত বুটাম শ্ৰেণীসমূহ ব্যৱহাৰ কৰক .btn-mini, .btn-small, বা .btn-largeআকাৰ নিৰ্ধাৰণৰ বাবে।

  1. <div শ্ৰেণী = "btn-গোট" >
  2. ...
  3. <ul class = "ড্ৰপডাউন-মেনু টানি-সোঁফালে" >
  4. <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  5. </ul>
  6. </div>

উদাহৰণ মাৰ্কআপ

আমি সাধাৰণ বুটাম ড্ৰপডাউনসমূহত এটা দ্বিতীয় বুটাম কাৰ্য্য প্ৰদান কৰিবলৈ সম্প্ৰসাৰণ কৰোঁ যি এটা পৃথক ড্ৰপডাউন ট্ৰিগাৰ হিচাপে কাম কৰে।

  1. <div শ্ৰেণী = "btn-গোট" >
  2. <button class = "btn" > কাৰ্য্য </button>
  3. <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >
  4. <span class = "কেৰেট" </span>
  5. </বুটাম>
  6. <ul class = "ড্ৰপডাউন-মেনু" >
  7. <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  8. </ul>
  9. </div>

ড্ৰপআপ মেনুসমূহ

ড্ৰপডাউন মেনুসমূহক তলৰ পৰা ওপৰলৈ টগল কৰিব পাৰি ৰ তাৎক্ষণিক অভিভাৱকত এটা শ্ৰেণী যোগ কৰি .dropdown-menu। ই ৰ দিশটো উলটিব .caretআৰু মেনুটো নিজেই পুনৰ স্থাপন কৰিব যাতে ওপৰৰ পৰা তললৈ যোৱাৰ পৰিৱৰ্তে তলৰ পৰা ওপৰলৈ যাব পাৰে।

  1. <div class = "btn-গোট ড্ৰপআপ" >
  2. <button class = "btn" > ড্ৰপআপ </button>
  3. <button class = "btn ড্ৰপডাউন-টগল" ডাটা-টগল = "ড্ৰপডাউন" >
  4. <span class = "কেৰেট" </span>
  5. </বুটাম>
  6. <ul class = "ড্ৰপডাউন-মেনু" >
  7. <!-- ড্ৰপডাউন মেনু সংযোগসমূহ -->
  8. </ul>
  9. </div>

মাল্টিকন-পৃষ্ঠা পৃষ্ঠাকৰণ

কেতিয়া ব্যৱহাৰ কৰিব লাগে

Rdio দ্বাৰা অনুপ্ৰাণিত আল্ট্ৰা সৰল আৰু নূন্যতম শৈলীৰ পৃষ্ঠাকৰণ, এপ আৰু সন্ধান ফলাফলৰ বাবে অতি উত্তম। ডাঙৰ ব্লকটো মিছ কৰাটো কঠিন, সহজে স্কেলেবল, আৰু ডাঙৰ ক্লিক এৰিয়া প্ৰদান কৰে।

ষ্টেটফুল পৃষ্ঠাৰ সংযোগ

লিংকসমূহ কাষ্টমাইজেবল আৰু সঠিক শ্ৰেণীৰ সৈতে কেইবাটাও পৰিস্থিতিত কাম কৰে। .disabledক্লিক কৰিব নোৱাৰা সংযোগসমূহৰ .activeবাবে আৰু বৰ্তমান পৃষ্ঠাৰ বাবে।

নমনীয় প্ৰান্তিককৰণ

পৃষ্ঠা সংযোগসমূহৰ প্ৰান্তিককৰণ সলনি কৰিবলে দুটা বৈকল্পিক শ্ৰেণীৰ যিকোনো এটা যোগ কৰক: .pagination-centeredআৰু .pagination-right.

উদাহৰণ

অবিকল্পিত পৃষ্ঠাকৰণ উপাদান নমনীয় আৰু বহুতো ভিন্নতাত কাম কৰে।

মাৰ্কআপ

এটা <div>, পৃষ্ঠাকৰণ মাত্ৰ এটা <ul>.

  1. <div class = "পৃষ্ঠাকৰণ" >
  2. <ul>
  3. <li><a href = "#" > পূৰ্বৰ </a></li>
  4. <li শ্ৰেণী = "সক্ৰিয়" >
  5. <a href = "#" > </a>
  6. </li>
  7. <li><a href = "#" > </a></li>
  8. <li><a href = "#" > </a></li>
  9. <li><a href = "#" > </a></li>
  10. <li><a href = "#" > পৰৱৰ্তী </a></li>
  11. </ul>
  12. </div>

Pager দ্ৰুত পূৰ্বৰ আৰু পৰৱৰ্তী লিংকৰ বাবে

পেজাৰৰ বিষয়ে

পেজাৰ উপাদান হৈছে পোহৰ মাৰ্কআপ আৰু আনকি লঘু শৈলীসমূহৰ সৈতে সৰল পৃষ্ঠাকৰণ প্ৰণয়নসমূহৰ বাবে সংযোগসমূহৰ এটা গোট। ব্লগ বা আলোচনীৰ দৰে সৰল চাইটৰ বাবে ই অতি উত্তম।

বৈকল্পিক নিষ্ক্ৰিয় অৱস্থা

পেজাৰ লিংকসমূহেও .disabledপৃষ্ঠাকৰণৰ পৰা সাধাৰণ শ্ৰেণীটো ব্যৱহাৰ কৰে।

অবিকল্পিত উদাহৰণ

অবিকল্পিতভাৱে, পেজাৰে সংযোগসমূহক কেন্দ্ৰ কৰে।

  1. <ul শ্ৰেণী = "পেজাৰ" >
  2. <li>
  3. <a href = "#" > পূৰ্বৱৰ্তী </a>
  4. </li>
  5. <li>
  6. <a href = "#" > পৰৱৰ্তী </a>
  7. </li>
  8. </ul>

প্ৰান্তিককৃত সংযোগসমূহ

বৈকল্পিকভাৱে, আপুনি প্ৰতিটো সংযোগক কাষলৈ প্ৰান্তিককৰণ কৰিব পাৰে:

  1. <ul শ্ৰেণী = "পেজাৰ" >
  2. <li class = "পূৰ্বৰ" >
  3. <a href = "#" > পুৰণি </a>
  4. </li>
  5. <li class = "পৰৱৰ্তী" >
  6. <a href = "#" > নতুন → </a>
  7. </li>
  8. </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>
ওলোটা <span class="label label-inverse">Inverse</span>

বিষয়ে

বেজসমূহ হৈছে কোনো ধৰণৰ সূচক বা গণনা প্ৰদৰ্শনৰ বাবে সৰু, সৰল উপাদান। ইয়াক সাধাৰণতে Mail.app ৰ দৰে ইমেইল ক্লায়েণ্টত বা পুছ নোটিফিকেচনৰ বাবে মোবাইল এপত পোৱা যায়।

উপলব্ধ শ্ৰেণীসমূহ

নাম উদাহৰণ মাৰ্কআপ
ডিফল্ট <span class="badge">1</span>
সফলতা <span class="badge badge-success">2</span>
সতৰ্কবাণী <span class="badge badge-warning">4</span>
গুৰুত্বপূৰ্ণ <span class="badge badge-important">6</span>
তথ্য <span class="badge badge-info">8</span>
ওলোটা ১০ <span class="badge badge-inverse">10</span>

নায়ক ইউনিট

বুটষ্ট্ৰেপে আপোনাৰ চাইটত বিষয়বস্তু প্ৰদৰ্শন কৰিবলে এটা নায়ক একক নামৰ এটা লঘু, নমনীয় উপাদান প্ৰদান কৰে। মাৰ্কেটিং আৰু কন্টেন্ট-হেভি চাইটত ই ভাল কাম কৰে।

মাৰ্কআপ

আপোনাৰ বিষয়বস্তু এটা লাইকত ৰেপ কৰক divযাতে:

  1. <div class = "হিৰো-ইউনিট" >
  2. <h1> শিৰোনাম </h1>
  3. <p> টেগলাইন </p>
  4. <p>
  5. <a class = "btn btn-প্ৰাথমিক btn-বৃহৎ" >
  6. অধিক জানক
  7. </a>
  8. </p>
  9. </div>

নমস্কাৰ, পৃথিৱী!

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

অধিক জানক

পৃষ্ঠাৰ হেডাৰ

h1এটা পৃষ্ঠাত বিষয়বস্তুৰ অংশসমূহ উপযুক্তভাৱে স্পেচ আউট আৰু ছেগমেণ্ট কৰিবলৈ এটাৰ বাবে এটা সৰল শ্বেল । ই h1's অবিকল্পিত small, উপাদানৰ লগতে বেছিভাগ অন্য উপাদান (অতিৰিক্ত শৈলীৰ সৈতে) ব্যৱহাৰ কৰিব পাৰে।

  1. <div class = "পৃষ্ঠা-হেডাৰ" >
  2. <h1> উদাহৰণ পৃষ্ঠা হেডাৰ </h1>
  3. </div>

অবিকল্পিত থাম্বনেইলসমূহ

অবিকল্পিতভাৱে, Bootstrap ৰ থাম্বনেইলসমূহ নূন্যতম প্ৰয়োজনীয় মাৰ্কআপৰ সৈতে সংযুক্ত প্ৰতিমুৰ্তিসমূহ প্ৰদৰ্শন কৰিবলে ডিজাইন কৰা হৈছে।

অতি কাষ্টমাইজেবল

অলপ অতিৰিক্ত মাৰ্কআপৰ সৈতে, যিকোনো ধৰণৰ HTML বিষয়বস্তু যেনে শিৰোনাম, অনুচ্ছেদ, বা বুটাম থাম্বনেইলত যোগ কৰা সম্ভৱ।

  • থাম্বনেইল লেবেল

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

    কাৰ্য কৰা কাৰ্য কৰা

  • থাম্বনেইল লেবেল

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

    কাৰ্য কৰা কাৰ্য কৰা

থাম্বনেইল কিয় ব্যৱহাৰ কৰিব লাগে

থাম্বনেইলসমূহ (পূৰ্বতে .media-gridv1.4 লৈকে) ফটো বা ভিডিঅ'ৰ গ্ৰীড, ছবি সন্ধান ফলাফল, খুচুৰা সামগ্ৰী, পৰ্টফলিঅ', আৰু বহুতোৰ বাবে অতি উত্তম। সেইবোৰ লিংক বা ষ্টেটিক কন্টেন্ট হ’ব পাৰে।

সৰল, নমনীয় মাৰ্কআপ

থাম্বনেইল মাৰ্কআপ সহজ— ulযিকোনো সংখ্যক liউপাদানৰ সৈতে এটাই প্ৰয়োজনীয় সকলো। ই অতি নমনীয়, আপোনাৰ বিষয়বস্তু ৰেপ কৰিবলৈ মাত্ৰ অলপ বেছি মাৰ্কআপৰ সৈতে যিকোনো ধৰণৰ বিষয়বস্তুৰ অনুমতি দিয়ে।

গ্ৰীড স্তম্ভৰ আকাৰ ব্যৱহাৰ কৰে

শেষত, থাম্বনেইলসমূহ উপাদানে বৰ্ত্তমানৰ গ্ৰীড চিস্টেম শ্ৰেণীসমূহ ব্যৱহাৰ কৰে—যেনে .span2বা .span3—থাম্বনেইল মাত্ৰাসমূহ নিয়ন্ত্ৰণৰ বাবে।

মাৰ্কআপটো

পূৰ্বে উল্লেখ কৰা অনুসৰি থাম্বনেইলৰ বাবে প্ৰয়োজনীয় মাৰ্কআপ লঘু আৰু পোনপটীয়া। ইয়াত সংযুক্ত ছবিসমূহৰ বাবে অবিকল্পিত প্ৰতিষ্ঠা চাওক :

  1. <ul class = "থাম্বনেইলসমূহ" >
  2. <li শ্ৰেণী = "span3" >
  3. <a href = "#" শ্ৰেণী = "থাম্বনেইল" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

থাম্বনেইলত কাষ্টম HTML বিষয়বস্তুৰ বাবে, মাৰ্কআপ অলপ সলনি হয়। <a>যিকোনো ঠাইতে ব্লক স্তৰৰ বিষয়বস্তুৰ অনুমতি দিবলৈ, আমি এটা পছন্দৰ বাবে শ্বেপ কৰোঁ <div>:

  1. <ul class = "থাম্বনেইলসমূহ" >
  2. <li শ্ৰেণী = "span3" >
  3. <div class = "থাম্বনেইল" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> থাম্বনেইল লেবেল </h5>
  6. <p> থাম্বনেইল কেপচন ইয়াতেই... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

অধিক উদাহৰণ

আপোনাৰ বাবে উপলব্ধ বিভিন্ন গ্ৰীড শ্ৰেণীসমূহৰ সৈতে আপোনাৰ সকলো বিকল্পসমূহ অন্বেষণ কৰক। আপুনি বিভিন্ন আকাৰৰ মিহলাই মিলাইও কৰিব পাৰে।

লঘু অবিকল্পিতসমূহ

পুনৰ লিখা ভিত্তি শ্ৰেণী

Bootstrap 2 ৰ সৈতে, আমি ভিত্তি শ্ৰেণী সৰল কৰিছো: .alertৰ পৰিবৰ্তে .alert-message। আমি নূন্যতম প্ৰয়োজনীয় মাৰ্কআপো হ্ৰাস কৰিছো— <p>অবিকল্পিতভাৱে নাই প্ৰয়োজনীয়, কেৱল বাহিৰৰ <div>

একক সতৰ্কবাণী বাৰ্তা

কম ক'ডৰ সৈতে এটা অধিক টেকসই উপাদানৰ বাবে, আমি ব্লক সতৰ্কবাণী, অধিক পেডিং আৰু সাধাৰণতে অধিক লিখনীৰ সৈতে অহা বাৰ্তাসমূহৰ বাবে পাৰ্থক্যমূলক ৰূপ আঁতৰাই পেলাইছো। ক্লাছটোও সলনি হৈছে .alert-block


জাভাস্ক্রিপ্টৰ সৈতে অতি উত্তম যায়

বুটষ্ট্ৰেপ এটা ডাঙৰ jQuery প্লাগইনৰ সৈতে আহে যি সতৰ্কবাৰ্তাসমূহ সমৰ্থন কৰে, সিহতক বাতিল কৰাটো দ্ৰুত আৰু সহজ কৰি তোলে ।

প্লাগইন পান »

উদাহৰণ সতৰ্কবাণী

আপোনাৰ বাৰ্তা আৰু এটা বৈকল্পিক বন্ধ আইকন সৰল শ্ৰেণীৰ সৈতে এটা div ত ৰেপ কৰক।

সতৰ্কবাণী! Best check yo self, আপুনি বেছি ভাল দেখা নাই।
  1. <div class = "সতৰ্কবাণী" >
  2. <button class = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" > × </button>
  3. <strong> সতৰ্কবাণী! </strong> বেষ্ট চেক ইয়ো চেল্ফ, আপুনি বেছি ভাল দেখা নাই।
  4. </div>

মুৰ ডাঙি! iOS ডিভাইচসমূহৰ href="#"সতৰ্কবাণীসমূহ খাৰিজ কৰাৰ বাবে এটাৰ প্ৰয়োজন। ইয়াক আৰু এংকৰ বন্ধ আইকনসমূহৰ বাবে ডাটা বৈশিষ্ট্য অন্তৰ্ভুক্ত কৰাটো নিশ্চিত কৰক। বৈকল্পিকভাৱে, আপুনি <button>ডাটা বৈশিষ্ট্যৰ সৈতে এটা উপাদান ব্যৱহাৰ কৰিব পাৰে, যিটো আমি আমাৰ নথিপত্ৰসমূহৰ বাবে কৰিবলৈ বাছি লৈছো। ব্যৱহাৰ কৰাৰ <button>সময়ত আপুনি অন্তৰ্ভুক্ত কৰিব লাগিব type="button"বা আপোনাৰ প্ৰ-পত্ৰসমূহ জমা নিদিবও পাৰে।

দুটা বৈকল্পিক শ্ৰেণীৰ সৈতে প্ৰামাণিক সতৰ্কবাণী বাৰ্তা সহজে সম্প্ৰসাৰিত কৰক: .alert-blockঅধিক পেডিং আৰু লিখনী নিয়ন্ত্ৰণসমূহৰ .alert-headingবাবে আৰু এটা মিল থকা শিৰোনামৰ বাবে।

সতৰ্কবাণী!

Best check yo self, আপুনি বেছি ভাল দেখা নাই। Nulla vitae elit libero, এটা ফেৰেট্ৰা অগু। প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল স্কেলেৰিস্ক নিছল কনচেক্টেটাৰ এট।

  1. <div class = "সতৰ্কবাণী-ব্লক" >
  2. <a class = "বন্ধ কৰক" data-dismiss = "সতৰ্কবাণী" href = "#" > × </a>
  3. <h4 class = "সতৰ্কতা-শিৰোনামা" > সতৰ্কবাণী! </h4>
  4. Best check yo self, আপনি নহয়...
  5. </div>

এটা সতৰ্কবাণীৰ অৰ্থ সলনি কৰিবলে বৈকল্পিক শ্ৰেণীসমূহ যোগ কৰক

ভুল বা বিপদ

অ' স্নেপ! কেইটামান কথা সলনি কৰি আকৌ জমা দিবলৈ চেষ্টা কৰক।
  1. <div class = "সতৰ্কবাণী-ত্ৰুটি" >
  2. ...
  3. </div>

সফলতা

বঢ়িয়া! আপুনি এই গুৰুত্বপূৰ্ণ সতৰ্কবাণী বাৰ্তাটো সফলতাৰে পঢ়িছে।
  1. <div class = "সতৰ্কবাণী-সফলতা" >
  2. ...
  3. </div>

তথ্য

মুৰ ডাঙি! এই সতৰ্কবাণীটো আপোনাৰ মনোযোগৰ প্ৰয়োজন, কিন্তু ই ছুপাৰ ইম্পৰটেণ্ট নহয়।
  1. <div class = "সতৰ্কবাণী-তথ্য" >
  2. ...
  3. </div>

উদাহৰণ আৰু মাৰ্কআপ

প্ৰাথমিক

এটা উলম্ব গ্ৰেডিয়েন্টৰ সৈতে অবিকল্পিত অগ্ৰগতি বাৰ।

  1. <div class = "অগ্ৰগতি" >
  2. <div শ্ৰেণী = "বাৰ"
  3. style = " প্ৰস্থ : ৬০ %; " ></div>
  4. </div>

ডাঠ

এটা ষ্ট্ৰাইপড ইফেক্ট সৃষ্টি কৰিবলে এটা গ্ৰেডিয়েন্ট ব্যৱহাৰ কৰে (কোনো IE নাই)।

  1. <div class = "অগ্ৰগতি-ষ্ট্ৰাইপড" >
  2. <div শ্ৰেণী = "বাৰ"
  3. style = " প্ৰস্থ : ২০ %; " ></div>
  4. </div>

এনিমেটেড

ডাঠ উদাহৰণ লয় আৰু ইয়াক এনিমেট কৰে (কোনো IE নাই)।

  1. <div class = "অগ্ৰগতি-ষ্ট্ৰাইপড।"
  2. সক্ৰিয়" >
  3. <div শ্ৰেণী = "বাৰ"
  4. style = " প্ৰস্থ : ৪০ %; " ></div>
  5. </div>

বিকল্পসমূহ আৰু ব্ৰাউজাৰ সমৰ্থন

অতিৰিক্ত ৰং

প্ৰগ্ৰেছ বাৰসমূহে একে বুটাম আৰু সতৰ্কতা শ্ৰেণীসমূহৰ কিছুমান ব্যৱহাৰ কৰে সামঞ্জস্যপূৰ্ণ শৈলীসমূহৰ বাবে।

ডাঠ বাৰ

কঠিন ৰঙৰ দৰেই আমাৰ ওচৰত বিভিন্ন ধৰণৰ ডাঠ প্ৰগ্ৰেছ বাৰ আছে।

ব্যৱহাৰ

প্ৰগ্ৰেছ বাৰসমূহে CSS3 পৰিবৰ্তনসমূহ ব্যৱহাৰ কৰে, গতিকে যদি আপুনি জাভাস্ক্রিপ্টৰ যোগেদি প্ৰস্থ পৰিবৰ্তনশীলভাৱে সামঞ্জস্য কৰে, ই মসৃণভাৱে আকাৰ সলনি কৰিব।

যদি আপুনি .activeশ্ৰেণীটো ব্যৱহাৰ কৰে, আপোনাৰ .progress-stripedঅগ্ৰগতি বাৰসমূহে বাওঁফালৰ পৰা সোঁফাললৈ ষ্ট্ৰাইপসমূহক এনিমেট কৰিব।

ব্ৰাউজাৰ সমৰ্থন

প্ৰগ্ৰেছ বাৰসমূহে সিহতৰ সকলো প্ৰভাৱ লাভ কৰিবলে CSS3 গ্ৰেডিয়েন্টসমূহ, পৰিৱৰ্তনসমূহ, আৰু এনিমেচনসমূহ ব্যৱহাৰ কৰে। এই বৈশিষ্ট্যসমূহ IE7-9 বা Firefox ৰ পুৰণি সংস্কৰণসমূহত সমৰ্থিত নহয়।

Opera আৰু IE এ এই সময়ত এনিমেচন সমৰ্থন নকৰে।

ওৱেলছ

এটা উপাদানৰ ওপৰত এটা সৰল প্ৰভাৱ হিচাপে কুঁৱাটো ব্যৱহাৰ কৰি ইয়াক এটা ইনছেট প্ৰভাৱ দিব লাগে।

চাওক, মই এটা কুঁৱাত আছো!
  1. <div class = "ভাল" >
  2. ...
  3. </div>

আইকন বন্ধ কৰক

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

  1. <button class = "বন্ধ কৰক" > × </বুটাম>

iOS ডিভাইচসমূহক ক্লিক ইভেন্টসমূহৰ বাবে এটা href="#" ৰ প্ৰয়োজন যদি আপুনি এটা এংকৰ ব্যৱহাৰ কৰে।

  1. <a class = "বন্ধ কৰক" href = "#" > × </a>