in English

ভূমিকা

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

দ্রুত শুরু

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

সিএসএস

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

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

জেএস

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

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

পাঁজা

আমাদের দুটি বান্ডিলের একটির সাথে প্রতিটি বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট প্লাগইন অন্তর্ভুক্ত করুন। উভয়ই bootstrap.bundle.jsএবং আমাদের টুলটিপস এবং পপোভারের জন্য পপারbootstrap.bundle.min.js অন্তর্ভুক্ত , কিন্তু jQuery নয় । প্রথমে jQuery, তারপর একটি বুটস্ট্র্যাপ জাভাস্ক্রিপ্ট বান্ডেল অন্তর্ভুক্ত করুন। বুটস্ট্র্যাপে কী অন্তর্ভুক্ত রয়েছে সে সম্পর্কে আরও তথ্যের জন্য, অনুগ্রহ করে আমাদের বিষয়বস্তু বিভাগটি দেখুন।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

আলাদা

আপনি যদি পৃথক স্ক্রিপ্ট সমাধানের সাথে যাওয়ার সিদ্ধান্ত নেন, তাহলে পপারকে অবশ্যই প্রথমে আসতে হবে (যদি আপনি টুলটিপ বা পপওভার ব্যবহার করেন), এবং তারপরে আমাদের জাভাস্ক্রিপ্ট প্লাগইন।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

উপাদান

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

জাভাস্ক্রিপ্ট প্রয়োজন এমন উপাদান দেখান
  • বরখাস্ত করার জন্য সতর্কতা
  • রাজ্য এবং চেকবক্স/রেডিও কার্যকারিতা টগল করার জন্য বোতাম
  • সমস্ত স্লাইড আচরণ, নিয়ন্ত্রণ এবং সূচকগুলির জন্য ক্যারোজেল৷
  • সামগ্রীর দৃশ্যমানতা টগল করার জন্য সঙ্কুচিত করুন৷
  • প্রদর্শন এবং অবস্থানের জন্য ড্রপডাউন (এছাড়াও পপার প্রয়োজন )
  • প্রদর্শন, অবস্থান, এবং স্ক্রোল আচরণের জন্য মডেল
  • প্রতিক্রিয়াশীল আচরণ বাস্তবায়নের জন্য আমাদের সঙ্কুচিত প্লাগইন প্রসারিত করার জন্য Navbar
  • স্ক্রোল আচরণ এবং নেভিগেশন আপডেটের জন্য 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 উপাদানগুলিতে সামান্য বেশি মতামতযুক্ত রিসেট প্রদান করার সময় ব্রাউজার এবং ডিভাইস জুড়ে অসঙ্গতিগুলি সংশোধন করতে রিবুট ব্যবহার করি।

সম্প্রদায়

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

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

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

সিএসপি এবং এমবেডেড এসভিজি

বেশ কিছু বুটস্ট্র্যাপ কম্পোনেন্ট আমাদের CSS-এ এমবেড করা SVG গুলিকে ব্রাউজার এবং ডিভাইস জুড়ে ধারাবাহিকভাবে এবং সহজে স্টাইল করার জন্য অন্তর্ভুক্ত করে। আরও কঠোর CSP কনফিগারেশন সহ সংস্থাগুলির জন্য , আমরা আমাদের এমবেডেড SVG-এর সমস্ত দৃষ্টান্ত নথিভুক্ত করেছি (যার সবগুলিই এর মাধ্যমে প্রয়োগ করা হয়েছে background-image) যাতে আপনি আপনার বিকল্পগুলি আরও পুঙ্খানুপুঙ্খভাবে পর্যালোচনা করতে পারেন৷

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