How to introduce the Bootstrap framework in the front end
May 29, 2021 Article blog
The Bootstrap framework is the most popular HTML, CSS, and JS framework for developing responsive layouts, mobile device-first WEB projects. B ecause of its ease of use and free open source, it is popular with front-end developers. In this article, we show you how to introduce the Bootstrap framework in front-end development.
First step:
We need to go to Bootstrap's website to download the Bootstrap package. I f you need to use the relevant JS, you also need to bring in the jQuery package. T he jQuery package needs to be downloaded on the jQuery website. The jQuery package introduction method is not detailed here, please refer to previous articles to start using jQuery.
Step 2:
Create an HTML file and introduce the Bootstrap framework.
<head>
<title>编程狮(w3cschool.cn)</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>Step 3:
Test whether the introduction was successful. Here's an example of writing some form code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>编程狮(w3cschool.cn)</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>
After running, the form contents are displayed successfully. The introduction was successful.
The Bootstrap framework is new to novices and can quickly get started to develop a website. B ut it also has shortcomings, such as poor compatibility. Overall, the Bootstrap framework is worth learning.
Here's how to introduce the basics of the Bootstrap framework. For more use of the Bootstrap framework, follow the W3Cschool website.
Recommended courses: Bootstrap tutorial, Bootstrap3