দৃশ্যমান অনুপস্থিত - ** এবং লুকানো - ** বুটস্ট্র্যাপ ভি 4 এ

Question

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

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

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

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

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

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

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

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

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

থেকে ...

<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 এ করার আরও ভাল উপায় আছে যা আমি উপেক্ষা করেছি?

Answer 1

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

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

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

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

• hidden-xs-down (hidden-xs) = d-none d-sm-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-lg-down = d-none d-xl-block
• hidden-xl-down(n / a 3.x) = d-none(একই hidden)

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

• hidden-xs-up= d-none(একই হিসাবে hidden)
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up (n / a 3.x) = d-xl-none

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

• 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 (n / a 3.x) = d-none d-xl-block

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

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

Comments

বিটা প্রকাশের সময় আমি এই পরিবর্তনটি চিহ্নিত করেছি এবং আমি মনে করি এটি আলফা প্রকাশের ক্ষেত্রে কীভাবে ছিল তার থেকে এটি অনেক ভাল। উত্তর যুক্ত করার জন্য ধন্যবাদ - আমি সমাধান হিসাবে চিহ্নিত করব।

— জোহনা

@ জোহনা এটি আরও খারাপ - যদিও। কোন হল d-initialতাই আপনি আর ওভাররাইড করতে পারে d-<breakpoint>-hiddenএবং তার প্রাথমিক মান সেট করুন। আমি যদি ছোট স্ক্রিনগুলিতে কোনও উপাদান আড়াল করতে চাই তবে প্রাথমিক প্রদর্শনটি (যা গতিশীল হতে পারে) না জেনে এটি মাঝারি এবং বৃহত্তরগুলিতে দেখায় তবে আমি এর মান পুনরুদ্ধার করতে পারছি না। তারা এগুলির কোনও কিছুই ভাবেনি।

— ইয়েটস

সবচেয়ে খারাপ আপডেট। কীভাবে একজন অতি-স্বজ্ঞাত "স্পিকিং" ধারণা থেকে কোনও গুপ্ত কিছুতে যায়? এই জন্য একটি ইস্যু খোলার। তারা কমপক্ষে পুরানো শ্রেণিদের সহাবস্থান করতে পারত।

— Andreas

এই উত্তরটি খুঁজে পাওয়াটা কতটা কঠিন ছিল তা আমি আসলেই অবাক হয়েছি।

— অ্যান্থনি

@ আন্ড্রেস আমি সম্পূর্ণরূপে একমত, এটি আমার মতে

— অ্যান্থনি

Answer 2

দুর্ভাগ্যবশত সব শ্রেণীর hidden-*-upএবং hidden-*-downবুটস্ট্র্যাপ থেকে সরানো হয়েছে (বুটস্ট্র্যাপ সংস্করণ হিসাবে 4 বিটা সংস্করণে, 4 alpha এবং সংস্করণ 3 এই শ্রেণীর এখনও অস্তিত্ব)।

পরিবর্তে, d-*এখানে উল্লিখিত হিসাবে নতুন ক্লাসগুলি ব্যবহার করা উচিত: https://getbootstrap.com/docs/4.0/migration/#utilities

আমি জানতে পেরেছি যে নতুন পরিস্থিতিতে কিছু পরিস্থিতিতে কম কার্যকর। পুরাতন পদ্ধতির ছিল লুকান উপাদানগুলোর থাকার নতুন পদ্ধতির হয় দেখান উপাদান। উপাদানগুলি ব্লক, ইনলাইন, ইনলাইন-ব্লক, টেবিল ইত্যাদি হিসাবে প্রদর্শিত হয় কিনা তা আপনার জানা থাকা দরকার বলে সিএসএসের সাথে উপাদানগুলি দেখানো সহজ নয় you

আপনি এই সিএসএসের সাহায্যে বুটস্ট্র্যাপ 3 থেকে পরিচিত পূর্ববর্তী "গোপনীয় *" শৈলীগুলি পুনরুদ্ধার করতে চান:

/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/

/* Breakpoint XS */
@media (max-width: 575px)
{
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    }

}

/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px)
{
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px)
{
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px)
{
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl
    {
        display: none !important;
    } 
}

/* Breakpoint XL */
@media (min-width: 1200px)
{
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg
    {
        display: none !important;
    } 
}

ক্লাসগুলি hidden-unless-*বুটস্ট্র্যাপ 3 এ অন্তর্ভুক্ত ছিল না, তবে সেগুলিও কার্যকর এবং সেগুলি স্ব-ব্যাখ্যামূলক হওয়া উচিত।

Comments

এটি এখনও বি 4 এর বর্তমান সংস্করণে কাজ করে? এই দৃশ্যমানতা ক্রপ আপ আমি চালানো বিরক্ত না করায় একটি প্রধান কারণ। প্রোগ্রামিং করার সময় আমি কখনও কখনও খুব বিস্মিত হই এবং এটি কেবল আমার মাথাটি করছিল ( আইএমএইচও (অথবা যেভাবেই আমি কোড করি :-) উভয়ই রাখতে ভি ভি দরকারী) এটিবি স্টিভ

— বুনাইস

Answer 3

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

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

এগুলির আরও এখানে ।

Answer 4

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

আমিও মনে করি আপনি প্রতিস্থাপন করতে পারেন .visible-sm-blockসঙ্গে .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। বুটস্ট্র্যাপ ভি 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;
  }
}

Answer 5

ব্যবহারকারী ক্লারো পুরানো ভিজিবিলিটি ক্লাস পুনরুদ্ধার করার পরামর্শ দিয়েছেন, এটি একটি ভাল ধারণা। দুর্ভাগ্যক্রমে, তাদের সমাধান আমার প্রকল্পে কার্যকর হয়নি।

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

কোডটি এখানে:

// Restore Bootstrap 3 "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-only{
    @include media-breakpoint-only($bp){
      display:none !important;
    }
  }
}

আমার ক্ষেত্রে, আমি এই অংশটি একটি _custom.scssফাইলে haveোকিয়েছি যা এই বিন্দুতে অন্তর্ভুক্ত রয়েছে bootstrap.scss:

/*!
 * Bootstrap v4.0.0-beta (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above
@import "print";
@import "reboot";
[..]

Comments

খুব উপকারী! বুটস্ট্র্যাপ 4 উপায়টি ধাঁধাটি বেশ খানিকটা বলে মনে হচ্ছে, এটির সাথে এটি display: blockকিছু দৃশ্যের প্রবাহকে বিরতি দেয়।

— লুক

Answer 6

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

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

.hidden-xs-down

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

.hidden-xs-up

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

Comments

হ্যাঁ, আমি এগুলি আমার ভি 4 উদাহরণে ব্যবহার করেছি, তবে বিষয়টি হ'ল আমার এখন একাধিক

— ডিআইভি

এই সমাধানটি পুরানো এবং এটি কেবল বুটস্ট্র্যাপ ভি 4 আলফা, বিটার জন্য এবং এর পরে বৈধ, দুর্ভাগ্যক্রমে এইগুলি উপরে ওকামেন্টে উল্লিখিত হিসাবে প্রতিস্থাপন করা দরকার

— মার্ক ম্যাগন

Answer 7

বুটস্ট্র্যাপ 4-এর জন্য, এখানে একটি ম্যাট্রিক্স চিত্র রয়েছে যা উপাদানগুলি দেখানোর / আড়াল করতে ব্যবহৃত ক্লাসগুলি ব্যাখ্যা করে পর্দার আকারের উপর নির্ভর করে:

উত্স: মেডুইম: বুটস্ট্র্যাপ 4 লুকানো ও দৃশ্যমান

Comments

এই চার্টটি খুব সহায়ক

— সিএসবা তোথ

এখানে কোডপ্লাইতে মিডিয়াম নিবন্ধের একটি সরাসরি লিঙ্ক দেওয়া হয়েছে: codeply.com

— তোথ

Answer 8

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

Answer 9

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

Answer 10

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>