前端开发框架之BootStrap入门学习

Bootstrap是一组用于网站和网络应用程序开发的开源前端(所谓“前端”,指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码)框架,包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。(摘自维基百科)
BootStrap提供了各种前端样式,基本能满足最基本的前端开发,其主要面向mobile web,即官方介绍的mobile-first projects,其安装也非常简单,只需在你的网页标签前添加三行代码(提供cdn加速):
前端开发框架之BootStrap入门学习_第1张图片
可以看到bootstrap需要依赖另外两个框架,分别是jQuery.slim.js(jQuery.js的轻量版)、Popper.js,这应该算是在前两个框架的基础上再次开发吧,前两个框架需要扎实的js基础,而bootstrap只需要照着效果贴代码前端培训就行了,当然,其也提供了修改源代码的方式,这在他每个component后面都会有介绍。
Bootstrap同时提供cdn加速的链接:
前端开发框架之BootStrap入门学习_第2张图片
我们也可以直接点击Download下载完整的js,css代码:
前端开发框架之BootStrap入门学习_第3张图片
简单介绍一下Bootstrap提供的布局:格子系统
前端开发框架之BootStrap入门学习_第4张图片
你可以使用该系统排布任何形状和大小的组件,以下是Bootstrap提供的示例:
前端开发框架之BootStrap入门学习_第5张图片
Bootstrap用代码展示了排布以后的效果,当你把Bootstrap安装以后,直接使用类为‘container’的div作为父标签,再使用类为‘row’的标签指定其排布,接着在其二级标签中添加类为‘col-sm’的div即可实现这种排布方式,并不会限制数量。
Bootstrap提供了非常简单的使用方式,并且文档对每一个效果都进行了详细的解释和拓展。

你可能感兴趣的:(前端bootstrap)