什么是 whitecss
whitecss 是一款基于 CSS 的开源框架,它旨在帮助前端开发者快速构建简单美观的界面,并提供了灵活的定制能力。whitecss 以“简单、易用、高效”为宗旨,大大减少了开发者的开发时间及成本。
安装 whitecss
使用 npm 安装 whitecss 只需要简单的一条指令:
--- ------- --------
使用 whitecss
使用 whitecss 可以通过下面的几种方式:
- 将 whitecss 直接导入到你的 html 中
------ ------ ----- ---------------- ---------------------------- ------- ------ -------- ------------ ------- -------
- 作为 npm 包引入
------ -----------
whitecss 的常见用法
栅格化
whitecss 采用栅格化来实现布局,通过容器 container 和 row 以及里面的 col,可以非常容易地实现实现响应式布局。以下是一个简单的布局示例:
---- ------------------ ---- ------------ ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ------ ------
这表示一个 container 容器下有一行 row,里面有四个 col。这样可以让四个 col 均匀占据整个 row 的宽度。
表单
whitecss 提供了丰富的表单组件,包括输入框、单选框、复选框、下拉菜单等。
输入框
---- -------------------- ------ ----------- -------------------- ------------------- -------- ---- --------------------------- ------- ---------- -------------- -------------------------- ------ ------
单选框
------ ---- ------------------- ------ ------------------------ ------------ -------------------- ------------------- --------------- -------- ------ ------------------------ --------------------- ------- ----- -------- ------ ---- ------------------- ------ ------------------------ ------------ -------------------- ------------------- ---------------- ------ ------------------------ --------------------- ------ ------- ----- -------- ------ -------
按钮
whitecss 提供了多种样式的按钮,你可以根据不同的场景选择不同的样式。
------- ------------- ---------- ----------------------------- ------- ------------- ---------- --------------------------------- ------- ------------- ---------- ----------------------------- ------- ------------- ---------- --------------------------- ------- ------------- ---------- ----------------------------- ------- ------------- ---------- ----------------------- ------- ------------- ---------- ------------------------- ------- ------------- ---------- -----------------------
定制 whitecss
whitecss 同样也提供了很多的自定义能力,你可以通过更改 whitecss 的变量来进行个性化定制化。
例如,你可以通过更改以下变量来修改按钮的样式:
------------------- ----- ---------------------- -------- -------------------------- -------- ------------------------ -------- ---------------------------- --------
结论
whitecss 提供了丰富的组件和布局方案,适用于各种项目的快速开发。白果店对于不熟悉 CSS 语言的前端开发人员,使用 whitecss 可以大大加快前端项目的开发速度。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600671088dd3466f61ffdf0a