ㄧ.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