bootstrap學習（三）表單

?

基本實例：

from-group:可以是其內的標簽排列更好

from-control：使標簽寬度為100%

<form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button> </form>

?

內聯表單：表單在一行顯示

form-inline: 其內標簽水平排列

.form-inline?類可使其內容左對齊并且表現為?inline-block?級別的控件。只適用于視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。

必須有label標簽：如果不限讓label顯示。可以設置 .sr-only?

<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"></div><button type="submit" class="btn btn-default">Send invitation</button> </form>

?

?水平排列：

?通過為表單添加?.form-horizontal?類，并聯合使用 Bootstrap 預置的柵格類，可以將?label?標簽和控件組水平并排布局。這樣做將改變?.form-group?的行為，使其表現為柵格系統中的行（row），因此就無需再額外添加?.row?了。

將每一個 .form-group水平排列

control-label：將label和div 水平排列整齊

<form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div> </form>

?

posted @ 2019-05-04 18:22 巡山小妖N 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的bootstrap学习（三）表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。