通过bootstrap查看,他们似乎支持为小屏幕折叠menubar项目。对于页面上的其他项目是否有类似的功能?
例如,我有一个
这在现有的Bootstrap框架中可能吗?
超小设备
手机 (<768px) (类名:.visible-xs-block, hidden-xs)
。
小型设备
平板电脑 (≥768px) (类名:.visible-sm-block, hidden-sm)
。
中型设备
台式电脑 (≥992px) (类名:.visible-md-block, hidden-md)
。
大型设备
台式机 (≥1200px) (类名:.visible-lg-block, hidden-lg)
。
以下内容从v3.2.0开始被废弃。
超小设备
手机 (<768px) (类名:.visible-xs, hidden-xs)
。
小型设备
平板电脑 (≥768px) (类名:.visible-sm, hidden-sm)
。
中型设备
台式电脑(≥992px) (类名:.visible-md, hidden-md)
。
大型设备
桌面(≥1200px) (类名:.visible-lg, hidden-lg)
。
更古老的Bootstrap
.hidden-phone, .hidden-tablet
等都是不支持的/已被淘汰的。
更新:
在Bootstrap 4中,有两种类型的类。
hidden-*-up
当视口在给定的断点或更宽时隐藏元素。hidden-*-down
当视口在给定的断点或更小时,隐藏元素。此外,新的xl
视口被添加到宽度超过1200px的设备上。更多信息请点击这里。
d-block d-md-none
以隐藏在中型、大型和超大型设备上。
d-block d-md-none
,以隐藏在中型、大型和特大型设备上。
d-none d-md-block
在中型、大型和特大型设备上隐藏。d-none d-md-block
在小型和超小型设备上进行隐藏。
d-none d-md-block
在小型和超小型设备上进行隐藏。d-none d-md-block
在小型和超小型设备上进行隐藏。 [![在此输入图片描述][1]][1] 。
请注意,您也可以通过将 "d--block "替换为 "d--inline-block "来内联。
老答案。 Bootstrap 4 Alpha
你可以使用.hidden-*-up
类来隐藏特定尺寸和更大的设备。
.hidden-md-up
以隐藏在中型、大型和超大型设备上。
.hidden-md-up
用于隐藏在中型、大型和特大型设备上。
同样,.hidden-*-down
也可以隐藏在特定尺寸和较小的设备上。
.hidden-md-down
以隐藏在中型、小型和超小型设备上。
在bootstrap 4中,可见-*不再是一个选项。
*要想在中等设备上显示**,可以将两者结合起来。
hidden-sm-down
和hidden-xl-up
。
有效的尺寸是: * xs
适用于纵向模式的手机(<34em)。
xs
用于纵向模式的手机(<34em)sm
适用于横向模式的手机(≥34em)。lg
用于台式机(≥62em)xl
用于台式机(≥75em)这是截至Bootstrap 4,alpha 5(2017年1月)的情况。 更多细节在这里。 http://v4-alpha.getbootstrap.com/layout/responsive-utilities/
在Bootstrap 4.3.x上。 https://getbootstrap.com/docs/4.3/utilities/display/
Bootstrap 4.x答案。
从Bootstrap 4测试版开始,hidden-*
类被删除。
如果你想在中等以上的地方显示,请使用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
。只在中型和大型设备上显示该元素)。
[文件][1]
[1]: https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
你可以为任何模块输入这些模块类后缀,以更好地控制它的显示或隐藏位置。
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
在此,我有几项澄清要补充。
1)所显示的列表(visible-phone、visible-tablet等)在Bootstrap 3中已经废弃。新的值是。
星号对每个人的翻译如下(我在下面只显示可见-xs-*)。
2)当你使用这些类时,你不要在前面加句号(如上面部分答案中令人困惑的显示)。
比如说。
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
3)你可以使用visible-和hidden-(例如visible-xs和hidden-xs),但这些在Bootstrap 3.2.0中已被弃用。
欲了解更多细节和最新规格,请到这里搜索"visible"。 http://getbootstrap.com/css/
所有的 "hidden--up","hidden-"类对我来说都不适用,所以我在 "visible-*"之前添加了自制的 "hidden "类。 如果你需要只在一个屏幕上显示div,而在其他屏幕上隐藏div,那么这个类就非常有用。
CSS。
.hidden {display:none;}
HTML。
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>
对于Bootstrap 4.0测试版(我认为这将是最终版本)有一个变化--请注意,隐藏的类被删除了。
请看文档。 https://getbootstrap.com/docs/4.0/utilities/display/
为了在移动设备上隐藏内容,并在更大的设备上显示,你必须使用以下类。
d-none d-sm-block
第一类设置在所有设备上显示无,第二类设置在设备上显示"sm"。 (如果你想在不同的设备上显示,可以用 md, lg, 等等。 如果你想在不同的设备上显示,可以用md、lg等代替sm。
我建议在迁移之前先看一下这个问题。
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
在boostrap 4.1中(运行snippet是因为我从Bootstrap文档中复制了整个表格代码)。
<!--开始 snippet: js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
.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