Bootstrap4对网页构建的帮助

           Bootstrap4对网页构建的帮助

开发工具与关键技术：Adobe Dreamweaver CC 2017  前端

作者：刘剑鸿



撰写时间：2019年2月18日星期一 

 

在接受前端的知识，认识了一个我个人觉得Bootstrap4对网页构建非常重要的组件库。

Bootstrap 是非常受欢迎的前端组件库，用于开发响应式布局等。它是一套用于HTML，CSS和JS开发的开源工具集。对网页构建的帮助非常大，不仅方便我们对网页的，更节省时间提高工作效率。

至于如可运用Bootstrap4？

主要有两个步骤1获取到Bootstrap4的安装包，将其引入。类似引入CSS样式。2选择所需要的代码片段将其复制，在粘贴到编辑代码工具上去。

运用Bootstrap4虽然很容易就完成该代码的功能，但也要有一定的基础。否则出错了都不知道从哪里找。

Bootstrap对组件的构建都是很简单，我们只需要选择所需要的代码然后复制到编辑器上。例如form表单的制作；
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190219195325718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUzODQ2OQ==,size_16,color_FFFFFF,t_70)
我们只需把上图代码段复制到编辑器上，就能轻易得到下图的form表单。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190219195354343.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUzODQ2OQ==,size_16,color_FFFFFF,t_70)

 


能方便到的不止这个，例如我们要制作轮播效果；
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019021919543720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUzODQ2OQ==,size_16,color_FFFFFF,t_70)

 


只须将Bootstrap中的代码片段复制到编辑器上，再加以修改所需要的效果即可。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190219195450258.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDUzODQ2OQ==,size_16,color_FFFFFF,t_70)

 


上图是一个包含姿态指示器和控制器的轮播效果代码。运用Bootstrap不需要再对JS 的输写。能更有效的提高效率。