ডাউনলোড করুন

বুটস্ট্র্যাপ (বর্তমানে v3.4.1) দ্রুত শুরু করার কয়েকটি সহজ উপায় রয়েছে, প্রতিটি একটি ভিন্ন দক্ষতার স্তর এবং ব্যবহারের ক্ষেত্রে আবেদন করে। আপনার বিশেষ প্রয়োজন অনুসারে কি দেখতে মাধ্যমে পড়ুন.

jsDelivr

jsDelivr- এর লোকেরা বুটস্ট্র্যাপের সিএসএস এবং জাভাস্ক্রিপ্টের জন্য সদয়ভাবে CDN সমর্থন প্রদান করে। শুধু এই jsDelivr লিঙ্ক ব্যবহার করুন.

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

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

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

Bower দিয়ে ইনস্টল করুন

এছাড়াও আপনি Bower ব্যবহার করে Bootstrap এর Less, CSS, JavaScript এবং ফন্টগুলি ইনস্টল এবং পরিচালনা করতে পারেন :

bower install bootstrap

npm দিয়ে ইনস্টল করুন

আপনি npm ব্যবহার করে বুটস্ট্র্যাপ ইনস্টল করতে পারেন :

npm install bootstrap@3

require('bootstrap')বুটস্ট্র্যাপের সমস্ত jQuery প্লাগইন jQuery অবজেক্টে লোড করবে। মডিউল নিজেই bootstrapকিছু রপ্তানি করে না। /js/*.jsপ্যাকেজের শীর্ষ-স্তরের ডিরেক্টরির অধীনে ফাইলগুলি লোড করে আপনি নিজে নিজে বুটস্ট্র্যাপের jQuery প্লাগইনগুলি লোড করতে পারেন ।

বুটস্ট্র্যাপের package.jsonনিম্নলিখিত কীগুলির অধীনে কিছু অতিরিক্ত মেটাডেটা রয়েছে:

• less- বুটস্ট্র্যাপের প্রধান লেস সোর্স ফাইলের পথ
• style- বুটস্ট্র্যাপের নন-মিনিফাইড সিএসএসের পথ যা ডিফল্ট সেটিংস ব্যবহার করে প্রি-কম্পাইল করা হয়েছে (কোনও কাস্টমাইজেশন নেই)

কম্পোজার দিয়ে ইন্সটল করুন

আপনি কম্পোজার ব্যবহার করে বুটস্ট্র্যাপের লেস, সিএসএস, জাভাস্ক্রিপ্ট এবং ফন্টগুলি ইনস্টল এবং পরিচালনা করতে পারেন :

composer require twbs/bootstrap

কম/সাসের জন্য অটোপ্রেফিক্সার প্রয়োজন

বুটস্ট্র্যাপ অটোপ্রেফিক্সার ব্যবহার করে CSS ভেন্ডর প্রিফিক্সের সাথে ডিল করতে । আপনি যদি এর Less/Sass উৎস থেকে বুটস্ট্র্যাপ কম্পাইল করেন এবং আমাদের 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

এটি বুটস্ট্র্যাপের সবচেয়ে মৌলিক রূপ: প্রায় যেকোনো ওয়েব প্রকল্পে দ্রুত ড্রপ-ইন ব্যবহারের জন্য প্রি-কম্পাইল করা ফাইল। আমরা কম্পাইল করা CSS এবং JS ( bootstrap.*), সেইসাথে সংকলিত এবং ছোট CSS এবং JS ( bootstrap.min.*) প্রদান করি। CSS উৎস মানচিত্র ( bootstrap.*.map) নির্দিষ্ট ব্রাউজারগুলির বিকাশকারী সরঞ্জামগুলির সাথে ব্যবহারের জন্য উপলব্ধ৷ Glyphicons থেকে ফন্ট অন্তর্ভুক্ত করা হয়েছে, যেমন ঐচ্ছিক বুটস্ট্র্যাপ থিম।

বুটস্ট্র্যাপ সোর্স কোড

বুটস্ট্র্যাপ সোর্স কোড ডাউনলোডে সোর্স লেস, জাভাস্ক্রিপ্ট এবং ডকুমেন্টেশন সহ প্রি-কম্পাইল করা CSS, জাভাস্ক্রিপ্ট এবং ফন্ট অ্যাসেট অন্তর্ভুক্ত রয়েছে। আরও নির্দিষ্টভাবে, এতে নিম্নলিখিত এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে:

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

, less/, js/এবং fonts/হল আমাদের CSS, JS, এবং আইকন ফন্টের জন্য সোর্স কোড (যথাক্রমে)। ফোল্ডারটি উপরে dist/প্রি-কম্পাইল করা ডাউনলোড বিভাগে তালিকাভুক্ত সবকিছু অন্তর্ভুক্ত করে। ফোল্ডারটিতে আমাদের ডকুমেন্টেশন এবং বুটস্ট্র্যাপ ব্যবহারের docs/সোর্স কোড রয়েছে । examples/এর বাইরে, অন্য কোনো অন্তর্ভুক্ত ফাইল প্যাকেজ, লাইসেন্স তথ্য, এবং উন্নয়নের জন্য সমর্থন প্রদান করে।

CSS এবং JavaScript কম্পাইল করা

বুটস্ট্র্যাপ তার বিল্ড সিস্টেমের জন্য গ্রান্ট ব্যবহার করে, ফ্রেমওয়ার্কের সাথে কাজ করার জন্য সুবিধাজনক পদ্ধতি সহ। এইভাবে আমরা আমাদের কোড কম্পাইল করি, পরীক্ষা চালাই এবং আরও অনেক কিছু করি।

গ্রান্ট ইনস্টল করা হচ্ছে

Grunt ইনস্টল করতে, আপনাকে প্রথমে node.js ডাউনলোড এবং ইনস্টল করতে হবে (যা npm অন্তর্ভুক্ত)। npm মানে নোড প্যাকেজড মডিউল এবং node.js এর মাধ্যমে ডেভেলপমেন্ট নির্ভরতা পরিচালনা করার একটি উপায়।

1. grunt-cliএর সাথে বিশ্বব্যাপী ইনস্টল করুন npm install -g grunt-cli।
2. রুট ডিরেক্টরিতে নেভিগেট করুন /bootstrap/, তারপর চালান npm install। npm package.jsonফাইলটি দেখবে এবং সেখানে তালিকাভুক্ত প্রয়োজনীয় স্থানীয় নির্ভরতা স্বয়ংক্রিয়ভাবে ইনস্টল করবে।

সম্পন্ন হলে, আপনি কমান্ড লাইন থেকে প্রদত্ত বিভিন্ন গ্রান্ট কমান্ড চালাতে সক্ষম হবেন।

উপলব্ধ গ্রান্ট কমান্ড

grunt dist(শুধু সিএসএস এবং জাভাস্ক্রিপ্ট কম্পাইল)

/dist/সংকলিত এবং মিনিফাইড CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলির সাথে ডিরেক্টরিটি পুনরায় তৈরি করে । একটি বুটস্ট্র্যাপ ব্যবহারকারী হিসাবে, এটি সাধারণত আপনি চান কমান্ড.

grunt watch(ঘড়ি)

কম সোর্স ফাইলগুলি দেখে এবং যখনই আপনি কোনও পরিবর্তন সংরক্ষণ করেন তখন সেগুলি স্বয়ংক্রিয়ভাবে CSS-এ পুনরায় সংকলন করে৷

grunt test(পরীক্ষা চালান)

JSHint চালায় এবং বাস্তব ব্রাউজারে QUnit পরীক্ষা চালায় কার্মাকে ধন্যবাদ ।

grunt docs(ডক্স সম্পদ তৈরি ও পরীক্ষা করুন)

CSS, JavaScript এবং অন্যান্য সম্পদ তৈরি করে এবং পরীক্ষা করে যা স্থানীয়ভাবে এর মাধ্যমে ডকুমেন্টেশন চালানোর সময় ব্যবহৃত হয় bundle exec jekyll serve।

grunt(একেবারে সবকিছু তৈরি করুন এবং পরীক্ষা চালান)

CSS এবং JavaScript কম্পাইল করে এবং ছোট করে, ডকুমেন্টেশন ওয়েবসাইট তৈরি করে, ডক্সের বিরুদ্ধে HTML5 ভ্যালিডেটর চালায়, কাস্টমাইজার সম্পদ পুনরুত্থিত করে এবং আরও অনেক কিছু। জেকিলের প্রয়োজন । সাধারণত শুধুমাত্র প্রয়োজন যদি আপনি নিজেই বুটস্ট্র্যাপ হ্যাক করছেন।

সমস্যা সমাধান

আপনি নির্ভরতা ইনস্টল করতে বা Grunt কমান্ড চালানোর ক্ষেত্রে সমস্যার সম্মুখীন হলে, প্রথমে /node_modules/npm দ্বারা উত্পন্ন ডিরেক্টরিটি মুছুন। তারপর, পুনরায় চালান npm install।

মৌলিক টেমপ্লেট

এই মৌলিক HTML টেমপ্লেট দিয়ে শুরু করুন, অথবা এই উদাহরণগুলি সংশোধন করুন । আমরা আশা করি আপনি আমাদের টেমপ্লেট এবং উদাহরণগুলি কাস্টমাইজ করবেন, সেগুলিকে আপনার প্রয়োজন অনুসারে মানিয়ে নেবেন৷

একটি ন্যূনতম বুটস্ট্র্যাপ নথির সাথে কাজ শুরু করতে নীচের 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 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://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

উদাহরণ

বুটস্ট্র্যাপের অনেক উপাদান দিয়ে উপরের মৌলিক টেমপ্লেট তৈরি করুন। আমরা আপনাকে আপনার ব্যক্তিগত প্রকল্পের প্রয়োজন অনুসারে বুটস্ট্র্যাপ কাস্টমাইজ করতে এবং মানিয়ে নিতে উত্সাহিত করি।

বুটস্ট্র্যাপ রিপোজিটরি ডাউনলোড করে নিচের প্রতিটি উদাহরণের জন্য সোর্স কোড পান । উদাহরণ ডিরেক্টরি পাওয়া যাবে docs/examples/.

ফ্রেমওয়ার্ক ব্যবহার করে

স্টার্টার টেমপ্লেট

মৌলিক বিষয় ছাড়া আর কিছুই নয়: একটি ধারক সহ কম্পাইল করা CSS এবং JavaScript।

বুটস্ট্র্যাপ থিম

চাক্ষুষভাবে উন্নত অভিজ্ঞতার জন্য ঐচ্ছিক বুটস্ট্র্যাপ থিম লোড করুন।

গ্রিড

চারটি স্তর, নেস্টিং এবং আরও অনেক কিছু সহ গ্রিড লেআউটের একাধিক উদাহরণ।

জাম্বোট্রন

একটি navbar এবং কিছু মৌলিক গ্রিড কলাম দিয়ে জাম্বোট্রনের চারপাশে তৈরি করুন।

সরু জাম্বোট্রন

ডিফল্ট কন্টেইনার এবং জাম্বোট্রন সংকুচিত করে একটি আরও কাস্টম পৃষ্ঠা তৈরি করুন।

কর্মে Navbars

নববার

সুপার বেসিক টেমপ্লেট যা কিছু অতিরিক্ত সামগ্রী সহ navbar অন্তর্ভুক্ত করে।

স্ট্যাটিক শীর্ষ নেভিবার

কিছু অতিরিক্ত সামগ্রী সহ একটি স্ট্যাটিক শীর্ষ নেভিবার সহ সুপার বেসিক টেমপ্লেট৷

স্থির নববার

কিছু অতিরিক্ত সামগ্রী সহ একটি নির্দিষ্ট শীর্ষ নেভিবার সহ সুপার বেসিক টেমপ্লেট৷

কাস্টম উপাদান

আবরণ

সহজ এবং সুন্দর হোম পেজ তৈরির জন্য একটি এক-পৃষ্ঠার টেমপ্লেট।

ক্যারোসেল

নেভিবার এবং ক্যারোজেল কাস্টমাইজ করুন, তারপর কিছু নতুন উপাদান যোগ করুন।

ব্লগ

কাস্টম নেভিগেশন, হেডার এবং টাইপ সহ সাধারণ দুই-কলামের ব্লগ লেআউট।

ড্যাশবোর্ড

স্থির সাইডবার এবং নেভিবার সহ অ্যাডমিন ড্যাশবোর্ডের জন্য মৌলিক কাঠামো।

সাইন ইন পৃষ্ঠা

একটি সাধারণ সাইন ইন ফর্মের জন্য কাস্টম ফর্ম লেআউট এবং ডিজাইন৷

ন্যায্য ন্যাভি

ন্যায্য লিঙ্ক সহ একটি কাস্টম নেভিবার তৈরি করুন। মাথা আপ! খুব সাফারি বন্ধুত্বপূর্ণ নয়।

স্টিকি ফুটার

ভিউপোর্টের নীচের অংশে একটি ফুটার সংযুক্ত করুন যখন বিষয়বস্তু তার থেকে ছোট হয়।

navbar সহ স্টিকি ফুটার

শীর্ষে একটি স্থির ন্যাভবার সহ ভিউপোর্টের নীচে একটি ফুটার সংযুক্ত করুন৷

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

অ-প্রতিক্রিয়াশীল বুটস্ট্র্যাপ

আমাদের ডক্সে বুটস্ট্র্যাপের প্রতিক্রিয়াশীলতা সহজেই অক্ষম করুন ।

অফ-ক্যানভাস

বুটস্ট্র্যাপের সাথে ব্যবহারের জন্য একটি টগলযোগ্য অফ-ক্যানভাস নেভিগেশন মেনু তৈরি করুন।

টুলস

বুটলিন্ট

বুটলিন্ট হল অফিসিয়াল বুটস্ট্র্যাপ এইচটিএমএল লিন্টার টুল। এটি স্বয়ংক্রিয়ভাবে ওয়েবপৃষ্ঠাগুলিতে বেশ কয়েকটি সাধারণ HTML ভুলের জন্য পরীক্ষা করে যা মোটামুটি "ভ্যানিলা" উপায়ে বুটস্ট্র্যাপ ব্যবহার করছে। ভ্যানিলা বুটস্ট্র্যাপের উপাদান/উইজেটগুলির জন্য DOM-এর অংশগুলি নির্দিষ্ট কাঠামোর সাথে সামঞ্জস্য করতে হবে। বুটলিন্ট চেক করে যে বুটস্ট্র্যাপ উপাদানগুলির দৃষ্টান্তগুলি সঠিকভাবে-গঠিত HTML আছে। আপনার বুটস্ট্র্যাপ ওয়েব ডেভেলপমেন্ট টুলচেইনে বুটলিন্ট যোগ করার কথা বিবেচনা করুন যাতে সাধারণ ভুলগুলির কোনোটিই আপনার প্রকল্পের বিকাশকে ধীর করে না দেয়।

সম্প্রদায়

বুটস্ট্র্যাপের বিকাশ সম্পর্কে আপ টু ডেট থাকুন এবং এই সহায়ক সংস্থানগুলির সাথে সম্প্রদায়ের কাছে পৌঁছান৷

• অফিসিয়াল বুটস্ট্র্যাপ ব্লগ পড়ুন এবং সদস্যতা নিন ।
• ##বুটস্ট্র্যাপ চ্যানেলেirc.freenode.net সার্ভারে IRC ব্যবহার করে সহকর্মী বুটস্ট্র্যাপারদের সাথে চ্যাট করুন ।
• বুটস্ট্র্যাপ ব্যবহারে সহায়তার জন্য, ট্যাগ ব্যবহার করে স্ট্যাকওভারফ্লোতেtwitter-bootstrap-3 জিজ্ঞাসা করুন ।
• বিকাশকারীদের প্যাকেজগুলিতে কীওয়ার্ড ব্যবহার করা উচিত যা সর্বাধিক আবিষ্কারযোগ্যতার জন্য npm বা অনুরূপ বিতরণ প্রক্রিয়ার bootstrapমাধ্যমে বিতরণ করার সময় বুটস্ট্র্যাপের কার্যকারিতা পরিবর্তন বা যোগ করে ।
• বুটস্ট্র্যাপ এক্সপোতে বুটস্ট্র্যাপ দিয়ে মানুষ তৈরির অনুপ্রেরণামূলক উদাহরণ খুঁজুন ।

আপনি সর্বশেষ গসিপ এবং দুর্দান্ত মিউজিক ভিডিওগুলির জন্য টুইটারে @getbootstrap অনুসরণ করতে পারেন ।

প্রতিক্রিয়াশীলতা অক্ষম করা হচ্ছে

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

পৃষ্ঠার প্রতিক্রিয়াশীলতা নিষ্ক্রিয় করার পদক্ষেপ

1. CSS<meta> ডক্সে উল্লিখিত ভিউপোর্ট বাদ দিন
2. একটি একক প্রস্থ সহ প্রতিটি গ্রিড স্তরের জন্য ওভাররাইড করুন width, .containerউদাহরণস্বরূপ width: 970px !important;নিশ্চিত করুন যে এটি ডিফল্ট বুটস্ট্র্যাপ CSS এর পরে আসে। আপনি ঐচ্ছিকভাবে !importantমিডিয়া কোয়েরি বা কিছু নির্বাচক-ফু দিয়ে এড়াতে পারেন।
3. যদি navbars ব্যবহার করে, তাহলে সমস্ত navbar কেলেপিং এবং প্রসারিত আচরণ মুছে ফেলুন।
4. গ্রিড লেআউটের .col-xs-*জন্য, মাঝারি/বড় লেআউটের পাশাপাশি বা তার জায়গায় ক্লাস ব্যবহার করুন। চিন্তা করবেন না, অতিরিক্ত-ছোট ডিভাইস গ্রিড সমস্ত রেজোলিউশনে স্কেল করে।

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

প্রতিক্রিয়াশীলতা অক্ষম সহ বুটস্ট্র্যাপ টেমপ্লেট

আমরা একটি উদাহরণে এই পদক্ষেপগুলি প্রয়োগ করেছি৷ নির্দিষ্ট পরিবর্তন বাস্তবায়িত দেখতে এর সোর্স কোড পড়ুন।

অ-প্রতিক্রিয়াশীল উদাহরণ দেখুন

ব্রাউজার এবং ডিভাইস সমর্থন

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

সমর্থিত ব্রাউজার

বিশেষত, আমরা নিম্নলিখিত ব্রাউজার এবং প্ল্যাটফর্মগুলির সর্বশেষ সংস্করণগুলিকে সমর্থন করি৷

যে বিকল্প ব্রাউজারগুলি ওয়েবকিট, ব্লিঙ্ক বা গেকোর সর্বশেষ সংস্করণ ব্যবহার করে, তা সরাসরি বা প্ল্যাটফর্মের ওয়েব ভিউ API-এর মাধ্যমে, স্পষ্টভাবে সমর্থিত নয়। যাইহোক, বুটস্ট্র্যাপ (বেশিরভাগ ক্ষেত্রে) এই ব্রাউজারগুলিতেও সঠিকভাবে প্রদর্শন এবং কাজ করা উচিত। আরো সুনির্দিষ্ট সমর্থন তথ্য নীচে প্রদান করা হয়েছে.

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

সাধারণভাবে বলতে গেলে, বুটস্ট্র্যাপ প্রতিটি প্রধান প্ল্যাটফর্মের ডিফল্ট ব্রাউজারগুলির সর্বশেষ সংস্করণ সমর্থন করে। মনে রাখবেন যে প্রক্সি ব্রাউজারগুলি (যেমন অপেরা মিনি, অপেরা মোবাইলের টার্বো মোড, ইউসি ব্রাউজার মিনি, অ্যামাজন সিল্ক) সমর্থিত নয়৷

ডেস্কটপ ব্রাউজার

একইভাবে, বেশিরভাগ ডেস্কটপ ব্রাউজারগুলির সর্বশেষ সংস্করণগুলি সমর্থিত।

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

ফায়ারফক্সের জন্য, সর্বশেষ স্বাভাবিক স্থিতিশীল রিলিজ ছাড়াও, আমরা ফায়ারফক্সের সর্বশেষ এক্সটেন্ডেড সাপোর্ট রিলিজ (ESR) সংস্করণকেও সমর্থন করি।

অনানুষ্ঠানিকভাবে, বুটস্ট্র্যাপ ক্রোমিয়াম এবং লিনাক্সের জন্য ক্রোম, লিনাক্সের জন্য ফায়ারফক্স, এবং ইন্টারনেট এক্সপ্লোরার 7, পাশাপাশি মাইক্রোসফ্ট এজ-এ দেখতে এবং আচরণ করা উচিত, যদিও তারা আনুষ্ঠানিকভাবে সমর্থিত নয়।

কিছু ব্রাউজার বাগগুলির একটি তালিকার জন্য যা বুটস্ট্র্যাপকে মোকাবেলা করতে হয়, আমাদের ব্রাউজার বাগগুলির ওয়াল দেখুন ৷

ইন্টারনেট এক্সপ্লোরার 8 এবং 9

ইন্টারনেট এক্সপ্লোরার 8 এবং 9ও সমর্থিত, তবে, দয়া করে সচেতন থাকুন যে কিছু CSS3 বৈশিষ্ট্য এবং HTML5 উপাদানগুলি এই ব্রাউজারগুলির দ্বারা সম্পূর্ণরূপে সমর্থিত নয়৷ উপরন্তু, ইন্টারনেট এক্সপ্লোরার 8-এর জন্য মিডিয়া ক্যোয়ারী সমর্থন সক্ষম করতে Respond.js ব্যবহার করতে হবে।

CSS3 এবং HTML5 বৈশিষ্ট্যগুলির ব্রাউজার সমর্থন সম্পর্কে বিশদ বিবরণের জন্য আমি কি ব্যবহার করতে পারি... দেখুন ।

ইন্টারনেট এক্সপ্লোরার 8 এবং 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। বিশেষ করে, কিছু ড্রুপাল কনফিগারেশন ব্যবহার করার জন্য পরিচিত @import। বিস্তারিত জানার জন্য Respond.js ডক্স দেখুন ।

ইন্টারনেট এক্সপ্লোরার 8 এবং বক্স-সাইজিং

, , , বা box-sizing: border-box;এর সাথে মিলিত হলে IE8 সম্পূর্ণরূপে সমর্থন করে না । যে কারণে, v3.0.1 হিসাবে, আমরা আর s ব্যবহার করি না।min-widthmax-widthmin-heightmax-heightmax-width.container

ইন্টারনেট এক্সপ্লোরার 8 এবং @ফন্ট-ফেস

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

IE সামঞ্জস্যপূর্ণ মোড

বুটস্ট্র্যাপ পুরানো ইন্টারনেট এক্সপ্লোরার সামঞ্জস্য মোডে সমর্থিত নয়। আপনি IE এর জন্য সর্বশেষ রেন্ডারিং মোড ব্যবহার করছেন তা নিশ্চিত করতে, <meta>আপনার পৃষ্ঠাগুলিতে উপযুক্ত ট্যাগ অন্তর্ভুক্ত করার কথা বিবেচনা করুন:

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

ডিবাগিং টুল খুলে ডকুমেন্ট মোড নিশ্চিত করুন: F12"ডকুমেন্ট মোড" টিপুন এবং চেক করুন।

ইন্টারনেট এক্সপ্লোরারের প্রতিটি সমর্থিত সংস্করণে সম্ভাব্য সর্বোত্তম রেন্ডারিং নিশ্চিত করতে এই ট্যাগটি বুটস্ট্র্যাপের সমস্ত ডকুমেন্টেশন এবং উদাহরণগুলিতে অন্তর্ভুক্ত করা হয়েছে।

আরও তথ্যের জন্য এই StackOverflow প্রশ্ন দেখুন ।

Windows 8 এবং Windows Phone 8-এ ইন্টারনেট এক্সপ্লোরার 10

ইন্টারনেট এক্সপ্লোরার 10 ডিভাইসের প্রস্থকে ভিউপোর্ট প্রস্থ থেকে আলাদা করে না , এবং এইভাবে বুটস্ট্র্যাপের 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-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/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)
}

আরও তথ্য এবং ব্যবহারের নির্দেশিকাগুলির জন্য, উইন্ডোজ ফোন 8 এবং ডিভাইস-প্রস্থ পড়ুন ।

হেড আপ হিসাবে, আমরা এটিকে বুটস্ট্র্যাপের সমস্ত ডকুমেন্টেশন এবং একটি প্রদর্শন হিসাবে উদাহরণে অন্তর্ভুক্ত করি।

সাফারি শতাংশ বৃত্তাকার

.col-*-1OS X-এর জন্য v7.1-এর আগে Safari-এর সংস্করণের রেন্ডারিং ইঞ্জিন এবং iOS v8.0-এর জন্য Safari-এ আমাদের গ্রিড ক্লাসে ব্যবহৃত দশমিক স্থানের সংখ্যা নিয়ে কিছুটা সমস্যা হয়েছিল । তাই যদি আপনার 12টি পৃথক গ্রিড কলাম থাকে, আপনি লক্ষ্য করবেন যে তারা কলামের অন্যান্য সারিগুলির তুলনায় ছোট এসেছে। Safari/iOS আপগ্রেড করার পাশাপাশি, আপনার কাছে সমাধানের জন্য কিছু বিকল্প রয়েছে:

• .pull-rightহার্ড-ডান প্রান্তিককরণ পেতে আপনার শেষ গ্রিড কলামে যোগ করুন
• সাফারির জন্য নিখুঁত রাউন্ডিং পেতে আপনার শতাংশ ম্যানুয়ালি পরিবর্তন করুন (প্রথম বিকল্পের চেয়ে বেশি কঠিন)

মডেল, নেভবার এবং ভার্চুয়াল কীবোর্ড

ওভারফ্লো এবং স্ক্রলিং

আইওএস এবং অ্যান্ড্রয়েডে উপাদানটির জন্য সমর্থন বেশ overflow: hiddenসীমিত । <body>সেই লক্ষ্যে, আপনি যখন এই ডিভাইসগুলির ব্রাউজারগুলির মধ্যে একটিতে একটি মডেলের উপরে বা নীচে স্ক্রোল করবেন, তখন <body>সামগ্রীটি স্ক্রোল করা শুরু করবে। দেখুন Chrome বাগ #175502 (Chrome v40 এ ঠিক করা হয়েছে) এবং WebKit বাগ #153852 ।

iOS পাঠ্য ক্ষেত্র এবং স্ক্রোলিং

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

ভার্চুয়াল কীবোর্ড

এছাড়াও, মনে রাখবেন যে আপনি যদি একটি স্থির নেভিবার ব্যবহার করেন বা একটি মডেলের মধ্যে ইনপুট ব্যবহার করেন, iOS-এ একটি রেন্ডারিং বাগ রয়েছে যা ভার্চুয়াল কীবোর্ড ট্রিগার হওয়ার সময় স্থির উপাদানগুলির অবস্থান আপডেট করে না৷ এর জন্য কয়েকটি সমাধানের মধ্যে রয়েছে আপনার উপাদানগুলিকে রূপান্তরিত করা position: absoluteবা ম্যানুয়ালি পজিশনিং সংশোধন করার চেষ্টা করার জন্য ফোকাসে টাইমার চালু করা। এটি বুটস্ট্র্যাপ দ্বারা পরিচালিত হয় না, তাই আপনার অ্যাপ্লিকেশনের জন্য কোন সমাধানটি সর্বোত্তম তা সিদ্ধান্ত নেওয়া আপনার উপর নির্ভর করে।

Navbar ড্রপডাউন

.dropdown-backdropz-সূচীকরণের জটিলতার কারণে ন্যাভিতে আইওএস-এ উপাদানটি ব্যবহার করা হয় না । এইভাবে, navbars-এ ড্রপডাউন বন্ধ করতে, আপনাকে অবশ্যই সরাসরি ড্রপডাউন এলিমেন্টে ক্লিক করতে হবে (অথবা অন্য কোনো উপাদান যা iOS এ একটি ক্লিক ইভেন্ট ফায়ার করবে )।

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

পৃষ্ঠা জুম করা অনিবার্যভাবে বুটস্ট্র্যাপ এবং ওয়েবের বাকি অংশে কিছু উপাদানে রেন্ডারিং আর্টিফ্যাক্ট উপস্থাপন করে। সমস্যাটির উপর নির্ভর করে, আমরা এটি ঠিক করতে সক্ষম হতে পারি (প্রথমে অনুসন্ধান করুন এবং প্রয়োজনে একটি সমস্যা খুলুন)। যাইহোক, আমরা এগুলিকে উপেক্ষা করার প্রবণতা রাখি কারণ তাদের প্রায়শই হ্যাকি ওয়ার্কঅ্যারাউন্ড ছাড়া অন্য কোনও সরাসরি সমাধান নেই।

স্টিকি :hover/ :focusমোবাইলে

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

প্রিন্টিং

এমনকি কিছু আধুনিক ব্রাউজারেও, মুদ্রণ অদ্ভুত হতে পারে।

বিশেষ করে, Chrome v32 হিসাবে এবং মার্জিন সেটিংস নির্বিশেষে, Chrome একটি ওয়েবপেজ প্রিন্ট করার সময় মিডিয়া প্রশ্নের সমাধান করার সময় বাস্তব কাগজের আকারের তুলনায় উল্লেখযোগ্যভাবে সংকীর্ণ একটি ভিউপোর্ট প্রস্থ ব্যবহার করে। এর ফলে প্রিন্ট করার সময় বুটস্ট্র্যাপের অতিরিক্ত-ছোট গ্রিড অপ্রত্যাশিতভাবে সক্রিয় হতে পারে। কিছু বিবরণের জন্য সমস্যা #12078 এবং Chrome বাগ #273306 দেখুন। প্রস্তাবিত সমাধান:

• অতিরিক্ত-ছোট গ্রিডকে আলিঙ্গন করুন এবং নিশ্চিত করুন যে আপনার পৃষ্ঠাটি এটির অধীনে গ্রহণযোগ্য দেখাচ্ছে।
• কম ভেরিয়েবলের মানগুলি কাস্টমাইজ করুন @screen-*যাতে আপনার প্রিন্টার কাগজটি অতিরিক্ত-ছোট থেকে বড় হিসাবে বিবেচিত হয়।
• শুধুমাত্র প্রিন্ট মিডিয়ার জন্য গ্রিড আকার ব্রেকপয়েন্ট পরিবর্তন করতে কাস্টম মিডিয়া প্রশ্ন যোগ করুন।

এছাড়াও, Safari v8.0-এর হিসাবে, নির্দিষ্ট-প্রস্থ .containers প্রিন্ট করার সময় Safari-কে অস্বাভাবিকভাবে ছোট ফন্ট সাইজ ব্যবহার করতে পারে। আরো বিস্তারিত জানার জন্য দেখুন #14868 এবং WebKit বাগ #138192 । এর জন্য একটি সম্ভাব্য সমাধান হল নিম্নলিখিত CSS যোগ করা:

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

অ্যান্ড্রয়েড স্টক ব্রাউজার

বাক্সের বাইরে, অ্যান্ড্রয়েড 4.1 (এবং এমনকি কিছু নতুন রিলিজ দৃশ্যত) ব্রাউজার অ্যাপের সাথে পছন্দের ডিফল্ট ওয়েব ব্রাউজার হিসেবে পাঠানো হয় (ক্রোমের বিপরীতে)। দুর্ভাগ্যবশত, ব্রাউজার অ্যাপে সাধারণভাবে CSS-এর সাথে প্রচুর বাগ এবং অসঙ্গতি রয়েছে।

মেনু নির্বাচন করুন

উপাদানগুলিতে , <select>অ্যান্ড্রয়েড স্টক ব্রাউজার পার্শ্ব নিয়ন্ত্রণগুলি প্রদর্শন করবে না যদি একটি border-radiusএবং/অথবা borderপ্রয়োগ করা হয়। ( বিশদ বিবরণের জন্য এই স্ট্যাকওভারফ্লো প্রশ্নটি<select> দেখুন।) আপত্তিকর CSS সরাতে এবং অ্যান্ড্রয়েড স্টক ব্রাউজারে একটি আনস্টাইল করা উপাদান হিসাবে রেন্ডার করতে নীচের কোডের স্নিপেটটি ব্যবহার করুন । ব্যবহারকারী এজেন্ট স্নিফিং 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 বিন ডেমো দেখুন.

যাচাইকারী

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

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

আমাদের এইচটিএমএল ডক্সে একইভাবে কিছু তুচ্ছ এবং অপ্রয়োজনীয় HTML বৈধতা সতর্কতা রয়েছে কারণ আমরা একটি নির্দিষ্ট ফায়ারফক্স বাগের জন্য একটি সমাধান অন্তর্ভুক্ত করেছি ।

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

যদিও আমরা আনুষ্ঠানিকভাবে কোনো তৃতীয় পক্ষের প্লাগইন বা অ্যাড-অন সমর্থন করি না, আমরা আপনার প্রকল্পে সম্ভাব্য সমস্যাগুলি এড়াতে সাহায্য করার জন্য কিছু দরকারী পরামর্শ অফার করি।

বক্স-সাইজিং

Google মানচিত্র এবং Google কাস্টম সার্চ ইঞ্জিন সহ কিছু তৃতীয় পক্ষের সফ্টওয়্যার, বুটস্ট্র্যাপের সাথে দ্বন্দ্বের কারণে * { box-sizing: border-box; }, একটি নিয়ম যা এটিকে paddingএকটি উপাদানের চূড়ান্ত গণনাকৃত প্রস্থকে প্রভাবিত করে না। CSS ট্রিকসে বক্স মডেল এবং সাইজিং সম্পর্কে আরও জানুন ।

প্রেক্ষাপটের উপর নির্ভর করে, আপনি প্রয়োজন অনুযায়ী ওভাররাইড করতে পারেন (বিকল্প 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 প্রাসঙ্গিক পটভূমি সহায়ক শ্রেণী, এবং সাদা ব্যাকগ্রাউন্ডে ব্যবহৃত হলে ডিফল্ট লিঙ্ক রঙ) একটি কম বৈসাদৃশ্য অনুপাত আছে ( 4.5:1 এর প্রস্তাবিত অনুপাতের নিচে )। এটি কম দৃষ্টিসম্পন্ন ব্যবহারকারীদের বা যারা বর্ণান্ধ তাদের সমস্যা সৃষ্টি করতে পারে। এই ডিফল্ট রঙগুলি তাদের বৈসাদৃশ্য এবং সুস্পষ্টতা বাড়ানোর জন্য পরিবর্তন করা প্রয়োজন হতে পারে।

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

• অ্যাক্সেসিবিলিটি সমস্যা শনাক্ত করার জন্য "HTML Codesniffer" বুকমার্কলেট
• Chrome এর অ্যাক্সেসিবিলিটি ডেভেলপার টুলস এক্সটেনশন
• কালার কনট্রাস্ট বিশ্লেষক
• A11Y প্রকল্প
• MDN অ্যাক্সেসিবিলিটি ডকুমেন্টেশন

লাইসেন্স FAQs

বুটস্ট্র্যাপ এমআইটি লাইসেন্সের অধীনে প্রকাশিত হয়েছে এবং এটি কপিরাইট 2019 টুইটার। ছোট খণ্ডে সিদ্ধ করে, এটি নিম্নলিখিত শর্তগুলির সাথে বর্ণনা করা যেতে পারে।

এটি আপনার প্রয়োজন:

• বুটস্ট্র্যাপের সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলিকে আপনার কাজে ব্যবহার করার সময় লাইসেন্স এবং কপিরাইট নোটিশ অন্তর্ভুক্ত রাখুন

এটি আপনাকে অনুমতি দেয়:

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

এটি আপনাকে নিষেধ করে:

• ওয়্যারেন্টি ছাড়া বুটস্ট্র্যাপ সরবরাহ করা হয় বলে লেখক এবং লাইসেন্সের মালিকদের ক্ষতির জন্য দায়ী রাখুন
• বুটস্ট্র্যাপের ক্রিয়েটর বা কপিরাইট ধারকদের দায়বদ্ধ রাখুন
• সঠিক অ্যাট্রিবিউশন ছাড়াই বুটস্ট্র্যাপের যেকোনো অংশ পুনরায় বিতরণ করুন
• টুইটারের মালিকানাধীন যেকোন চিহ্ন ব্যবহার করুন এমন যেকোন উপায়ে যা বোঝাতে পারে যে টুইটার আপনার বিতরণকে সমর্থন করে
• টুইটারের মালিকানাধীন যেকোন চিহ্ন ব্যবহার করুন এমন যেকোন উপায়ে যা বলা বা বোঝাতে পারে যে আপনি টুইটার সফ্টওয়্যারটি তৈরি করেছেন

এটি আপনার প্রয়োজন হয় না:

• বুটস্ট্র্যাপের উৎস অন্তর্ভুক্ত করুন, অথবা আপনি এতে যে কোনো পরিবর্তন করেছেন, যে কোনো পুনর্বন্টন আপনি একত্রিত করতে পারেন যাতে এটি অন্তর্ভুক্ত থাকে।
• বুটস্ট্র্যাপ প্রজেক্টে আপনি যে পরিবর্তনগুলি করেন তা জমা দিন (যদিও এই ধরনের প্রতিক্রিয়া উত্সাহিত করা হয়)

আরও তথ্যের জন্য সম্পূর্ণ বুটস্ট্র্যাপ লাইসেন্সটি প্রকল্পের সংগ্রহস্থলে অবস্থিত ।

অনুবাদ

সম্প্রদায়ের সদস্যরা বুটস্ট্র্যাপের ডকুমেন্টেশন বিভিন্ন ভাষায় অনুবাদ করেছে। কোনোটিই আনুষ্ঠানিকভাবে সমর্থিত নয় এবং তারা সবসময় আপ টু ডেট নাও থাকতে পারে।

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

আমরা অনুবাদগুলিকে সংগঠিত বা হোস্ট করতে সাহায্য করি না, আমরা কেবল তাদের সাথে লিঙ্ক করি।

একটি নতুন বা ভাল অনুবাদ সমাপ্ত? আমাদের তালিকায় যোগ করার জন্য একটি টান অনুরোধ খুলুন।