简介
simple-container 是一个轻量级的前端组件库，提供了常用的布局、样式等组件，可以帮助前端开发人员更快地开发应用程序。
simple-container 使用简单，只需在项目中安装 npm 包并引入相应组件即可。
安装
在项目中使用 npm 安装 simple-container：
npm install simple-container --save
使用
在项目中引入需要的组件：
import { Container, Row, Col } from 'simple-container';Container
Container 是 simple-container 提供的根容器组件，一般用于整个页面的布局。
使用方法：
<Container> // 子元素 </Container>
Props
- fluid：是否让容器撑满整个屏幕，默认为 false
Row
Row 是 simple-container 提供的行容器组件，一般用于页面中的行布局。
使用方法：
<Row> // 子元素 </Row>
Props
- noGutters：是否去除子元素之间的间距，默认为 false
Col
Col 是 simple-container 提供的列容器组件，一般用于页面中的列布局。
使用方法：
<Col> // 子元素 </Col>
Props
- sm：在小屏幕设备（<576px）中显示列的宽度（12列之一）
- md：在中屏幕设备（≥576px）中显示列的宽度（12列之一）
- lg：在大屏幕设备（≥992px）中显示列的宽度（12列之一）
- xl：在特大屏幕设备（≥1200px）中显示列的宽度（12列之一）
- offsetSm：在小屏幕设备（<576px）中设置左侧的偏移量（12列之一）
- offsetMd：在中屏幕设备（≥576px）中设置左侧的偏移量（12列之一）
- offsetLg：在大屏幕设备（≥992px）中设置左侧的偏移量（12列之一）
- offsetXl：在特大屏幕设备（≥1200px）中设置左侧的偏移量（12列之一）
示例代码
-- -------------------- ---- -------
------ - ---------- ---- --- - ---- -------------------
-------- ----- -
------ -
---------- ------
-----
---- ------- ------ -------
---- ------------------------------------- ----------------- --
------
---- ------- ------ -------
-------------------------
---- ----------- --------- ------- --- --------- ----------------
------
------
------------
--
-上述代码会生成如下的布局：
-- -------------------- ---- ------- ------------------ - ------- - - - --- - - - ------- - - ------------ - - - -- - - - - - - - - ------------ - ------------------
总结
simple-container 是一个轻量、易用的前端组件库，提供了常用的布局、样式等组件，可以帮助前端开发人员更快地开发应用程序。
在使用 simple-container 时，我们可以根据实际需求选择相应的组件，并根据组件的属性进行设置，以快速创建出所需的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662a81e8991b448e2037