এই পোস্টে আমরা একটি বুটস্ট্র্যাপ সাইটের লেআউট দেখতে পাব এই ওপেন সোর্স ফ্রেমওয়ার্কের আশ্চর্যজনক ক্ষমতা প্রদর্শন করতে। ভিতরে পূর্ববর্তী নিবন্ধ আমরা আমাদের কাজের সুবিধার্থে একটি উন্নয়ন পরিবেশ এবং প্রয়োজনীয় প্লাগইন ইনস্টল করেছি।
এর বিষয়বস্তু ব্যবস্থাপক হিসাবে মনে রাখবেন Linux Adictos এটি আমাকে GitHub এ আপলোড করা উদাহরণগুলির কোড সন্নিবেশ করার অনুমতি দেয় না। এগুলি ডাউনলোড করতে আপনাকে অবশ্যই আপনার বিতরণে গিট প্যাকেজটি ইনস্টল করতে হবে এবং তারপরে নিম্নলিখিত কমান্ডগুলি লিখতে হবে:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
নতুন ফাইল ডাউনলোড করতে আপনাকে পর্যায়ক্রমে এই দুটি কমান্ড চালাতে হবে।
কোড বিশ্লেষণ
এখন ফাইল এক্সপ্লোরারে VSCodium দিয়ে example2.html খুলুন। (ডান বোতাম দিয়ে খুলুন) আমরা নিম্নলিখিতগুলি দেখতে পাই:
- লাইন 1 এ আমরা ব্রাউজারকে ডকুমেন্টের ধরন বলি যাতে এটি কীভাবে রেন্ডার করতে হয় তা জানে।
- লাইন 2 সাইটের ভাষা নির্দেশ করে, যা ব্রাউজারকে বলে যে কীভাবে নির্দিষ্ট অক্ষর এবং বিষয়বস্তুর ভাষা সার্চ ইঞ্জিনে উপস্থাপন করতে হয়, যা অবস্থানের সুবিধা দেয়। আমাদের কোডে এটিকে es হিসাবে সংজ্ঞায়িত করা হয়েছে তবে আঞ্চলিক রূপ রয়েছে যেমন স্পেন থেকে স্প্যানিশের জন্য es_ES বা আর্জেন্টিনা থেকে স্প্যানিশের জন্য es_AR।
- লাইন 3 থেকে আমাদের ট্যাগগুলির মধ্যে অবস্থিত একটি মেটাডেটা ধারক রয়েছে Y . মেটাডেটা নথি সম্পর্কে তথ্য প্রদান করে। আমাদের উদাহরণে:
- লাইন 4 অক্ষর এনকোডিংয়ের জন্য ব্যবহৃত মান নির্দেশ করে। সম্ভবত আপনি কখনও কখনও দেখেছেন যে উচ্চারিত অক্ষর বা বিশেষ চিহ্নের পরিবর্তে, হীরার ভিতরে একটি প্রশ্ন চিহ্ন প্রদর্শিত হয়। কারণ ব্রাউজারটি অনুপযুক্ত এনকোডিং ব্যবহার করে। লাইন 8-এর বিবৃতিটি স্পষ্টভাবে ঘোষণা করে এটিকে এড়িয়ে যায়।
- 5 লাইনে আমরা ব্রাউজারকে বলি যে এটি কীভাবে বিভিন্ন স্ক্রীন ফর্ম্যাটের সাথে মানিয়ে নেওয়া উচিত।
- আমরা যে শিরোনামটি লাইন 6 এ সেট করেছি তা ব্রাউজারের উপরের বারে এবং সার্চ ইঞ্জিনগুলিতে প্রদর্শিত হবে।
- লাইন 7-এ আমরা ব্রাউজারকে বলি যে স্টাইলিং সম্পর্কিত বুটস্ট্র্যাপ ফ্রেমওয়ার্ক উপাদানগুলি কোথায় পাওয়া যায়।
- লাইন 10 থেকে ধারক শুরু হয়। বডিতে ওয়েব পৃষ্ঠার বিষয়বস্তু এবং বুটস্ট্র্যাপ স্ক্রিপ্টের লিঙ্ক রয়েছে যা আমাদের সাইটে ইন্টারঅ্যাক্টিভিটি দেবে।
- লাইন 13 নথির শেষ নির্দেশ করে।
একটি বুটস্ট্র্যাপ সাইটের বিন্যাস
বুটস্ট্র্যাপ সাইটের লেআউটের জন্য মূল ধারণা
যেমনটি আমরা পূর্ববর্তী নিবন্ধে বলেছি, বুটস্ট্র্যাপ মোবাইল প্রথম পদ্ধতি গ্রহণ করে। যখন এই পদ্ধতিটি প্রয়োগ করা হয়, তখন ছোট পর্দার আকারকে মাথায় রেখে ডিভাইসের সাথে নকশাটি করা হয় এবং তারপরে এটিকে অনুসরণ করা মাপের সাথে মানিয়ে নিতে স্তরগুলি যুক্ত করা হয়।
এখানে আমাদের অবশ্যই দুটি মূল ধারণা বিবেচনা করতে হবে:
- ব্রেকপয়েন্ট।
- মিডিয়া পরামর্শ।
ব্রেকপয়েন্টগুলি নির্দেশ করে যে স্ক্রিনের প্রস্থ থেকে লেআউটটি পরিবর্তন করা হয়েছে।, মিডিয়া কোয়েরি নির্দিষ্ট ব্রাউজার এবং অপারেটিং সিস্টেম বৈশিষ্ট্যের উপর ভিত্তি করে শৈলী পরামিতি প্রয়োগ করে। অন্য কথায়, প্রতিটি ব্রেকপয়েন্টের একটি সংশ্লিষ্ট শৈলী থাকবে।
বুটস্ট্র্যাপ ছয়টি পূর্বনির্ধারিত ব্রেকপয়েন্টের সাথে আসে যা আরও উন্নত প্রোগ্রামারদের দ্বারা সংশোধন করা যেতে পারে। ডিফল্ট পয়েন্ট হল:
- অতিরিক্ত ছোট: কোনো প্রিসেট শনাক্তকারী নেই এবং 576 পিক্সেলের কম চওড়া স্ক্রিনে প্রযোজ্য।
- ছোট: এটি sm দ্বারা চিহ্নিত করা হয় এবং 576 পিক্সেল থেকে পর্দার জন্য ব্যবহৃত হয়।
- মাঝারি: এটি md দ্বারা চিহ্নিত করা হয় এবং 768 পিক্সেল থেকে পর্দার জন্য ব্যবহৃত হয়।
- দৈর্ঘ্য: lg হিসাবে চিহ্নিত 992 পিক্সেল থেকে পর্দার জন্য ব্যবহৃত হয়।
- অতিরিক্ত দীর্ঘ: এটিতে শনাক্তকারী এলজি রয়েছে এবং এটি 1200 পিক্সেলের স্ক্রিনে শৈলী প্রয়োগ করে।
- অতিরিক্ত অতিরিক্ত দীর্ঘ: শনাক্তকারী xxl দিয়ে চিহ্নিত, এটি 1400 পিক্সেলের স্ক্রিনে নকশা প্রয়োগ করতে ব্যবহৃত হয়।
এই মাপগুলি আকস্মিকভাবে বেছে নেওয়া হয়নি প্রতিটি ব্রেকপয়েন্টে এমন পাত্র থাকতে পারে যার প্রস্থ 12 এর গুণিতক। এগুলি একটি নির্দিষ্ট ডিভাইসের জন্যও লক্ষ্যবস্তু নয়, তবে পরিবর্তে ডিভাইস এবং স্ক্রীনের আকারের বিভিন্ন বিভাগের সাথে খাপ খাইয়ে নেয়৷
বিভিন্ন স্ক্রিনের মাপের মধ্যে আমরা পাত্রগুলো খুঁজে পাই। এগুলি একটি নির্দিষ্ট ডিভাইস বা গ্রাফিক উইন্ডোতে সাইটের বিষয়বস্তু হোস্টিং, পূরণ এবং সারিবদ্ধ করার জন্য দায়ী।
;