【Bootstrap导入模板完成实例-与模板完美契合】

许多小伙伴私信我,为什么导入的bootstrap在自己的页面,和模板的不一样!在这里为大家演示一下,仔细看5分钟内搞定!

首先找到bootstrap中文网站https://v3.bootcss.com/css/

这里演示全局CSS样式,组件...都是可以用的。

我在这里随便挑一个来演示,可以看到旁边有许多的种类。

如果直接复制到自己的html或者jsp页面里面的效果是这样的:

是不是巨丑无比啊!!!当然出现这样的问题就是没有导入bootstrp相关的文件。

重点!!!重点!!!重点!!!

第1步

回到主页,点击起步

第2步

往下翻,找到基本模板

第3步

在自己的IED里创建一个HTML,然后删除里面的所有东西,再复制这里的代码进去。          

仔细看看代码就知道里面需要三块组件

那么接下来就下载对应的组件。

第4步

普通玩家下载第一个就ok了

        

         

当你下载完所有的组件是这样的。

第5步

在你的项目里面创建相应的文件夹来存放刚才下载的那些文件。

第6步:

修改src路径,就是你自己存放的位置(我这里已经修改好了)

第7步

在你的刚才复制的基本模板里面的<body>标签里复制你想要的模板代码。

假如需要的是这个样式。

把代码复制到基本模板的<body>标签里面。(红框框里就是上面的样式的代码了)

第8步

接下来就是启动程序打开浏览器效果如下:

是不是很酷!!!是不是很酷!!!是不是很酷!!!

要是觉得对你有帮助,不妨帮我转发转发或者发给身边的小伙伴。

 

最后

要是有哪位小伙伴不会可以直接私我,博主愿意帮助每一位。

 

 

 

 

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值