之前有想法学习一下前端框架的，后来没有坚持下来。连最基础的栅格系统都忘记了。于是，花了一点时间，重新温习了一下。写了一个简单的网页。页面大致是下面这张图。做得比较一般，不过能够自适应各种设备大小了。
说下制作过程吧，首先下载bootstrap提供的css,js文件，（之前看文档的时候，直接引用了cdn，不知道什么原因，用了没效果。），在html代码里引用这些文件。
接下来，就是制作网页的过程。要实现自适应网页，首先要加入这段代码
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 然后，要明白栅格系统的使用。
网页是分成12份的，对应不同的屏幕，使用不同的栅格系统类前缀。比如在<768px的时候，使用.col-xs-，根据你需要在哪些屏幕中显示，使用不同的类前缀。<class = “col-xs-3”>,<class = “col-xs-9”>这样就表示一行分成了3份和9份。
注意的是，栅格系统要在container和row类中使用，具体使用可以参考官网的技术文档来写。bootstrap3和bootstrap4有些不同，一定要注意了，比如响应式图片，一个是用.img-responsive，一个是用.img-fluid的。
总结一下，使用bootstrap来写网页的话，调用已经写好的css,js框架。很快就可以写出一个漂亮的网页，当然，要熟悉掌握各个类的使用，还是需要花费一些时间。
原文链接：https://blog.csdn.net/qq_44845785/article/details/123171477?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816781683952940%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816781683952940&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-3-123171477-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/5722
