html - 从自定义 CSS 迁移到 Bootstrap

Question

我使用 HTML CSS 已经有一段时间了，但对 bootstrap 还很陌生。我有以下代码。代码运行良好，但包含大量自定义 CSS。我的 HTML 代码和 CSS 代码如下所示

.container {
  padding: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rectangle {
  width: 632px;
  height: 269px;
  padding: 30px 20px;
  border-radius: 4px;
  border: solid 1px #e0e0e0;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  display: ms-flexbox;
  align-items: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.title {
  width: 291px;
  height: 54px;
  font-size: 49px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.1;
  letter-spacing: -0.8px;
  text-align: center;
  color: #333333;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.description {
  width: 468px;
  height: 23px;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.28;
  letter-spacing: -0.03px;
  color: #333333;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.button {
  width: 303px;
  height: 48px;
  border-radius: 4px;
  background-color: #f9c940 !important;
  color: #000000;
  font-size: 20px;
}

<div class="container">
  <div class="rectangle">
    <div class="title">
      <p>Title</p>
    </div>
    <div class="description">
      <p>Description</p>
    </div>
    <div>
      <button class="button">Start</button>
    </div>
  </div>
</div>

我想使用 bootstrap 使上面的代码尽可能响应。如何将以上自定义CSS尽可能多地转换为Bootstrap代码？请帮忙。

Answer 1

在集成 bootstrap 之后，您是否将类从自定义类更改为 bootstrap？？

like e.g. you have given button as class name add bootstrap class of button btn btn-warning to your button and you will see changes.

.container {
  padding: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rectangle {
  width: 632px;
  height: 269px;
  padding: 30px 20px;
  border-radius: 4px;
  border: solid 1px #e0e0e0;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  display: ms-flexbox;
  align-items: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.title {
  width: 291px;
  height: 54px;
  font-size: 49px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.1;
  letter-spacing: -0.8px;
  text-align: center;
  color: #333333;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.description {
  width: 468px;
  height: 23px;
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.28;
  letter-spacing: -0.03px;
  color: #333333;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.button {
  width: 303px;
  height: 48px;
  border-radius: 4px;
  background-color: #f9c940 !important;
  color: #000000;
  font-size: 20px;
}

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

<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.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="card rectangle">
    <div class="title card-body">
      <p>Title</p>
    
    <div class="description">
      <p>Description</p>
    </div>
    <div>
      <button class="button btn btn-warning">Start</button>
      </div>
    </div>
  </div>
</div>