nimble-style-frame

v1.0.4

Published

a year ago

nimble-style-frame ├── README.md 帮助文档 ├── index.js 主文件 ├── /css/ │ ├── nimble-style-frame.applet.css 小程序样式文件 │ └── nimble-style-frame.css 样式文件

0High
0Medium
0Low

playdumb

便捷样式框架

文件结构描述

nimble-style-frame
├── README.md  帮助文档
├── index.js   主文件
├── /css/
│  ├── nimble-style-frame.applet.css   小程序样式文件
│  └── nimble-style-frame.css          样式文件

安装

通过npm来安装nimble-style-frame

npm install nimble-style-frame

安装完成后，在项目中引入nimble-style-frame的通用CSS：

import 'nimble-style-frame/css/nimble-style-frame.css'

安装完成后，在项目中引入nimble-style-frame的小程序特有CSS：

import 'nimble-style-frame/css/nimble-style-frame.applet.css'

使用说明

使用说明目录

元素的内部和外部的显示类型

d-none用于隐藏元素，这意味着该元素会从文档流中完全消失，不占据任何空间。

<div class="d-none"></div>

d-inline它会使元素表现为内联元素。这意味着元素前后没有换行符，它们可以和其他内联元素一起出现在同一行上。

<div class="d-inline"></div>

d-inline-block它允许元素像内联元素一样和其他元素共享一行，同时又能像块级元素一样设置宽度和高度。

<div class="d-inline-block"></div>

d-block会使元素表现为块级元素。这意味着元素会独占一行，前后都会有换行符。块级元素可以设置宽度和高度，而且padding和margin的所有属性都能产生边距效果。

<div class="d-block"></div>

弹性盒子布局

d-flexflex布局，也称为弹性盒子布局

<div class="d-flex">
    <div></div>
    <div></div>
</div>

flex-row子元素沿着水平方向，从左到右排列

<div class="d-flex flex-row">
    <div></div>
    <div></div>
</div>

flex-row-reverse与flex-row相同，但排列方向相反

<div class="d-flex flex-row-reverse">
    <div></div>
    <div></div>
</div>

flex-column子元素沿着垂直方向，从上到下排列

<div class="d-flex flex-column">
    <div></div>
    <div></div>
</div>

flex-column-reverse与flex-column相同，但排列方向相反

<div class="d-flex flex-column-reverse">
    <div></div>
    <div></div>
</div>

flex-wrap当容器内的项目超出容器的宽度时，项目会换行

<div class="d-flex flex-wrap">
    <div></div>
    <div></div>
</div>

flex-nowrap当容器内的项目超出容器的宽度时，项目不会换行，可能导致容器溢出

<div class="d-flex flex-nowrap">
    <div></div>
    <div></div>
</div>

flex-wrap-reverse当容器内的项目超出容器的宽度时，项目会换行，但是顺序相反

<div class="d-flex flex-wrap-reverse">
    <div></div>
    <div></div>
</div>

项目属性

flex-grow-1表示该弹性项目将参与剩余空间的分配，并且会尽可能地填充剩余空间。如果多个弹性项目的 flex-grow 都设置为 1，那么它们会平均分配剩余空间。

<div class="d-flex">
    <div class="flex-grow-1"></div>
    <div></div>
</div>

flex-shrink-1表示该弹性项目在必要时会收缩以适应容器的空间。如果多个弹性项目的 flex-shrink 都设置为 1，那么它们会按照一定的比例收缩。

<div class="d-flex">
    <div class="flex-shrink-1"></div>
    <div></div>
</div>

flex-fill同时拥有flex-grow-1和flex-shrink-1的属性，并且弹性项目的初始大小将由其内容的大小决定

<div class="d-flex">
    <div class="flex-fill"></div>
    <div></div>
</div>

对齐方式

以下情况为flex布局的默认主轴情况下

justify-content-start水平左对齐: 表示弹性项目会沿着主轴的起始位置进行排列

<div class="d-flex justify-content-start"></div>

justify-content-center水平居中对齐: 表示弹性项目会沿着主轴居中对齐

<div class="d-flex justify-content-center"></div>

justify-content-end水平右对齐: 表示弹性项目会沿着主轴的结束位置进行排列

<div class="d-flex justify-content-end"></div>

justify-content-between水平两端对齐: 弹性项目会沿着主轴均匀分布，第一个项目会贴靠容器主轴起始端，最后一个项目会贴靠容器主轴末端，项目之间的间隔相等

<div class="d-flex justify-content-between"></div>

justify-content-around水平等距分布: 弹性项目会在主轴上均匀分布，并且每个项目的两侧都会有相等的间隔空间。需要注意的是，容器边缘和第一个项目、最后一个项目之间的间隔是项目之间间隔的一半。

<div class="d-flex justify-content-around"></div>

align-content-start垂直顶部对齐: 表示弹性项目会沿着交叉轴的起始位置进行排列

<div class="d-flex align-content-start"></div>

align-content-center垂直居中对齐: 表示弹性项目会沿着交叉轴居中对齐

<div class="d-flex align-content-center"></div>

align-content-end垂直右对齐: 表示弹性项目会沿着交叉轴的结束位置进行排列

<div class="d-flex align-content-end"></div>

align-content-between垂直两端对齐: 弹性项目会沿着交叉轴均匀分布，第一个项目会贴靠容器交叉轴起始端，最后一个项目会贴靠容器交叉轴末端，项目之间的间隔相等

<div class="d-flex align-content-between"></div>

align-content-around垂直等距分布: 弹性项目会在交叉轴上均匀分布，并且每个项目的两侧都会有相等的间隔空间。需要注意的是，容器边缘和第一个项目、最后一个项目之间的间隔是项目之间间隔的一半。

<div class="d-flex align-content-around"></div>

网格布局

d-grid指定一个容器采用网格布局

<div class="d-grid">
    <div></div>
    <div></div>
</div>

grid-template-col-2每行显示2个相等宽度的单元格

<div class="d-grid grid-template-col-2">
    <div></div>
    <div></div>
</div>

grid-template-col-3每行显示3个相等宽度的单元格

<div class="d-grid grid-template-col-3">
    <div></div>
    <div></div>
</div>

...

grid-template-col-12每行显示12个相等宽度的单元格

<div class="d-grid grid-template-col-12">
    <div></div>
    <div></div>
</div>

grid-template-col-sm-1在屏幕大于576px的时候每行显示1个相等宽度的单元格

<div class="d-grid grid-template-col-sm-1">
    <div></div>
    <div></div>
</div>

grid-template-col-md-1在屏幕大于768px的时候每行显示1个相等宽度的单元格

<div class="d-grid grid-template-col-md-1">
    <div></div>
    <div></div>
</div>

grid-template-col-lg-1在屏幕大于992px的时候每行显示1个相等宽度的单元格

<div class="d-grid grid-template-col-lg-1">
    <div></div>
    <div></div>
</div>

grid-template-col-xl-1在屏幕大于1200px的时候每行显示1个相等宽度的单元格

<div class="d-grid grid-template-col-xl-1">
    <div></div>
    <div></div>
</div>

列间隔

col-gap-0设置元素列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 col-gap-0">
    <div></div>
    <div></div>
</div>

col-gap-sm-0在屏幕大于576px的时候设置元素列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 col-gap-sm-0">
    <div></div>
    <div></div>
</div>

col-gap-md-0在屏幕大于768px的时候设置元素列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 col-gap-md-0">
    <div></div>
    <div></div>
</div>

col-gap-lg-0在屏幕大于992px的时候设置元素列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 col-gap-lg-0">
    <div></div>
    <div></div>
</div>

col-gap-xl-0在屏幕大于1200px的时候设置元素列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 col-gap-xl-0">
    <div></div>
    <div></div>
</div>

行间隔

row-gap-0设置元素行之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 row-gap-0">
    <div></div>
    <div></div>
</div>

row-gap-sm-0在屏幕大于576px的时候设置元素行之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 row-gap-sm-0">
    <div></div>
    <div></div>
</div>

row-gap-md-0在屏幕大于768px的时候设置元素行之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 row-gap-md-0">
    <div></div>
    <div></div>
</div>

row-gap-lg-0在屏幕大于992px的时候设置元素行之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 row-gap-lg-0">
    <div></div>
    <div></div>
</div>

row-gap-xl-0在屏幕大于1200px的时候设置元素行之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 row-gap-xl-0">
    <div></div>
    <div></div>
</div>

行列间隔

gap-0设置元素行列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 gap-0">
    <div></div>
    <div></div>
</div>

gap-sm-0在屏幕大于576px的时候设置元素行列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 gap-sm-0">
    <div></div>
    <div></div>
</div>

gap-md-0在屏幕大于768px的时候设置元素行列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 gap-md-0">
    <div></div>
    <div></div>
</div>

gap-lg-0在屏幕大于992px的时候设置元素行列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 gap-lg-0">
    <div></div>
    <div></div>
</div>

gap-xl-0在屏幕大于1200px的时候设置元素行列之间的固定间隔为0-5

<div class="d-grid grid-template-col-2 gap-xl-0">
    <div></div>
    <div></div>
</div>

基础样式

col-1设置元素的宽度为12/1

<div class="col-1"></div>

...

col-12设置元素的宽度为12/12

<div class="col-12"></div>

col-sm-1设置元素在屏幕大于576px的时候宽度为12/1

<div class="col-sm-1"></div>

col-md-1设置元素在屏幕大于768px的时候宽度为12/1

<div class="col-md-1"></div>

col-lg-1设置元素在屏幕大于992px的时候宽度为12/1

<div class="col-lg-1"></div>

col-xl-1设置元素在屏幕大于1200px的时候宽度为12/1

<div class="col-xl-1"></div>