শুরু হচ্ছে
বুটস্ট্র্যাপের একটি ওভারভিউ, কীভাবে ডাউনলোড এবং ব্যবহার করতে হয়, মৌলিক টেমপ্লেট এবং উদাহরণ এবং আরও অনেক কিছু।
বুটস্ট্র্যাপের একটি ওভারভিউ, কীভাবে ডাউনলোড এবং ব্যবহার করতে হয়, মৌলিক টেমপ্লেট এবং উদাহরণ এবং আরও অনেক কিছু।
বুটস্ট্র্যাপ (বর্তমানে v3.3.7) দ্রুত শুরু করার কয়েকটি সহজ উপায় রয়েছে, প্রতিটি একটি ভিন্ন দক্ষতার স্তর এবং ব্যবহারের ক্ষেত্রে আবেদন করে। আপনার বিশেষ প্রয়োজন অনুসারে কি দেখতে মাধ্যমে পড়ুন.
সিএসএস, জাভাস্ক্রিপ্ট এবং ফন্ট সংকলিত এবং ছোট করা হয়েছে। কোন ডক্স বা মূল উৎস ফাইল অন্তর্ভুক্ত করা হয় না.
সোর্স লেস, জাভাস্ক্রিপ্ট এবং ফন্ট ফাইল, আমাদের ডক্স সহ। একটি কম কম্পাইলার এবং কিছু সেটআপ প্রয়োজন।
রেল, কম্পাস, বা Sass-শুধুমাত্র প্রকল্পগুলিতে সহজে অন্তর্ভুক্তির জন্য বুটস্ট্র্যাপ কম থেকে Sass-এ পোর্ট করা হয়েছে৷
jsDelivr- এর লোকেরা বুটস্ট্র্যাপের CSS এবং JavaScript-এর জন্য সদয়ভাবে CDN সমর্থন প্রদান করে। শুধু এই বুটস্ট্র্যাপ CDN লিঙ্ক ব্যবহার করুন.
এছাড়াও আপনি Bower ব্যবহার করে Bootstrap এর Less, CSS, JavaScript এবং ফন্টগুলি ইনস্টল এবং পরিচালনা করতে পারেন :
আপনি npm ব্যবহার করে বুটস্ট্র্যাপ ইনস্টল করতে পারেন :
require('bootstrap')
বুটস্ট্র্যাপের সমস্ত jQuery প্লাগইন jQuery অবজেক্টে লোড করবে। মডিউল নিজেই bootstrap
কিছু রপ্তানি করে না। /js/*.js
প্যাকেজের শীর্ষ-স্তরের ডিরেক্টরির অধীনে ফাইলগুলি লোড করে আপনি নিজে নিজে বুটস্ট্র্যাপের jQuery প্লাগইনগুলি লোড করতে পারেন ।
বুটস্ট্র্যাপের package.json
নিম্নলিখিত কীগুলির অধীনে কিছু অতিরিক্ত মেটাডেটা রয়েছে:
less
- বুটস্ট্র্যাপের প্রধান লেস সোর্স ফাইলের পথstyle
- বুটস্ট্র্যাপের নন-মিনিফাইড সিএসএসের পথ যা ডিফল্ট সেটিংস ব্যবহার করে প্রি-কম্পাইল করা হয়েছে (কোনও কাস্টমাইজেশন নেই)আপনি কম্পোজার ব্যবহার করে বুটস্ট্র্যাপের লেস, সিএসএস, জাভাস্ক্রিপ্ট এবং ফন্টগুলি ইনস্টল এবং পরিচালনা করতে পারেন :
বুটস্ট্র্যাপ অটোপ্রেফিক্সার ব্যবহার করে CSS ভেন্ডর প্রিফিক্সের সাথে ডিল করতে । আপনি যদি এর Less/Sass উৎস থেকে বুটস্ট্র্যাপ কম্পাইল করেন এবং আমাদের Gruntfile ব্যবহার না করেন, তাহলে আপনাকে অটোপ্রেফিক্সারকে আপনার বিল্ড প্রক্রিয়ায় একীভূত করতে হবে। আপনি যদি প্রি-কম্পাইলড বুটস্ট্র্যাপ ব্যবহার করেন বা আমাদের গ্রান্টফাইল ব্যবহার করেন, তাহলে আপনাকে এই বিষয়ে চিন্তা করতে হবে না কারণ Autoprefixer ইতিমধ্যেই আমাদের Gruntfile-এ একত্রিত হয়েছে।
বুটস্ট্র্যাপ দুটি আকারে ডাউনলোডযোগ্য, যার মধ্যে আপনি নিম্নলিখিত ডিরেক্টরি এবং ফাইলগুলি খুঁজে পাবেন, যৌক্তিকভাবে সাধারণ সংস্থানগুলিকে গোষ্ঠীবদ্ধ করে এবং সংকলিত এবং সংক্ষিপ্ত উভয় প্রকারভেদ প্রদান করে।
অনুগ্রহ করে মনে রাখবেন যে সমস্ত JavaScript প্লাগইনগুলির জন্য jQuery অন্তর্ভুক্ত করা প্রয়োজন, যেমনটি স্টার্টার টেমপ্লেটে দেখানো হয়েছে । jQuery এর কোন সংস্করণগুলি সমর্থিত তা দেখতে আমাদের সাথে যোগাযোগ করুন৷bower.json
একবার ডাউনলোড হয়ে গেলে, (সংকলিত) বুটস্ট্র্যাপের গঠন দেখতে সংকুচিত ফোল্ডারটি আনজিপ করুন। আপনি এই মত কিছু দেখতে পাবেন:
এটি বুটস্ট্র্যাপের সবচেয়ে মৌলিক রূপ: প্রায় যেকোনো ওয়েব প্রকল্পে দ্রুত ড্রপ-ইন ব্যবহারের জন্য প্রি-কম্পাইল করা ফাইল। আমরা কম্পাইল করা CSS এবং JS ( bootstrap.*
), সেইসাথে সংকলিত এবং ছোট CSS এবং JS ( bootstrap.min.*
) প্রদান করি। CSS উৎস মানচিত্র ( bootstrap.*.map
) নির্দিষ্ট ব্রাউজারগুলির বিকাশকারী সরঞ্জামগুলির সাথে ব্যবহারের জন্য উপলব্ধ৷ Glyphicons থেকে ফন্ট অন্তর্ভুক্ত করা হয়েছে, যেমন ঐচ্ছিক বুটস্ট্র্যাপ থিম।
বুটস্ট্র্যাপ সোর্স কোড ডাউনলোডে সোর্স লেস, জাভাস্ক্রিপ্ট এবং ডকুমেন্টেশন সহ প্রি-কম্পাইল করা CSS, জাভাস্ক্রিপ্ট এবং ফন্ট অ্যাসেট অন্তর্ভুক্ত রয়েছে। আরও নির্দিষ্টভাবে, এতে নিম্নলিখিত এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে:
, less/
, js/
এবং fonts/
হল আমাদের CSS, JS, এবং আইকন ফন্টের (যথাক্রমে) সোর্স কোড। ফোল্ডারটি উপরে dist/
প্রি-কম্পাইল করা ডাউনলোড বিভাগে তালিকাভুক্ত সবকিছু অন্তর্ভুক্ত করে। ফোল্ডারটিতে আমাদের ডকুমেন্টেশন এবং বুটস্ট্র্যাপ ব্যবহারের docs/
সোর্স কোড রয়েছে । examples/
এর বাইরে, অন্য কোনো অন্তর্ভুক্ত ফাইল প্যাকেজ, লাইসেন্স তথ্য, এবং উন্নয়নের জন্য সমর্থন প্রদান করে।
বুটস্ট্র্যাপ তার বিল্ড সিস্টেমের জন্য গ্রান্ট ব্যবহার করে, ফ্রেমওয়ার্কের সাথে কাজ করার জন্য সুবিধাজনক পদ্ধতি সহ। এইভাবে আমরা আমাদের কোড কম্পাইল করি, পরীক্ষা চালাই এবং আরও অনেক কিছু করি।
Grunt ইনস্টল করতে, আপনাকে প্রথমে node.js ডাউনলোড এবং ইনস্টল করতে হবে (যা npm অন্তর্ভুক্ত)। npm মানে নোড প্যাকেজড মডিউল এবং node.js এর মাধ্যমে ডেভেলপমেন্ট নির্ভরতা পরিচালনা করার একটি উপায়।
তারপর, কমান্ড লাইন থেকে:grunt-cli
এর সাথে বিশ্বব্যাপী ইনস্টল করুন npm install -g grunt-cli
।/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 অনুলিপি করুন৷
বুটস্ট্র্যাপের অনেক উপাদান দিয়ে উপরের মৌলিক টেমপ্লেট তৈরি করুন। আমরা আপনাকে আপনার ব্যক্তিগত প্রকল্পের প্রয়োজন অনুসারে বুটস্ট্র্যাপ কাস্টমাইজ করতে এবং মানিয়ে নিতে উত্সাহিত করি।
বুটস্ট্র্যাপ রিপোজিটরি ডাউনলোড করে নিচের প্রতিটি উদাহরণের জন্য সোর্স কোড পান । উদাহরণ ডিরেক্টরি পাওয়া যাবে docs/examples/
.
ন্যায্য লিঙ্ক সহ একটি কাস্টম নেভিবার তৈরি করুন। মাথা আপ! খুব সাফারি বন্ধুত্বপূর্ণ নয়।
বুটলিন্ট হল অফিসিয়াল বুটস্ট্র্যাপ এইচটিএমএল লিন্টার টুল। এটি স্বয়ংক্রিয়ভাবে ওয়েবপৃষ্ঠাগুলিতে বেশ কয়েকটি সাধারণ HTML ভুলের জন্য পরীক্ষা করে যা মোটামুটি "ভ্যানিলা" উপায়ে বুটস্ট্র্যাপ ব্যবহার করছে। ভ্যানিলা বুটস্ট্র্যাপের উপাদান/উইজেটগুলির জন্য DOM-এর অংশগুলি নির্দিষ্ট কাঠামোর সাথে সামঞ্জস্য করতে হবে। বুটলিন্ট চেক করে যে বুটস্ট্র্যাপ উপাদানগুলির দৃষ্টান্তগুলি সঠিকভাবে-গঠিত HTML আছে। আপনার বুটস্ট্র্যাপ ওয়েব ডেভেলপমেন্ট টুলচেইনে বুটলিন্ট যোগ করার কথা বিবেচনা করুন যাতে সাধারণ ভুলগুলির কোনোটিই আপনার প্রকল্পের বিকাশকে ধীর করে না দেয়।
বুটস্ট্র্যাপের বিকাশ সম্পর্কে আপ টু ডেট থাকুন এবং এই সহায়ক সংস্থানগুলির সাথে সম্প্রদায়ের কাছে পৌঁছান৷
irc.freenode.net
সার্ভারে IRC ব্যবহার করে সহকর্মী বুটস্ট্র্যাপারদের সাথে চ্যাট করুন ।twitter-bootstrap-3
জিজ্ঞাসা করুন ।bootstrap
মাধ্যমে বিতরণ করার সময় বুটস্ট্র্যাপের কার্যকারিতা পরিবর্তন বা যোগ করে ।আপনি সর্বশেষ গসিপ এবং দুর্দান্ত মিউজিক ভিডিওগুলির জন্য টুইটারে @getbootstrap অনুসরণ করতে পারেন ।
বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে বিভিন্ন স্ক্রীন আকারের জন্য আপনার পৃষ্ঠাগুলিকে মানিয়ে নেয়। এই বৈশিষ্ট্যটি কীভাবে নিষ্ক্রিয় করবেন তা এখানে রয়েছে যাতে আপনার পৃষ্ঠাটি এই অ-প্রতিক্রিয়াশীল উদাহরণের মতো কাজ করে ।
<meta>
ডক্সে উল্লিখিত ভিউপোর্ট বাদ দিনwidth
, .container
উদাহরণস্বরূপ width: 970px !important;
নিশ্চিত করুন যে এটি ডিফল্ট বুটস্ট্র্যাপ CSS এর পরে আসে। আপনি ঐচ্ছিকভাবে !important
মিডিয়া কোয়েরি বা কিছু নির্বাচক-ফু দিয়ে এড়াতে পারেন।.col-xs-*
জন্য, মাঝারি/বড় লেআউটের পাশাপাশি বা তার জায়গায় ক্লাস ব্যবহার করুন। চিন্তা করবেন না, অতিরিক্ত-ছোট ডিভাইস গ্রিড সমস্ত রেজোলিউশনে স্কেল করে।আপনার এখনও IE8 এর জন্য Respond.js প্রয়োজন হবে (যেহেতু আমাদের মিডিয়া প্রশ্নগুলি এখনও আছে এবং প্রক্রিয়া করা দরকার)। এটি বুটস্ট্র্যাপের "মোবাইল সাইট" দিকগুলিকে নিষ্ক্রিয় করে।
আমরা একটি উদাহরণে এই পদক্ষেপগুলি প্রয়োগ করেছি৷ নির্দিষ্ট পরিবর্তন বাস্তবায়িত দেখতে এর সোর্স কোড পড়ুন।
Bootstrap-এর একটি পুরানো সংস্করণ থেকে v3.x-এ স্থানান্তর করতে চাইছেন? আমাদের মাইগ্রেশন গাইড দেখুন ।
বুটস্ট্র্যাপ সর্বশেষ ডেস্কটপ এবং মোবাইল ব্রাউজারে সর্বোত্তম কাজ করার জন্য তৈরি করা হয়েছে, যার অর্থ পুরানো ব্রাউজারগুলি সম্পূর্ণরূপে কার্যকরী হলেও নির্দিষ্ট উপাদানগুলির রেন্ডারিং ভিন্নভাবে স্টাইল প্রদর্শন করতে পারে।
বিশেষত, আমরা নিম্নলিখিত ব্রাউজার এবং প্ল্যাটফর্মগুলির সর্বশেষ সংস্করণগুলিকে সমর্থন করি৷
যে বিকল্প ব্রাউজারগুলি ওয়েবকিট, ব্লিঙ্ক বা গেকোর সর্বশেষ সংস্করণ ব্যবহার করে, তা সরাসরি বা প্ল্যাটফর্মের ওয়েব ভিউ API-এর মাধ্যমে, স্পষ্টভাবে সমর্থিত নয়। যাইহোক, বুটস্ট্র্যাপ (বেশিরভাগ ক্ষেত্রে) এই ব্রাউজারগুলিতেও সঠিকভাবে প্রদর্শন এবং কাজ করা উচিত। আরো সুনির্দিষ্ট সমর্থন তথ্য নীচে প্রদান করা হয়েছে.
সাধারণভাবে বলতে গেলে, বুটস্ট্র্যাপ প্রতিটি প্রধান প্ল্যাটফর্মের ডিফল্ট ব্রাউজারগুলির সর্বশেষ সংস্করণ সমর্থন করে। মনে রাখবেন যে প্রক্সি ব্রাউজারগুলি (যেমন অপেরা মিনি, অপেরা মোবাইলের টার্বো মোড, ইউসি ব্রাউজার মিনি, অ্যামাজন সিল্ক) সমর্থিত নয়৷
ক্রোম | ফায়ারফক্স | সাফারি | |
---|---|---|---|
অ্যান্ড্রয়েড | সমর্থিত | সমর্থিত | N/A |
iOS | সমর্থিত | সমর্থিত | সমর্থিত |
একইভাবে, বেশিরভাগ ডেস্কটপ ব্রাউজারগুলির সর্বশেষ সংস্করণগুলি সমর্থিত।
ক্রোম | ফায়ারফক্স | ইন্টারনেট এক্সপ্লোরার | অপেরা | সাফারি | |
---|---|---|---|---|---|
ম্যাক | সমর্থিত | সমর্থিত | N/A | সমর্থিত | সমর্থিত |
উইন্ডোজ | সমর্থিত | সমর্থিত | সমর্থিত | সমর্থিত | সমর্থিত নয় |
উইন্ডোজে, আমরা ইন্টারনেট এক্সপ্লোরার 8-11 সমর্থন করি ।
ফায়ারফক্সের জন্য, সর্বশেষ স্বাভাবিক স্থিতিশীল রিলিজ ছাড়াও, আমরা ফায়ারফক্সের সর্বশেষ এক্সটেন্ডেড সাপোর্ট রিলিজ (ESR) সংস্করণকেও সমর্থন করি।
অনানুষ্ঠানিকভাবে, বুটস্ট্র্যাপ ক্রোমিয়াম এবং লিনাক্সের জন্য ক্রোম, লিনাক্সের জন্য ফায়ারফক্স, এবং ইন্টারনেট এক্সপ্লোরার 7, পাশাপাশি মাইক্রোসফ্ট এজ-এ দেখতে এবং আচরণ করা উচিত, যদিও তারা আনুষ্ঠানিকভাবে সমর্থিত নয়।
কিছু ব্রাউজার বাগগুলির একটি তালিকার জন্য যা বুটস্ট্র্যাপকে মোকাবেলা করতে হয়, আমাদের ব্রাউজার বাগগুলির ওয়াল দেখুন ৷
ইন্টারনেট এক্সপ্লোরার 8 এবং 9ও সমর্থিত, তবে, দয়া করে সচেতন থাকুন যে কিছু CSS3 বৈশিষ্ট্য এবং HTML5 উপাদানগুলি এই ব্রাউজারগুলির দ্বারা সম্পূর্ণরূপে সমর্থিত নয়৷ উপরন্তু, ইন্টারনেট এক্সপ্লোরার 8-এর জন্য মিডিয়া ক্যোয়ারী সমর্থন সক্ষম করতে Respond.js ব্যবহার করতে হবে।
বৈশিষ্ট্য | ইন্টারনেট এক্সপ্লোরার 8 | ইন্টারনেট এক্সপ্লোরার 9 |
---|---|---|
border-radius |
সমর্থিত নয় | সমর্থিত |
box-shadow |
সমর্থিত নয় | সমর্থিত |
transform |
সমর্থিত নয় | সমর্থিত, -ms উপসর্গ সহ |
transition |
সমর্থিত নয় | |
placeholder |
সমর্থিত নয় |
CSS3 এবং HTML5 বৈশিষ্ট্যগুলির ব্রাউজার সমর্থন সম্পর্কে বিশদ বিবরণের জন্য আমি কি ব্যবহার করতে পারি... দেখুন ।
Internet Explorer 8-এর জন্য আপনার ডেভেলপমেন্ট এবং প্রোডাকশন পরিবেশে Respond.js ব্যবহার করার সময় নিম্নলিখিত সতর্কতাগুলি থেকে সাবধান থাকুন।
একটি ভিন্ন (সাব) ডোমেনে (উদাহরণস্বরূপ, একটি CDN-এ) হোস্ট করা CSS সহ Respond.js ব্যবহার করার জন্য কিছু অতিরিক্ত সেটআপের প্রয়োজন হয়৷ বিস্তারিত জানার জন্য Respond.js ডক্স দেখুন ।
file://
ব্রাউজার নিরাপত্তা নিয়মের কারণে, প্রোটোকলের মাধ্যমে দেখা পৃষ্ঠাগুলির সাথে Respond.js কাজ করে না file://
(যেমন একটি স্থানীয় HTML ফাইল খোলার সময়)। IE8-এ প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি পরীক্ষা করতে, HTTP(S) এর মাধ্যমে আপনার পৃষ্ঠাগুলি দেখুন। বিস্তারিত জানার জন্য Respond.js ডক্স দেখুন ।
@import
Respond.js CSS এর সাথে কাজ করে না যা এর মাধ্যমে উল্লেখ করা হয়েছে @import
। বিশেষ করে, কিছু ড্রুপাল কনফিগারেশন ব্যবহার করার জন্য পরিচিত @import
। বিস্তারিত জানার জন্য Respond.js ডক্স দেখুন ।
, , , বা box-sizing: border-box;
এর সাথে মিলিত হলে IE8 সম্পূর্ণরূপে সমর্থন করে না । যে কারণে, v3.0.1 হিসাবে, আমরা আর s ব্যবহার করি না।min-width
max-width
min-height
max-height
max-width
.container
IE8 এর সাথে @font-face
মিলিত হলে কিছু সমস্যা রয়েছে :before
। বুটস্ট্র্যাপ তার গ্লিফিকনগুলির সাথে সেই সংমিশ্রণটি ব্যবহার করে। যদি একটি পৃষ্ঠা ক্যাশে করা হয়, এবং উইন্ডোর উপর মাউস ছাড়াই লোড করা হয় (অর্থাৎ রিফ্রেশ বোতাম টিপুন বা আইফ্রেমে কিছু লোড করুন) তাহলে ফন্ট লোড হওয়ার আগে পৃষ্ঠাটি রেন্ডার হয়ে যায়। পৃষ্ঠার (বডি) উপর হোভার করলে কিছু আইকন দেখাবে এবং বাকি আইকনগুলির উপর হোভার করলে সেগুলিও দেখাবে। বিস্তারিত জানার জন্য সংখ্যা #13863 দেখুন ।
বুটস্ট্র্যাপ পুরানো ইন্টারনেট এক্সপ্লোরার সামঞ্জস্য মোডে সমর্থিত নয়। আপনি IE এর জন্য সর্বশেষ রেন্ডারিং মোড ব্যবহার করছেন তা নিশ্চিত করতে, <meta>
আপনার পৃষ্ঠাগুলিতে উপযুক্ত ট্যাগ অন্তর্ভুক্ত করার কথা বিবেচনা করুন:
ডিবাগিং টুল খুলে ডকুমেন্ট মোড নিশ্চিত করুন: F12"ডকুমেন্ট মোড" টিপুন এবং চেক করুন।
ইন্টারনেট এক্সপ্লোরারের প্রতিটি সমর্থিত সংস্করণে সম্ভাব্য সর্বোত্তম রেন্ডারিং নিশ্চিত করতে এই ট্যাগটি বুটস্ট্র্যাপের সমস্ত ডকুমেন্টেশন এবং উদাহরণগুলিতে অন্তর্ভুক্ত করা হয়েছে।
আরও তথ্যের জন্য এই StackOverflow প্রশ্ন দেখুন ।
ইন্টারনেট এক্সপ্লোরার 10 ডিভাইসের প্রস্থকে ভিউপোর্ট প্রস্থ থেকে আলাদা করে না , এবং এইভাবে বুটস্ট্র্যাপের CSS-এ মিডিয়া প্রশ্নগুলি সঠিকভাবে প্রয়োগ করে না। সাধারণত আপনি এটি ঠিক করতে CSS এর একটি দ্রুত স্নিপেট যোগ করতে চান:
যাইহোক, এটি আপডেট 3 (ওরফে GDR3) এর চেয়ে পুরানো Windows Phone 8 সংস্করণগুলি চলমান ডিভাইসগুলির জন্য কাজ করে না , কারণ এটি এই জাতীয় ডিভাইসগুলিকে সংকীর্ণ "ফোন" দৃশ্যের পরিবর্তে বেশিরভাগ ডেস্কটপ ভিউ দেখায়। এটি মোকাবেলা করার জন্য, আপনাকে বাগটি মোকাবেলা করার জন্য নিম্নলিখিত CSS এবং JavaScript অন্তর্ভুক্ত করতে হবে ।
আরও তথ্য এবং ব্যবহারের নির্দেশিকাগুলির জন্য, Windows Phone 8 এবং ডিভাইস-প্রস্থ পড়ুন ।
হেড আপ হিসাবে, আমরা এটিকে বুটস্ট্র্যাপের সমস্ত ডকুমেন্টেশন এবং একটি প্রদর্শন হিসাবে উদাহরণে অন্তর্ভুক্ত করি।
.col-*-1
OS X-এর জন্য v7.1-এর আগে Safari-এর সংস্করণের রেন্ডারিং ইঞ্জিন এবং iOS v8.0-এর জন্য Safari-এ আমাদের গ্রিড ক্লাসে ব্যবহৃত দশমিক স্থানের সংখ্যা নিয়ে কিছুটা সমস্যা হয়েছিল । তাই যদি আপনার 12টি পৃথক গ্রিড কলাম থাকে, আপনি লক্ষ্য করবেন যে তারা কলামের অন্যান্য সারিগুলির তুলনায় ছোট এসেছে। Safari/iOS আপগ্রেড করার পাশাপাশি, আপনার কাছে সমাধানের জন্য কিছু বিকল্প রয়েছে:
.pull-right
হার্ড-ডান প্রান্তিককরণ পেতে আপনার শেষ গ্রিড কলামে যোগ করুনআইওএস এবং অ্যান্ড্রয়েডে উপাদানটির জন্য সমর্থন বেশ overflow: hidden
সীমিত । <body>
সেই লক্ষ্যে, আপনি যখন এই ডিভাইসগুলির ব্রাউজারগুলির মধ্যে একটিতে একটি মডেলের উপরে বা নীচে স্ক্রোল করবেন, তখন <body>
সামগ্রীটি স্ক্রোল করা শুরু করবে। দেখুন Chrome বাগ #175502 (Chrome v40 এ ঠিক করা হয়েছে) এবং WebKit বাগ #153852 ।
iOS 9.3 অনুযায়ী, যখন একটি মোডাল খোলা থাকে, যদি একটি স্ক্রোল অঙ্গভঙ্গির প্রাথমিক স্পর্শ পাঠ্য <input>
বা a এর সীমানার মধ্যে থাকে <textarea>
, <body>
তাহলে মডেলের নীচের বিষয়বস্তুটি মডেলের পরিবর্তে স্ক্রোল করা হবে। ওয়েবকিট বাগ #153856 দেখুন ।
এছাড়াও, মনে রাখবেন যে আপনি যদি একটি স্থির নেভিবার ব্যবহার করেন বা একটি মডেলের মধ্যে ইনপুট ব্যবহার করেন, iOS-এ একটি রেন্ডারিং বাগ রয়েছে যা ভার্চুয়াল কীবোর্ড ট্রিগার হওয়ার সময় স্থির উপাদানগুলির অবস্থান আপডেট করে না৷ এর জন্য কয়েকটি সমাধানের মধ্যে রয়েছে আপনার উপাদানগুলিকে রূপান্তরিত করা position: absolute
বা ম্যানুয়ালি পজিশনিং সংশোধন করার চেষ্টা করার জন্য ফোকাসে টাইমার চালু করা। এটি বুটস্ট্র্যাপ দ্বারা পরিচালিত হয় না, তাই আপনার অ্যাপ্লিকেশনের জন্য কোন সমাধানটি সর্বোত্তম তা সিদ্ধান্ত নেওয়া আপনার উপর নির্ভর করে।
.dropdown-backdrop
z-ইনডেক্সিংয়ের জটিলতার কারণে উপাদানটি ন্যাভিতে iOS-এ ব্যবহার করা হয় না । এইভাবে, navbars-এ ড্রপডাউন বন্ধ করতে, আপনাকে অবশ্যই সরাসরি ড্রপডাউন উপাদানে ক্লিক করতে হবে (অথবা অন্য কোনো উপাদান যা iOS এ একটি ক্লিক ইভেন্ট চালু করবে )।
পৃষ্ঠা জুম করা অনিবার্যভাবে বুটস্ট্র্যাপ এবং ওয়েবের বাকি অংশে কিছু উপাদানে রেন্ডারিং আর্টিফ্যাক্ট উপস্থাপন করে। সমস্যাটির উপর নির্ভর করে, আমরা এটি ঠিক করতে সক্ষম হতে পারি (প্রথমে অনুসন্ধান করুন এবং তারপরে প্রয়োজন হলে একটি সমস্যা খুলুন)। যাইহোক, আমরা এগুলি উপেক্ষা করার প্রবণতা রাখি কারণ তাদের প্রায়শই হ্যাকি ওয়ার্কঅ্যারাউন্ড ছাড়া অন্য কোনও সরাসরি সমাধান থাকে না।
:hover
/ :focus
মোবাইলেযদিও বেশিরভাগ টাচস্ক্রিনে আসল হোভারিং সম্ভব নয়, বেশিরভাগ মোবাইল ব্রাউজার হোভারিং সমর্থনকে অনুকরণ করে এবং :hover
"স্টিকি" করে। অন্য কথায়, :hover
স্টাইলগুলি একটি উপাদান ট্যাপ করার পরে প্রয়োগ করা শুরু করে এবং ব্যবহারকারী অন্য কোনও উপাদানকে ট্যাপ করার পরেই প্রয়োগ করা বন্ধ করে দেয়। এটি এই ধরনের ব্রাউজারগুলিতে বুটস্ট্র্যাপের :hover
রাজ্যগুলিকে অবাঞ্ছিতভাবে "আটকে" হতে পারে। কিছু মোবাইল ব্রাউজার :focus
একইভাবে স্টিকি করে। এই ধরনের শৈলী সম্পূর্ণরূপে অপসারণ ছাড়া বর্তমানে এই সমস্যাগুলির জন্য কোন সহজ সমাধান নেই।
এমনকি কিছু আধুনিক ব্রাউজারেও, মুদ্রণ অদ্ভুত হতে পারে।
বিশেষ করে, Chrome v32 হিসাবে এবং মার্জিন সেটিংস নির্বিশেষে, Chrome একটি ওয়েবপেজ প্রিন্ট করার সময় মিডিয়া প্রশ্নের সমাধান করার সময় বাস্তব কাগজের আকারের তুলনায় উল্লেখযোগ্যভাবে সংকীর্ণ একটি ভিউপোর্ট প্রস্থ ব্যবহার করে। এর ফলে প্রিন্ট করার সময় বুটস্ট্র্যাপের অতিরিক্ত-ছোট গ্রিড অপ্রত্যাশিতভাবে সক্রিয় হতে পারে। কিছু বিবরণের জন্য সমস্যা #12078 এবং Chrome বাগ #273306 দেখুন। প্রস্তাবিত সমাধান:
@screen-*
যাতে আপনার প্রিন্টার কাগজটি অতিরিক্ত-ছোট থেকে বড় হিসাবে বিবেচিত হয়।এছাড়াও, Safari v8.0-এর হিসাবে, নির্দিষ্ট-প্রস্থ .container
s প্রিন্ট করার সময় Safari-কে অস্বাভাবিকভাবে ছোট ফন্ট সাইজ ব্যবহার করতে পারে। আরো বিস্তারিত জানার জন্য দেখুন #14868 এবং WebKit বাগ #138192 । এর জন্য একটি সম্ভাব্য সমাধান হল নিম্নলিখিত CSS যোগ করা:
বাক্সের বাইরে, অ্যান্ড্রয়েড 4.1 (এবং এমনকি কিছু নতুন রিলিজ দৃশ্যত) ব্রাউজার অ্যাপের সাথে পছন্দের ডিফল্ট ওয়েব ব্রাউজার হিসেবে পাঠানো হয় (ক্রোমের বিপরীতে)। দুর্ভাগ্যবশত, ব্রাউজার অ্যাপে সাধারণভাবে CSS-এর সাথে প্রচুর বাগ এবং অসঙ্গতি রয়েছে।
উপাদানগুলিতে , <select>
অ্যান্ড্রয়েড স্টক ব্রাউজার পার্শ্ব নিয়ন্ত্রণগুলি প্রদর্শন করবে না যদি একটি border-radius
এবং/অথবা border
প্রয়োগ করা হয়। ( বিশদ বিবরণের জন্য এই স্ট্যাকওভারফ্লো প্রশ্নটি<select>
দেখুন।) আপত্তিকর CSS সরাতে এবং অ্যান্ড্রয়েড স্টক ব্রাউজারে একটি আনস্টাইল করা উপাদান হিসাবে রেন্ডার করতে নীচের কোডের স্নিপেটটি ব্যবহার করুন । ব্যবহারকারী এজেন্ট স্নিফিং Chrome, Safari, এবং Mozilla ব্রাউজারগুলির সাথে হস্তক্ষেপ এড়ায়।
একটি উদাহরণ দেখতে চান? এই JS বিন ডেমো দেখুন.
পুরানো এবং বগি ব্রাউজারগুলিকে সর্বোত্তম সম্ভাব্য অভিজ্ঞতা প্রদান করার জন্য, বুটস্ট্র্যাপ বিভিন্ন জায়গায় CSS ব্রাউজার হ্যাকগুলি ব্যবহার করে নির্দিষ্ট ব্রাউজার সংস্করণগুলিতে বিশেষ CSS টার্গেট করে যাতে ব্রাউজারে নিজেরাই বাগগুলির সাথে কাজ করা যায়। এই হ্যাকগুলি বোধগম্যভাবে CSS যাচাইকারীদের অভিযোগ করে যে সেগুলি অবৈধ। কয়েকটি জায়গায়, আমরা ব্লিডিং-এজ সিএসএস বৈশিষ্ট্যগুলিও ব্যবহার করি যেগুলি এখনও সম্পূর্ণ মানসম্মত নয়, তবে এগুলি সম্পূর্ণরূপে প্রগতিশীল উন্নতির জন্য ব্যবহার করা হয়।
এই বৈধকরণ সতর্কতাগুলি বাস্তবে কোন ব্যাপার না যেহেতু আমাদের CSS-এর নন-হ্যাকি অংশ সম্পূর্ণরূপে বৈধতা দেয় এবং হ্যাকি অংশগুলি নন-হ্যাকি অংশের সঠিক কার্যকারিতায় হস্তক্ষেপ করে না, তাই কেন আমরা ইচ্ছাকৃতভাবে এই বিশেষ সতর্কতাগুলিকে উপেক্ষা করি।
আমাদের এইচটিএমএল ডক্সে একইভাবে কিছু তুচ্ছ এবং অপ্রয়োজনীয় HTML বৈধতা সতর্কতা রয়েছে কারণ আমরা একটি নির্দিষ্ট ফায়ারফক্স বাগের জন্য একটি সমাধান অন্তর্ভুক্ত করেছি ।
যদিও আমরা আনুষ্ঠানিকভাবে কোনো তৃতীয় পক্ষের প্লাগইন বা অ্যাড-অন সমর্থন করি না, আমরা আপনার প্রকল্পে সম্ভাব্য সমস্যাগুলি এড়াতে সাহায্য করার জন্য কিছু দরকারী পরামর্শ অফার করি।
Google মানচিত্র এবং Google কাস্টম সার্চ ইঞ্জিন সহ কিছু তৃতীয় পক্ষের সফ্টওয়্যার, বুটস্ট্র্যাপের সাথে দ্বন্দ্বের কারণে * { box-sizing: border-box; }
, একটি নিয়ম যা এটিকে padding
একটি উপাদানের চূড়ান্ত গণনাকৃত প্রস্থকে প্রভাবিত করে না। CSS ট্রিকসে বক্স মডেল এবং সাইজিং সম্পর্কে আরও জানুন ।
প্রেক্ষাপটের উপর নির্ভর করে, আপনি প্রয়োজন অনুযায়ী ওভাররাইড করতে পারেন (বিকল্প 1) অথবা সমগ্র অঞ্চলের জন্য বক্স-আকার পুনরায় সেট করতে পারেন (বিকল্প 2)।
বুটস্ট্র্যাপ সাধারণ ওয়েব স্ট্যান্ডার্ডগুলি অনুসরণ করে এবং - ন্যূনতম অতিরিক্ত প্রচেষ্টা সহ - AT ব্যবহারকারীদের কাছে অ্যাক্সেসযোগ্য সাইটগুলি তৈরি করতে ব্যবহার করা যেতে পারে ৷
যদি আপনার নেভিগেশনে অনেকগুলি লিঙ্ক থাকে এবং DOM-এর মূল বিষয়বস্তুর আগে আসে, Skip to main content
তাহলে নেভিগেশনের আগে একটি লিঙ্ক যোগ করুন (একটি সহজ ব্যাখ্যার জন্য, নেভিগেশন লিঙ্কগুলি এড়িয়ে যাওয়ার এই A11Y প্রকল্প নিবন্ধটি দেখুন )। ক্লাস ব্যবহার করলে .sr-only
দৃশ্যত স্কিপ লিঙ্ক লুকিয়ে রাখবে, এবং.sr-only-focusable
ক্লাসটি নিশ্চিত করবে যে লিঙ্কটি একবার ফোকাস করার পরে দৃশ্যমান হবে (দৃষ্টিসম্পন্ন কীবোর্ড ব্যবহারকারীদের জন্য)।
ক্রোমে দীর্ঘস্থায়ী ত্রুটি/বাগের কারণে ( ক্রোমিয়াম বাগ ট্র্যাকারে ইস্যু 262171 দেখুন) এবং ইন্টারনেট এক্সপ্লোরার ( ইন-পেজ লিঙ্কগুলিতে এই নিবন্ধটি দেখুন এবং ক্রম ফোকাস করুন) ), আপনাকে নিশ্চিত করতে হবে যে আপনার লিঙ্কটি এড়িয়ে যাওয়ার লক্ষ্য যোগ করে অন্তত প্রোগ্রামগতভাবে ফোকাসযোগ্য tabindex="-1"
।
উপরন্তু, আপনি লক্ষ্যে একটি দৃশ্যমান ফোকাস ইঙ্গিতকে স্পষ্টভাবে দমন করতে চাইতে পারেন (বিশেষত Chrome বর্তমানে উপাদানগুলির উপর ফোকাস সেট করে tabindex="-1"
যখন সেগুলিকে মাউস দিয়ে ক্লিক করা হয়) #content:focus { outline: none; }
।
মনে রাখবেন যে এই বাগটি আপনার সাইট ব্যবহার করা অন্যান্য ইন-পেজ লিঙ্কগুলিকেও প্রভাবিত করবে, কীবোর্ড ব্যবহারকারীদের জন্য সেগুলিকে অকেজো করে দেবে। আপনি অন্য সমস্ত নামযুক্ত অ্যাঙ্কর / ফ্র্যাগমেন্ট শনাক্তকারীর সাথে একটি অনুরূপ স্টপ-গ্যাপ ফিক্স যোগ করার কথা বিবেচনা করতে পারেন যা লিঙ্ক লক্ষ্য হিসাবে কাজ করে।
নেস্টিং শিরোনাম ( <h1>
- <h6>
), আপনার প্রাথমিক নথির শিরোনাম একটি হওয়া উচিত <h1>
। পরবর্তী শিরোনামগুলির যৌক্তিক ব্যবহার করা উচিত <h2>
-<h6>
যেমন স্ক্রিন রিডাররা আপনার পৃষ্ঠাগুলির জন্য বিষয়বস্তুর একটি সারণী তৈরি করতে পারে৷
HTML CodeSniffer এবং Penn State এর AccessAbility এ আরও জানুন ।
বর্তমানে, বুটস্ট্র্যাপে উপলব্ধ কিছু ডিফল্ট রঙের সংমিশ্রণ (যেমন বিভিন্ন স্টাইল করা বোতাম ক্লাস, মৌলিক কোড ব্লকের জন্য ব্যবহৃত কিছু কোড হাইলাইটিং রঙ , .bg-primary
প্রাসঙ্গিক পটভূমি সহায়ক শ্রেণী, এবং সাদা ব্যাকগ্রাউন্ডে ব্যবহৃত হলে ডিফল্ট লিঙ্ক রঙ) একটি কম বৈসাদৃশ্য অনুপাত আছে ( 4.5:1 এর প্রস্তাবিত অনুপাতের নিচে )। এটি কম দৃষ্টিসম্পন্ন ব্যবহারকারীদের বা যারা বর্ণান্ধ তাদের সমস্যা সৃষ্টি করতে পারে। এই ডিফল্ট রঙগুলি তাদের বৈসাদৃশ্য এবং সুস্পষ্টতা বাড়ানোর জন্য পরিবর্তন করা প্রয়োজন হতে পারে।
বুটস্ট্র্যাপ MIT লাইসেন্সের অধীনে প্রকাশিত হয়েছে এবং এটি কপিরাইট 2016 টুইটার। ছোট খণ্ডে সিদ্ধ করে, এটি নিম্নলিখিত শর্তগুলির সাথে বর্ণনা করা যেতে পারে।
আরও তথ্যের জন্য সম্পূর্ণ বুটস্ট্র্যাপ লাইসেন্সটি প্রকল্পের সংগ্রহস্থলে অবস্থিত ।
সম্প্রদায়ের সদস্যরা বুটস্ট্র্যাপের ডকুমেন্টেশন বিভিন্ন ভাষায় অনুবাদ করেছে। কোনোটিই আনুষ্ঠানিকভাবে সমর্থিত নয় এবং তারা সবসময় আপ টু ডেট নাও থাকতে পারে।
আমরা অনুবাদগুলিকে সংগঠিত বা হোস্ট করতে সাহায্য করি না, আমরা কেবল তাদের সাথে লিঙ্ক করি।
একটি নতুন বা ভাল অনুবাদ সমাপ্ত? আমাদের তালিকায় যোগ করার জন্য একটি টান অনুরোধ খুলুন।