顺风 CSS 宽度介绍

顺风 CSS 宽度是一个 CSS 库，用于快速实现响应式布局。它基于弹性盒子布局（flexbox），能够轻松适应各种屏幕尺寸。

特性

• 简单的响应式网格系统，分为 12 等分
• 预定义的 CSS 类，可快速实现常见的布局需求
• 易于扩展，支持自定义 CSS 类
• 可在 CSS 中引用，也可作为独立的 CSS 文件使用
• 使用模块化的 BEM 命名规范

安装

你可以使用 npm 进行安装：

npm install shunfeng-css-grid --save

或者将以下链接添加到你的 HTML 页面头部：

<link
  rel="stylesheet"
  href="https://unpkg.com/shunfeng-css-grid@1.0.0/dist/shunfeng-css-grid.min.css"
/>

快速入门

网格系统

Shunfeng CSS 宽度的网格系统将页面分为 12 等分。你可以使用以下 CSS 类来创建网格布局：

• .row：创建一个新的行
• .col-1 到 .col-12：定义列宽度

例如，以下代码将创建一个包含两个等宽列的行：

<div class="row">
  <div class="col-6">列 1</div>
  <div class="col-6">列 2</div>
</div>

响应式设计

Shunfeng CSS 宽度支持响应式设计，你可以使用以下 CSS 类来根据不同的屏幕尺寸设置元素样式。

• .sm：小屏幕，最大宽度为 576px
• .md：中等屏幕，最大宽度为 768px
• .lg：大屏幕，最大宽度为 992px
• .xl：超大屏幕，最大宽度为 1200px
• .xxl：超大屏幕，最大宽度为 1400px

例如，以下代码将在中等屏幕上将标题字号设置为 2 倍：

<h1 class="md" style="font-size: 2em;">Hello, World!</h1>

预定义的 CSS 类

Shunfeng CSS 宽度预定义了多个常用的 CSS 类，可用于快速实现布局需求。以下是一些常用的 CSS 类：

• .text-center：文字居中对齐
• .text-left：文字左对齐
• .text-right：文字右对齐
• .text-justify：文字两端对齐
• .text-muted：淡化文字颜色
• .text-uppercase：转换为大写字母
• .text-lowercase：转换为小写字母
• .text-capitalize：每个单词的首字母大写
• .font-weight-bold：粗体字体
• .font-weight-normal：普通字体
• .bg-primary：背景颜色为主色调
• .bg-secondary：背景颜色为次要色调
• .bg-light：浅色背景
• .bg-dark：深色背景

扩展

Shunfeng CSS 宽度支持自定义 CSS 类，你可以在自己的 CSS 文件中扩展，并使用以下规则：

• 所有类名以 sf- 开头，例如 sf-my-custom-class
• BEM 命名规范，例如 sf-my-custom-block__element--modifier

例如，以下代码将创建一个自定义的网格系统，并用于 .row-custom：

/* 自定义网格系统 */
.row-custom {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.row-custom > * {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.col-custom-1 {
  flex: 0 0 8.333333333333334%;
  max-width: 8.333333333333334%;
}

.col-custom-2 {
  flex: 0 0 16.666666666666668%;
  max-width: 16.666666666666668%;
}

/* 自定义类 */
.sf-my-custom-block {
  /* ... */
}

.sf-my-custom-block__element {
  /* ... */
}

.sf-my-custom-block__element--modifier {
  /* ... */
}