Bootstrap

 

間隔 (Spacing)
<!--屬性 設定:-->
m - 這個 class 會設定 margin
p - 這個 class 會設定 padding
<!--邊緣 設定:-->
t - 這個 class 會設定 margin-top 或 padding-top
b - 這個 class 會設定 margin-bottom 或 padding-bottom
l - 這個 class 會設定 margin-left 或 padding-left
r - 這個 class 會設定 margin-right 或 padding-right
x - 這個 class 會設定 *-left 和 *-right
y - 這個 class 會設定 *-top 和 *-bottom
<!--尺寸 設定:-->
0 - 這個 class 會設定 margin 或 padding 的樣式值為 0
1 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
2 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
3 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
4 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
5 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
auto - 這個 class 會設定 margin 為 auto
<!--範例-->
<p class="pl-3 mb-5">
where are you !!!
</p>

<!--标记-->
<span class="badge badge-primary">NEW</span>
<span class="badge badge-pill badge-primary">NEW</span>
<span class="badge badge-success">NEW</span>
<span class="badge badge-pill badge-success">NEW</span>
<span class="badge badge-danger">NEW</span>
<span class="badge badge-pill badge-danger">NEW</span>
<!---->
<button type="button" class="btn btn-primary">
Notifications<span class="badge badge-light">4</span>
</button>
<!--Links-->
<a href="#" class="badge badge-primary">Primary</a>

<!--button-->
  <button type="button" class="btn btn-success"> success</button>
  <a class="btn btn-success" href="#" role="button">Link</a>
  <input class="btn btn-success" type="button" value="Input">

  <!--button-->
  <button type="button" class="btn btn-outline-primary">primary</button>
  <button type="button" class="btn btn-outline-danger">危险标识</button>

 <!--按钮组-->
  <div class="btn-group" role="group">
    <button class="btn btn-outline-success">Left</button>
    <button class="btn btn-outline-danger">Middle</button>
    <button class="btn btn-outline-info">RIght</button>
  </div>
  <!--设置大小sm-->
  <div class="btn-group-sm" role="group">
    <button class="btn btn-outline-success">Left</button>
    <button class="btn btn-outline-danger">Middle</button>
    <button class="btn btn-outline-info">RIght</button>
  </div>
  <!--树立-->
  <div class="btn-group-vertical" role="group">
    <button class="btn btn-outline-success">Left</button>
    <button class="btn btn-outline-danger">Middle</button>
    <button class="btn btn-outline-info">RIght</button>
  </div>

 <!--卡片-->
  <div class="card" style="width:18rem">
    <img class="card-img-top" src="http://via.placeholder.com/286x180" alt="image">
    <div class="card-body">
      <h5 class="card-title">card title</h5>
      <h6 class="card-subtitle mb-2 text-muted">card subtitle</h6>
      <p class="card-text">Some quick examplend's content</p>
      <a href="#" class="btn btn-outline-primary">go link</a>
      <a href="#" class="btn btn-outline-danger">some go</a>
    </div>
  </div>

 <!--页脚，引用-->
  <footer class="blockquote-footer">脚本<cite class="Source Title">Source</cite></footer>

<div class="card text-center" style="width: 18rem;">
    <div class="card-header">头部</div>
    <div class="card-body">
      <h5 class="card-title">标题</h5>
      <p class="card-text">文字</p>
      <a href="#" class="btn btn-outline-primary">Go you heard</a>
    </div>
    <div class="card-footer text-muted">
      2 days ago
    </div>
  </div>

 <!--Card背景 bg-info-->
  <div class="card text-white text-center bg-info mb-3" style="max-width: 18rem;">
    <div class="card-header">头部</div>
    <div class="card-body">
      <h5 class="card-title">body-标题</h5>
      <p class="card-text">body-文本</p>
    </div>
  </div>

  <!--边框-->
  <div class="card border-danger text-center mb-3" style="max-width: 18rem;">
    <div class="card-header">头部</div>
    <div class="card-body text-danger">
      <h5 class="card-title">标题</h5>
      <p class="card-text">文本</p>
    </div>
    <img class="card-img-bottom" src="http://via.placeholder.com/350x150"></img>
  </div>
 

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="http://via.placeholder.com/350x150">
    <div class="card-body">
      <form>
        <div class="form-group">
          <label for="EmailInput">Email</label>
          <input type="email" class="form-control" id="EmailInput" placeholder="Email" autocomplete="off">
        </div>
        <div class="form-group">
          <label for="PasswordInput">Password</label>
          <input type="password" class="form-control" id="PasswordInput" placeholder="password" autocomplete="off">
        </div>
      </form>
      <div class="card-bottom text-center">
        <button style="width: 12rem;" type="submit" class="btn btn-outline-primary">提交</button>
      </div>
    </div>
  </div>

sdfse
FVSER
23
HJEers
sersser