Foundation 輸入框
Foundation 輸入框尺寸
使用網格的列來設置輸入框的大小,如 .large-6
, .medium-6
, 等。
更多網格系統知識,可以點擊 網格系統 教程。
實例
<form>
<div class="row">
<div class="large-10 medium-7 columns">
<label>large-10 medium-7 (100% on small)
<input type="text" placeholder="Name">
</label>
</div>
</div>
<div class="row">
<div class="small-5 columns">
<label>small-5
<input type="text" placeholder="Name">
</label>
</div>
</div>
<div class="row">
<div class="medium-3 columns">
<label>medium-3 (100% on small)
<input type="text" placeholder="Name">
</label>
</div>
</div>
</form>
相等大小列
以下演示了相等大小列的實例:
實例
<form>
<div class="row">
<div class="medium-4 columns">
<label>medium-4 (100% on small, stacked)
<input type="text" placeholder="Name">
</label>
</div>
<div class="medium-4 columns">
<label>medium-4 (100% on small, stacked)
<input type="text" placeholder="Name">
</label>
</div>
<div class="medium-4 columns">
<label>medium-4 (100% on small, stacked)
<input type="text" placeholder="Name">
</label>
</div>
</div>
</form>
內聯標籤
如果你希望你的標籤內容顯示在左邊(不是上邊),可以將標籤元素 label 放在輸入框左邊的不同的列上,並使用 .inline
類來設置垂直居中:
實例
<form>
<div class="row">
<div class="small-8">
<div class="row">
<div class="small-3 columns">
<label for="name" class="inline right">Name</label>
</div>
<div class="small-9 columns">
<input type="text" id="name" placeholder="First Name..">
</div>
</div>
</div>
</div>
</form>
前置和後置標籤
你可以在 <div class="row collapse">
中添加前置和後置標籤,元素為: <element class="postfix">
或 <elementclass="prefix">
。可以使用網格系統來設置前置和後置標籤的大小:
實例
<form>
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-3 columns">
<span class="prefix">Prefix</span>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row collapse postfix-radius">
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
<div class="small-3 columns">
<span class="postfix">Postfix</span>
</div>
</div>
</div>
</div>
</form>
嘗試一下 ?
前置和後置標籤按鈕
可以使用 <a>
元素添加 .button
類來設置前置和後置按鈕:
實例
<a href="#" class="postfix button">Go</a>
嘗試一下 ?
前置和後置標籤圓角按鈕
實例
<form>
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-3 columns">
<span class="prefix">Prefix</span>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row collapse postfix-radius">
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
<div class="small-3 columns">
<span class="postfix">Postfix</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-round">
<div class="small-3 columns">
<a href="#" class="button prefix">Go</a>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row collapse postfix-round">
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
<div class="small-3 columns">
<a href="#" class="button postfix">Go</a>
</div>
</div>
</div>
</div>
</form>
![](https://pic.pimg.tw/zzuyanan/1488615166-1259157397.png)
![](https://pic.pimg.tw/zzuyanan/1482887990-2595557020.jpg)
※Foundation 側邊欄
※Foundation 麥哲倫(Magellan)導航
※Foundation 表單
※Foundation 列表
※Foundation 分頁
TAG:程序員小新人學習 |
※該怎麼玩兒?The Foundation of Learning
※PH7現場 Blue Foundation
※粉底測評#Dior forever undercover 24h foundation
※mac fix studio foundation nc15 and嘮嗑哈哈哈
※蘋果 FoundationDB 開源 CloudKit 使用的數據層
※CoreLink推出Foundation 3D列印鈦金屬植入體多孔籠式系統
※Unity:AR Foundation將支持ARKit 3
※大健康鏈BHIC獲得Misitour foundation千萬美元戰略投資
※世界智能駕駛挑戰賽:AutoCore受邀代表Autoware Foundation參賽
※Unity AR Foundation開始支持ARKit 3.0
※Apple的雲資料庫FoundationDB現在開源
※Royal Foundation懷孕時尚抓拍欣賞
※阿什莉·比克頓將參展K11 Art Foundation群展Emerald City
※滑板 | Foundation壓軸滑手Cole Wilson-滑板的一天!
※蘋果開源NoSQL 資料庫FoundationDB
※重磅!羅氏24億美元收購Foundation Medicine
※三言財經與Global Blockchain Foundation達成戰略合作,成為其中國首家戰略合作媒體
※羅氏155億與Foundation Medicine達成併購協議,全面進軍癌症基因檢測行業!
※Unity為手機AR推出跨平台開發工具AR Foundation
※Unity為iOS和安卓打造AR開發軟體:AR Foundation