বুটস্ট্র্যাপ

ভারা

বুটস্ট্র্যাপ একটি প্রতিক্রিয়াশীল 12-কলাম গ্রিডের উপর নির্মিত। আমরা সেই সিস্টেমের উপর ভিত্তি করে স্থির- এবং তরল-প্রস্থ লেআউটগুলিও অন্তর্ভুক্ত করেছি।

CSS রিসেট, টাইপোগ্রাফি এবং লিঙ্কগুলির জন্য বিশ্বব্যাপী শৈলী

HTML5 ডকটাইপ প্রয়োজন

বুটস্ট্র্যাপ এইচটিএমএল উপাদান এবং সিএসএস বৈশিষ্ট্য ব্যবহার করে যার জন্য HTML5 ডকটাইপ ব্যবহার করা প্রয়োজন। আপনার প্রকল্পের প্রতিটি বুটস্ট্র্যাপড পৃষ্ঠার শুরুতে এটি অন্তর্ভুক্ত করতে ভুলবেন না।

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

টাইপোগ্রাফি এবং লিঙ্ক

scaffolding.less ফাইলের মধ্যে , আমরা মৌলিক গ্লোবাল ডিসপ্লে, টাইপোগ্রাফি এবং লিঙ্ক শৈলী সেট করি। বিশেষ করে, আমরা:

  • শরীরের মার্জিন সরান
  • উপর সেট background-color: white;করুনbody
  • আমাদের টাইপোগ্রাফিক বেস হিসাবে @baseFontFamily, @baseFontSize, এবং গুণাবলী ব্যবহার করুন@baseLineHeight
  • এর মাধ্যমে বিশ্বব্যাপী লিঙ্কের রঙ সেট করুন @linkColorএবং শুধুমাত্র লিঙ্ক আন্ডারলাইন প্রয়োগ করুন:hover

নরমালাইজের মাধ্যমে রিসেট করুন

বুটস্ট্র্যাপ 2 থেকে, ঐতিহ্যগত CSS রিসেটটি Normalize.css থেকে উপাদান ব্যবহার করার জন্য বিকশিত হয়েছে , নিকোলাস গ্যালাঘারের একটি প্রকল্প যা HTML5 বয়লারপ্লেটকেও ক্ষমতা দেয় ।

নতুন রিসেটটি এখনও reset.less- এ পাওয়া যেতে পারে , কিন্তু সংক্ষিপ্ততা এবং নির্ভুলতার জন্য অনেক উপাদান মুছে ফেলা হয়েছে৷

একটি প্রতিক্রিয়াশীল মোচড় সহ ডিফল্ট গ্রিড সিস্টেম 12 কলাম

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

বুটস্ট্র্যাপে প্রদত্ত ডিফল্ট গ্রিড সিস্টেম 12টি কলাম ব্যবহার করে যা 724px, 940px (প্রতিক্রিয়াশীল CSS অন্তর্ভুক্ত ছাড়াই ডিফল্ট) এবং 1170px প্রস্থে রেন্ডার হয়। 767px ভিউপোর্টের নীচে, কলামগুলি তরল হয়ে ওঠে এবং উল্লম্বভাবে স্ট্যাক হয়।

  1. <div ক্লাস = "সারি" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

এখানে দেখানো হিসাবে, দুটি "কলাম" দিয়ে একটি মৌলিক লেআউট তৈরি করা যেতে পারে, প্রতিটি 12টি মৌলিক কলামের একটি সংখ্যা বিস্তৃত করে যা আমরা আমাদের গ্রিড সিস্টেমের অংশ হিসাবে সংজ্ঞায়িত করেছি।


অফসেটিং কলাম

4
4 অফসেট 4
3 অফসেট 3
3 অফসেট 3
8 অফসেট 4 
  1. <div ক্লাস = "সারি" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

নেস্টিং কলাম

বুটস্ট্র্যাপে স্ট্যাটিক (অ-তরল) গ্রিড সিস্টেমের সাথে, বাসা বাঁধা সহজ। আপনার কন্টেন্ট নেস্ট করতে, বিদ্যমান কলামের মধ্যে শুধু একটি নতুন .rowএবং কলামের সেট যোগ করুন ।.span*.span*

উদাহরণ

নেস্টেড সারিগুলিতে কলামগুলির একটি সেট অন্তর্ভুক্ত করা উচিত যা এটির প্যারেন্টের কলামগুলির সংখ্যা পর্যন্ত যোগ করে৷ উদাহরণস্বরূপ, দুটি নেস্টেড .span3কলাম একটি এর মধ্যে স্থাপন করা উচিত .span6।

কলামের লেভেল 1
স্তর 2
স্তর 2 
  1. <div ক্লাস = "সারি" > 
  2.   <div class = "span6" > 
  3.     লেভেল 1 কলাম
  4.     <div ক্লাস = "সারি" > 
  5.       <div class = "span3" > লেভেল 2 </div> 
  6.       <div class = "span3" > লেভেল 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

তরল গ্রিড সিস্টেম 12 প্রতিক্রিয়াশীল, শতাংশ-ভিত্তিক কলাম

তরল কলাম

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

শতাংশ, পিক্সেল নয়

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

তরল সারি

.rowসহজভাবে পরিবর্তন করে যেকোন সারি তরল তৈরি করুন .row-fluid। কলামগুলি ঠিক একই রকম থাকে, এটিকে স্থির এবং তরল লেআউটগুলির মধ্যে ফ্লিপ করা খুব সহজ করে তোলে৷

মার্কআপ

  1. <div ক্লাস = "সারি-তরল" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

তরল বাসা বাঁধে

ফ্লুইড গ্রিডের সাথে নেস্টিং একটু আলাদা: নেস্টেড কলামের সংখ্যা প্যারেন্টের সাথে মেলে না। পরিবর্তে, আপনার কলামগুলি প্রতিটি স্তরে পুনরায় সেট করা হয়েছে কারণ প্রতিটি সারি মূল কলামের 100% দখল করে৷

তরল 12
তরল 6
তরল 6 
  1. <div ক্লাস = "সারি-তরল" > 
  2.   <div class = "span12" > 
  3.     কলামের লেভেল 1
  4.     <div ক্লাস = "সারি-তরল" > 
  5.       <div class = "span6" > লেভেল 2 </div> 
  6.       <div class = "span6" > লেভেল 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

গ্রিড কাস্টমাইজেশন

পরিবর্তনশীল ডিফল্ট মান বর্ণনা
@gridColumns 12 কলামের সংখ্যা
@gridColumnWidth 60px প্রতিটি কলামের প্রস্থ
@gridGutterWidth 20px কলামের মধ্যে নেতিবাচক স্থান

কম মধ্যে ভেরিয়েবল

বুটস্ট্র্যাপে অন্তর্নির্মিত ডিফল্ট 940px গ্রিড সিস্টেম কাস্টমাইজ করার জন্য কয়েকটি ভেরিয়েবল রয়েছে, উপরে নথিভুক্ত করা হয়েছে। গ্রিডের জন্য সমস্ত ভেরিয়েবল variables.less এ সংরক্ষণ করা হয়।

কিভাবে কাস্টমাইজ করা যায়

গ্রিড পরিবর্তন করা মানে তিনটি @grid*ভেরিয়েবল পরিবর্তন করা এবং বুটস্ট্র্যাপ পুনরায় কম্পাইল করা। variables.less এ গ্রিড ভেরিয়েবল পরিবর্তন করুন এবং পুনরায় কম্পাইল করার জন্য নথিভুক্ত চারটি উপায়ের একটি ব্যবহার করুন । আপনি যদি আরও কলাম যোগ করেন, তাহলে grid.less-এ যাদের জন্য CSS যোগ করতে ভুলবেন না।

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

গ্রিডের কাস্টমাইজেশন শুধুমাত্র ডিফল্ট স্তরে কাজ করে, 940px গ্রিড। বুটস্ট্র্যাপের প্রতিক্রিয়াশীল দিকগুলি বজায় রাখার জন্য, আপনাকে প্রতিক্রিয়াশীল.লেসে গ্রিডগুলিও কাস্টমাইজ করতে হবে।

ওয়েবপেজ তৈরির জন্য লেআউট বেসিক টেমপ্লেট

স্থির বিন্যাস

ডিফল্ট এবং সহজ 940px-প্রশস্ত, কেন্দ্রীভূত বিন্যাস শুধুমাত্র একটি একক দ্বারা প্রদত্ত যেকোন ওয়েবসাইট বা পৃষ্ঠার জন্য <div class="container">।

  1. <body>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

তরল লেআউট

<div class="container-fluid">নমনীয় পৃষ্ঠা গঠন, সর্বনিম্ন- এবং সর্বোচ্চ-প্রস্থ, এবং একটি বাম দিকের সাইডবার দেয়। এটি অ্যাপ এবং ডক্সের জন্য দুর্দান্ত।

  1. <div class = "container-fluid" > 
  2.   <div ক্লাস = "সারি-তরল" > 
  3.     <div class = "span2" > 
  4.       <!--সাইডবার সামগ্রী-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--শারীরিক বিষয়বস্তু-->
  8.     </div>
  9.   </div>
  10. </div>

বিভিন্ন ডিভাইস এবং রেজোলিউশনের জন্য প্রতিক্রিয়াশীল ডিজাইন মিডিয়া প্রশ্ন

প্রতিক্রিয়াশীল ডিভাইস

তারা কি করে

মিডিয়া ক্যোয়ারীগুলি বেশ কয়েকটি শর্তের উপর ভিত্তি করে কাস্টম CSS-এর জন্য অনুমতি দেয়—অনুপাত, প্রস্থ, প্রদর্শনের ধরন ইত্যাদি—কিন্তু সাধারণত চারপাশে min-widthএবং ফোকাস করে max-width।

  • আমাদের গ্রিডে কলামের প্রস্থ পরিবর্তন করুন
  • যেখানে প্রয়োজন সেখানে ভাসানোর পরিবর্তে উপাদানগুলিকে স্ট্যাক করুন
  • ডিভাইসের জন্য আরও উপযুক্ত হতে শিরোনাম এবং পাঠ্যের আকার পরিবর্তন করুন

মিডিয়া প্রশ্নগুলিকে দায়িত্বের সাথে ব্যবহার করুন এবং শুধুমাত্র আপনার মোবাইল শ্রোতাদের জন্য শুরু করুন৷ বৃহত্তর প্রকল্পগুলির জন্য, ডেডিকেটেড কোড বেস বিবেচনা করুন এবং মিডিয়া প্রশ্নের স্তরগুলি নয়।

সমর্থিত ডিভাইসের

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

লেবেল লেআউট প্রস্থ কলাম প্রস্থ নর্দমার প্রস্থ
স্মার্টফোন 480px এবং নীচে তরল কলাম, কোন নির্দিষ্ট প্রস্থ নেই
স্মার্টফোন থেকে ট্যাবলেট 767px এবং নীচে তরল কলাম, কোন নির্দিষ্ট প্রস্থ নেই
পোর্ট্রেট ট্যাবলেট 768px এবং তার উপরে 42px 20px
ডিফল্ট 980px এবং তার বেশি 60px 20px
বড় ডিসপ্লে 1200px এবং তার বেশি 70px 30px

মেটা ট্যাগ প্রয়োজন

ডিভাইসগুলি সঠিকভাবে প্রতিক্রিয়াশীল পৃষ্ঠাগুলি প্রদর্শন করে তা নিশ্চিত করতে, ভিউপোর্ট মেটা ট্যাগ অন্তর্ভুক্ত করুন।

  1. <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1.0" >

মিডিয়া প্রশ্ন ব্যবহার করে

বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে এই মিডিয়া প্রশ্নগুলিকে অন্তর্ভুক্ত করে না, তবে সেগুলি বোঝা এবং যোগ করা খুব সহজ এবং ন্যূনতম সেটআপের প্রয়োজন৷ বুটস্ট্র্যাপের প্রতিক্রিয়াশীল বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করার জন্য আপনার কাছে কয়েকটি বিকল্প রয়েছে:

  1. কম্পাইল করা প্রতিক্রিয়াশীল সংস্করণ, bootstrap-responsive.css ব্যবহার করুন
  2. @import যোগ করুন "responsive.less" এবং বুটস্ট্র্যাপ পুনরায় কম্পাইল করুন
  3. একটি পৃথক ফাইল হিসাবে responsive.less পরিবর্তন এবং পুনরায় কম্পাইল করুন

কেন শুধু এটা অন্তর্ভুক্ত না? সত্য বলা, সবকিছু প্রতিক্রিয়াশীল হতে হবে না. এই বৈশিষ্ট্যটি সরাতে বিকাশকারীদের উত্সাহিত করার পরিবর্তে, আমরা এটিকে সক্ষম করা সবচেয়ে ভাল মনে করি।

  1.   /* ল্যান্ডস্কেপ ফোন এবং ডাউন */
  2.   @ মিডিয়া ( সর্বোচ্চ - প্রস্থ : 480px ) { ... }     
  3.  
  4.   /* ল্যান্ডস্কেপ ফোন থেকে প্রতিকৃতি ট্যাবলেট */
  5.   @মিডিয়া ( সর্বোচ্চ - প্রস্থ : 767px ) { ... }     
  6.  
  7.   /* ল্যান্ডস্কেপ এবং ডেস্কটপে প্রতিকৃতি ট্যাবলেট */
  8.   @মিডিয়া ( ন্যূনতম - প্রস্থ : 768px ) এবং ( সর্বোচ্চ - প্রস্থ : 979px ) { ... }        
  9.  
  10.   /* বড় ডেস্কটপ */
  11.   @মিডিয়া ( মিনিট - প্রস্থ : 1200px ) { ... }

প্রতিক্রিয়াশীল ইউটিলিটি ক্লাস

তারা কি

দ্রুত মোবাইল-বান্ধব বিকাশের জন্য, ডিভাইস দ্বারা সামগ্রী দেখানো এবং লুকানোর জন্য এই মৌলিক ইউটিলিটি ক্লাসগুলি ব্যবহার করুন৷

কখন ব্যবহার করতে হবে

সীমিত ভিত্তিতে ব্যবহার করুন এবং একই সাইটের সম্পূর্ণ ভিন্ন সংস্করণ তৈরি করা এড়িয়ে চলুন। পরিবর্তে, প্রতিটি ডিভাইসের উপস্থাপনা পরিপূরক করতে তাদের ব্যবহার করুন।

উদাহরণস্বরূপ, আপনি <select>মোবাইল লেআউটে nav-এর জন্য একটি উপাদান দেখাতে পারেন, কিন্তু ট্যাবলেট বা ডেস্কটপে নয়।

সাপোর্ট ক্লাস

আমরা যে ক্লাসগুলিকে সমর্থন করি এবং একটি প্রদত্ত মিডিয়া ক্যোয়ারী লেআউটে (ডিভাইস দ্বারা লেবেলযুক্ত) তাদের প্রভাবের একটি সারণী এখানে দেখানো হয়েছে৷ তারা পাওয়া যাবে responsive.less.

ক্লাস ফোন480px এবং নীচে ট্যাবলেট767px এবং নীচে ডেস্কটপ768px এবং তার উপরে
.visible-phone দৃশ্যমান
.visible-tablet দৃশ্যমান
.visible-desktop দৃশ্যমান
.hidden-phone দৃশ্যমান দৃশ্যমান
.hidden-tablet দৃশ্যমান দৃশ্যমান
.hidden-desktop দৃশ্যমান দৃশ্যমান

পরীক্ষা ক্ষেত্রে

উপরের ক্লাসগুলি পরীক্ষা করার জন্য আপনার ব্রাউজারের আকার পরিবর্তন করুন বা বিভিন্ন ডিভাইসে লোড করুন।

এতে দৃশ্যমান...

সবুজ চেকমার্কগুলি নির্দেশ করে যে ক্লাসটি আপনার বর্তমান ভিউপোর্টে দৃশ্যমান।

  • ফোন✔ ফোন
  • ট্যাবলেট✔ ট্যাবলেট
  • ডেস্কটপ✔ ডেস্কটপ

লুকিয়ে আছে...

এখানে, সবুজ চেকমার্কগুলি নির্দেশ করে যে ক্লাসটি আপনার বর্তমান ভিউপোর্টে লুকানো আছে।

  • ফোন✔ ফোন
  • ট্যাবলেট✔ ট্যাবলেট
  • ডেস্কটপ✔ ডেস্কটপ