এপ্রোচ

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

এমন কিছু দেখুন যা সঠিক শোনাচ্ছে না, বা সম্ভবত আরও ভাল করা যেতে পারে? একটি সমস্যা খুলুন — আমরা আপনার সাথে এটি আলোচনা করতে চাই।

সারসংক্ষেপ

আমরা এইগুলির প্রতিটিতে আরও বেশি করে ডুব দেব, কিন্তু উচ্চ স্তরে, এখানে যা আমাদের পদ্ধতির গাইড করে।

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

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

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

বুটস্ট্র্যাপ জুড়ে, আপনি আমাদের মিডিয়া প্রশ্নগুলিতে এটি সবচেয়ে স্পষ্টভাবে দেখতে পাবেন। বেশিরভাগ ক্ষেত্রে, আমরা min-widthএমন প্রশ্নগুলি ব্যবহার করি যা একটি নির্দিষ্ট ব্রেকপয়েন্টে প্রযোজ্য হতে শুরু করে এবং উচ্চতর ব্রেকপয়েন্টের মধ্য দিয়ে চলে। উদাহরণস্বরূপ, একটি থেকে অনন্ত .d-noneপর্যন্ত প্রযোজ্য । min-width: 0অন্যদিকে, একটি .d-md-noneমাঝারি ব্রেকপয়েন্ট এবং আপ থেকে প্রযোজ্য।

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

ক্লাস

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

যেমন, উপাদানগুলিকে একটি বেস ক্লাস দিয়ে তৈরি করা উচিত যাতে সাধারণ, ওভাররাইড না হওয়া সম্পত্তি-মূল্য জোড়া থাকে৷ উদাহরণস্বরূপ, .btnএবং .btn-primary. আমরা .btnসব সাধারণ শৈলী যেমন display, padding, এবং এর জন্য ব্যবহার করি border-width। .btn-primaryতারপরে আমরা রঙ, পটভূমি-রঙ, বর্ডার-রঙ ইত্যাদি যোগ করতে মডিফায়ার ব্যবহার করি ।

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

z-সূচক স্কেল

বুটস্ট্র্যাপে দুটি z-indexস্কেল আছে—একটি উপাদানের মধ্যে উপাদান এবং ওভারলে উপাদান।

উপাদান উপাদান

• বুটস্ট্র্যাপের কিছু কম্পোনেন্ট ওভারল্যাপিং এলিমেন্ট দিয়ে তৈরি করা হয় যাতে borderপ্রপার্টি পরিবর্তন না করে ডবল বর্ডার রোধ করা যায়। উদাহরণস্বরূপ, বোতাম গ্রুপ, ইনপুট গ্রুপ, এবং পেজিনেশন।
• এই উপাদানগুলির মাধ্যমে একটি প্রমিত স্কেল z-indexশেয়ার করুন ৷03
• 0ডিফল্ট (প্রাথমিক), 1is :hover, 2is :active/ .active, এবং 3is :focus.
• এই পদ্ধতিটি সর্বোচ্চ ব্যবহারকারীর অগ্রাধিকারের আমাদের প্রত্যাশার সাথে মেলে। যদি একটি উপাদান ফোকাস করা হয়, এটি দৃশ্যে এবং ব্যবহারকারীর মনোযোগে। সক্রিয় উপাদান দ্বিতীয় সর্বোচ্চ কারণ তারা অবস্থা নির্দেশ করে। হোভার তৃতীয় সর্বোচ্চ কারণ এটি ব্যবহারকারীর অভিপ্রায় নির্দেশ করে, তবে প্রায় যেকোনো কিছুই হোভার করা যেতে পারে।

ওভারলে উপাদান

বুটস্ট্র্যাপে বেশ কিছু উপাদান রয়েছে যা কোনো ধরনের ওভারলে হিসেবে কাজ করে। এর মধ্যে রয়েছে, সর্বোচ্চ ক্রমানুসারে z-index, ড্রপডাউন, স্থির এবং স্টিকি ন্যাভবার, মডেল, টুলটিপস এবং পপোভার। এই উপাদানগুলির নিজস্ব z-indexস্কেল রয়েছে যা শুরু হয় 1000। এই প্রারম্ভিক সংখ্যাটি নির্বিচারে বেছে নেওয়া হয়েছিল এবং এটি আমাদের শৈলী এবং আপনার প্রকল্পের কাস্টম শৈলীগুলির মধ্যে একটি ছোট বাফার হিসাবে কাজ করে৷

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

z-indexআমাদের লেআউট পৃষ্ঠায় এই সম্পর্কে আরও জানুন ।

JS এর ​​উপর HTML এবং CSS

যখনই সম্ভব, আমরা জাভাস্ক্রিপ্টে HTML এবং CSS লিখতে পছন্দ করি। সাধারণভাবে, এইচটিএমএল এবং সিএসএস আরও বিস্তৃত এবং সমস্ত বিভিন্ন অভিজ্ঞতা স্তরের আরও বেশি লোকের কাছে অ্যাক্সেসযোগ্য। HTML এবং CSS আপনার ব্রাউজারে জাভাস্ক্রিপ্টের চেয়ে দ্রুততর, এবং আপনার ব্রাউজার সাধারণত আপনার জন্য অনেক কার্যকারিতা প্রদান করে।

dataএই নীতিটি বৈশিষ্ট্যগুলি ব্যবহার করে আমাদের প্রথম-শ্রেণীর জাভাস্ক্রিপ্ট API । আমাদের জাভাস্ক্রিপ্ট প্লাগইন ব্যবহার করার জন্য আপনাকে প্রায় কোনো জাভাস্ক্রিপ্ট লিখতে হবে না; পরিবর্তে, HTML লিখুন। আমাদের জাভাস্ক্রিপ্ট ওভারভিউ পৃষ্ঠায় এই সম্পর্কে আরও পড়ুন ।

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

একই আরও জটিল উপাদানের জন্য যায়। যদিও আমরা একটি ইনপুটের অবস্থার উপর ভিত্তি করে একটি অভিভাবক উপাদানে ক্লাস যোগ করতে আমাদের নিজস্ব ফর্ম যাচাইকরণ প্লাগইন লিখতে পারি, যার ফলে আমাদের পাঠ্যটিকে লাল বলে স্টাইল করার অনুমতি দেয়, আমরা প্রতিটি ব্রাউজার আমাদের সরবরাহ করে / ছদ্ম-উপাদানগুলি ব্যবহার করতে পছন্দ:valid করি :invalid।

ইউটিলিটিস

ইউটিলিটি ক্লাস—পূর্বে বুটস্ট্র্যাপ ৩-এর সাহায্যকারী—সিএসএস ব্লোট এবং দুর্বল পৃষ্ঠা কার্যক্ষমতার বিরুদ্ধে লড়াই করার জন্য একটি শক্তিশালী সহযোগী। একটি ইউটিলিটি ক্লাস সাধারণত একটি একক, অপরিবর্তনীয় সম্পত্তি-মূল্যের জুড়িকে একটি শ্রেণি হিসাবে প্রকাশ করা হয় (যেমন, .d-blockপ্রতিনিধিত্ব করে display: block;)। তাদের প্রাথমিক আবেদন হল এইচটিএমএল লেখার সময় ব্যবহারের গতি এবং আপনাকে লিখতে হবে এমন কাস্টম সিএসএসের পরিমাণ সীমিত করা।

বিশেষত কাস্টম CSS সম্পর্কিত, ইউটিলিটিগুলি আপনার সর্বাধিক পুনরাবৃত্তি করা সম্পত্তি-মান জোড়াকে একক শ্রেণিতে হ্রাস করে ফাইলের আকার বৃদ্ধির সাথে লড়াই করতে সহায়তা করতে পারে। এটি আপনার প্রকল্পগুলিতে স্কেলে একটি নাটকীয় প্রভাব ফেলতে পারে।

নমনীয় HTML

যদিও সবসময় সম্ভব না, আমরা উপাদানগুলির জন্য আমাদের HTML প্রয়োজনীয়তাগুলিতে অতিরিক্ত গোঁড়ামি এড়াতে চেষ্টা করি। >এইভাবে, আমরা আমাদের CSS নির্বাচকদের একক ক্লাসের উপর ফোকাস করি এবং অবিলম্বে শিশু নির্বাচকদের ( ) এড়াতে চেষ্টা করি । এটি আপনাকে আপনার বাস্তবায়নে আরও নমনীয়তা দেয় এবং আমাদের CSSকে সহজ এবং কম নির্দিষ্ট রাখতে সাহায্য করে।

কোড কনভেনশন

কোড নির্দেশিকা (বুটস্ট্র্যাপ সহ-নির্মাতা, @mdo থেকে) নথিগুলি কীভাবে আমরা বুটস্ট্র্যাপ জুড়ে আমাদের HTML এবং CSS লিখি। এটি সাধারণ বিন্যাস, সাধারণ জ্ঞানের ডিফল্ট, সম্পত্তি এবং বৈশিষ্ট্য আদেশ এবং আরও অনেক কিছুর জন্য নির্দেশিকা নির্দিষ্ট করে।

আমরা আমাদের Sass/CSS-এ এই মানগুলি এবং আরও অনেক কিছু প্রয়োগ করতে Stylelint ব্যবহার করি। আমাদের কাস্টম স্টাইলিন্ট কনফিগ ওপেন সোর্স এবং অন্যদের ব্যবহার ও প্রসারিত করার জন্য উপলব্ধ।

আমরা স্ট্যান্ডার্ড এবং শব্দার্থিক HTML প্রয়োগ করার পাশাপাশি সাধারণ ত্রুটি সনাক্ত করতে vnu-jar ব্যবহার করি।