বুটস্ট্র্যাপের মাধ্যমে দেখে মনে হচ্ছে তারা ছোট পর্দার জন্য মেনুবার আইটেমগুলিকে ভেঙ্গে ফেলা সমর্থন করে। পৃষ্ঠায় অন্যান্য আইটেমের জন্য কি অনুরূপ কিছু আছে?
উদাহরণস্বরূপ, আমার কাছে নেভ-পিলগুলি ডানদিকে ভাসছে। একটি ছোট পর্দায় এটি সমস্যার কারণ হয়। আমি অন্তত এটিকে একইরকম ক্লিক-টু-শো-বেশি ড্রপডাউনতে রেখে দিতে চাই।
বিদ্যমান বুটস্ট্র্যাপ কাঠামোর মধ্যে এটি কি সম্ভব?
উত্তর:
অতিরিক্ত ছোট ডিভাইস
ফোন (<768px)(Class names : .visible-xs-block, hidden-xs)
ছোট ডিভাইস
ট্যাবলেট (≥768px)(Class names : .visible-sm-block, hidden-sm)
মাঝারি ডিভাইস
ডেস্কটপগুলি (≥992px)(Class names : .visible-md-block, hidden-md)
বড় ডিভাইস
ডেস্কটপ (001200px)(Class names : .visible-lg-block, hidden-lg)
নীচে v3.2.0 হিসাবে অবচয় করা হয়েছে
অতিরিক্ত ছোট ডিভাইস ফোন (<768px) (Class names : .visible-xs, hidden-xs)
ছোট ডিভাইস ট্যাবলেট (≥768px) (Class names : .visible-sm, hidden-sm)
মাঝারি ডিভাইস ডেস্কটপগুলি (≥992px) (Class names : .visible-md, hidden-md)
বড় ডিভাইস ডেস্কটপ (001200px) (Class names : .visible-lg, hidden-lg)
অনেক পুরানো বুটস্ট্র্যাপ
.hidden-phone, .hidden-tablet ইত্যাদি অসমর্থিত / অপ্রচলিত।
হালনাগাদ:
বুটস্ট্র্যাপ 4 এ 2 ধরণের শ্রেণি রয়েছে:
hidden-*-upযা উপাদান লুকিয়ে যখন ভিউপোর্ট দেওয়া ব্রেকপয়েন্ট বা ব্যাপকতর হয়।hidden-*-down যা ভিউপোর্টটি প্রদত্ত ব্রেকপয়েন্টে বা তার চেয়ে কম হলে উপাদানটি লুকায়।এছাড়াও, xl1200px প্রস্থের চেয়ে বেশি এমন ডিভাইসের জন্য নতুন ভিউপোর্ট যুক্ত করা হয়েছে। আরও তথ্যের জন্য এখানে ক্লিক করুন ।
d-block d-md-noneথেকে মাঝারি, বৃহৎ এবং অতিরিক্ত বড় লুকান ডিভাইস।
d-none d-md-blockথেকে ক্ষুদ্র ও অতিরিক্ত ছোট লুকান ডিভাইস।
মনে রাখবেন আপনি এছাড়াও প্রতিস্থাপন ইনলাইন করতে d-*-blockসঙ্গেd-*-inline-block
পুরানো উত্তর: বুটস্ট্র্যাপ 4 আলফা
আপনি .hidden-*-upপ্রদত্ত আকার এবং বৃহত্তর ডিভাইসগুলিতে লুকিয়ে রাখতে ক্লাসগুলি ব্যবহার করতে পারেন
.hidden-md-upথেকে মাঝারি, বৃহৎ এবং অতিরিক্ত বড় লুকান ডিভাইস।
.hidden-*-downএকটি নির্দিষ্ট আকার এবং ছোট ডিভাইসগুলিতে আড়াল করতে একই হয়
.hidden-md-downমাঝারি, ছোট এবং অতিরিক্ত-ছোট ডিভাইসে লুকানোর জন্য
দৃশ্যমান- * বুটস্ট্র্যাপ 4 এর সাথে আর বিকল্প নেই
প্রদর্শন করতে শুধুমাত্র মাঝারি ডিভাইসের , দুই একত্রিত করতে পারেন:
hidden-sm-downএবংhidden-xl-up
বৈধ আকার:
xs প্রতিকৃতি মোডে ফোনের জন্য (<34 মিম)sm ল্যান্ডস্কেপ মোডে ফোনের জন্য (em34 এম)md ট্যাবলেটগুলির জন্য (≥ 48 এম)lg ডেস্কটপগুলির জন্য (62 মিটার)xl ডেস্কটপগুলির জন্য (em75 এম)এটি বুটস্ট্র্যাপ 4, আলফা 5 (জানুয়ারী 2017) হিসাবে ছিল। আরও বিশদ এখানে: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
বুটস্ট্র্যাপে 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/
.d-বিভিন্ন মাপে লুকিয়ে বা দেখানোর জন্য ক্লাস ব্যবহার করেন । getbootstrap.com/docs/4.0/utilities/display
d-none d-md-block। কোড.লুসফটওয়্যার
বুটস্ট্র্যাপ 4.x উত্তর
hidden-* ক্লাসগুলি বুটস্ট্র্যাপ 4 বিটা থেকে অপসারণ করা হবে।
আপনি যদি মাধ্যমটিতে দেখাতে চান এবং d-*ক্লাসগুলি ব্যবহার করতে চান , যেমন:
<div class="d-none d-md-block">This will show in medium and up</div>আপনি যদি কেবলমাত্র নীচে এবং নীচেতে প্রদর্শন করতে চান তবে এটি ব্যবহার করুন:
<div class="d-block d-md-none"> This will show only in below medium form factors</div>স্ক্রিনের আকার এবং শ্রেণি চার্ট
| Screen Size | Class |
|--------------------|--------------------------------|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |সুস্পষ্ট
.visible-*ক্লাস ব্যবহার না করে আপনি কোনও উপাদানটিকে কেবল স্ক্রিনের আকারে না লুকিয়ে দৃশ্যমান করে তোলেন। আপনি কেবলমাত্র পর্দার আকারের প্রদত্ত ব্যবধানে একটি উপাদান দেখানোর জন্য একটি.d-*-noneশ্রেণীর সাথে এক.d-*-blockশ্রেণীর একত্রিত করতে পারেন (উদাহরণস্বরূপ.d-none.d-md-block.d-xl-noneউপাদানটি মাঝারি এবং বড় ডিভাইসে প্রদর্শিত হয়)।
যে কোনও মডিউল যেখানে প্রদর্শিত হবে বা লুকিয়ে থাকবে তা আরও ভাল নিয়ন্ত্রণের জন্য আপনি এই মডিউল শ্রেণীর প্রত্যয়গুলি প্রবেশ করতে পারেন।
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop http://twitter.github.com/bootstrap/scaffolding.html নীচে স্ক্রোল করুন
এখানে যুক্ত করতে আমার বেশ কয়েকটি স্পষ্টতা রয়েছে:
1) প্রদর্শিত তালিকাটি (দৃশ্যমান-ফোন, দৃশ্যমান-ট্যাবলেট, ইত্যাদি) বুটস্ট্র্যাপে অবচয় করা হয়েছে The. নতুন মানগুলি হ'ল:
নক্ষত্রটি প্রতিটিের জন্য নিম্নলিখিতগুলিতে অনুবাদ করে (আমি নীচে কেবল দৃশ্যমান-এক্সএস- * দেখাই):
২) আপনি যখন এই ক্লাসগুলি ব্যবহার করেন, আপনি সামনে কোনও সময়কাল যোগ করবেন না (যেমন উপরের উত্তরের অংশে বিভ্রান্তিকরভাবে দেখানো হয়েছে)।
উদাহরণ স্বরূপ:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>3) আপনি দৃশ্যমান- * এবং লুকানো- * ব্যবহার করতে পারেন (উদাহরণস্বরূপ, দৃশ্যমান-এক্স এবং লুকানো-এক্স) তবে এগুলি বুটস্ট্র্যাপ ৩.২.০ এ অবমুক্ত করা হয়েছে।
আরও বিশদ এবং সর্বশেষতম চশমাগুলির জন্য, এখানে যান এবং "দৃশ্যমান" অনুসন্ধান করুন: http://getbootstrap.com/css/
hidden-xs-blockবৈধ নয়, তবে visible-xs-blockহ'ল
সকল hidden-*-up, hidden-*ক্লাস আমার জন্য কাজ করে না, তাই আমি আত্মকৃত যোগ করছি hiddenসামনে বর্গ visible-*(যা বর্তমান বুটস্ট্র্যাপ সংস্করণের জন্য কাজ করে)। আপনার যদি কেবলমাত্র একটি স্ক্রিনের জন্য ডিভি প্রদর্শন করতে হয় এবং অন্য সকলের জন্য লুকানো প্রয়োজন তবে এটি খুব কার্যকর।
সিএসএস:
.hidden {display:none;}এইচটিএমএল:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>বুটস্ট্র্যাপ 4.0 বিটার জন্য (এবং আমি ধরে নিই এটি চূড়ান্ত থাকবে) একটি পরিবর্তন আছে - সচেতন থাকুন যে লুকানো শ্রেণিগুলি সরানো হয়েছিল।
দস্তাবেজগুলি দেখুন: https://getbootstrap.com/docs/4.0/utilities/display/
মোবাইলে সামগ্রীটি আড়াল করতে এবং বড় ডিভাইসগুলিতে প্রদর্শন করতে আপনাকে নিম্নলিখিত ক্লাসগুলি ব্যবহার করতে হবে:
d-none d-sm-blockপ্রথম শ্রেণীর সেট সমস্ত ডিভাইসগুলির মধ্যে কিছুই প্রদর্শন করে না এবং দ্বিতীয়টি এটি "এসএম" আপ ডিভাইসগুলির জন্য প্রদর্শন করে না (যদি আপনি বিভিন্ন ডিভাইসে প্রদর্শন করতে চান তবে এসএম এর পরিবর্তে আপনি এমডি, এলজি ইত্যাদি ব্যবহার করতে পারেন)।
আমি অভিবাসনের আগে সে সম্পর্কে পড়ার পরামর্শ দিই:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
বুস্ট্র্যাপ ৪.১ এ (স্নিপেট চালান কারণ আমি বুটস্ট্র্যাপ ডকুমেন্টেশন থেকে পুরো টেবিল কোডটি অনুলিপি করেছি):
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}<table class="fixed_headers">
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements
.hidden-phoneএবং.hidden-tabletহয় অবচিত ** - তারা ** অসমর্থিত করছি । অবহেলিত হওয়ার অর্থ হ'ল "অন্যান্য পদ্ধতির দ্বারা তত্পর হয়ে গেছে যদিও এখনও সমর্থিত হ'ল শিগগিরই পর্যায়ক্রমে বেরিয়ে আসবে" । এটি বুটস্ট্র্যাপ ৩.২.০— এর ক্ষেত্রে দেখা যায়.visible-xsএবং এগুলি এখনও আপাতত কাজ করে,.hidden-phoneএবং বন্ধুরা বুটস্ট্র্যাপের কার্যকারিতা থেকে সম্পূর্ণ অনুপস্থিত।