directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

为了加速移动友好和响应式开发,Bootstrap 包含数十个实用工具类,用于显示,隐藏,对齐和分隔内容。

改变display

使用我们的display实用程序来响应地切换display属性的常见值。将其与我们的网格系统,内容或组件混合以在特定视口中显示或隐藏它们。

Flexbox 选项

Bootstrap 4 使用 flexbox 构建,但并非每个元素display都已更改为,display: flex因为这会增加许多不必要的覆盖,并意外更改关键浏览器行为。我们的大多数组件都是使用 Flexbox 启用的。

如果您需要添加display: flex到元素,请使用.d-flex或使用其中一种响应变体(例如,.d-sm-flex)。您将需要此类或display值来允许使用我们的额外Flexbox实用程序来调整大小,对齐方式,间距等。

边缘和填充

使用marginpadding间距实用程序来控制元素和组件的间距和大小。引导程序4包含基于1rem值默认$spacer变量的用于间隔工具的五级缩放。为所有视口选择值(例如,.mr-3for margin-right: 1rem),或选择响应变体以针对特定视口(例如,.mr-md-3用于margin-right: 1remmd断点开始)。

切换 visibility

display不需要切换时,可以visibility使用我们的可见性实用程序切换元素。不可见的元素仍然会影响页面的布局,但在视觉上对访客隐藏。

Previous article: Next article: