এপ্রোচ
বুটস্ট্র্যাপ তৈরি এবং বজায় রাখার জন্য ব্যবহৃত গাইডিং নীতি, কৌশল এবং কৌশলগুলি সম্পর্কে জানুন যাতে আপনি এটিকে আরও সহজে কাস্টমাইজ এবং প্রসারিত করতে পারেন।
শুরু হওয়া পৃষ্ঠাগুলি প্রকল্পের একটি পরিচায়ক সফর এবং এটি কী অফার করে, এই নথিটি আমরা বুটস্ট্র্যাপে আমরা কেন করি সেই বিষয়ে ফোকাস করে ৷ এটি ওয়েবে তৈরি করার জন্য আমাদের দর্শন ব্যাখ্যা করে যাতে অন্যরা আমাদের কাছ থেকে শিখতে পারে, আমাদের সাথে অবদান রাখতে পারে এবং আমাদের উন্নতি করতে সাহায্য করতে পারে।
এমন কিছু দেখুন যা সঠিক শোনাচ্ছে না, বা সম্ভবত আরও ভাল করা যেতে পারে? একটি সমস্যা খুলুন — আমরা আপনার সাথে এটি আলোচনা করতে চাই।
সারসংক্ষেপ
আমরা এইগুলির প্রতিটিতে আরও বেশি করে ডুব দেব, কিন্তু উচ্চ স্তরে, এখানে যা আমাদের পদ্ধতির গাইড করে।
- উপাদানগুলি প্রতিক্রিয়াশীল এবং মোবাইল-প্রথম হওয়া উচিত
- উপাদানগুলি একটি বেস ক্লাস দিয়ে তৈরি করা উচিত এবং মডিফায়ার ক্লাসের মাধ্যমে প্রসারিত করা উচিত
- উপাদান রাজ্যের একটি সাধারণ 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.- এই পদ্ধতিটি সর্বোচ্চ ব্যবহারকারীর অগ্রাধিকারের আমাদের প্রত্যাশার সাথে মেলে। যদি একটি উপাদান ফোকাস করা হয়, এটি দৃশ্যে এবং ব্যবহারকারীর মনোযোগে। সক্রিয় উপাদান দ্বিতীয় সর্বোচ্চ কারণ তারা অবস্থা নির্দেশ করে। হোভার তৃতীয় সর্বোচ্চ কারণ এটি ব্যবহারকারীর অভিপ্রায় নির্দেশ করে, তবে প্রায় যেকোনো কিছুই হোভার করা যেতে পারে।
ওভারলে উপাদান
Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
Each overlay component increases its z-index value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.
Learn more about this in our z-index layout page.
HTML and CSS over JS
Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.
This principle is our first-class JavaScript API using data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.
Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.
The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.
Utilities
Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.
Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.
Flexible HTML
যদিও সবসময় সম্ভব না, আমরা উপাদানগুলির জন্য আমাদের HTML প্রয়োজনীয়তাগুলিতে অতিরিক্ত গোঁড়ামি এড়াতে চেষ্টা করি। >এইভাবে, আমরা আমাদের CSS নির্বাচকদের একক ক্লাসের উপর ফোকাস করি এবং অবিলম্বে শিশু নির্বাচকদের ( ) এড়াতে চেষ্টা করি । এটি আপনাকে আপনার বাস্তবায়নে আরও নমনীয়তা দেয় এবং আমাদের CSSকে সহজ এবং কম নির্দিষ্ট রাখতে সাহায্য করে।