顺风 CSS 大纲

简介

顺风 CSS（Breeze CSS）是一种轻量级 CSS 框架，旨在提供一套易于学习和使用的基本样式和布局，以加快前端开发的速度并提高可维护性。

安装

您可以使用 npm 或 CDN 在您的项目中安装顺风 CSS。

使用 npm：

npm install breeze-css

使用 CDN：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/breeze-css/dist/breeze.min.css">

栅格系统

顺风 CSS 包含一个稳定的栅格系统，用于构建响应式布局。 栅格系统基于 12 栅格组成，并且可以自定义栅格数量。

基本用法

• 使用 .container 包裹 .row
• 使用 .col-*-* 定义列宽（* 表示栅格数量）

<div class="container">
  <div class="row">
    <div class="col-sm-4">col-sm-4</div>
    <div class="col-sm-4">col-sm-4</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>

自定义栅格数量

您可以通过为 $grid-columns 指定自定义数量来更改默认的 12 栅格。

$grid-columns: 16;

响应式断点

在响应式布局中，顺风 CSS 使用以下断点类：

• .col-*-*：最小宽度小于 576px 时有效
• .col-sm-*：最小宽度大于等于 576px 时有效
• .col-md-*：最小宽度大于等于 768px 时有效
• .col-lg-*：最小宽度大于等于 992px 时有效
• .col-xl-*：最小宽度大于等于 1200px 时有效

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4">col-12 col-md-6 col-xl-4</div>
    <div class="col-12 col-md-6 col-xl-4">col-12 col-md-6 col-xl-4</div>
    <div class="col-12 col-md-6 col-xl-4">col-12 col-md-6 col-xl-4</div>
  </div>
</div>

常用类

除了栅格系统，顺风 CSS 还包含一些常用的类，方便您在前端开发中使用。

文字

• .text-*：定义文本的样式，* 可选值包括 muted、primary、secondary、success、warning 和 danger。
• .text-left、.text-center、.text-right：定义文本居左、居中或居右。

<h1 class="text-primary text-center">顺风 CSS 大纲</h1>
<p class="text-muted">这是顺风 CSS 的介绍。</p>

按钮

• .btn：定义按钮样式。
• .btn-*：定义按钮的颜色和大小，* 可选值包括 primary、secondary、success、warning、danger、info、light 和 dark。
• .btn-block：使按钮变为块级元素。

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary btn-block">Block Button</button>

表格

• .table：定义表格样式。
• .table-striped 和 .table-bordered：定义带有斑马纹和边框的表格。

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tom</td>
      <td>tom@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jerry</td>
      <td>jerry@example.com</td>
    </tr>
  </tbody>
</table>

结语

顺风 CSS 是一套易于使用的 CSS 框架，提供基本样式和布局来加速前端开发。希望本文能对您有所帮助。