使用Bootstrap框架制作简易登录界面

最新推荐文章于 2025-02-20 08:53:25 发布

馨宝Alice

最新推荐文章于 2025-02-20 08:53:25 发布

阅读量1.1w

点赞数 10

分类专栏：网页学习文章标签： html5 bootstrap

本文链接：https://blog.csdn.net/qq_40918903/article/details/86775749

版权

使用Bootstrap框架制作简易登录界面

从学校出来到在软件公司工作已经快三个月了，终于要转正了，在公司实习期间也学习了很多东西，比如正好总结一下。下面介绍的是如何使用Bootstrap制作一个简易登录界面。

一使用Bootstrap网页模板

我提供的模板是Bootstrap 4，这个模板是我在学习途中，总结出来的，可以套用，在创建模板的过程中，需要注意两点：第一，要下载Bootstrap的相关样式，第二，导入相关jQuery的插件。

//
<!doctype html>
<html lang="zh-cmn-Hans">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

注意：当我们引入Bootsrap.js和jQuery.js文件要注意引入该文件的先后顺序，要先引入jQuery.js再引入Bootstrap.js，否则就会报错。因为Bootstarp.js文件的开发是基于jQuery开发的，所以要先引入jQuery.js才可以使用Bootstrap。

二使用BootStrap模板制作登录界面

制作好模板之后，就可以在中插入内容。
下面插入我已经写好的一个demo。直接插入body中。

// An highlighted block
 <div class="container">

最低0.47元/天解锁文章

使用Bootstrap框架制作简易登录界面

使用Bootstrap框架制作简易登录界面

一 使用Bootstrap网页模板

二 使用BootStrap模板制作登录界面

一使用Bootstrap网页模板

二使用BootStrap模板制作登录界面