大小规格· BootstrapVue - 逐浪CMS

Trang chủ » W-100 Bootstrap Vue » 大小规格· BootstrapVue - 逐浪CMS

Có thể bạn quan tâm

  1. 首页
  2. 中文手册
  3. 参考
  4. 大小规格
大小规格 Sizing props and classes

Bootstrap v4提供了一系列用于控制对象大小的方法，同样适用于BootstrapVue。

组件size属性

各种组件都允许一个可选的尺寸（通过size属性）。 以下是默认的Bootstrap v4 CSS支持的大小。

可用大小:

  • sm small
  • lg large

如果未指定大小，则会导致正常大小的外观（通常称为md）。

这些大小值将转换为相应的引导CSS类，具体取决于使用的组件，例如.btn-<size>用于按钮， .modal-<size>用于模式，.form-control-<size>用于表单元素， .pagination-<size>用于分页按钮等。

Breakpoint 大小

Bootstrap v4还包括视口Breakpoint大小：xs, sm, md, lg,和 xl。 指的是用户视口的宽度。

有关breakpoint大小的详细信息，请查看布局和网格文档。

调整实用程序类

使用width和height实用程序类，可以轻松地使元素的宽度和高度相同（相对于其父元素）。

Width和height实用程序是从Bootstrap的_variables.scss中的$sizes Sass映射生成的。 默认情况下包括25%, 50%, 75%, 和 100%的支持。根据需要修改这些值以在此处生成不同的实用程序。

Widths:

Width 25% Width 50% Width 75% Width 100% <div class="text-center"> <div class="w-25 p-3 mb-1 bg-secondary text-light">Width 25%</div> <div class="w-50 p-3 mb-1 bg-secondary text-light">Width 50%</div> <div class="w-75 p-3 mb-1 bg-secondary text-light">Width 75%</div> <div class="w-100 p-3 bg-secondary text-light">Width 100%</div> </div>

Heights:

Height 25% Height 50% Height 75% Height 100% <div style="height: 100px; background-color: rgba(255,0,0,0.1);"> <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> Height 25% </div> <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> Height 50% </div> <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> Height 75% </div> <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> Height 100% </div> </div>

最大 width and height:

您还可以根据需要使用mw-100 (max-width: 100%;)和 mh-100 (max-height: 100%;）实用程序。

额外资源

有关更多信息，请参阅Bootstrap v4官方文档站点。

Từ khóa » W-100 Bootstrap Vue