ppwjs之bootstrap网格系统：屏幕宽度响应式设置_bootstrap4 网格系统是根据屏幕宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/iouioupp/article/details/82721644

本文通过实例演示了如何使用Bootstrap4框架创建一个2行3列的网格布局，并详细介绍了如何设置单元格的数据、样式以及响应式列宽配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//程序开始
引入(_sys_bootstrap4_addr + ".js",$真);
引入(_sys_bootstrap4_grid_addr + ".js",$真);

var 测试网格=bootstrap4.网格类.创建(2,3);
测试网格.置单元格数据(0,0,"单元格：第1行，第1列");
测试网格.置单元格样式(0,0,"background-color:red;");
测试网格.置单元格列宽配置(0,0,$bootstrap.列_移动_3,$bootstrap.列_平板_2,$bootstrap.列_桌面_3,$bootstrap.列_大桌面_4);
测试网格.置单元格数据(0,1,"单元格：第1行，第2列");
测试网格.置单元格样式(0,1,"background-color:yellow;");
测试网格.置单元格列宽配置(0,1,$bootstrap.列_移动_5,$bootstrap.列_平板_2,$bootstrap.列_桌面_3,$bootstrap.列_大桌面_4);
测试网格.置单元格数据(0,2,"单元格：第1行，第3列");
测试网格.置单元格样式(0,2,"background-color:lavender;");
测试网格.置单元格列宽配置(0,2,$bootstrap.列_移动_4,$bootstrap.列_平板_8,$bootstrap.列_桌面_6,$bootstrap.列_大桌面_4);
测试网格.置单元格数据(1,0,"单元格：第2行，第1列");
测试网格.置单元格样式(1,0,"background-color:green;");
测试网格.置单元格列宽配置(1,0,$bootstrap.列_移动_3,$bootstrap.列_平板_2,$bootstrap.列_桌面_3,$bootstrap.列_大桌面_4);
测试网格.置单元格数据(1,1,"单元格：第2行，第2列");
测试网格.置单元格样式(1,1,"background-color:white;");
测试网格.置单元格列宽配置(1,1,$bootstrap.列_移动_5,$bootstrap.列_平板_2,$bootstrap.列_桌面_3,$bootstrap.列_大桌面_4);
测试网格.置单元格数据(1,2,"单元格：第2行，第3列");
测试网格.置单元格样式(1,2,"background-color:blue;");
测试网格.置单元格列宽配置(1,2,$bootstrap.列_移动_4,$bootstrap.列_平板_8,$bootstrap.列_桌面_6,$bootstrap.列_大桌面_4);
加到主体(测试网格);