bootstrap前端框架模板(Bootstrap 的使用)

bootstrap前端框架模板(Bootstrap 的使用)
Bootstrap 的使用

1、创建文件夹结构

我们需要单独创建一个bootstrap文件夹来存放bootstrap这个框架的样式。打开官方网站https://v4.bootcss.com/,这里我下载的是4.6版本。

2、解压缩文件之后,我们把css文件复制到我们本地,js先暂时不用。

3、创建html的骨架结构,我们可以复制官网上的入门模版,这里我采用的是用自己的模版,然后把没有的内容加到本地,因为目前不考虑js,所以只需要引入css文件即可。

4、引入相关样式文件,这里引入可bootstrap的核心样式文件。

5、书写内容,我们可以直接使用bootstrap预定义好的样式,也可以直接修改它原来的样式,注意权重问题,我这里复制了两个按钮。

6、这里我们可以单独给第一个成功按钮加上额外的样式,使它的高度变成60px,代码及页面效果如下图所示:

bootstrap前端框架模板(Bootstrap 的使用)

7、学习Bootstrap 的关键在于知道它定义了哪些样式,以及这些样式能实现什么样的效果。

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有

最新文章

热门文章

本栏目文章