bootstrap创建响应式网站

一,导航栏

在这里插入图片描述
修改样式之后得到效果:
在这里插入图片描述

二,home区域布局

在这里插入图片描述
在这里插入图片描述
最主要的知识点就是为了让内容居中,采用bootstrap栅格系统,并且为了让图片自适应,添加了img-responsive类名。

三,bbs论坛区域

在这里插入图片描述
在这里插入图片描述

四,html5前端的区域

在这里插入图片描述
在这里插入图片描述

五,课程列表区域

在这里插入图片描述
在这里插入图片描述

六,app下载区域

在这里插入图片描述
在这里插入图片描述

七,联系方式区域

在这里插入图片描述
在这里插入图片描述

八,Bootstrap创建响应式网站的总结

实际上,只是利用了bootstrap的栅格系统,简化了一些布局的操作,其他的内容还是和正常原生的html,css布局一样的,也是将网页划分为一个一个区域,然后采用一个一个盒子来完成布局。
当然啦,bootstrap作为一个css框架,还是提供不少已经配置好的组件,可以直接使用,在这个方面同样提高了不少工作效率。

猜你喜欢

转载自blog.csdn.net/weixin_42349568/article/details/108904016