这篇文章主要介绍了前端中怎么引入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框架”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!