前端中怎么引入Bootstrap框架
这篇文章主要介绍了前端中怎么引入Bootstrap框架,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
第一步:我们需要前往 Bootstrap 官网下载 Bootstrap 文件包。如果需要使用相关 JS,还需要引 入jQuery 文件包。jQuery 文件包需要前往 jQuery 官网下载。jQuery 文件包引入方法就不在此详述。
第二步:创建一个 HTML 文件并引入 Bootstrap 框架。
<head><title>亿速云(yisu.com)</title><linkrel="stylesheet"href="bootstrap/css/bootstrap.min.css"/><scripttype="text/javascript"src="http://code.jquery.com/jquery-2.1.4.min.js"></script><scripttype="text/javascript"src="bootstrap/js/bootstrap.min.js"></script></head>第三步:
测试是否引入成功。此处以编写部分表单代码为例。
<!DOCTYPEhtml><htmllang="en"><head><title>亿速云(yisu.com)</title><linkrel="stylesheet"href="bootstrap/css/bootstrap.min.css"/><scripttype="text/javascript"src="http://code.jquery.com/jquery-2.1.4.min.js"></script><scripttype="text/javascript"src="bootstrap/js/bootstrap.min.js"></script></head><body><!--表单--><formclass="form-horizontal"><divclass="form-group"><labelfor="inputEmail3"class="col-sm-2control-label">邮箱</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"placeholder="请输入邮箱"></div></div><divclass="form-group"><labelfor="inputPassword3"class="col-sm-2control-label">密码</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"placeholder="请输入密码"></div></div><divclass="form-group"><divclass="col-sm-offset-2col-sm-10"><divclass="checkbox"><label><inputtype="checkbox">记住我</label></div></div></div><divclass="form-group"><divclass="col-sm-offset-2col-sm-10"><buttontype="submit"class="btnbtn-default">登录</button></div></div></form></body></html>
运行后,成功显示表单内容。引入成功。
感谢你能够认真阅读完这篇文章,希望小编分享的“前端中怎么引入Bootstrap框架”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。