iT邦幫忙

0

42.Bootstrap(中文教程)表單:Forms:文本框的變化與附加顯示

ㄧ.Forms:文本框的變化與附加顯示

<body data-spy="scroll" data-target="#nav-demo">
  <div class="component" id="demo" style="height: 300vh">
    <input type="text" class="form-control-sm" placeholder="輸入...">
    <input type="text" class="form-control" readonly placeholder="輸入...">
    <input type="text" class="form-control-plaintext" placeholder="輸入...">
    <div class="input-group">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control" placeholder="輸入...">
      <span class="input-group-prepend">
        <button class="btn btn-primary">Go</button>
      </span>
    </div>
  </div>
</body>



.demo.component{
  padding: 50px;
}

重點:

  • .form-control-sm小尺寸,.form-control-lg大尺寸

  • readonly為僅能閱讀

  • 如果您希望將 元素設置為純文本,請使用 .form-control-plaintext 來刪除預設表單純文字樣式,並保留適當的邊距和填充。

  • .input-group為input群組,父元素為.input-group

  • @為span.input-group-text

  • 再來就是input type="text"

  • 第三個為按鈕,基本的樣式與對齊的span.input-group-prepend

codepen
參考:bootstrap4


尚未有邦友留言

立即登入留言