为了账号安全,请及时绑定邮箱和手机立即绑定

Web前端开发之BootStrap学习一

一、什么是BootStrap?

BootStrap是基于html、css、js的前端框架,便于web开发人员快速开发系统页面。

二、BootStrap环境如何搭建?

1、下载JetBrains WebStorm开发工具(基于BootStrap)

2、创建基于Bootstrap框架的项目。

https://img1.sycdn.imooc.com//5cc0614d0001a6df15440962.jpg

https://img1.sycdn.imooc.com//5cc06192000134a506800800.jpg

3、由于Bootstrap中js文件的执行需要使用jquery文件,所以需要下载jquery文件置于Bootstrap的js文件夹中。

https://img1.sycdn.imooc.com//5cc0620c000105b406720944.jpg

至此Bootstrap开发环境搭建完毕!

三、Bootstrap第一个入门demo

1、新建html页面

2、页面中引入css文件夹中的bootstrap.css文件

3、页面中引入js文件夹中的jquery-3.1.1.min.js、bootstrap.js文件

https://img1.sycdn.imooc.com//5cc068fb00016eab05260728.jpg

页面中加入以下内容:

<link rel="stylesheet" href="../css/bootstrap.css">
<script type="text/javascript" href="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" href="../js/bootstrap.js"></script>
<button class="btn btn-info">Hello World</button>

浏览器中的效果:

https://img1.sycdn.imooc.com//5cc069b80001fd5028780874.jpg

欢迎交流!


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消