前端:使用BootStrap搭建一个简单的网页

sinye56 2024-10-25 16:27 5 浏览 0 评论

之前有想法学习一下前端框架的，后来没有坚持下来。连最基础的栅格系统都忘记了。于是，花了一点时间，重新温习了一下。写了一个简单的网页。页面大致是下面这张图。做得比较一般，不过能够自适应各种设备大小了。

说下制作过程吧，首先下载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框架。很快就可以写出一个漂亮的网页，当然，要熟悉掌握各个类的使用，还是需要花费一些时间。

相关推荐