介绍
pluto-css是一个快速轻松制作后台管理系统的CSS样式库，它可以使你的后台管理系统看起来更加简洁大方。它使用Flexbox和CSS Grid创建布局，这使得创建响应式布局非常容易。pluto-css提供了许多UI组件，例如按钮，表格，表单等等，可以极大地加快前端开发速度。
安装方法
你可以通过npm安装pluto-css，使用以下命令：
npm install pluto-css --save-dev
基本用法
你可以将pluto-css的CSS文件作为<link />标签导入HTML文件中，如下所示：
<!-- load pluto-css stylesheet --> <link rel="stylesheet" href="node_modules/pluto-css/dist/css/pluto.min.css">
现在，你已经引入了pluto-css。现在，你可以开始使用它提供的样式和组件了。
布局
pluto-css可以帮助你快速创建响应式布局。以下是一个使用CSS Grid创建响应式布局的示例：
<div class="grid"> <div class="column sm-12 md-6 lg-3">1</div> <div class="column sm-12 md-6 lg-3">2</div> <div class="column sm-12 md-6 lg-3">3</div> <div class="column sm-12 md-6 lg-3">4</div> </div>
如上所示，.grid表示使用网格布局。.column用于指定每个单元格的大小。sm-12,md-6和lg-3表示在小型，中等和大型屏幕上，每个单元格的宽度分别为12/12，6/12和3/12。
组件
pluto-css提供了许多UI组件，可以加快前端开发速度。以下是一些常见的组件及其使用示例：
按钮
<button class="button">默认按钮</button> <button class="button primary">主要按钮</button> <button class="button secondary">次要按钮</button>
表单
-- -------------------- ---- -------
------
---- -------------------
------ -----------------------
------ ------------ ---------- ------------ ---------
------
---- -------------------
------ --------------------------
------ --------------- ------------- --------------- ---------
------
---- -------------------
------ ------------- -----------
------
-------表格
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
----
-----------
-----------
----------
-----
--------
--------结论
pluto-css是一个非常好的CSS样式库，它可以大大提高开发速度并使网站看起来更加简洁大方。现在，你已经学习了基本的用法和一些常见的组件示例。你可以在你的项目中轻松使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f0d81e8991b448dca42