CSDN，一个很给力的平台

最新推荐文章于 2022-07-05 15:26:15 发布

penguin_cheng

最新推荐文章于 2022-07-05 15:26:15 发布

阅读量186

点赞数

分类专栏： CSDN交流首选

本文链接：https://blog.csdn.net/penguin_cheng/article/details/120635145

版权

Bootstrap 新手入门版本更新 bug调试样式迁移

关键词由CSDN通过智能技术生成

CSDN交流首选专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作为初学者，最大的感受，就是可以短时间内提升功力，和高手交流，得到指引，吸取养分，取长补短，快速成长；高手的感受……我还没到这个级别，就不BB了。就拿学习Bootstrap来说，有些bug自己花了半天都找不出，在这里一提出，高手指引后，立马生效！下面的代码段，是本人的学习过程中的笔记片段，纯粹笔记使用，没有大项目，不值得高手的喷。（两图，为引入不同版本基本模板的样式图）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>bootstrap引入</title>
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->




    <!-- 以下是直接引用网络资源 -->
    <!-- 引入3.0版本 -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->

<!-- 直接引入4.0版本，无效，但删除integrity后面的内容即可实现，如下面第二行代码 -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-olOxEXxDwd20BlATUibkEnjPN3sVq2YWmYOnsMYutq7X8YcUdD6y/1I+f+ZOq/47" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

    <style>
      .login {
      width: 100px;
      height: 100px;
    }
    </style>

    

    
</head>
<body>
  <!-- 复制3.0版本的按钮样式 -->
  <button type="button" class="btn btn-primary">（3.0版本的按钮）Primary</button>

  <!-- 复制4.0版本的按钮样式 -->
  <button type="button" class="btn btn-primary">（4.0以上版本的按钮）Primary</button> <br>
  <br>  
  <div class="btn btn-primary">通过类来控制样式,改变类即可改变样式，只需关心类名</div><br>
  <br>
  <button type="button" class="btn btn-success">Success</button>
  <div class="btn btn-success">登陆成功</div>
  <div class="btn btn-success login">登陆成功</div>
</body>
</html>