পদ্ধতি

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

এনেকুৱা কিবা এটা দেখিছে যিটো শুনা নাযায়, বা হয়তো ইয়াতকৈ ভালকৈ কৰিব পৰা যাব? এটা বিষয় খুলিব —আমি আপোনাৰ সৈতে আলোচনা কৰি ভাল পাম।

সাৰাংশ

আমি গোটেইখিনিতে এইবোৰৰ প্ৰতিটোতে অধিক ডুব যাম, কিন্তু উচ্চ পৰ্যায়ত, ইয়াত আমাৰ পদ্ধতিটোক কিহে পথ প্ৰদৰ্শন কৰে।

• উপাদানসমূহ প্ৰতিক্ৰিয়াশীল আৰু মোবাইল-প্ৰথম হ’ব লাগে
• উপাদানসমূহ এটা ভিত্তি শ্ৰেণীৰ সৈতে নিৰ্মাণ কৰিব লাগে আৰু পৰিবৰ্তক শ্ৰেণীসমূহৰ যোগেদি সম্প্ৰসাৰিত কৰিব লাগে
• উপাদান অৱস্থাসমূহে এটা সাধাৰণ z-সূচকাংক স্কেল মানি চলিব লাগে
• যেতিয়াই সম্ভৱ, জাভাস্ক্রিপ্টতকৈ এটা HTML আৰু CSS প্ৰণয়ন পছন্দ কৰক
• যেতিয়াই সম্ভৱ, স্বনিৰ্বাচিত শৈলীসমূহৰ ওপৰত সঁজুলিসমূহ ব্যৱহাৰ কৰক
• যেতিয়াই সম্ভৱ, কঠোৰ HTML প্ৰয়োজনীয়তাসমূহ বলবৎ কৰা এৰক (শিশু নিৰ্বাচকসমূহ)

প্ৰতিক্ৰিয়াশীল

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

Bootstrap ৰ ওপৰেৰে, আপুনি আমাৰ মিডিয়া প্ৰশ্নসমূহত এইটো আটাইতকৈ স্পষ্টভাৱে দেখিব। বেছিভাগ ক্ষেত্ৰতে, আমি এনে min-widthপ্ৰশ্ন ব্যৱহাৰ কৰো যিবোৰ এটা নিৰ্দিষ্ট ব্ৰেকপইণ্টত প্ৰযোজ্য হ'বলৈ আৰম্ভ কৰে আৰু উচ্চ ব্ৰেকপইণ্টৰ মাজেৰে ওপৰলৈ লৈ যায়। যেনে, a ৰ পৰা অসীমলৈ .d-noneপ্ৰযোজ্য হয়। min-width: 0আনহাতে, a .d-md-noneমধ্যমীয়া ব্ৰেকপইণ্টৰ পৰা আৰু ওপৰলৈ প্ৰযোজ্য হয়।

কেতিয়াবা আমি ব্যৱহাৰ কৰিম max-widthযেতিয়া এটা উপাদানৰ অন্তৰ্নিহিত জটিলতাই ইয়াৰ প্ৰয়োজন হয়। কেতিয়াবা, এই অভাৰৰাইডসমূহ আমাৰ উপাদানসমূহৰ পৰা মূল কাৰ্য্যকৰীতাসমূহ পুনৰ লিখাতকৈ কাৰ্য্যকৰী আৰু মানসিকভাৱে কাৰ্য্যকৰী আৰু সমৰ্থন কৰিবলৈ স্পষ্ট হয়। আমি এই পদ্ধতিটো সীমিত কৰিবলৈ চেষ্টা কৰোঁ, কিন্তু সময়ে সময়ে ইয়াক ব্যৱহাৰ কৰিম।

শ্ৰেণীসমূহ

আমাৰ Reboot, এটা ক্ৰছ-ব্ৰাউজাৰ স্বাভাৱিককৰণ শৈলীপত্ৰৰ বাহিৰেও, আমাৰ সকলো শৈলীৰ লক্ষ্য হৈছে শ্ৰেণীসমূহক নিৰ্বাচক হিচাপে ব্যৱহাৰ কৰা। ইয়াৰ অৰ্থ হৈছে ধৰণ নিৰ্বাচকসমূহ (যেনে, input[type="text"]) আৰু অতিৰিক্ত অভিভাৱক শ্ৰেণীসমূহ (যেনে, .parent .child) ৰ পৰা ষ্টিয়াৰিং ক্লিয়াৰ কৰা যি শৈলীসমূহক সহজে অভাৰৰাইড কৰিবলে অতি নিৰ্দিষ্ট কৰে।

সেই হিচাপে, উপাদানসমূহক এটা ভিত্তি শ্ৰেণীৰ সৈতে নিৰ্মাণ কৰিব লাগে যি সাধাৰণ, অভাৰৰাইড কৰিবলগীয়া নহয় বৈশিষ্ট্য-মূল্য যোৰসমূহ ৰাখে। উদাহৰণস্বৰূপে, .btnআৰু .btn-primary. আমি .btnসকলো সাধাৰণ শৈলীৰ বাবে ব্যৱহাৰ কৰো যেনে display, padding, আৰু border-width. .btn-primaryতাৰ পিছত আমি ৰং, পটভূমি-ৰং, সীমা-ৰং আদি যোগ কৰাৰ দৰে মডিফায়াৰ ব্যৱহাৰ কৰো ।

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

z-সূচকাংক স্কেল

বুটষ্ট্ৰেপত দুটা z-indexস্কেল আছে—এটা উপাদানৰ ভিতৰত উপাদান আৰু অভাৰলে উপাদানসমূহ।

উপাদান উপাদানসমূহ

• Bootstrap ত কিছুমান উপাদানক borderবৈশিষ্ট্য পৰিবৰ্তন নকৰাকৈ দুটা সীমা প্ৰতিৰোধ কৰিবলে ওভাৰলেপিং উপাদানসমূহৰ সৈতে নিৰ্মিত। উদাহৰণস্বৰূপ, বুটাম গোটসমূহ, ইনপুট গোটসমূহ, আৰু পৃষ্ঠাকৰণ।
• এই উপাদানসমূহে এটা মানক z-indexস্কেল ভাগ 0কৰে 3।
• 0অবিকল্পিত (প্ৰাথমিক), 1হৈছে :hover, 2হৈছে :active/ .active, আৰু 3হৈছে :focus।
• এই পদ্ধতিটোৱে আমাৰ সৰ্বোচ্চ ব্যৱহাৰকাৰী অগ্ৰাধিকাৰৰ আশাৰ সৈতে মিল খায়। যদি এটা উপাদান কেন্দ্ৰীভূত হয়, তেন্তে ই দৃশ্যত আৰু ব্যৱহাৰকাৰীৰ দৃষ্টিগোচৰ হয়। সক্ৰিয় মৌলবোৰ দ্বিতীয় সৰ্বোচ্চ কাৰণ ইহঁতে অৱস্থা সূচায়। হ’ভাৰ তৃতীয় সৰ্বোচ্চ কাৰণ ই ব্যৱহাৰকাৰীৰ উদ্দেশ্য সূচায়, কিন্তু প্ৰায় যিকোনো বস্তু হ’ভাৰ কৰিব পাৰি।

অভাৰলে উপাদানসমূহ

বুটষ্ট্ৰেপত কেইবাটাও উপাদান অন্তৰ্ভুক্ত কৰা হৈছে যি কোনো ধৰণৰ অভাৰলে হিচাপে কাম কৰে । এই অন্তৰ্ভুক্ত, সৰ্বোচ্চ ক্ৰম অনুসৰি z-index, ড্ৰপডাউন, স্থিৰ আৰু আঠাযুক্ত navbars, মডাল, সঁজুলি টিপ, আৰু popovers. এই উপাদানসমূহৰ নিজস্ব z-indexস্কেল আছে যি 1000. এই আৰম্ভণি সংখ্যাটো ইচ্ছাকৃতভাৱে বাছনি কৰা হৈছিল আৰু আমাৰ শৈলীসমূহ আৰু আপোনাৰ প্ৰকল্পৰ স্বনিৰ্বাচিত শৈলীসমূহৰ মাজত এটা সৰু বাফাৰ হিচাপে ��াম কৰে।

প্ৰতিটো অভাৰলে উপাদানে ইয়াৰ z-indexমান অলপ বৃদ্ধি কৰে এনেদৰে যে সাধাৰণ UI নীতিসমূহে ব্যৱহাৰকাৰী কেন্দ্ৰীভূত বা হোভাৰ কৰা উপাদানসমূহক সকলো সময়তে দৃশ্যত থাকিবলৈ অনুমতি দিয়ে। উদাহৰণস্বৰূপে, এটা মডাল হৈছে নথিপত্ৰ ব্লক কৰা (যেনে, আপুনি মডালৰ কাৰ্য্যৰ বাবে সংৰক্ষণ কৰি অন্য কোনো কাৰ্য্য ল'ব নোৱাৰে), গতিকে আমি সেইটো আমাৰ navbars ৰ ওপৰত ৰাখোঁ।

z-indexআমাৰ বিন্যাস পৃষ্ঠাত এই বিষয়ে অধিক জানক ।

JS ৰ ওপৰত HTML আৰু CSS

সম্ভৱ হ’লে আমি জাভাস্ক্রিপ্টতকৈ HTML আৰু CSS লিখাটো পছন্দ কৰো। সাধাৰণতে, HTML আৰু CSS অধিক উৎপাদনশীল আৰু সকলো ভিন্ন অভিজ্ঞতা স্তৰৰ অধিক লোকৰ বাবে সুলভ। HTML আৰু CSS আপোনাৰ ব্ৰাউজাৰত জাভাস্ক্রিপ্টতকৈ দ্ৰুত, আৰু আপোনাৰ ব্ৰাউজাৰে সাধাৰণতে আপোনাৰ বাবে বহুতো কাৰ্য্যকৰীতা প্ৰদান কৰে।

dataএই নীতিটো হৈছে বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰা আমাৰ প্ৰথম শ্ৰেণীৰ জাভাস্ক্রিপ্ট API । আমাৰ জাভাস্ক্রিপ্ট প্লাগইনসমূহ ব্যৱহাৰ কৰিবলৈ আপুনি প্ৰায় কোনো জাভাস্ক্রিপ্ট লিখাৰ প্রয়োজন নাই; ইয়াৰ পৰিৱৰ্তে, HTML লিখক। আমাৰ জাভাস্ক্রিপ্ট অভাৰভিউ পৃষ্ঠাত এই বিষয়ে অধিক পঢ়ক ।

শেষত, আমাৰ শৈলীসমূহে সাধাৰণ ৱেব উপাদানসমূহৰ মৌলিক আচৰণৰ ওপৰত নিৰ্মাণ কৰে। সম্ভৱ হ’লে আমি ব্ৰাউজাৰে যিখিনি যোগান ধৰে তাকেই ব্যৱহাৰ কৰাটো পছন্দ কৰো। উদাহৰণস্বৰূপে, আপুনি .btnপ্ৰায় যিকোনো উপাদানত এটা শ্ৰেণী ৰাখিব পাৰে, কিন্তু বেছিভাগ উপাদানে কোনো অৰ্থগত মান বা ব্ৰাউজাৰ কাৰ্য্যকৰীতা প্ৰদান নকৰে। গতিকে ইয়াৰ পৰিৱৰ্তে আমি <button>s আৰু <a>s ব্যৱহাৰ কৰো।

অধিক জটিল উপাদানৰ ক্ষেত্ৰতো একেই কথা। যদিও আমি এটা ইনপুটৰ অৱস্থাৰ ওপৰত ভিত্তি কৰি এটা মূল উপাদানত ক্লাছ যোগ কৰিবলৈ আমাৰ নিজা ফৰ্ম বৈধকৰণ প্লাগইন লিখিব পাৰো, যাৰ ফলত আমাক টেক্সটটো ৰঙা বুলি ষ্টাইল কৰিবলৈ অনুমতি দিয়ে, আমি প্ৰতিটো ব্ৰাউজাৰে আমাক প্ৰদান কৰা / pseudo-elements ব্যৱহাৰ কৰাটো পছন্দ কৰো :valid।:invalid

উপযোগীতাসমূহ

সঁজুলি শ্ৰেণীসমূহ—পূৰ্বতে Bootstrap 3 ত সহায়কসকল—CSS ব্ল'ট আৰু দুৰ্বল পৃষ্ঠা পৰিৱেশন প্ৰতিৰোধ কৰাত এটা শক্তিশালী মিত্ৰ। এটা উপযোগীতা শ্ৰেণী সাধাৰণতে এটা শ্ৰেণী হিচাপে প্ৰকাশ কৰা এটা একক, অপৰিৱৰ্তনীয় বৈশিষ্ট্য-মূল্য যোৰ (যেনে, .d-blockপ্ৰতিনিধিত্ব কৰে display: block;)। তেওঁলোকৰ প্ৰাথমিক আবেদন হৈছে HTML লিখাৰ সময়ত ব্যৱহাৰৰ গতি আৰু আপুনি লিখিবলগীয়া কাষ্টম CSS ৰ পৰিমাণ সীমিত কৰা।

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

নমনীয় HTML

সদায় সম্ভৱ নহ'লেও, আমি উপাদানসমূহৰ বাবে আমাৰ HTML প্ৰয়োজনীয়তাসমূহত অত্যধিক ডগমেটিক হোৱাৰ পৰা হাত সাৰিবলৈ চেষ্টা কৰোঁ। এইদৰে, আমি আমাৰ CSS নিৰ্বাচকসমূহত একক শ্ৰেণীসমূহৰ ওপৰত গুৰুত্ব দিওঁ আৰু তাৎক্ষণিক শিশু নিৰ্বাচক ( >) এৰাই চলিবলৈ চেষ্টা কৰোঁ। ই আপোনাক আপোনাৰ প্ৰণয়নত অধিক নমনীয়তা দিয়ে আৰু আমাৰ CSS সৰল আৰু কম নিৰ্দিষ্ট কৰি ৰখাত সহায় কৰে।

ক'ড কনভেনচন

ক'ড সহায়ক (বুটষ্ট্ৰেপ সহ-সৃষ্টিকৰ্তা, @mdo ৰ পৰা) এ আমি বুটষ্ট্ৰেপৰ মাজেৰে আমাৰ HTML আৰু CSS কেনেকৈ লিখোঁ তাৰ দস্তাবেজ কৰে। ই সাধাৰণ বিন্যাস, সাধাৰণ জ্ঞান অবিকল্পিত, বৈশিষ্ট্য আৰু বৈশিষ্ট্য ক্ৰম, আৰু অধিক ৰ বাবে নিৰ্দেশিকাসমূহ ধাৰ্য্য কৰে।

আমি আমাৰ Sass/CSS ত এই প্ৰামাণিকসমূহ আৰু অধিক বলবৎ কৰিবলৈ Stylelint ব্যৱহাৰ কৰো। আমাৰ কাষ্টম Stylelint কনফিগ মুক্ত উৎস আৰু আনৰ ব্যৱহাৰ আৰু সম্প্ৰসাৰণৰ বাবে উপলব্ধ।

আমি মানক আৰু অৰ্থগত HTML বলবৎ কৰিবলৈ, লগতে সাধাৰণ ভুলসমূহ ধৰা পেলাবলৈ vnu-jar ব্যৱহাৰ কৰো।