Bootstrap
提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。
响应式实用工具目前只适用于块和表切换。
|
|
超小屏幕
|
小屏幕
|
中等屏幕
|
大屏幕
|
|
|
手机 (<768px)
|
平板 (≥768px)
|
桌面 (≥992px)
|
桌面 (≥1200px)
|
|
.visible-xs-*
|
可见
|
隐藏
|
隐藏
|
隐藏
|
|
.visible-sm-*
|
隐藏
|
可见
|
隐藏
|
隐藏
|
|
.visible-md-*
|
隐藏
|
隐藏
|
可见
|
隐藏
|
|
.visible-lg-*
|
隐藏
|
隐藏
|
隐藏
|
可见
|
|
.hidden-xs
|
隐藏
|
可见
|
可见
|
可见
|
|
.hidden-sm
|
可见
|
隐藏
|
可见
|
可见
|
|
.hidden-md
|
可见
|
可见
|
隐藏
|
可见
|
|
.hidden-lg
|
可见
|
可见
|
可见
|
隐藏
|
从
v3.2.0
版本起，形如
.visible-*-*
的类针对每种屏幕大小都有了三种变体，每个针对
CSS
中不同的
display
属性，列表如下：
|
类组
|
CSS display
|
|
.visible-*-block
|
display: block;
|
|
.visible-*-inline
|
display: inline;
|
|
.visible-*-inline-block
|
display: inline-block;
|
因此，以超小屏幕（
xs
）为例，可用的
.visible-*-*
类是：
.visible-xs-block、.visible-xs-inline
和
.visible-xs-inline-block
。
.visible-xs、.visible-sm、.visible-md
和
.visible-lg
类也同时存在。但是从
v3.2.0
版本开始不再建议使用。
visible
不要直接用在
table
上，会有问题，比如
table
放到一个
div
里
table
宽度被固定，无法百分百。在
table
外再加个
div
，对
div
设置
visible
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。超小屏幕小屏幕中等屏幕大屏幕手机 (<768px)平板 (≥768px)桌面 (≥992px)桌面 (≥1200...
<title>
bootstrap
实现导航栏的响应式布局，当在小
屏幕
、手机
屏幕
浏览时自动折叠
隐藏
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="
bootstrap
.min.
css
" rel="styleshe
这几天接到了一个响应式项目 要求同一套代码能在pc和手机端 展示 不同的效果
很简单的一个项目 但是pc上面
显示
的东西会比较多 但是移动端就很简单了 这个时候就需要
隐藏
一些元素了
首先boot4 中
隐藏
和
显示
元素是 d-none / d-block
根据不同尺寸 可以设置
d-sm-none 在小
屏幕
及以上
屏幕
都
隐藏
d-md-none 在中
屏幕
和大
屏幕
上都
隐藏
d-lg-none 只在大
屏幕
的时候
隐藏
d-sm-block 在...
常用类别 -
显示
层级
显示
层级
隐藏
元素
显示
层级
Bootstrap
提供了一些类别来变更HTML元素的
CSS
的display属性，而且这些类别具有响应式特点，其命名形式如下:
xs的层级类别: .d - { 设定值 }
sm、md、lg、xl、xxl的层级类别: .d - { 断点 } - { 设定值 }
设定值如下:
none: 不
显示
。
inline: 行内层级 (不换行)。
block: 区块层级 (换行)。
inline-block: 不换行，但可以设定宽度、高度、padding与ma
遇到的问题：
最近在使用
Bootstrap
框架做网页时发现，在小
屏幕
和手机
屏幕
之下（max-width: 768px），导航栏不能在点击导航链接时，自动折叠导航栏。或者在展开导航栏后，如果不点击其中的导航链接，用户在选择滑动
屏幕
时，不能做到自动折叠导航栏。需要用户手动点击折叠按钮，才能收回去。这在小
屏幕
宝贵的
显示
面积内，显然不合理，用户体验也不好。
我用一张动图来更好的说明这个问题：
...
关于这个包对于确定与
bootstrap
4 网格系统相关的 web 应用程序的
屏幕
大小
类型很有用。
安装 npm i react-hooks-screen-type 或 yarn add react-hooks-screen-type 用法 import useScreenType from 'react-hooks-screen-type';
函数 MyAwesomeComponent() { const screenType = useScreenType();
Bootstrap
3 视口
大小
这是
Bootstrap
3 的一个非常简单的助手，用于获取 JavaScript 代码中的当前视口
大小
（“xs”、“sm”、“md”或“lg”）。
您可以简单地包含它：
[removed][removed]
并且您将在全局 window 对象中拥有一个函数，您可以使用它来发现当前
大小
：
window.viewportIs(size) // return a boolean
其中size是
Bootstrap
大小
之一（“xs”、“sm”、“md”或“lg”）
就是这样！ :)
