当前位置: 首页 > 未分类>阅读正文

bootstrap4安装

2022.7.3 朱丰华 295 次 留下评论 1879字

bootstrap使用 npm 下载:

cnpm i bootstrap@4

基础模板:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap 101</title>
    <link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://www.52dixiaowo.com/tools/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <h1>Hello,Bootstrap4!</h1>
</body>
</html>

新增间距:(spacing)

系统提供了一组缩写CSS,并赋予 margin 或 padding 值,包括对单个属性、所有 属性以及垂直、水平等属性的支持,距离单位是在采用 0.25rem 到 3rem,Class来源于Sass map定义。

Spacing 通用样式适用于所有屏幕尺寸,从 xs 到 xl各种规格尺寸。因为这些类是从min-width: 0及以上开始引用的,所以不受媒体查询的约束,然而,其余的屏幕断点(设备解析)包含屏幕尺寸缩写。

对于xs屏幕,使用固定格式{property}{sides}-{size} 命名CSS方法,对于r sm、 mdlg、 xl使用 {property}{sides}-{breakpoint}-{size}格式命名CSS方法。

如果 属性 是下列之一:

  • m – 这个Class属性会设定 margin
  • p – 这个Class属性会设定 padding

边缘 设定:

  • t – 这个Class属性会设定 margin-top 或 padding-top
  • b – 这个Class属性会设定 margin-bottom 或 padding-bottom
  • l – 这个Class属性会设定 margin-left 或 padding-left
  • r – 这个Class属性会设定 margin-right 或 padding-right
  • x – 这个Class属性会设定 *-left 和 *-right两个值。
  • y – 这个Class属性会设定 *-top 和 *-bottom两个值
  • 空白 – 这个Class属性会设定 margin 或 padding 元素的四个边。

尺寸规格定义:

  • 0 – 这个Class属性会设定 margin 或 padding 的样式值为 0
  • 1 – (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现
  • 2 – (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现
  • 3 – (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现
  • 4 – (默认时) 这个Class属性会设定margin 或 padding 以 $spacer * 1.5规格呈现
  • 5 – (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现
  • auto – 这个Class属性会设定 margin 值 auto(按浏览器默认值自由展现)。

(你也可以对$spacers的 Sass map 调整,包括添加条目来增加更多尺寸。)

以下是这些Class样式的代表性的示例:

.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;
}

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注