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

ভারা

বুটস্ট্র্যাপ প্রতিক্রিয়াশীল 12-কলাম গ্রিড, লেআউট এবং উপাদানগুলির উপর নির্মিত।

গ্লোবাল সেটিংস

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

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

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

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

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

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

এই শৈলী scaffolding.less মধ্যে পাওয়া যাবে .

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

বুটস্ট্র্যাপ 2 এর সাথে, পুরানো রিসেট ব্লক Normalize.css এর পক্ষে বাদ দেওয়া হয়েছে , নিকোলাস গ্যালাঘের এবং জোনাথন নিলের একটি প্রকল্প যা HTML5 বয়লারপ্লেটকেও ক্ষমতা দেয় । যদিও আমরা আমাদের reset.less- এর মধ্যে Normalize-এর অনেকটাই ব্যবহার করি , আমরা বুটস্ট্র্যাপের জন্য বিশেষভাবে কিছু উপাদান সরিয়ে দিয়েছি।

ডিফল্ট গ্রিড সিস্টেম

লাইভ গ্রিড উদাহরণ

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

বেসিক গ্রিড HTML

একটি সাধারণ দুটি কলাম বিন্যাসের জন্য, একটি তৈরি .rowকরুন এবং উপযুক্ত সংখ্যক .span*কলাম যোগ করুন। যেহেতু এটি একটি 12-কলামের গ্রিড, প্রত্যেকটি .span*সেই 12টি কলামের একটি সংখ্যাকে বিস্তৃত করে, এবং সর্বদা প্রতিটি সারির জন্য 12 পর্যন্ত যোগ করা উচিত (বা প্যারেন্টে কলামের সংখ্যা)।

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

এই উদাহরণে, আমরা 12টি মোট কলাম .span4এবং .span8একটি সম্পূর্ণ সারি তৈরি করেছি।

অফসেটিং কলাম

.offset*ক্লাস ব্যবহার করে ডানদিকে কলাম সরান । প্রতিটি শ্রেণী একটি কলামের বাম মার্জিন একটি সম্পূর্ণ কলাম দ্বারা বৃদ্ধি করে। উদাহরণস্বরূপ, চারটি কলামের উপর .offset4চলে যায়।.span4

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

নেস্টিং কলাম

ডিফল্ট গ্রিডের সাথে আপনার সামগ্রী নেস্ট করতে, একটি বিদ্যমান কলামের মধ্যে একটি নতুন .rowএবং কলামের সেট যোগ করুন । নেস্টেড সারিগুলিতে কলামগুলির একটি সেট অন্তর্ভুক্ত করা উচিত যা এর মূলের কলামগুলির সংখ্যা পর্যন্ত যোগ করে৷.span*.span*

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

তরল গ্রিড সিস্টেম

লাইভ তরল গ্রিড উদাহরণ

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

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

বেসিক ফ্লুইড গ্রিড HTML

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

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

তরল অফসেটিং

স্থির গ্রিড সিস্টেম অফসেটিংয়ের মতো একইভাবে কাজ করে: .offset*অনেকগুলি কলাম দ্বারা অফসেট করতে যেকোনো কলামে যোগ করুন।

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

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

ফ্লুইড গ্রিড ভিন্নভাবে নেস্টিং ব্যবহার করে: কলামের প্রতিটি নেস্টেড স্তরে 12টি কলাম পর্যন্ত যোগ করা উচিত। কারণ তরল গ্রিড প্রস্থ নির্ধারণের জন্য পিক্সেল নয়, শতাংশ ব্যবহার করে।

তরল 12
তরল 6
তরল 6
তরল 6
তরল 6 
  1. <div ক্লাস = "সারি-তরল" > 
  2.   <div class = "span12" > 
  3.     তরল 12
  4.     <div ক্লাস = "সারি-তরল" > 
  5.       <div class = "span6" > 
  6.         তরল 6
  7.         <div ক্লাস = "সারি-তরল" > 
  8.           <div class = "span6" > তরল 6 </div> 
  9.           <div class = "span6" > তরল 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > তরল 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

বিন্যাস

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

<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>

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

প্রতিক্রিয়াশীল বৈশিষ্ট্য সক্রিয় করা হচ্ছে

<head>আপনার নথির মধ্যে সঠিক মেটা ট্যাগ এবং অতিরিক্ত স্টাইলশীট অন্তর্ভুক্ত করে আপনার প্রকল্পে প্রতিক্রিয়াশীল CSS চালু করুন । আপনি যদি কাস্টমাইজ পৃষ্ঠা থেকে বুটস্ট্র্যাপ কম্পাইল করে থাকেন তবে আপনাকে শুধুমাত্র মেটা ট্যাগ অন্তর্ভুক্ত করতে হবে।

  1. <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ=ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "স্টাইলশীট" >

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

প্রতিক্রিয়াশীল বুটস্ট্র্যাপ সম্পর্কে

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

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

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

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

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

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

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

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

দ্রুত মোবাইল-বান্ধব বিকাশের জন্য, ডিভাইস দ্বারা সামগ্রী দেখানো এবং লুকানোর জন্য এই ইউটিলিটি ক্লাসগুলি ব্যবহার করুন৷ নীচে উপলব্ধ ক্লাসগুলির একটি টেবিল এবং একটি প্রদত্ত মিডিয়া ক্যোয়ারী লেআউটে তাদের প্রভাব (ডিভাইস দ্বারা লেবেল করা)। তারা পাওয়া যাবে responsive.less.

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

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

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

রেসপন্সিভ ইউটিলিটিস টেস্ট কেস

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

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

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

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

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

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

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