bootstrap入門 表單樣式

2021-06-28 20:55:15 字數 1781 閱讀 1477

linkhref="bootstrap.min.css"rel="stylesheet"> 插入bootstrap外部樣式表

<

divclass="form-group">

<

label>使用者名稱

label>

<

inputtype="email"class="form-control"placeholder="email">

div> 表單必須要有label標籤,不需要可以選擇隱藏 如:

<

labelclass="sr-only">

密碼label>

class="form-inline"   設定內聯
class="form-horizontal"   設定水平排列
水平排列的時候會出現左端的label標籤只能顯示一半的bug,這時引入柵格系統在label標籤和input標籤外的div標籤,如下
<

divclass="form-group">

<

labelclass="col-sm-2 control-label">password

label>

<

divclass="col-sm-10">

<

inputtype="password"class="form-control"placeholder="password">

div>

div>

內聯表單

水平排列的表單

bootstrap 表單樣式

為了獲得乙個好看的form表單空間,我們需要如下的操作 效果圖如下 我們首先通過form horizontal類來指定我們的表單空間是水平排列的,即標籤和輸入框在乙個水平線上,然後我們通過form group來使得表單控制項佔滿整個容器的寬度,然後通過col sm x來指定標籤和空間各自所佔的距離,...

bootstrap入門 表單(控制項2)

為了圖示正常載入,引入網路端的bootstrap外部樣式表 p 靜態控制項 p p 請按照我的格式輸入zhangyugege 163.com p pclass form control static 請按照我的格式輸入zhangyugege 163.com p 好像沒什麼區別啊 p 焦點狀態 陰影效...

Bootstrap入門 全域性CSS樣式 概論

標籤 空格分隔 未分類 為了確保適當的繪製和觸屏縮放,需要在 之中新增viewport 元資料標籤。name viewport content width device width,initial scale 1 關於這個標籤的詳細,可以看這個部落格的講解 移動前端開發之viewport的深入理解 ...