当前位置: 开发笔记 > 前端 > 正文

Bootstrap前端开发案例一

作者：mobiledu2502916573 | 来源：互联网 | 2022-02-26 20:16

Bootstrap前端开发案例一，这篇文章能够帮助大家更还好的进行前端开发Bootstrap，相信大家会爱上Bootstrap

现在很多公司开发中都在使用bootstrap这个框架，bootstrap是Twitter公司的一个团队的作品，大大简化了我们的前端的开发。（后面会总结一些less的使用）
学习使用API我建议直接查看官网的API，地址：http://www.bootcss.com/
下面是部分目标效果图：

下面我就总结一个小Demo中的技巧和原理：
第一步、http://www.bootcss.com/下载bootstrap的压缩包，新建index.html,使用sublime或其它编辑器打开index页面，解压后目录是

第二步、拷贝官网http://v3.bootcss.com/getting-started/的一个基本模板，方便后续的开发，

1）为了轮转图片的时候没有留白或间隙，增加样式

 .carousel{
 height: 500px;
 background-color: #000;
 }

 .carousel .item{
 height: 500px;
 background-color: #000;
 } .carousel img{ width: 100%; }

2）为了文字设置样式，更加美观

 .casousel-caption p{
 margin-bottom: 20px;
 font-size: 20px;
 line-height: 1.8;
 }

目前的效果如下

咱们继续：（打码更新中。。。）
第二部分更新了，在基于bootstrap的前端开发案例Demo（二）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

探索Bootstrap 5中的五种表单样式