twitter-bootstrap - w3schools - jquery




হারিয়ে যাওয়া দৃশ্যমান-** এবং লুকানো-** বুটস্ট্র্যাপ ভি 4 এ (6)

আমি আশা করি না যে একাধিক ডিভ একটি ভাল সমাধান।

আমিও মনে করি আপনি .hidden-xs-down এবং .hidden-md-up (অথবা .hidden-sm-down এবং .hidden-lg-up একই মিডিয়া ক্যোয়ারিতে কাজ করতে) দিয়ে প্রতিস্থাপন করতে পারেন।

hidden-sm-up সংকলন:

.visible-sm-block {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-block {
    display: block !important;
  }
}

.hidden-sm-down এবং .hidden-lg-up সংকলন করে:

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }
}
@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }
}

উভয় পরিস্থিতি একই আচরণ করা উচিত।

আপনি যখন .visible-sm-block এবং .visible-lg-block .visible-sm-block প্রতিস্থাপন করার চেষ্টা করবেন তখন আপনার পরিস্থিতি আলাদা হয়ে যাবে different বুটস্ট্র্যাপ ভি 4 ডক্স আপনাকে বলে:

এই শ্রেণিগুলি কম সাধারণ ক্ষেত্রে সামঞ্জস্য করার চেষ্টা করে না যেখানে কোনও উপাদানের দৃশ্যমানতা ভিউপোর্ট ব্রেকপয়েন্টের আকারের একক সংগতিপূর্ণ পরিসীমা হিসাবে প্রকাশ করা যায় না; পরিবর্তে এ জাতীয় ক্ষেত্রে আপনার কাস্টম সিএসএস ব্যবহার করতে হবে।

.visible-sm-and-lg {
  display: none !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-sm-and-lg {
    display: block !important;
  }
}

বুটস্ট্র্যাপ v3 এ আমি প্রায়শই লুকানো - ** ক্লাসগুলি ক্লিয়ারফিক্সের সাথে একত্রে বিভিন্ন স্ক্রিনের প্রস্থে মাল্ট কলাম লেআউটগুলি নিয়ন্ত্রণ করতে ব্যবহার করি। উদাহরণ স্বরূপ,

আমি একাধিক লুকানো - ** এক ডিআইভিতে আমার বহু কলামগুলি বিভিন্ন স্ক্রিনের প্রস্থে সঠিকভাবে প্রদর্শিত করতে একত্রিত করতে পারি।

উদাহরণস্বরূপ যদি আমি পণ্যের ফটোগুলির সারি, বড় স্ক্রিনের আকারে সারি প্রতি 4, ছোট স্ক্রিনে 3, তারপরে খুব কম স্ক্রিনে 2 প্রদর্শন করতে চাইতাম। পণ্য ফটোগুলি বিভিন্ন উচ্চতা হতে পারে তাই সারিটি সঠিকভাবে বিরতি নিশ্চিত করার জন্য আমার ক্লিয়ারফিক্সের প্রয়োজন।

এখানে v3 এর একটি উদাহরণ রয়েছে ...

http://jsbin.com/tosebayode/edit?html,css,output

এখন যে ভি 4 এই ক্লাসগুলি সরিয়ে ফেলেছে এবং তাদের দৃশ্যমান / লুকানো - ** - আপ / ডাউন ক্লাসগুলির সাথে প্রতিস্থাপন করেছে বলে মনে হচ্ছে পরিবর্তে একাধিক ডিআইভি দিয়ে একই কাজটি করতে হবে।

এখানে ভি 4 তে একটি অনুরূপ উদাহরণ ...

http://jsbin.com/sagowihowa/edit?html,css,output

সুতরাং আমি একই জিনিস অর্জনের জন্য প্রচুর আপ / ডাউন ক্লাসের সাথে একাধিক ডিআইভি যুক্ত করতে চলেছি single

থেকে ...

<div class="clearfix visible-xs-block visible-sm-block"></div>

না ...

<div class="clearfix hidden-sm-up"></div>
<div class="clearfix hidden-md-up hidden-xs-down"></div>
<div class="clearfix hidden-md-down"></div>

V4 এ করার আরও ভাল উপায় আছে যা আমি উপেক্ষা করেছি?


দুর্ভাগ্যক্রমে এই নতুন বুটস্ট্র্যাপ 4 টি ক্লাসটি ডিভের উপর পুরানোগুলির মতো কাজ করে না কারণ তারা দৃশ্যমান ডিভকে block যা গোপনের চেয়ে দৃশ্যমান শুরু হয় এবং যদি আপনি collapse কার্যকারিতা চারপাশে একটি অতিরিক্ত ডিভ যুক্ত করেন তবে আর কাজ করবে না।


পুরো বিষয়বস্তু আড়াল করার জন্য বুটস্ট্র্যাপ 4 এই ক্লাসটি '.ডি-না' ব্যবহার করুন এটি পূর্বের বুটস্ট্র্যাপ সংস্করণ শ্রেণীর মতো ব্রেকপয়েন্টগুলি নির্বিশেষে সবকিছু আড়াল করবে '


বুটস্ট্র্যাপ v4.1 তাদের গ্রিড সিস্টেমে কলামগুলি লুকানোর জন্য নতুন শ্রেণীর নাম ব্যবহার করে।

স্ক্রিনের প্রস্থের উপর নির্ভর করে কলামগুলি আড়াল করার জন্য, d-none নন ক্লাস বা d-{sm,md,lg,xl}-none ক্লাস ব্যবহার করুন। নির্দিষ্ট স্ক্রিনের আকারগুলিতে কলামগুলি দেখানোর জন্য, উল্লিখিত ক্লাসগুলিকে d-block বা d-{sm,md,lg,xl}-block d-block d-{sm,md,lg,xl}-block ক্লাসগুলির সাথে একত্র করুন।

উদাহরণগুলি হ'ল:

<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

এগুলির আরও here


http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

আপনাকে এখন যা গোপন করা হচ্ছে তার আকার নির্ধারণ করতে হবে

.hidden-xs-down

Xs এবং এর থেকে ছোট কিছু কেবল লুকিয়ে রাখবে hide

.hidden-xs-up

সব লুকিয়ে রাখবে


বুটস্ট্র্যাপ 4 (2018) এর জন্য আপডেট

hidden-* এবং visible-* ক্লাসগুলি আর বুটস্ট্র্যাপে বিদ্যমান নেই visible-* আপনি যদি বুটস্ট্র্যাপ 4-এ নির্দিষ্ট স্তর বা ব্রেকপয়েন্টগুলিতে কোনও উপাদানটি আড়াল করতে চান তবে d-* ডিসপ্লে ক্লাসগুলি সেই অনুযায়ী ব্যবহার করুন।

মনে রাখবেন যে অতিরিক্ত-ছোট / মোবাইল (পূর্ববর্তী xs ) হ'ল ডিফল্ট (অন্তর্নিহিত) ব্রেকপয়েন্ট, যদি না বৃহত্তর ব্রেকপয়েন্ট দ্বারা ওভাররাইড হয়। সুতরাং, -xs ইনফিক্স বুটস্ট্র্যাপ 4 এ আর বিদ্যমান নেই

ব্রেকপয়েন্ট এবং ডাউনের জন্য দেখান / লুকান:

  • hidden-xs-down (hidden-xs) = d-none d-sm-block hidden-xs-down (hidden-xs) d-none d-sm-block
  • hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block hidden-sm-down (hidden-sm hidden-xs) d-none d-md-block
  • hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block hidden-md-down (hidden-md hidden-sm hidden-xs) d-none d-lg-block
  • hidden-lg-down = d-none d-xl-block
  • hidden-xl-down (এন / এ 3.x) = d-none (গোপনের মতো)

ব্রেকপয়েন্ট এবং উপরের জন্য দেখান / লুকান:

  • hidden-xs-up = d-none hidden-xs-up ( hidden সমান)
  • hidden-sm-up = d-sm-none
  • hidden-md-up = d-md-none
  • hidden-lg-up = d-lg-none
  • hidden-xl-up (এন / এ 3.x) = d-xl-none

শুধুমাত্র একক ব্রেকপয়েন্টের জন্য দেখান / লুকান:

  • hidden-xs (কেবলমাত্র) = d-none d-sm-block hidden-xs d-none d-sm-block ( hidden-xs-down মতো)
  • hidden-sm (কেবল) = d-block d-sm-none d-md-block
  • hidden-md (কেবল) = d-block d-md-none d-lg-block
  • hidden-lg (কেবল) = d-block d-lg-none d-xl-block
  • hidden-xl (n / a 3.x) = d-block d-xl-none
  • visible-xs (কেবল) = d-block d-sm-none
  • visible-sm (কেবল) = d-none d-sm-block d-md-none
  • visible-md (কেবল) = d-none d-md-block d-lg-none
  • visible-lg (কেবল) = d-none d-lg-block d-xl-none
  • visible-xl (এন / এ 3.x) = d-none d-xl-block

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

এছাড়াও নোট করুন যে d-*-block d-*-inline , d-*-flex , d-*-table-cell , d-*-table ইত্যাদি দিয়ে পরিবর্তিত হতে পারে উপাদানটির প্রদর্শন ধরণের উপর নির্ভর করে। প্রদর্শন ক্লাসে আরও পড়ুন





bootstrap-4