前端中怎么引入Bootstrap框架

发布时间:2022-02-23 14:25:53 作者:小新
来源:亿速云 阅读:260

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

推荐阅读:
  1. Python 前端框架【Bootstrap】
  2. 前端基础06 Bootstrap框架

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

bootstrap

上一篇:web前端为什么用使用缓存

下一篇:怎么使用bootstrap图标

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》