10天轻松学习Bootstrap cssUI框架第1天上, 下载安装Bootstrap

10天轻松学习Bootstrap cssUI框架第1天上, 下载安装Bootstrap 4
下载Bootstrap:

下载地址:https://github.com/twbs/bootstrap/releases/download/v4.4.1/bootstrap-4.4.1-dist.zip

解压后放到项目的plugin文件夹里,名字bootstrap4、源码的目录就是plugin/bootstrap4/

每天的代码会放到当天文件夹里,有style文件夹放当天的css、html文件就是代码案例

案例下载地址:https://gitee.com/it123org/bootstrapof10day.git

安装:

    <link rel="stylesheet" href="../plugin/bootstrap4/css/bootstrap.min.css" >
     <link rel="stylesheet" href="style/main.css" >

    <script src="../plugin/jquery.min.js" ></script>  这个是jquery自己到gitee里下载

    <script src="../plugin/bootstrap4/js/bootstrap.min.js" ></script>

例子:

<!doctype html>
<html lang="en">
  <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="../plugin/bootstrap4/css/bootstrap.min.css" >
     <link rel="stylesheet" href="style/main.css" >
    <title>欢迎学习IT123私塾的《10天轻松学习bootstrap cssUI 框架教程》</title>
  </head>
  <body class="d-flex flex-column h-100">
    <h1>欢迎学习IT123私塾的《10天轻松学习bootstrap cssUI 框架教程》</h1>


    <!-- Begin page content -->
<main role="main" class="flex-shrink-0">
  <div class="container">
    <h1 class="mt-5">10天轻松学习bootstrap cssUI 框架教程》</h1>
    <p class="lead">10天轻松学习Bootstrap cssUI框架第1天上, 下载安装Bootstrap 4</p>
    <p> <a >it123私塾出品</a></p>
  </div>
</main>

<footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">版权所有@it123私塾出品</span>
  </div>
</footer>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="../plugin/jquery.min.js" ></script>

    <script src="../plugin/bootstrap4/js/bootstrap.min.js" ></script>
  </body>
</html>

=main.css===========

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}

.footer {
  background-color: #f5f5f5;
}
发布了55 篇原创文章 · 获赞 1 · 访问量 2943

猜你喜欢

转载自blog.csdn.net/u013750652/article/details/104057034