ডাউনল’ড

বুটষ্ট্ৰেপ (বৰ্তমান v3.3.7) ত দ্ৰুতভাৱে আৰম্ভ কৰাৰ কেইটামান সহজ উপায় আছে, প্ৰত্যেকেই এটা ভিন্ন দক্ষতা স্তৰ আৰু ব্যৱহাৰৰ ক্ষেত্ৰত আকৰ্ষণ কৰে । আপোনাৰ বিশেষ প্ৰয়োজনীয়তাৰ লগত কি খাপ খাই পৰে সেয়া চাবলৈ পঢ়ক।

বুটষ্ট্ৰেপ CDN

jsDelivr ত থকা লোকসকলে অনুগ্ৰহ কৰি Bootstrap ৰ CSS আৰু JavaScript ৰ বাবে CDN সমৰ্থন প্ৰদান কৰে। মাত্ৰ এই Bootstrap CDN সংযোগসমূহ ব্যৱহাৰ কৰক।

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bower ৰ সৈতে সংস্থাপন কৰক

আপুনি Bower ব্যৱহাৰ কৰি Bootstrap ৰ Less, CSS, JavaScript, আৰু ফন্টসমূহ সংস্থাপন আৰু ব্যৱস্থাপনা কৰিব পাৰে :

$ bower install bootstrap

npm ৰ সৈতে সংস্থাপন কৰক

আপুনি npm ব্যৱহাৰ কৰি Bootstrap সংস্থাপন কৰিব পাৰে :

$ npm install bootstrap@3

require('bootstrap')Bootstrap ৰ সকলো jQuery প্লাগইন jQuery বস্তুত লোড কৰিব । bootstrapমডিউলটোৱে নিজেই একো ৰপ্তানি নকৰে । আপুনি Bootstrap ৰ jQuery প্লাগইনসমূহ পৃথকে পৃথকে হস্তচালিতভাৱে তুলি ল'ব পাৰিব /js/*.jsসৰঞ্জামৰ ওপৰৰ-স্তৰৰ পঞ্জিকাৰ অন্তৰ্গত নথিপত্ৰসমূহ তুলি লৈ ।

Bootstrap's package.jsonত নিম্নলিখিত কি'সমূহৰ অন্তৰ্গত কিছুমান অতিৰিক্ত মেটাডাটা আছে:

• less- Bootstrap ৰ মূল কম উৎস নথিপত্ৰলৈ পথ
• style- Bootstrap ৰ অ-সংক্ষিপ্ত CSS ৰ পথ যি অবিকল্পিত সংহতিসমূহ ব্যৱহাৰ কৰি পূৰ্বসংকলন কৰা হৈছে (কোনো স্বনিৰ্বাচন নহয়)

Composer ৰ সৈতে সংস্থাপন কৰক

আপুনি Composer ব্যৱহাৰ কৰি Bootstrap ৰ Less, CSS, JavaScript, আৰু ফন্টসমূহ সংস্থাপন আৰু ব্যৱস্থাপনা কৰিব পাৰে :

$ composer require twbs/bootstrap

Less/Sass ৰ বাবে Autoprefixer ৰ প্ৰয়োজন

বুটষ্ট্ৰেপে CSS বিক্ৰেতা উপসৰ্গসমূহৰ সৈতে মোকাবিলা কৰিবলে স্বয়ংক্ৰিয় উপসৰ্গ ব্যৱহাৰ কৰে । যদি আপুনি ইয়াৰ Less/Sass উৎসৰ পৰা Bootstrap কম্পাইল কৰিছে আৰু আমাৰ Gruntfile ব্যৱহাৰ কৰা নাই, আপুনি নিজেই Autoprefixer ক আপোনাৰ নিৰ্মাণ প্ৰক্ৰিয়াত সংহতি কৰিব লাগিব । যদি আপুনি প্ৰিকম্পাইল কৰা বুটষ্ট্ৰেপ ব্যৱহাৰ কৰিছে বা আমাৰ Gruntfile ব্যৱহাৰ কৰিছে, আপুনি ইয়াৰ বিষয়ে চিন্তা কৰাৰ প্ৰয়োজন নাই কাৰণ Autoprefixer ইতিমধ্যে আমাৰ Gruntfile ত সংহতি কৰা হৈছে ।

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

বুটষ্ট্ৰেপ দুটা ৰূপত ডাউনলোড কৰিব পৰা যায়, যাৰ ভিতৰত আপুনি নিম্নলিখিত পঞ্জিকাসমূহ আৰু নথিপত্ৰসমূহ পাব, যুক্তিসংগতভাৱে সাধাৰণ সম্পদসমূহ গোট কৰা আৰু কমপাইল কৰা আৰু সৰু কৰা দুয়োটা ভিন্নতা প্ৰদান কৰা।

পূৰ্ব-কম্পাইল কৰা বুটষ্ট্ৰেপ

এবাৰ ডাউনল'ড কৰিলে, (কম্পাইল কৰা) বুটষ্ট্ৰেপৰ গঠন চাবলৈ সংকোচিত ফোল্ডাৰ আনজিপ কৰক । আপুনি এনেকুৱা কিবা এটা দেখিব:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

এইটো Bootstrap ৰ আটাইতকৈ মৌলিক ধৰণ: প্ৰায় যিকোনো ৱেব প্ৰকল্পত দ্ৰুত ড্ৰপ-ইন ব্যৱহাৰৰ বাবে পূৰ্ব-কম্পাইল কৰা নথিপত্ৰসমূহ । আমি কম্পাইল কৰা CSS আৰু JS ( bootstrap.*) প্ৰদান কৰোঁ, লগতে কম্পাইল কৰা আৰু সংকুচিত কৰা CSS আৰু JS ( bootstrap.min.*) প্ৰদান কৰোঁ। CSS উৎস মেপ ( bootstrap.*.map) কিছুমান ব্ৰাউজাৰৰ ডেভেলপাৰ সঁজুলিৰ সৈতে ব্যৱহাৰৰ বাবে উপলব্ধ। Glyphicons ৰ পৰা ফন্টসমূহ অন্তৰ্ভুক্ত কৰা হৈছে, যেনে বৈকল্পিক Bootstrap থিম।

বুটষ্ট্ৰেপ উৎস ক'ড

বুটষ্ট্ৰেপ উৎস ক'ড ডাউনলোডত পূৰ্বকম্পাইল কৰা CSS, জাভাস্ক্রিপ্ট, আৰু ফন্ট সম্পত্তিসমূহ অন্তৰ্ভুক্ত কৰা হৈছে, উৎস কম, জাভাস্ক্রিপ্ট, আৰু আলেখ্যনৰ সৈতে। অধিক নিৰ্দিষ্টভাৱে ক’বলৈ গ’লে ইয়াত তলত দিয়া আৰু অধিক অন্তৰ্ভুক্ত কৰা হৈছে:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/, js/আৰু fonts/আমাৰ CSS, JS, আৰু আইকন ফন্টসমূহৰ বাবে উৎস ক'ড (ক্ৰমে)। ওপৰৰ dist/পূৰ্ব-কম্পাইল কৰা ডাউনলোড অংশত তালিকাভুক্ত সকলো কথা ফোল্ডাৰটোত অন্তৰ্ভুক্ত কৰা হৈছে। docs/ফোল্ডাৰত আমাৰ আলেখ্যনৰ বাবে উৎস ক'ড অন্তৰ্ভুক্ত কৰা হৈছে, আৰু বুটষ্ট্ৰেপ examples/ব্যৱহাৰৰ । ইয়াৰ বাহিৰেও, অন্য যিকোনো অন্তৰ্ভুক্ত নথিপত্ৰই পেকেইজসমূহ, অনুজ্ঞা তথ্য, আৰু বিকাশৰ বাবে সমৰ্থন প্ৰদান কৰে।

CSS আৰু JavaScript কম্পাইল কৰা

বুটষ্ট্ৰেপে ইয়াৰ নিৰ্মাণ ব্যৱস্থাপ্ৰণালীৰ বাবে Grunt ব্যৱহাৰ কৰে , কাঠামোৰ সৈতে কাম কৰাৰ বাবে সুবিধাজনক পদ্ধতিৰ সৈতে । ই হৈছে আমি আমাৰ ক'ড কেনেকৈ কম্পাইল কৰো, পৰীক্ষা চলাওঁ, আৰু বহুতো।

Grunt সংস্থাপন কৰা হৈছে

Grunt সংস্থাপন কৰিবলে, আপুনি প্ৰথমে node.js ডাউনলোড আৰু সংস্থাপন কৰিব লাগিব (যিটোত npm অন্তৰ্ভুক্ত কৰা হৈছে) । npm য়ে ন'ড পেকেজ কৰা মডিউলসমূহৰ বাবে থিয় দিয়ে আৰু node.js ৰ যোগেদি বিকাশ নিৰ্ভৰশীলতাসমূহ ব্যৱস্থাপনা কৰাৰ এটা উপায়।

1. grunt-cliৰ সৈতে গোলকীয়ভাৱে সংস্থাপন কৰক npm install -g grunt-cli।
2. ৰূট পঞ্জিকালৈ নেভিগেট কৰক /bootstrap/, তাৰ পিছত চলাওক npm install। npm এ package.jsonনথিপত্ৰ চাব আৰু তাত তালিকাভুক্ত প্ৰয়োজনীয় স্থানীয় নিৰ্ভৰশীলতাসমূহ স্বয়ংক্ৰিয়ভাৱে সংস্থাপন কৰিব ।

সম্পূৰ্ণ হ'লে, আপুনি আদেশ শাৰীৰ পৰা প্ৰদান কৰা বিভিন্ন Grunt আদেশসমূহ চলাব পাৰিব।

উপলব্ধ Grunt আদেশসমূহ

grunt dist(কেৱল CSS আৰু JavaScript কম্পাইল কৰক)

/dist/কম্পাইল কৰা আৰু সৰু কৰা CSS আৰু JavaScript নথিপত্ৰসমূহৰ সৈতে পঞ্জিকা পুনৰুত্পাদন কৰে । এটা Bootstrap ব্যৱহাৰকাৰী হিচাপে, এইটো সাধাৰণতে আপুনি বিচৰা আদেশ ।

grunt watch(চোৱা)

কম উৎস নথিপত্ৰসমূহ চায় আৰু স্বয়ংক্ৰিয়ভাৱে সিহতক CSS লৈ পুনৰায় সংকলন কৰে যেতিয়াই আপুনি এটা পৰিবৰ্তন সংৰক্ষণ কৰে।

grunt test(পৰীক্ষা চলাওক)

JSHint চলায় আৰু PhantomJS ত QUnit পৰীক্ষাসমূহ মূৰবিহীনভাৱে চলায় ।

grunt docs(docs সম্পত্তিসমূহ নিৰ্মাণ আৰু পৰীক্ষা কৰক)

CSS, JavaScript, আৰু অন্য সম্পত্তিসমূহ নিৰ্মাণ আৰু পৰীক্ষা কৰে যি আলেখ্যন স্থানীয়ভাৱে চলোৱাৰ সময়ত ব্যৱহাৰ কৰা হয় bundle exec jekyll serve।

grunt(একদম সকলো নিৰ্মাণ কৰক আৰু পৰীক্ষা চলাওক)

CSS আৰু JavaScript কম্পাইল আৰু মিনিফাই কৰে, নথিপত্ৰ ৱেবছাইট নিৰ্মাণ কৰে, নথিপত্ৰসমূহৰ বিপৰীতে HTML5 বৈধকৰ্তা চলায়, স্বনিৰ্বাচিতকাৰী সম্পত্তিসমূহ পুনৰুত্পাদন কৰে, আৰু অধিক। Jekyll ৰ প্ৰয়োজন । সাধাৰণতে কেৱল প্ৰয়োজনীয় যদি আপুনি Bootstrap ত নিজেই হেক কৰি আছে।

সমস্যা সমাধান কৰা

আপুনি নিৰ্ভৰশীলতাসমূহ সংস্থাপন কৰাত বা Grunt আদেশসমূহ চলোৱাৰ সৈতে সমস্যাৰ সন্মুখীন হ'লে, প্ৰথমে /node_modules/npm দ্বাৰা সৃষ্টি কৰা পঞ্জিকা মচি পেলাওক । তাৰ পিছত, পুনৰ চলাওক npm install.

মূল সাঁচ

এই মূল HTML সাঁচৰ সৈতে আৰম্ভ কৰক, বা এই উদাহৰণসমূহ পৰিবৰ্তন কৰক । আমি আশা কৰোঁ যে আপুনি আমাৰ সাঁচ আৰু উদাহৰণসমূহ কাষ্টমাইজ কৰিব, আপোনাৰ প্ৰয়োজন অনুসৰি সেইবোৰ খাপ খুৱাব।

এটা নূন্যতম Bootstrap দস্তাবেজৰ সৈতে কাম আৰম্ভ কৰিবলে তলৰ HTML কপি কৰক ।

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

উদাহৰণ

Bootstrap ৰ বহুতো উপাদানৰ সৈতে ওপৰৰ মূল সাঁচৰ ওপৰত নিৰ্মাণ কৰক। আমি আপোনাক আপোনাৰ ব্যক্তিগত প্ৰকল্পৰ প্ৰয়োজন অনুসৰি Bootstrap কাষ্টমাইজ আৰু খাপ খুৱাবলৈ উৎসাহিত কৰোঁ।

তলৰ প্ৰতিটো উদাহৰণৰ বাবে উৎস ক'ড লাভ কৰক Bootstrap ভঁৰাল ডাউনল'ড কৰি । উদাহৰণসমূহ docs/examples/ডাইৰেকটৰীত পোৱা যাব।

কাঠামো ব্যৱহাৰ কৰি

আৰম্ভণি সাঁচ

মূল কথাবোৰৰ বাহিৰে একো নাই: এটা কণ্টেইনাৰৰ সৈতে CSS আৰু JavaScript কম্পাইল কৰা হৈছে।

বুটষ্ট্ৰেপ থিম

এটা দৃশ্যমানভাৱে উন্নত অভিজ্ঞতাৰ বাবে বৈকল্পিক Bootstrap থিম লোড কৰক।

গ্ৰীডসমূহ

চাৰিওটা স্তৰৰ সৈতে গ্ৰীড পৰিকল্পনাৰ একাধিক উদাহৰণ, নেষ্টিং, আৰু অধিক।

জাম্বোট্ৰন

এটা navbar আৰু কিছুমান মৌলিক গ্ৰীড স্তম্ভৰ সৈতে জাম্বট্ৰনৰ চাৰিওফালে নিৰ্মাণ কৰক।

সংকীৰ্ণ জাম্বোট্ৰন

অবিকল্পিত ধাৰক আৰু জাম্বট্ৰন সংকুচিত কৰি এটা অধিক স্বনিৰ্বাচিত পৃষ্ঠা নিৰ্মাণ কৰক।

কাৰ্য্যত নৱবৰ

নৱবৰ

কিছুমান অতিৰিক্ত বিষয়বস্তুৰ সৈতে navbar অন্তৰ্ভুক্ত কৰা চুপাৰ বেচিক টেমপ্লেট।

ষ্টেটিক টপ নাভবাৰ

কিছুমান অতিৰিক্ত বিষয়বস্তুৰ সৈতে এটা স্থিতিশীল শীৰ্ষ নেভবাৰৰ সৈতে ছুপাৰ বেচিক টেমপ্লেট।

স্থিৰ কৰা হৈছে navbar

কিছুমান অতিৰিক্ত বিষয়বস্তুৰ সৈতে এটা স্থিৰ শীৰ্ষ নেভবাৰৰ সৈতে ছুপাৰ বেচিক টেমপ্লেট।

কাষ্টম উপাদানসমূহ

আৱৰণ

সহজ আৰু সুন্দৰ হোম পেজ নিৰ্মাণৰ বাবে এটা এটা পৃষ্ঠাৰ সাঁচ।

কেৰউজেল

navbar আৰু carousel কাষ্টমাইজ কৰক, তাৰ পিছত কিছুমান নতুন উপাদান যোগ কৰক।

ব্লগ

কাষ্টম নেভিগেচন, হেডাৰ, আৰু টাইপৰ সৈতে সৰল দুটা-স্তম্ভৰ ব্লগ বিন্যাস।

ডেচবোৰ্ড

স্থিৰ চাইডবাৰ আৰু নেভবাৰৰ সৈতে এটা এডমিন ডেচব'ৰ্ডৰ বাবে মূল গঠন।

চাইন-ইন পৃষ্ঠা

প্ৰপত্ৰত এটা সৰল চাইনৰ বাবে স্বনিৰ্বাচিত প্ৰপত্ৰ বিন্যাস আৰু ডিজাইন।

ন্যায্যতাপ্ৰাপ্ত nav

ন্যায্য সংযোগসমূহৰ সৈতে এটা স্বনিৰ্বাচিত navbar সৃষ্টি কৰক। মুৰ ডাঙি! বেছি ছাফাৰী বন্ধুত্বপূৰ্ণ নহয়।

আঠাযুক্ত ফুটাৰ

ভিউপৰ্টৰ তলত এটা ফুটাৰ সংলগ্ন কৰক যেতিয়া বিষয়বস্তু ইয়াতকৈ চুটি হয়।

navbar ৰ সৈতে আঠাযুক্ত ফুটাৰ

ওপৰত এটা স্থিৰ নেভবাৰৰ সৈতে ভিউপৰ্টৰ তলত এটা ফুটাৰ সংলগ্ন কৰক।

পৰীক্ষা-নিৰীক্ষা

অ-প্ৰতিক্ৰিয়াশীল বুটষ্ট্ৰেপ

আমাৰ নথিপত্ৰ অনুসৰি Bootstrap ৰ সঁহাৰি সহজে নিষ্ক্ৰিয় কৰক ।

অফ-কেনভাছ

Bootstrap ৰ সৈতে ব্যৱহাৰৰ বাবে এটা টগলযোগ্য অফ-কেনভাছ নেভিগেচন মেনু নিৰ্মাণ কৰক।

সঁজুলি

বুটলিন্ট

বুটলিণ্ট হৈছে অফিচিয়েল বুটষ্ট্ৰেপ HTML লিণ্টাৰ সঁজুলি। ই স্বয়ংক্ৰিয়ভাৱে ৱেবপেজসমূহত কেইবাটাও সাধাৰণ HTML ভুলৰ বাবে পৰীক্ষা কৰে যি Bootstrap ব্যৱহাৰ কৰি আছে এটা মোটামুটি "ভেনিলা" ধৰণে । Vanilla Bootstrap ৰ উপাদানসমূহ/উইজেটসমূহৰ বাবে DOM ৰ সিহতৰ অংশসমূহক কিছুমান গঠনসমূহৰ সৈতে অনুকূল হোৱাৰ প্ৰয়োজন। বুটলিণ্টে নিৰীক্ষণ কৰে যে বুটষ্ট্ৰেপ উপাদানসমূহৰ উদাহৰণসমূহত সঠিকভাৱে-গঠন কৰা HTML আছে । আপোনাৰ Bootstrap ৱেব বিকাশ সঁজুলিশৃংখলত Bootlint যোগ কৰাৰ কথা চিন্তা কৰক যাতে কোনো সাধাৰণ ভুলে আপোনাৰ প্ৰকল্পৰ বিকাশ লেহেমীয়া নকৰে ।

সমুদায়

Bootstrap ৰ বিকাশৰ বিষয়ে আপডেট হৈ থাকক আৰু এই সহায়ক সম্পদসমূহৰ সৈতে সম্প্ৰদায়ৰ সৈতে যোগাযোগ কৰক।

• অফিচিয়েল বুটষ্ট্ৰেপ ব্লগ পঢ়ক আৰু চাবস্ক্ৰাইব কৰক ।
• irc.freenode.netচাৰ্ভাৰত IRC ব্যৱহাৰ কৰি সহযোগী বুটষ্ট্ৰেপাৰসমূহৰ সৈতে আড্ডা কৰক, ##bootstrap চেনেলত ।
• Bootstrap ব্যৱহাৰ কৰাত সহায়ৰ বাবে, টেগ ব্যৱহাৰ কৰি StackOverflowtwitter-bootstrap-3 ত সুধিব ।
• বিকাশকসকলে চাবিশব্দ bootstrapপেকেইজসমূহত ব্যৱহাৰ কৰিব লাগে যি Bootstrap ৰ কাৰ্য্যকৰীতা পৰিবৰ্তন কৰে বা যোগ কৰে যেতিয়া npm বা অনুৰূপ বিতৰণ ব্যৱস্থাসমূহৰ যোগেদি বিতৰণ কৰে সৰ্বাধিক আৱিষ্কাৰযোগ্যতাৰ বাবে ।
• Bootstrap Expo ত Bootstrap ৰ সৈতে নিৰ্মাণ কৰা লোকৰ প্ৰেৰণাদায়ক উদাহৰণ বিচাৰি পাওক ।

শেহতীয়া গছিপ আৰু ভয়ংকৰ মিউজিক ভিডিঅ’ৰ বাবে আপুনি টুইটাৰত @getbootstrap কো অনুসৰণ কৰিব পাৰে ।

সঁহাৰি নিষ্ক্ৰিয় কৰা

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

পৃষ্ঠাৰ সঁহাৰি নিষ্ক্ৰিয় কৰাৰ পদক্ষেপসমূহ

1. CSS docs<meta> ত উল্লেখ কৰা viewport বাদ দিয়ক
2. widthএটা প্ৰস্থৰ সৈতে প্ৰতিটো গ্ৰীড স্তৰৰ বাবে on the অভাৰৰাইড কৰক .container, উদাহৰণস্বৰূপ width: 970px !important;নিশ্চিত কৰক যে ই অবিকল্পিত Bootstrap CSS ৰ পিছত আহে । আপুনি বৈকল্পিকভাৱে !importantমাধ্যম প্ৰশ্নসমূহ বা কিছুমান নিৰ্বাচক-ফুৰ সৈতে এৰাই চলিব পাৰে।
3. যদি navbars ব্যৱহাৰ কৰে, সকলো navbar সংকুচিত আৰু প্ৰসাৰিত আচৰণ আঁতৰাওক।
4. গ্ৰীড পৰিকল্পনাসমূহৰ বাবে .col-xs-*, মধ্যমীয়া/বৃহৎসমূহৰ অতিৰিক্ত, বা তাৰ ঠাইত শ্ৰেণীসমূহ ব্যৱহাৰ কৰক। চিন্তা নকৰিব, অতিৰিক্ত-সৰু ডিভাইচ গ্ৰীডে সকলো ৰিজ'লিউচনলৈ স্কেল কৰে।

আপুনি এতিয়াও IE8 ৰ বাবে Respond.js ৰ প্ৰয়োজন হ'ব (যিহেতু আমাৰ মিডিয়া প্ৰশ্নসমূহ এতিয়াও আছে আৰু প্ৰক্ৰিয়াকৰণ কৰিব লাগিব)। ই Bootstrap ৰ "মোবাইল চাইট" দিশসমূহ নিষ্ক্ৰিয় কৰে ।

প্ৰতিক্ৰিয়াশীলতা নিষ্ক্ৰিয় কৰা বুটষ্ট্ৰেপ সাঁচ

আমি এই পদক্ষেপসমূহ এটা উদাহৰণত প্ৰয়োগ কৰিছো। প্ৰণয়ন কৰা নিৰ্দিষ্ট পৰিবৰ্তনসমূহ চাবলৈ ইয়াৰ উৎস ক'ড পঢ়ক।

অ-প্ৰতিক্ৰিয়াশীল উদাহৰণ চাওক

ব্ৰাউজাৰ আৰু ডিভাইচ সমৰ্থন

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

সমৰ্থিত ব্ৰাউজাৰসমূহ

বিশেষকৈ, আমি নিম্নলিখিত ব্ৰাউজাৰ আৰু প্লেটফৰ্মসমূহৰ শেহতীয়া সংস্কৰণসমূহ সমৰ্থন কৰোঁ ।

বিকল্প ব্ৰাউজাৰসমূহ যি WebKit, Blink, বা Gecko ৰ শেহতীয়া সংস্কৰণ ব্যৱহাৰ কৰে, সেয়া প্ৰত্যক্ষভাৱে হওক বা প্লেটফৰ্মৰ ৱেব দৰ্শন API ৰ যোগেদি হওক, স্পষ্টভাৱে সমৰ্থিত নহয়। কিন্তু, বুটষ্ট্ৰেপে (বেছিভাগ ক্ষেত্ৰতে) এই ব্ৰাউজাৰসমূহতো সঠিকভাৱে প্ৰদৰ্শন আৰু কাম কৰিব লাগে। অধিক নিৰ্দিষ্ট সমৰ্থন তথ্য তলত দিয়া হৈছে।

মোবাইল ডিভাইচ

সাধাৰণতে ক'বলৈ গ'লে, Bootstrap এ প্ৰতিটো প্ৰধান প্লেটফৰ্মৰ অবিকল্পিত ব্ৰাউজাৰসমূহৰ শেহতীয়া সংস্কৰণসমূহ সমৰ্থন কৰে। মন কৰিব যে প্ৰক্সি ব্ৰাউজাৰসমূহ (যেনে Opera Mini, Opera Mobile ৰ Turbo মোড, UC ব্ৰাউজাৰ মিনি, Amazon Silk) সমৰ্থিত নহয়।

ডেস্কটপ ব্ৰাউজাৰসমূহ

একেদৰে, বেছিভাগ ডেস্কটপ ব্ৰাউজাৰৰ শেহতীয়া সংস্কৰণ সমৰ্থিত।

উইণ্ড'জত, আমি ইণ্টাৰনেট এক্সপ্ল'ৰাৰ 8-11 সমৰ্থন কৰোঁ ।

Firefox ৰ বাবে, শেহতীয়া সাধাৰণ সুস্থিৰ উন্মোচনৰ উপৰিও, আমি Firefox ৰ শেহতীয়া সম্প্ৰসাৰিত সমৰ্থন উন্মোচন (ESR) সংস্কৰণো সমৰ্থন কৰোঁ।

বেচৰকাৰীভাৱে, বুটষ্ট্ৰেপে লিনাক্সৰ বাবে Chromium আৰু Chrome, Linux ৰ বাবে Firefox, আৰু Internet Explorer 7, লগতে Microsoft Edge ত যথেষ্ট ভাল দেখা আৰু আচৰণ কৰিব লাগে, যদিও সিহত আনুষ্ঠানিকভাৱে সমৰ্থিত নহয় ।

বুটষ্ট্ৰেপে গ্ৰেপল কৰিবলগীয়া কিছুমান ব্ৰাউজাৰ বাগসমূহৰ এটা তালিকাৰ বাবে, আমাৰ ব্ৰাউজাৰ বাগসমূহৰ দেৱাল চাওক ।

ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ৮ আৰু ৯

Internet Explorer 8 আৰু 9 সমূহো সমৰ্থিত, অৱশ্যে, অনুগ্ৰহ কৰি সচেতন হওক যে কিছুমান CSS3 বৈশিষ্ট্য আৰু HTML5 উপাদানসমূহ এই ব্ৰাউজাৰসমূহে সম্পূৰ্ণৰূপে সমৰ্থিত নহয়। ইয়াৰ উপৰিও, Internet Explorer 8 ৰ বাবে মিডিয়া প্ৰশ্ন সমৰ্থন সামৰ্থবান কৰিবলৈ Respond.js ৰ ব্যৱহাৰৰ প্ৰয়োজন ।

CSS3 আৰু HTML5 বৈশিষ্ট্যসমূহৰ ব্ৰাউজাৰ সমৰ্থনৰ বিষয়ে বিৱৰণৰ বাবে মই ব্যৱহাৰ কৰিব পাৰোনে... চাওক ।

ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ৮ আৰু Respond.js

Internet Explorer 8 ৰ বাবে আপোনাৰ বিকাশ আৰু উৎপাদন পৰিৱেশত Respond.js ব্যৱহাৰ কৰাৰ সময়ত নিম্নলিখিত সতৰ্কবাণীসমূহৰ পৰা সাৱধান হওক।

Respond.js আৰু ক্ৰছ-ডমেইন CSS

এটা ভিন্ন (উপ)ডমেইনত (উদাহৰণস্বৰূপ, এটা CDN ত) হস্ট কৰা CSS ৰ সৈতে Respond.js ব্যৱহাৰ কৰাৰ বাবে কিছুমান অতিৰিক্ত প্ৰতিষ্ঠাৰ প্ৰয়োজন। বিৱৰণৰ বাবে Respond.js নথিপত্ৰসমূহ চাওক ।

Respond.js আৰুfile://

ব্ৰাউজাৰ সুৰক্ষা নিয়মৰ বাবে, Respond.js এ file://প্ৰটোকলৰ যোগেদি চোৱা পৃষ্ঠাসমূহৰ সৈতে কাম নকৰে (যেনে এটা স্থানীয় HTML ফাইল খোলাৰ সময়ত)। IE8 ত প্ৰতিক্ৰিয়াশীল বৈশিষ্ট্যসমূহ পৰীক্ষা কৰিবলে, আপোনাৰ পৃষ্ঠাসমূহ HTTP(S) ৰ ওপৰত চাওক। বিৱৰণৰ বাবে Respond.js নথিপত্ৰসমূহ চাওক ।

Respond.js আৰু@import

Respond.js এ CSS ৰ সৈতে কাম নকৰে যি ৰ যোগেদি উল্লেখ কৰা হৈছে @import। বিশেষকৈ, কিছুমান Drupal বিন্যাস ব্যৱহাৰ কৰা জনা যায় @import। বিৱৰণৰ বাবে Respond.js নথিপত্ৰসমূহ চাওক ।

ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ৮ আৰু বক্স-ছাইজিং

IE8 এ সম্পূৰ্ণৰূপে সমৰ্থন নকৰে box-sizing: border-box;যেতিয়া min-width, max-width, min-height, বা max-height. সেই কাৰণে, v3.0.1 ৰ পৰা, আমি আৰু s max-widthত ব্যৱহাৰ নকৰো।.container

ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ৮ আৰু @font-face

@font-faceIE8 ৰ সৈতে সংযুক্ত কৰাৰ সময়ত কিছুমান সমস্যা আছে :before। বুটষ্ট্ৰেপে সেই সংমিশ্ৰণ ইয়াৰ Glyphicons ৰ সৈতে ব্যৱহাৰ কৰে। যদি এটা পৃষ্ঠা কেচ কৰা হয়, আৰু উইন্ডোৰ ওপৰত মাউছ অবিহনে লোড কৰা হয় (অৰ্থাৎ সতেজ কৰক বুটাম টিপক বা এটা iframe ত কিবা এটা লোড কৰক) তেন্তে পৃষ্ঠাটো ফন্ট লোড হোৱাৰ আগতে ৰেণ্ডাৰ কৰা হয়। পৃষ্ঠাটোৰ ওপৰত (দেহৰ) ওপৰত মাউছ কৰিলে কিছুমান আইকন দেখা যাব আৰু বাকী থকা আইকনবোৰৰ ওপৰত মাউছ কৰিলে সেইবোৰো দেখা যাব। সবিশেষ জানিবলৈ সংখ্যা #13863 চাওক ।

IE সামঞ্জস্যতা ধৰণসমূহ

পুৰণি Internet Explorer সুসংগততা ধৰণসমূহত বুটষ্ট্ৰেপ সমৰ্থিত নহয়। আপুনি IE ৰ বাবে শেহতীয়া ৰেণ্ডাৰ ধৰণ ব্যৱহাৰ কৰাটো নিশ্চিত কৰিবলে, <meta>আপোনাৰ পৃষ্ঠাসমূহত উপযুক্ত টেগ অন্তৰ্ভুক্ত কৰাৰ কথা বিবেচনা কৰক:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

ডিবাগিং সঁজুলিসমূহ খোলি দস্তাবেজ ধৰণ নিশ্চিত কৰক: টিপক F12আৰু "দস্তাবেজ ধৰণ" পৰীক্ষা কৰক।

এই টেগটো Bootstrap ৰ সকলো আলেখ্যন আৰু উদাহৰণসমূহত অন্তৰ্ভুক্ত কৰা হৈছে Internet Explorer ৰ প্ৰতিটো সমৰ্থিত সংস্কৰণত সম্ভৱপৰ উত্তম ৰেণ্ডাৰ সুনিশ্চিত কৰিবলে ।

অধিক তথ্যৰ বাবে এই StackOverflow প্ৰশ্ন চাওক ।

উইণ্ড’জ ৮ আৰু উইণ্ড’জ ফোন ৮ত ইণ্টাৰনেট এক্সপ্ল’ৰাৰ ১০

Internet Explorer 10 এ ডিভাইচ প্ৰস্থক viewport প্ৰস্থৰ পৰা পৃথক নকৰে , আৰু সেয়েহে Bootstrap ৰ CSS ত মাধ্যম প্ৰশ্নসমূহ সঠিকভাৱে প্ৰয়োগ নকৰে। সাধাৰণতে আপুনি এইটো সমাধান কৰিবলে CSS ৰ এটা দ্ৰুত স্নিপেট যোগ কৰিব:

@-ms-viewport       { width: device-width; }

কিন্তু, ই আপডেট 3 (উৰ্ধ্বতন GDR3) তকৈ পুৰণি Windows Phone 8 সংস্কৰণ চলোৱা ডিভাইচসমূহৰ বাবে কাম নকৰে , কাৰণ ই এনে ডিভাইচসমূহে সংকীৰ্ণ "ফোন" দৃশ্যৰ পৰিৱৰ্তে এটা বেছিভাগ ডেস্কটপ দৃশ্য দেখুৱায়। ইয়াক সম্বোধন কৰিবলে, আপুনি বাগটোৰ সমাধান কৰিবলে নিম্নলিখিত CSS আৰু JavaScript অন্তৰ্ভুক্ত কৰিব লাগিব ।

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

অধিক তথ্য আৰু ব্যৱহাৰৰ নিৰ্দেশনাৰ বাবে, Windows Phone 8 আৰু ডিভাইচ-প্ৰস্থ পঢ়ক ।

এটা হেডছ আপ হিচাপে, আমি ইয়াক Bootstrap ৰ সকলো আলেখ্যন আৰু উদাহৰণত এটা প্ৰদৰ্শন হিচাপে অন্তৰ্ভুক্ত কৰোঁ।

ছাফাৰী শতাংশ ৰাউণ্ডিং

.col-*-1OS X ৰ বাবে v7.1 আৰু iOS v8.0 ৰ বাবে Safari ৰ পূৰ্বৰ Safari ৰ সংস্কৰণসমূহৰ ৰেণ্ডাৰ ইঞ্জিনত আমাৰ গ্ৰীড শ্ৰেণীসমূহত ব্যৱহৃত দশমিক স্থানৰ সংখ্যাৰ সৈতে কিছু সমস্যা আছিল । গতিকে যদি আপোনাৰ ১২টা ব্যক্তিগত গ্ৰীড স্তম্ভ আছিল, আপুনি লক্ষ্য কৰিব যে স্তম্ভৰ অন্য শাৰীৰ তুলনাত সেইবোৰ চুটি হৈ আহিছে। Safari/iOS উন্নয়ন কৰাৰ উপৰিও, আপোনাৰ ওচৰত ৱৰ্কআৰউণ্ডৰ বাবে কিছুমান বিকল্প আছে:

• .pull-rightহাৰ্ড-ৰাইট প্ৰান্তিককৰণ পাবলৈ আপোনাৰ শেষ গ্ৰীড স্তম্ভত যোগ কৰক
• Safari ৰ বাবে নিখুঁত ৰাউণ্ডিং পাবলৈ আপোনাৰ শতাংশসমূহ হস্তচালিতভাৱে টুইক কৰক (প্ৰথম বিকল্পতকৈ অধিক কঠিন)

মডালসমূহ, navbars, আৰু ভাৰ্চুৱেল কিবৰ্ডসমূহ

অভাৰফ্ল' আৰু স্ক্ৰলিং

overflow: hiddeniOS আৰু Android ত on the element ৰ বাবে সমৰ্থন <body>যথেষ্ট সীমিত। সেই উদ্দেশ্যে, যেতিয়া আপুনি সেই ডিভাইচসমূহৰ যিকোনো এটা ব্ৰাউজাৰত এটা মডালৰ ওপৰ বা তলৰ ফালে স্ক্ৰল কৰে, <body>বিষয়বস্তু স্ক্ৰল হ'বলৈ আৰম্ভ কৰিব। Chrome বাগ #175502 ( Chrome v40 ত সমাধান কৰা হৈছে) আৰু WebKit বাগ #153852 চাওক ।

iOS টেক্সট ফিল্ড আৰু স্ক্ৰলিং

iOS 9.3 ৰ পৰা, এটা মডাল খোলা থকাৰ সময়ত, যদি এটা স্ক্ৰল ইংগিতৰ প্ৰাৰম্ভিক স্পৰ্শ এটা পাঠ্য <input>বা a ৰ সীমাৰ ভিতৰত থাকে <textarea>, <body>মডালৰ তলৰ বিষয়বস্তু মডালৰ পৰিৱৰ্তে স্ক্ৰল কৰা হ'ব। ৱেবকিট বাগ #153856 চাওক ।

ভাৰ্চুৱেল কিবৰ্ডসমূহ

লগতে, মন কৰক যে যদি আপুনি এটা স্থিৰ navbar ব্যৱহাৰ কৰিছে বা এটা মডালৰ ভিতৰত ইনপুটসমূহ ব্যৱহাৰ কৰিছে, iOS ৰ এটা ৰেণ্ডাৰ বাগ আছে যি ভাৰ্চুৱেল কিবৰ্ড ট্ৰিগাৰ কৰাৰ সময়ত স্থিৰ উপাদানসমূহৰ অৱস্থান আপডেইট নকৰে। ইয়াৰ বাবে কেইটামান ৱৰ্কআৰউণ্ডে আপোনাৰ উপাদানসমূহক ৰূপান্তৰ কৰা position: absoluteবা ফ'কাচত এটা টাইমাৰ আমন্ত্ৰণ কৰা অন্তৰ্ভুক্ত কৰে অৱস্থান হস্তচালিতভাৱে সংশোধন কৰিবলৈ চেষ্টা কৰিবলে। এইটো Bootstrap দ্বাৰা নিয়ন্ত্ৰিত নহয়, গতিকে আপোনাৰ এপ্লিকেচনৰ বাবে কোনটো সমাধান সৰ্বোত্তম সেইটো নিৰ্ধাৰণ কৰাটো আপোনাৰ ওপৰত নিৰ্ভৰশীল ।

নৱবাৰ ড্ৰপডাউনসমূহ

z-indexing ৰ জটিলতাৰ বাবে nav ত iOS ত .dropdown-backdropউপাদানটো ব্যৱহাৰ কৰা নহয়। এইদৰে, navbars ত ড্ৰপডাউনসমূহ বন্ধ কৰিবলে, আপুনি প্ৰত্যক্ষভাৱে ড্ৰপডাউন উপাদান (বা অন্য যিকোনো উপাদান যি iOS ত এটা ক্লিক ইভেন্ট গুলিয়াব ) ক্লিক কৰিব লাগিব।

ব্ৰাউজাৰ জুমিং

পৃষ্ঠা জুমিঙে অনিবাৰ্যভাৱে কিছুমান উপাদানত ৰেণ্ডাৰ আৰ্টিফেক্টসমূহ উপস্থাপন কৰে, বুটষ্ট্ৰেপ আৰু বাকী ৱেব দুয়োটাতে। সমস্যাটোৰ ওপৰত নিৰ্ভৰ কৰি আমি হয়তো ইয়াক সমাধান কৰিব পাৰিম (প্ৰথমে সন্ধান কৰক আৰু তাৰ পিছত প্ৰয়োজন হ’লে এটা সমস্যা খুলিব)। কিন্তু আমি এইবোৰক আওকাণ কৰাৰ প্ৰৱণতা ৰাখোঁ কাৰণ ইয়াৰ প্ৰায়ে হেকি ৱৰ্কআৰউণ্ডৰ বাহিৰে আন কোনো প্ৰত্যক্ষ সমাধান নাথাকে।

আঠাযুক্ত :hover/ :focusমোবাইলত

যদিও প্ৰকৃত হভাৰিং বেছিভাগ টাচস্ক্ৰীণত সম্ভৱ নহয়, বেছিভাগ মোবাইল ব্ৰাউজাৰে হভাৰিং সমৰ্থন অনুকৰণ কৰে আৰু :hover"আঠাযুক্ত" কৰে। অৰ্থাৎ, :hoverশৈলীসমূহে এটা উপাদান টেপ কৰাৰ পিছত প্ৰয়োগ কৰিবলৈ আৰম্ভ কৰে আৰু ব্যৱহাৰকাৰীয়ে আন কোনো উপাদান টেপ কৰাৰ পিছতহে প্ৰয়োগ কৰা বন্ধ কৰে। ই এনে ব্ৰাউজাৰসমূহত Bootstrap ৰ :hoverঅৱস্থাসমূহ অবাঞ্চিতভাৱে "আটক" হ'ব পাৰে। কিছুমান মোবাইল ব্ৰাউজাৰেও :focusএকেধৰণৰ আঠাযুক্ত কৰে। এনে শৈলীসমূহ সম্পূৰ্ণৰূপে আঁতৰোৱাৰ বাহিৰে এই সমস্যাসমূহৰ বাবে বৰ্তমান কোনো সহজ সমাধান নাই।

প্ৰিন্টিং

আনকি কিছুমান আধুনিক ব্ৰাউজাৰতো প্ৰিন্টিং কুটিল হ’ব পাৰে।

বিশেষকৈ, Chrome v32 ৰ পৰা আৰু মাৰ্জিন ছেটিংছ নিৰ্বিশেষে, Chrome এ এটা ৱেবপেজ প্ৰিন্ট কৰাৰ সময়ত মিডিয়া প্ৰশ্নসমূহ সমাধান কৰাৰ সময়ত ভৌতিক কাগজৰ আকাৰতকৈ যথেষ্ট সংকীৰ্ণ এটা ভিউপ'ৰ্ট প্ৰস্থ ব্যৱহাৰ কৰে। ইয়াৰ ফলত Bootstrap ৰ অতিৰিক্ত-সৰু গ্ৰীড অপ্ৰত্যাশিতভাৱে সক্ৰিয় হব পাৰে প্ৰিন্ট কৰাৰ সময়ত । কিছু বিৱৰণৰ বাবে সংখ্যা #12078 আৰু Chrome বাগ #273306 চাওক। প্ৰস্তাৱিত সমাধানসমূহ:

• অতিৰিক্ত-সৰু গ্ৰীডটো আকোৱালি লওক আৰু নিশ্চিত কৰক যে আপোনাৰ পৃষ্ঠাটো ইয়াৰ অধীনত গ্ৰহণযোগ্য দেখা যায়।
• কম চলকসমূহৰ মানসমূহ স্বনিৰ্বাচিত কৰক @screen-*যাতে আপোনাৰ প্ৰিন্টাৰ কাগজ অতিৰিক্ত-সৰুতকৈ ডাঙৰ বুলি ধৰা হয়।
• কেৱল প্ৰিন্ট মাধ্যমৰ বাবে গ্ৰীড আকাৰ ব্ৰেকপইন্ট সলনি কৰিবলে স্বনিৰ্বাচিত মাধ্যম প্ৰশ্নসমূহ যোগ কৰক।

লগতে, Safari v8.0 ৰ পৰা, fixed-width .containers এ Safari ক প্ৰিন্ট কৰাৰ সময়ত এটা অস্বাভাৱিকভাৱে সৰু ফন্ট আকাৰ ব্যৱহাৰ কৰিবলৈ বাধ্য কৰিব পাৰে। অধিক বিৱৰণৰ বাবে # 14868 আৰু WebKit বাগ #138192 চাওক। ইয়াৰ বাবে এটা সম্ভাৱ্য সমাধান হ'ল নিম্নলিখিত CSS যোগ কৰা:

@media print {
  .container {
    width: auto;
  }
}

Android ষ্টক ব্ৰাউজাৰ

বাকচৰ বাহিৰত, এণ্ড্ৰইড ৪.১ (আৰু আনকি কিছুমান নতুন মুক্তিও আপাত দৃষ্টিত) ব্ৰাউজাৰ এপৰ সৈতে পছন্দৰ ডিফল্ট ৱেব ব্ৰাউজাৰ হিচাপে প্ৰেৰণ কৰা হয় (ক্ৰ’মৰ বিপৰীতে)। দুৰ্ভাগ্যজনকভাৱে, ব্ৰাউজাৰ এপটোত সাধাৰণতে CSS ৰ সৈতে বহুতো বাগ আৰু অসামঞ্জস্যতা আছে।

মেনুসমূহ নিৰ্ব্বাচন কৰক

উপাদানসমূহত , <select>Android ষ্টক ব্ৰাউজাৰে পাৰ্শ্ব নিয়ন্ত্ৰণসমূহ প্ৰদৰ্শন নকৰে যদি এটা border-radiusআৰু/বা borderপ্ৰয়োগ কৰা হৈছে। ( বিস্তাৰিত বিৱৰণৰ বাবে এই StackOverflow প্ৰশ্ন চাওক ।) আপত্তিজনক CSS আঁতৰাবলৈ তলৰ ক'ডৰ স্নিপেট ব্যৱহাৰ কৰক আৰু <select>Android ষ্টক ব্ৰাউজাৰত এটা অষ্টাইল কৰা উপাদান হিচাপে ৰেণ্ডাৰ কৰক। ব্যৱহাৰকাৰী এজেন্ট স্নিফিঙে Chrome, Safari, আৰু Mozilla ব্ৰাউজাৰসমূহৰ সৈতে হস্তক্ষেপ এৰাই চলিব।

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

এটা উদাহৰণ চাব বিচাৰেনে? এই JS Bin ডেমো চাওক।

বৈধকৰণকাৰী

পুৰণি আৰু বাগী ব্ৰাউজাৰসমূহক সম্ভৱপৰ উত্তম অভিজ্ঞতা প্ৰদান কৰিবলৈ, বুটষ্ট্ৰেপে ব্ৰাউজাৰসমূহত নিজেই বাগসমূহৰ সমাধান কৰিবলৈ কিছুমান ব্ৰাউজাৰ সংস্কৰণসমূহলৈ বিশেষ CSS লক্ষ্য কৰি কেইবাটাও ঠাইত CSS ব্ৰাউজাৰ হেক ব্যৱহাৰ কৰে। এই হেকসমূহে বুজিব পৰা যায় যে CSS বৈধকৰণকাৰীসকলে অভিযোগ কৰে যে সেইবোৰ অবৈধ। দুটামান ঠাইত, আমি ব্লিডিং-এজ CSS বৈশিষ্ট্যসমূহো ব্যৱহাৰ কৰো যিবোৰ এতিয়াও সম্পূৰ্ণৰূপে প্ৰামাণিক কৰা হোৱা নাই, কিন্তু এইবোৰ কেৱল প্ৰগতিশীল বৃদ্ধিৰ বাবে ব্যৱহাৰ কৰা হয়।

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

আমাৰ HTML নথিপত্ৰসমূহত একেদৰেই কিছুমান তুচ্ছ আৰু অপ্ৰয়োজনীয় HTML বৈধকৰণ সতৰ্কবাণী আছে কাৰণ আমাৰ এটা নিৰ্দিষ্ট Firefox বাগৰ বাবে এটা ৱৰ্কআৰউণ্ড অন্তৰ্ভুক্ত কৰা হৈছে ।

তৃতীয় পক্ষৰ সমৰ্থন

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

বক্স-চাইজিং

গুগল মেপ আৰু গুগল কাষ্টম সন্ধান ইঞ্জিনকে ধৰি কিছুমান তৃতীয় পক্ষৰ চফ্টৱেৰ, বুটষ্ট্ৰেপৰ সৈতে সংঘাত কৰে কাৰণ * { box-sizing: border-box; }, এটা নিয়ম যিয়ে ইয়াক এনে paddingকৰে যিয়ে এটা উপাদানৰ চূড়ান্ত গণনা কৰা প্ৰস্থত প্ৰভাৱ পেলাব নোৱাৰে। CSS Tricks ত বাকচ মডেল আৰু আকাৰ নিৰ্ধাৰণৰ বিষয়ে অধিক শিকিব ।

প্ৰসংগৰ ওপৰত নিৰ্ভৰ কৰি, আপুনি প্ৰয়োজন অনুসৰি অভাৰৰাইড কৰিব পাৰে (বিকল্প 1) বা সম্পূৰ্ণ অঞ্চলসমূহৰ বাবে বাকচ-আকাৰ পুনৰায় সেট কৰিব পাৰে (বিকল্প 2)।

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

অভিগম্যতা

বুটষ্ট্ৰেপে সাধাৰণ ৱেব প্ৰামাণিকসমূহ অনুসৰণ কৰে আৰু—নূন্যতম অতিৰিক্ত প্ৰচেষ্টাৰ সৈতে— AT ব্যৱহাৰ কৰাসকলৰ বাবে অভিগমযোগ্য চাইটসমূহ সৃষ্টি কৰিবলে ব্যৱহাৰ কৰিব পাৰি ।

নেভিগেচন এৰি দিয়ক

যদি আপোনাৰ নেভিগেচনত বহুতো সংযোগ আছে আৰু DOM ত মূল বিষয়বস্তুৰ আগত আহে, Skip to main contentনেভিগেচনৰ আগত এটা সংযোগ যোগ কৰক (এটা সহজ ব্যাখ্যাৰ বাবে, নেভিগেচন সংযোগসমূহ এৰি দিয়ক ৰ ওপৰত এই A11Y প্ৰকল্প প্ৰবন্ধ চাওক )। শ্ৰেণীটো ব্যৱহাৰ কৰিলে .sr-onlyস্কিপ সংযোগটো দৃশ্যমানভাৱে লুকুৱাই ৰাখিব, আৰু .sr-only-focusableশ্ৰেণীটোৱে নিশ্চিত কৰিব যে সংযোগটো এবাৰ কেন্দ্ৰীভূত হোৱাৰ পিছত দৃশ্যমান হৈ পৰে (দৃশ্যমান কিবৰ্ড ব্যৱহাৰকাৰীসকলৰ বাবে)।

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

নেষ্টেড শিৰোনামসমূহ

শিৰোনামসমূহ নেষ্ট কৰাৰ সময়ত ( <h1>- <h6>), আপোনাৰ প্ৰাথমিক দস্তাবেজ হেডাৰ এটা হ'ব লাগে <h1>। পৰৱৰ্তী শিৰোনামসমূহে যুক্তিসংগত ব্যৱহাৰ কৰিব লাগে <h2>- <h6>যেনে পৰ্দা পাঠকে আপোনাৰ পৃষ্ঠাসমূহৰ বাবে এটা বিষয়বস্তুৰ টেবুল নিৰ্মাণ কৰিব পাৰে।

HTML CodeSniffer আৰু Penn State ৰ AccessAbility ত অধিক শিকিব ।

ৰঙৰ বিপৰীতমুখীতা

বৰ্তমানে, বুটষ্ট্ৰেপত উপলব্ধ কিছুমান অবিকল্পিত ৰঙৰ সংমিশ্ৰণ (যেনে বিভিন্ন শৈলীযুক্ত বুটাম শ্ৰেণীসমূহ, মূল ক'ড ব্লকসমূহৰ বাবে ব্যৱহৃত কিছুমান ক'ড হাইলাইটিং ৰং , .bg-primary প্ৰসংগভিত্তিক পটভূমি সহায়ক শ্ৰেণী, আৰু অবিকল্পিত সংযোগ ৰং যেতিয়া এটা বগা পটভূমিত ব্যৱহাৰ কৰা হয়) কম কনট্ৰাষ্ট ৰেচিঅ' থাকে ( ৪.৫:১ ৰ পৰামৰ্শ দিয়া অনুপাতৰ তলত )। ইয়াৰ ফলত কম দৃষ্টিশক্তি থকা বা ৰং অন্ধ ব্যৱহাৰকাৰীসকলৰ সমস্যাৰ সৃষ্টি হ’ব পাৰে। এই অবিকল্পিত ৰংসমূহ পৰিবৰ্তন কৰিব লাগিব সিহতৰ কনট্ৰাষ্ট আৰু পাঠ্যতা বৃদ্ধি কৰিবলে।

অতিৰিক্ত সম্পদ

• অভিগম্যতা সমস্যাসমূহ চিনাক্ত কৰাৰ বাবে "HTML Codesniffer" বুকমাৰ্কলেট
• Chrome ৰ অভিগম্যতা ডেভেলপাৰ সঁজুলিসমূহ সম্প্ৰসাৰণ
• ৰঙৰ কনট্ৰাষ্ট এনালাইজাৰ
• A11Y প্ৰকল্পটো
• MDN অভিগম্যতা নথিপত্ৰ

অনুজ্ঞাপত্ৰৰ FAQs

বুটষ্ট্ৰেপ MIT অনুজ্ঞাপত্ৰৰ অধীনত মুকলি কৰা হৈছে আৰু ইয়াৰ কপিৰাইট ২০১৬ টুইটাৰ। সৰু সৰু টুকুৰালৈ উতলাই দিলে ইয়াক তলত দিয়া চৰ্তসমূহৰ সৈতে বৰ্ণনা কৰিব পাৰি।

ইয়াৰ বাবে আপুনি নিম্নোক্ত কামবোৰ কৰিব লাগিব:

• অনুজ্ঞা আৰু কপিৰাইট জাননী Bootstrap ৰ CSS আৰু JavaScript নথিপত্ৰসমূহত অন্তৰ্ভুক্ত কৰি ৰাখক যেতিয়া আপুনি আপোনাৰ কামত সিহতক ব্যৱহাৰ কৰে

ই আপোনাক অনুমতি দিয়ে:

• ব্যক্তিগত, ব্যক্তিগত, কোম্পানী আভ্যন্তৰীণ, বা বাণিজ্যিক উদ্দেশ্যৰ বাবে সম্পূৰ্ণ বা আংশিকভাৱে Bootstrap মুক্তভাৱে ডাউনলোড আৰু ব্যৱহাৰ কৰক
• আপুনি সৃষ্টি কৰা সৰঞ্জামসমূহ বা বিতৰণসমূহত Bootstrap ব্যৱহাৰ কৰক
• উৎস ক'ড পৰিবৰ্তন কৰক
• অনুজ্ঞাত অন্তৰ্ভুক্ত নোহোৱা তৃতীয় পক্ষসমূহলে Bootstrap পৰিবৰ্তন আৰু বিতৰণ কৰিবলে এটা উপ-অনুজ্ঞাপত্ৰ প্ৰদান কৰক

ই আপোনাক নিষিদ্ধ কৰে:

• লেখক আৰু অনুজ্ঞাপত্ৰৰ মালিকসকলক ক্ষতিৰ বাবে দায়ী কৰক কাৰণ Bootstrap ৱাৰেণ্টী অবিহনে প্ৰদান কৰা হৈছে
• Bootstrap ৰ সৃষ্টিকৰ্তা বা কপিৰাইট ধাৰীসকলক দায়ী কৰক
• সঠিক বৈশিষ্ট্য অবিহনে Bootstrap ৰ যিকোনো টুকুৰা পুনৰ বিতৰণ কৰক
• টুইটাৰৰ মালিকানাধীন যিকোনো চিহ্ন যিকোনো ধৰণে ব্যৱহাৰ কৰক যিয়ে ক'ব পাৰে বা ইংগিত দিব পাৰে যে টুইটাৰে আপোনাৰ বিতৰণৰ সমৰ্থন কৰে
• টুইটাৰৰ মালিকানাধীন যিকোনো চিহ্ন যিকোনো ধৰণে ব্যৱহাৰ কৰক যিয়ে ক'ব পাৰে বা ইংগিত দিব পাৰে যে আপুনি প্ৰশ্ন কৰা টুইটাৰ চফ্টৱেৰটো সৃষ্টি কৰিছে

ইয়াৰ বাবে আপুনি:

• Bootstrap ৰ উৎস নিজেই অন্তৰ্ভুক্ত কৰক, বা আপুনি ইয়াত কৰা যিকোনো পৰিবৰ্তনসমূহ, আপুনি ইয়াক অন্তৰ্ভুক্ত কৰা যিকোনো পুনৰ বিতৰণত অন্তৰ্ভুক্ত কৰক
• আপুনি Bootstrap লে কৰা পৰিবৰ্তনসমূহ Bootstrap প্ৰকল্পলৈ ঘূৰাই দিয়ক (যদিও এনে মতামত উৎসাহিত কৰা হয়)

সম্পূৰ্ণ বুটষ্ট্ৰেপ অনুজ্ঞা অধিক তথ্যৰ বাবে প্ৰকল্প ভঁৰালত অৱস্থিত ।

অনুবাদসমূহ

সম্প্ৰদায়ৰ সদস্যসকলে Bootstrap ৰ নথিপত্ৰসমূহ বিভিন্ন ভাষালৈ অনুবাদ কৰিছে। কোনো এজনকে আনুষ্ঠানিকভাৱে সমৰ্থিত নহয় আৰু তেওঁলোক সদায় আপডেট নহ’বও পাৰে।

• বুটষ্ট্ৰেপ 中文文档 (চীনা)
• বুটস্ট্ৰেপ 3 中文手冊 (চীনা (পৰম্পৰাগত))
• Bootstrap på Dansk (ডেনিশ)
• বুটস্ট্রেপ en Français (ফরাসি)
• Bootstrap auf Deutsch (জার্মান)
• বুটস্ট্রেপ in Italiano (ইতালীয়)
• বুটস্ট্ৰেপ 한국어 (কোৰিয়ান)
• ব্রাজিল (ব্রাজিলিয়ান পর্তুগীজ)
• বুটষ্ট্ৰেপ по-русски (ৰাছিয়ান)
• Bootstrap en Español (স্প্যানিশ)
• Türkçe বুটস্ট্রেপ (তুর্কি)
• বুটষ্ট্ৰেপ українською (ইউক্ৰেইন)
• বুটস্ট্ৰেপ bằng tiếng Việt (ভিয়েটনামী)

আমি অনুবাদসমূহ সংগঠিত বা আয়োজন কৰাত সহায় নকৰো, আমি মাত্ৰ সেইবোৰৰ সৈতে লিংক কৰোঁ।

নতুন বা উন্নত অনুবাদ শেষ কৰিলেনে? আমাৰ তালিকাত যোগ কৰিবলৈ এটা পুল অনুৰোধ খুলিব।