文章前提

input group , jumbotron

input group , input 群組

CH7 65
課程練習下載
Bootstrap 路徑 : Components / Input

| input 基本架構 |

  • 提示文字在前方使用 .input-group-prepend
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"></div>
  • 提示文字在後方使用 .input-group-append
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

// input 提示文字前與後示意圖 ▼

Bootstrap-input-提示文字前與後示意圖

| Sizing |

  • .input-group 加入 sm , lg 可讓 input 尺寸變大或變小
    • .input-group-sm , .imput-group-lg

| Buttons with dropdown |

Bootstrap-Buttons與dropdown合併

<div class="input-group mb-3"> 
 <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

jumbotron 廣告大屏幕

CH7 66
課程練習下載
Bootstrap 路徑 : Components / Jumbotron

  • 可用來做關鍵行銷工具,會以較大塊的區域做視覺呈現
  • 於外層加上 .jumbotron 即可 。四周會有圓角
  • 於外層加上 .jumbotron.jumbotron-fluid,四周不會有圓角
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

資料來源

最後修改日期: 13 5 月, 2020

作者