ডেভসংকেত

বুটস্ট্রাপ ৪

টুইটার বুটস্ট্রাপ হলো একটা এইচ টি এম এল,সি এস এস,জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যার সর্বশেষ সংস্করণ হলো বুটস্ট্রাপ ৪ , মূলত দ্রুত ওয়েব পেজ ও ওয়েব অ্যাপ্লিকেশন তৈরী করার জন্যে এটা ব্যাপকভাবে ব্যাবহৃত ।

কন্ট্রিবিউটর

  • iamraufu
  • masfikalam
  • mdmahinpro
  • MuttakinHasib
  • mdraselswe
  • f4h3m

শেয়ার করুন

কন্টেনার ক্লাস

  • রেস্পন্সিভ ফিক্স উইড

    <div class='container'>...</div>
  • ফুল উইড

    <div class='container-fluid'>...</div>

ভার্টিকাল আলাইনমেন্ট

  • সব কলাম উপরে দেখানো

    <div class='row align-items-start'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম মাঝে দেখানো

    <div class='row align-items-center'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম নিচে দেখানো

    <div class='row align-items-end'><div class='col'>...</div><div class='col'>...</div></div>
  • একটি কলাম উপরে দেখানো

    <div class='row'><div class='col align-self-start'>...</div></div>
  • একটি কলাম মাঝে দেখানো

    <div class='row'><div class='col align-self-center'>...</div></div>
  • একটি কলাম নিচে দেখানো

    <div class='row'><div class='col align-self-end'>...</div></div>

টাইপোগ্রাফি ক্লাস

  • বোল্ড টেক্সট

    <p class='font-weight-bold'>...</p>
  • ইটালিক টেক্সট

    <p class='font-italic'>...</p>
  • লাইট উইড টেক্সট

    <p class='font-weight-light'>...</p>
  • লেফট অ্যালাইন

    <p class='text-left'>...</p>
  • রাইট অ্যালাইন

    <p class='text-right'>...</p>
  • জাস্টিফাই টেক্সট

    <p class='text-justify'>...</p>
  • আপারকেস টেক্সট

    <p class='text-uppercase'>...</p>
  • ক্যাপিটালাইস টেক্সট

    <p class='text-capitalize'>...</p>

টেবিল ক্লাস

  • স্ট্রাইপ টেবিল

    <table class='table-striped'>...</table>
  • বর্ডার টেবিল

    <table class='table-bordered'>...</table>
  • বর্ডার ছাড়া টেবিল

    <table class='table-borderedless'>...</table>
  • মাউস হোভারে বিজি কালার পরিবর্তন টেবিল

    <table class='table-hover'>...</table>
  • ডার্ক কালার টেবিল

    <table class='table-dark'>...</table>
  • রেস্পন্সিভ টেবিল

    <div class='table-responsive'><table>...</table></div>

ফ্লোট ( ভাসানো )

  • বামে ভাসানো

    <div class='float-left'>...</div>
  • ডানে ভাসানো

    <div class='float-right'>...</div>
  • না ভাসানো

    <div class='float-none'>...</div>
  • স্ক্রীন প্রস্থ যখন ৫৭৬ পিক্সেল এর সমান বা বড়

    <div class='float-sm-left'>...</div>, <div class='float-sm-right'>...</div>
  • স্ক্রীন প্রস্থ যখন ৭৬৮ পিক্সেল এর সমান বা বড়

    <div class='float-md-left'>...</div>, <div class='float-md-right'>...</div>
  • স্ক্রীন প্রস্থ যখন ৯৯২ পিক্সেল এর সমান বা বড়

    <div class='float-lg-left'>...</div>, <div class='float-lg-right'>...</div>
  • স্ক্রীন প্রস্থ যখন ১২০০ পিক্সেল এর সমান বা বড়

    <div class='float-xl-left'>...</div>, <div class='float-xl-right'>...</div>

ডিসপ্লে প্রোপার্টি

  • প্রদর্শন না করা

    <div class='d-none'> Display None </div>
  • ইনলাইন

    <div class='d-inline'> Display Inline </div>
  • ইনলাইন ব্লক

    <div class='d-inline-block'> Display Inline Block </div>
  • ব্লক

    <div class='d-block'> Display Block </div>
  • টেবিল

    <div class='d-table'> Display Table </div>
  • টেবিল সেল

    <div class='d-table-cell'> Display Table Cell </div>
  • টেবিল রো

    <div class='d-table-row'> Display Table Row </div>
  • ফ্লেক্স

    <div class='d-flex'> Display Flex </div>
  • ইনলাইন ফ্লেক্স

    <div class='d-inline-flex'> Display Inline Flex </div>

গ্রিড ক্লাস

  • স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর ছোট

    <div class='col-'>...</div>
  • স্ক্রীন প্রস্থ যখন ৫৭৬পিক্সেল এর সমান বা বড়

    <div class='col-sm'>...</div>
  • স্ক্রীন প্রস্থ যখন ৭৬৮পিক্সেল এর সমান বা বড়

    <div class='col-md'>...</div>
  • স্ক্রীন প্রস্থ যখন ৯৯২পিক্সেল এর সমান বা বড়

    <div class='col-lg'>...</div>
  • স্ক্রীন প্রস্থ যখন ১২০০পিক্সেল এর সমান বা বড়

    <div class='col-xl'>...</div>

হরিজেন্টাল আলাইনমেন্ট

  • সব কলাম বামে দেখানো

    <div class='row justify-content-start'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম ডানে দেখানো

    <div class='row justify-content-end'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম মাঝে দেখানো

    <div class='row justify-content-center'><div class='col'>...</div><div class='col'>...</div></div>
  • সব কলাম ডানে বামে সমান গ্যাপে দেখানো

    <div class='row'><div class='col justify-content-around'>...</div></div>

ডিসপ্লে হেডিংস

  • ডিসপ্লে ওয়ান

    <h1 class='display-1'>Display 1</h1>
  • ডিসপ্লে টু

    <h1 class='display-2'>Display 2</h1>
  • ডিসপ্লে থ্রি

    <h1 class='display-3'>Display 3</h1>
  • ডিসপ্লে ফোর

    <h1 class='display-4'>Display 4</h1>

ইমেজ ক্লাস

  • রাউন্ড কর্নার

    <img class='rounded'>
  • বৃত্ত আকার

    <img class='rounded-circle'>
  • বড়ি আকার

    <img class='rounded-pill'>
  • লেফট অ্যালাইন

    <img class='float-left'>
  • রাইট অ্যালাইন

    <img class='float-right'>
  • সেন্টার অ্যালাইন

    <img class='d-block mx-auto'>
  • রিস্পন্সিভ ইমেজ

    <img class='img-fluid'>
  • রাউন্ড কর্নার এবং বর্ডার এক সাথে

    <img class='img-thumbnail'>

ক্লিয়ারফিক্স

  • ক্লিয়ার ফ্লোটস

    <div class='clearfix'>...</div>

বাটন

  • প্রাথমিক

    <button type='button' class='btn btn-primary'>Primary</button>
  • মাধ্যমিক

    <button type='button' class='btn btn-secondary'>Secondary</button>
  • সাফল্য

    <button type='button' class='btn btn-success'>Success</button>
  • বিপদ

    <button type='button' class='btn btn-danger'>Danger</button>
  • সতর্কতা

    <button type='button' class='btn btn-warning'>Warning</button>
  • তথ্য

    <button type='button' class='btn btn-info'>Info</button>
  • সামান্য

    <button type='button' class='btn btn-light'>Light</button>
  • অন্ধকার

    <button type='button' class='btn btn-dark'>Dark</button>
  • সংযুক্ত

    <button type='button' class='btn btn-link'>Link</button>
  • প্রান্তরেখা প্রাথমিক

    <button type='button' class='btn btn-outline-primary'>Primary</button>
  • প্রান্তরেখা মাধ্যমিক

    <button type='button' class='btn btn-outline-secondary'>Secondary</button>
  • প্রান্তরেখা সাফল্য

    <button type='button' class='btn btn-outline-success'>Success</button>
  • প্রান্তরেখা বিপদ

    <button type='button' class='btn btn-outline-danger'>Danger</button>
  • প্রান্তরেখা সতর্কতা

    <button type='button' class='btn btn-outline-warning'>Warning</button>
  • প্রান্তরেখা তথ্য

    <button type='button' class='btn btn-outline-info'>Info</button>
  • প্রান্তরেখা সামান্য

    <button type='button' class='btn btn-outline-light'>Light</button>
  • প্রান্তরেখা অন্ধকার

    <button type='button' class='btn btn-outline-dark'>Dark</button>
  • বড়

    <button type='button' class='btn btn-primary btn-lg'>Large button</button>
  • ছোট

    <button type='button' class='btn btn-primary btn-sm'>Small button</button>
  • বন্ধ

    <button type='button' class='btn-close' aria-label='Close'></button>
  • বন্ধ সাদা

    <button type='button' class='btn-close btn-close-white' aria-label='Close'></button>

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর