简介
wysiwyg.css 是一个基于分类的 CSS 实用程序集合，旨在为开发人员提供可立即使用的样式和组件，以快速构建和美化 Web 应用程序。该工具由 Thomas Park 创作，目前已经被成千上万的 Web 开发人员采用。
安装
使用 npm 安装 wysiwyg.css：
npm install wysiwyg.css --save
使用
- 引入 CSS 文件
<link rel="stylesheet" href="node_modules/wysiwyg.css/css/wysiwyg.css">
- 在 HTML 中使用 wysiwyg.css 的类
示例代码：
-- -------------------- ---- -------
---- ------------
---- -----------------
---- -------------
---- -------------------- --------- --------- ----- -----
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
---- --------------------
------ ----------------------- ------- - ---- -----------
------
------
------
------- 定制主题
wysiwyg.css 还提供了多种颜色方案，可以根据项目需要进行定制。在 HTML 文件中引入相应的颜色方案 CSS 文件即可。
示例代码：
<!-- 引入红色主题 --> <link rel="stylesheet" href="node_modules/wysiwyg.css/css/wysiwyg-red.css">
组件
栅格系统
wysiwyg.css 提供了灵活的栅格系统，可以轻松搭建响应式布局。
.row: 整行组件，容纳多个.col-*组件。.col-*: 列组件，用于展示页面中的内容。.col-*-offset-*: 列偏移组件，用于拉开列组件之间的间距。.visible-*-only,.hidden-*-only: 响应式显示和隐藏组件，根据屏幕大小自动展示或隐藏列组件。.push-*-*,.pull-*-*: 列推动和拉取组件，用于调整列组件的位置。
示例代码：
<div class="row">
<div class="col-sm-4">
左侧内容
</div>
<div class="col-sm-4 col-sm-offset-4">
右侧内容
</div>
</div>卡片
卡片是页面中经常使用的组件，wysiwyg.css 提供了多种样式的卡片组件。
.card: 基础卡片组件。.card-title: 卡片标题组件。.card-text: 卡片内容组件。.card-img-top: 卡片顶部图片组件。.card-footer: 卡片底部组件。.card-header: 卡片头部组件。
示例代码：
-- -------------------- ---- -------
---- -------------
---- -------------------- --------- --------- ----- -----
---- ------------------
--- ----------------------- ----------
-- ---------------------- ----- ------- ---- -- ----- -- --- ---- ----- --- ---- -- --- ---- -- --- ------ ------------
------
---- --------------------
------ ----------------------- ------- - ---- -----------
------
------表格
使用 wysiwyg.css，可以更加方便地创建表格。以下为表格组件相关的类：
.table: 基础表格组件。.table-striped: 斑马线表格组件。.table-bordered: 边框表格组件。.table-hover: 鼠标悬停时高亮表格行组件。.table-condensed: 紧凑型表格组件。
示例代码：
-- -------------------- ---- -------
------ ------------ ---------------
-------
----
-------------
-------------
-------------
-----
--------
-------
----
-----------
-----------
-----------
-----
----
-----------
-----------
-----------
-----
----
-----------
-----------
-----------
-----
--------
--------按钮
wysiwyg.css 还提供了多种样式的按钮组件，可以通过不同的类来调用：
.btn: 基础按钮组件。.btn-default: 默认按钮组件。.btn-primary: 主要按钮组件。.btn-success: 成功按钮组件。.btn-info: 信息按钮组件。.btn-warning: 警告按钮组件。.btn-danger: 危险按钮组件。.btn-link: 链接按钮组件。
示例代码：
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>
表单
wysiwyg.css 为表单组件提供了多种默认样式。
.form-group: 表单组组件。.form-control: 表单控件组件。.form-control-file: 文件上传表单控件组件。.form-control-range: 范围选择表单控件组件。.form-check: 多选框和单选框控件组件。.form-check-label: 多选框和单选框标签组件。.form-check-input: 多选框和单选框输入框组件。.form-check-inline: 内联多选框和单选框控件组件。
示例代码：
-- -------------------- ---- -------
------
---- -------------------
------ ----------------------------------
------ ----------- -------------------- ---------------------- --------------------
------
---- -------------------
------ -------------------------------------
------ ------------ -------------------- ----------------------- --------------------
------
------- ------------- ---------- ------------------------
-------总结
wysiwyg.css 提供了丰富的组件，为 Web 开发提供了便利。通过本教程的学习，你已经了解了如何安装和使用 wysiwyg.css，以及如何根据项目需求修改主题。希望你在将来的工作中能够灵活运用 wysiwyg.css，并且能够将其组合起来创建出更加美观和实用的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671198dd3466f61ffe799