非常教程

Bootstrap 4参考手册

布局 | Layout

排版通用类别 | Utilities for layout

为了加速移动友好和响应式开发,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使用我们的可见性实用程序切换元素。不可见的元素仍然会影响页面的布局,但在视觉上对访客隐藏。

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。

主页 https://getbootstrap.com/
源码 https://github.com/twbs/bootstrap
版本 4
发布版本 4.0.0-beta.2

Bootstrap 4目录

1.快速开始 | Getting started
2.组件·信息提示框 | Alerts
3.组件·徽章 | Badges
4.组件·面包屑导航 | Breadcrumb
5.组件·按钮组 | Button group
6.组件·按钮 | Buttons
7.组件·卡片 | Cards
8.组件·轮播 | Carousel
9.组件·折叠 | Collapse
10.组件·下拉菜单 | Dropdowns
11.组件·表单 | Forms
12.组件·输入框组 | Input group
13.组件·大屏幕 | Jumbotron
14.组件·列表组 | List group
15.组件·模态框 | Modal
16.组件·导航栏 | Navbar
17.组件·导航 | Navs
18.组件·分页 | Pagination
19.组件·弹出框 | Popovers
20.组件·进度条 | Progress
21.组件·滚动监听 | Scrollspy
22.组件·提示工具 | Tooltips
23.内容 | Content
24.布局 | Layout
25.迁移 | Migration
26.实用工具 | Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex(弹性)布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航(Breadcrumb)