JavaScript: using the bootstrap framework for the first time

JavaScript: using the bootstrap framework for the first time

bootstrap official website: https://v3.bootcss.com/

jQuery official website: https://jquery.com/

Use process:

1. Open the address in the browser and click download Bootstrap

2. Enter the download interface and click download Bootstrap

3. After downloading, you will get a bootstrap-3.4.1-dist.zip compressed file, unzip it, and put the unzipped file in the specified folder (it is convenient to reference through the relative path later).

4. Because the js file of bootstrap depends on jQuery (that is, the js code of bootstrap is written in the jQuery environment. What you don't understand can be understood as that jQuery encapsulates many methods, and bootstrap uses these methods), so we need to download jQuery and go to

jQuery official website: https://jquery.com/ , click download

5. Download jQuery file

Download the compressed, production jQuery 3.6.0 and Download the uncompressed, development jQuery 3.6.0 It's the same, but one is compressed and the other is not compressed (compression here refers to the deletion of spaces and line breaks between codes)

6. Save the clicked file with the shortcut key ctrl + s, and then put it together with the bootstrap-3.4.1-dist folder downloaded above

7. Final file structure:

I downloaded both jQuery files, and then created a new jQuery file to save

8. Now we can create a new html file to use them. Just import one of the. JS and. min.js files

The first step is to introduce bootstrap.css or bootstrap.min.css in the CSS folder in the bootstrap-3.4.1-dist folder (as mentioned above, only one is compressed and the other is not compressed)

Step 2: introduce the jquery-3.6.0.min.js file or jquery-3.6.0.js file in the jQuery folder

Step 3: introduce bootstrap.js or bootstrap.min.js in the JS folder in the bootstrap-3.4.1-dist folder

Step 4. Next, we can write an html code based on the bootstrap framework

‚Äč

Just copy and paste the code directly on the official website. There are all kinds of easy-to-use components and plug-ins

For example:

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>introduce bootstrap frame</title>
    
    <!-- Import here bootstrap of css file-->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    
    
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"> Home Page</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li><a href="#"> login</a></li>
          <li><a href="#"> registration</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">account number</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Please enter the account name">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Please input a password">
    </div>
    <div class="checkbox ">
      <label>
        <input type="checkbox"> Remember password
      </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
    <button type="submit" class="btn btn-default">register</button>
  </form>
</body>
</html>


<!-- Import here jqeury of js Documents and  bootstrap of js file-->
<script src="./jQuery/jquery-3.6.0.min.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

Operation results:

PC end:

Mobile terminal:

="./bootstrap-3.4.1-dist/js/bootstrap.min.js">

Operation results:

PC End:

[External chain picture transfer...(img-1APcbDEn-1632909576694)]

Mobile terminal:

![Insert picture description here](https://img-blog.csdnimg.cn/6aacdcd8b4b74d1194b99767f6fd6d2a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAeGlhb0hfaW5n,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

Tags: Javascript bootstrap

Posted on Wed, 29 Sep 2021 17:14:22 -0400 by m2babaey