Verzeichnis suchen
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(能见度)
Figuren

Bootstrap包含各种速记响应边距和填充实用程序类,以修改元素的外观。

怎么运行的

使用速记类为元素或其边上的子集分配响应友好marginpadding值。包括对单个属性,所有属性以及垂直和水平属性的支持。类从默认的萨斯地图范围内.25rem建立3rem

表示法

适用于所有断点,从间距公用事业xsxl,在他们没有断点的缩写。这是因为这些类是从上到下应用的min-width: 0,因此不受媒体查询的约束。然而,其余的断点确实包含断点缩写。

类别是使用的格式命名{property}{sides}-{size}xs{property}{sides}-{breakpoint}-{size}smmdlg,和xl

属性是以下之一:

  • m-用于设置margin

  • p-用于设置padding

双方是一个:

  • t-用于设置margin-toppadding-top

  • b-用于设置margin-bottompadding-bottom

  • l-用于设置margin-leftpadding-left

  • r-用于设置margin-rightpadding-right

  • x-对于设置两者的类*-left*-right

  • y-对于设置两者的类*-top*-bottom

  • 为设置marginpadding元素的所有四个方面

其中大小是以下之一:

  • 0- 用于消除marginpadding通过设置的类0

  • 1- (默认情况下)的类时,设置marginpadding$spacer * .25

  • 2- (默认情况下)的类时,设置marginpadding$spacer * .5

  • 3- (默认情况下)的类时,设置marginpadding$spacer

  • 4- (默认情况下)的类时,设置marginpadding$spacer * 1.5

  • 5- (默认情况下)的类时,设置marginpadding$spacer * 3

  • auto- 用于设置margin为自动的类

(您可以通过向$spacersSass地图变量添加条目来添加更多尺寸。)

实例

以下是这些类的一些有代表性的例子:

.mt-0 {
  margin-top: 0 !important;}.ml-1 {
  margin-left: ($spacer * .25) !important;}.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;}.p-3 {
  padding: $spacer !important;}

水平居中

此外,Bootstrap还包含一个.mx-auto用于将固定宽度块级别内容水平居中的类,即具有display: blockwidth设置水平边距的内容auto

<div class="mx-auto" style="width: 200px;">
  Centered element</div>
Vorheriger Artikel: Nächster Artikel: