这篇文章主要介绍了前端中怎么引入Bootstrap框架，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。第一步：我们需要前往 Bootstrap 官网下载 Bootstrap 文
这篇文章主要介绍了前端中怎么引入Bootstrap框架，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
我们需要前往 Bootstrap 官网下载 Bootstrap 文件包。如果需要使用相关 js，还需要引 入Jquery 文件包。jQuery 文件包需要前往 jQuery 官网下载。jQuery 文件包引入方法就不在此详述。
创建一个 html 文件并引入 Bootstrap 框架。
<head><title>编程网(yisu.com)</title><link rel="stylesheet" href="bootstrap/CSS/bootstrap.min.css"/><script type="text/javascript" src="Http://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script></head>测试是否引入成功。此处以编写部分表单代码为例。
<!DOCTYPE html><html lang="en"><head><title>编程网(yisu.com)</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script></head><body><!-- 表单 --><fORM class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱"> </div> </div> <div class="form-group"> <label for="inputPassWord3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登录</button> </div> </div></form></body></html>运行后，成功显示表单内容。引入成功。
感谢你能够认真阅读完这篇文章，希望小编分享的“前端中怎么引入Bootstrap框架”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!
--结束END--
本文标题: 前端中怎么引入Bootstrap框架
本文链接: https://www.lsjlt.com/news/309306.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0