前端开发之响应式布局,响应式 HTML, CSS and JavaScript 框架介绍;

1. Bootstrap5;

2. Foundation5;

首先应该明白什么是响应式布局:简单来说,就是用Bootstrap5和Foundation5代码写出的网页会根据用户屏幕的大小自适应页面元素的大小;而且Bootstrap5和Foundation5里封装了大量的组件和样式方便开发者直接调用,大大提高了开发效率!

学习初步要求:对html css js 有了初步了解,能写出大部分的网页页面;学习响应式 HTML, CSS and JavaScript 框架,之后的开发将会变特别轻松,总之就是一个字“爽”!

1. Bootstrap5;

Bootstrap5官网

 引入Bootstrap5





 

Bootstrap5 Demo:





    Bootstrap5 实例
    
    
    
    
    
    
    




    

我的第一个 Bootstrap 页面

这是一个响应式页面,重置浏览器大小查看效果!

第一列

菜鸟教程

学的不仅是技术,更是梦想!!!

第二列

菜鸟教程

学的不仅是技术,更是梦想!!!

第三列

菜鸟教程

学的不仅是技术,更是梦想!!!

运行效果:

前端开发之响应式布局,响应式 HTML, CSS and JavaScript 框架介绍;_第1张图片

2. Foundation5;

Foundation5官网 

 引入Foundation5













 Foundation5 Demo:





    Foundation 实例
    
    
    
    
    
    
    
    
    
    




    

Foundation 页面

重置窗口大小,查看效果!

菜鸟教程

学的不仅是技术,更是梦想!!!

菜鸟教程

学的不仅是技术,更是梦想!!!

菜鸟教程

学的不仅是技术,更是梦想!!!

运行效果:

前端开发之响应式布局,响应式 HTML, CSS and JavaScript 框架介绍;_第2张图片

 还将持续更新!

你可能感兴趣的:(javascript,html,css,前端,bootstrap)