Source

ভূমিকা

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

দ্রুত শুরু

আপনার প্রকল্পে দ্রুত বুটস্ট্র্যাপ যোগ করতে খুঁজছেন? jsDelivr ব্যবহার করুন, jsDelivr-এর লোকেরা বিনামূল্যে প্রদান করেছে। একটি প্যাকেজ ম্যানেজার ব্যবহার করছেন বা উৎস ফাইল ডাউনলোড করতে হবে? ডাউনলোড পৃষ্ঠায় যান।

সিএসএস

আমাদের CSS লোড করতে অন্য সব স্টাইলশীটের আগে <link>আপনার স্টাইলশীটটি কপি-পেস্ট করুন ।<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

জেএস

আমাদের অনেক উপাদানের কাজ করার জন্য JavaScript ব্যবহার করতে হয়। বিশেষভাবে, তাদের jQuery , Popper.js এবং আমাদের নিজস্ব জাভাস্ক্রিপ্ট প্লাগইন প্রয়োজন। তাদের সক্রিয় করতে <script>, আপনার পৃষ্ঠাগুলির শেষের কাছে, ক্লোজিং ট্যাগের ঠিক আগে নিম্নলিখিতগুলি রাখুন ৷ </body>jQuery প্রথমে আসতে হবে, তারপর Popper.js, এবং তারপর আমাদের JavaScript প্লাগইন।

আমরা jQuery এর স্লিম বিল্ড ব্যবহার করি , তবে সম্পূর্ণ সংস্করণটিও সমর্থিত।

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

কৌতূহলী কোন উপাদানগুলির জন্য স্পষ্টভাবে jQuery, আমাদের JS এবং Popper.js প্রয়োজন? নীচের শো উপাদান লিঙ্ক ক্লিক করুন. আপনি যদি সাধারণ পৃষ্ঠার গঠন সম্পর্কে নিশ্চিত না হন তবে একটি উদাহরণ পৃষ্ঠা টেমপ্লেটের জন্য পড়তে থাকুন।

জাভাস্ক্রিপ্ট প্রয়োজন এমন উপাদান দেখান
  • বরখাস্ত করার জন্য সতর্কতা
  • রাজ্য এবং চেকবক্স/রেডিও কার্যকারিতা টগল করার জন্য বোতাম
  • সমস্ত স্লাইড আচরণ, নিয়ন্ত্রণ এবং সূচকগুলির জন্য ক্যারোজেল৷
  • সামগ্রীর দৃশ্যমানতা টগল করার জন্য সঙ্কুচিত করুন৷
  • প্রদর্শন এবং অবস্থানের জন্য ড্রপডাউন (এছাড়াও Popper.js প্রয়োজন )
  • প্রদর্শন, অবস্থান, এবং স্ক্রোল আচরণের জন্য মডেল
  • প্রতিক্রিয়াশীল আচরণ বাস্তবায়নের জন্য আমাদের সঙ্কুচিত প্লাগইন প্রসারিত করার জন্য Navbar
  • প্রদর্শন এবং অবস্থানের জন্য টুলটিপস এবং পপোভার (এছাড়াও Popper.js প্রয়োজন )
  • স্ক্রোল আচরণ এবং নেভিগেশন আপডেটের জন্য Scrollspy

স্টার্টার টেমপ্লেট

আপনার পৃষ্ঠাগুলি লেটেস্ট ডিজাইন এবং ডেভেলপমেন্ট স্ট্যান্ডার্ডের সাথে সেট আপ করা নিশ্চিত করুন৷ এর মানে হল একটি HTML5 ডকটাইপ ব্যবহার করা এবং যথাযথ প্রতিক্রিয়াশীল আচরণের জন্য একটি ভিউপোর্ট মেটা ট্যাগ সহ। এটি সব একসাথে রাখুন এবং আপনার পৃষ্ঠাগুলি এইরকম হওয়া উচিত:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

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

গুরুত্বপূর্ণ বিশ্ব

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

HTML5 ডকটাইপ

বুটস্ট্র্যাপের জন্য HTML5 ডকটাইপ ব্যবহার করা প্রয়োজন। এটি ছাড়া, আপনি কিছু মজাদার অসম্পূর্ণ স্টাইলিং দেখতে পাবেন, তবে এটি সহ কোনও উল্লেখযোগ্য হেঁচকি সৃষ্টি করা উচিত নয়।

<!doctype html>
<html lang="en">
  ...
</html>

প্রতিক্রিয়াশীল মেটা ট্যাগ

বুটস্ট্র্যাপ মোবাইল ফার্স্ট ডেভেলপ করা হয়েছে , একটি কৌশল যেখানে আমরা প্রথমে মোবাইল ডিভাইসের জন্য কোড অপ্টিমাইজ করি এবং তারপর CSS মিডিয়া ক্যোয়ারী ব্যবহার করে প্রয়োজনীয় উপাদানগুলি স্কেল করি। সমস্ত ডিভাইসের জন্য সঠিক রেন্ডারিং এবং টাচ জুমিং নিশ্চিত করতে, আপনার তে প্রতিক্রিয়াশীল ভিউপোর্ট মেটা ট্যাগ যোগ করুন <head>।

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

আপনি স্টার্টার টেমপ্লেটে এটির একটি উদাহরণ দেখতে পারেন ।

বক্স-সাইজিং

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

বিরল অনুষ্ঠানে আপনাকে এটিকে ওভাররাইড করতে হবে, নিম্নলিখিতগুলির মতো কিছু ব্যবহার করুন:

.selector-for-some-widget {
  box-sizing: content-box;
}

উপরের স্নিপেটের সাথে, নেস্টেড উপাদানগুলি-এর মাধ্যমে তৈরি করা সামগ্রী সহ ::beforeএবং -এর জন্য ::afterনির্দিষ্ট করা সমস্ত উত্তরাধিকারী হবে ৷box-sizing.selector-for-some-widget

CSS ট্রিকসে বক্স মডেল এবং সাইজিং সম্পর্কে আরও জানুন ।

রিবুট করুন

উন্নত ক্রস-ব্রাউজার রেন্ডারিংয়ের জন্য, আমরা সাধারণ HTML উপাদানগুলিতে সামান্য বেশি মতামতযুক্ত রিসেট প্রদান করার সময় ব্রাউজার এবং ডিভাইস জুড়ে অসঙ্গতিগুলি সংশোধন করতে রিবুট ব্যবহার করি।

সম্প্রদায়

বুটস্ট্র্যাপের বিকাশ সম্পর্কে আপ টু ডেট থাকুন এবং এই সহায়ক সংস্থানগুলির সাথে সম্প্রদায়ের কাছে পৌঁছান৷

  • টুইটারে @getbootstrap অনুসরণ করুন ।
  • অফিসিয়াল বুটস্ট্র্যাপ ব্লগ পড়ুন এবং সদস্যতা নিন ।
  • IRC-তে সহকর্মী বুটস্ট্র্যাপারদের সাথে চ্যাট করুন। সার্ভারে irc.freenode.net, ##bootstrapচ্যানেলে।
  • bootstrap-4স্ট্যাক ওভারফ্লো (ট্যাগ করা ) এ বাস্তবায়ন সহায়তা পাওয়া যেতে পারে ।
  • বিকাশকারীদের প্যাকেজগুলিতে কীওয়ার্ড ব্যবহার করা উচিত যা সর্বাধিক আবিষ্কারযোগ্যতার জন্য npm বা অনুরূপ বিতরণ প্রক্রিয়ার bootstrapমাধ্যমে বিতরণ করার সময় বুটস্ট্র্যাপের কার্যকারিতা পরিবর্তন বা যোগ করে ।

আপনি সর্বশেষ গসিপ এবং দুর্দান্ত মিউজিক ভিডিওগুলির জন্য টুইটারে @getbootstrap অনুসরণ করতে পারেন ।