Latest web development tutorials

財団入力ボックス?サイズ

など、入力ボックスのサイズを設定するために、グリッドカラムを使用.large-6.medium-6ように、そして。

あなたはをクリックすることができるより多くの知識グリッドシステム、 グリッドシステムのチュートリアル。

<フォーム>
<DIVクラス = "行">
<DIVクラス= "大-10培地-7列">
<ラベル>大-10中型 7(小上100%)
<input type = "text"プレースホルダ = "名前">
</ラベル>
</ DIV>
</ DIV>

<DIVクラス = "行">
<DIVクラス= "小5列">
<ラベル>小5
<input type = "text"プレースホルダ = "名前">
</ラベル>
</ DIV>
</ DIV>

<DIVクラス = "行">
<DIVクラス=「中3の列">
<ラベル>メディア-3(100小上の%)
<input type = "text"プレースホルダ = "名前">
</ラベル>
</ DIV>
</ DIV>
</フォーム>

»をお試しください

列のサイズに等しいです

以下は、同じサイズの列の例を示しています。

<フォーム>
<DIVクラス = "行">
<DIVクラス=「中4列">
<ラベル>メディア-4(100上の%の小さな積み重ね)
<input type = "text"プレースホルダ = "名前">
</ラベル>
</ DIV>

<DIVクラス=「中4列">
<ラベル>メディア-4(100上の%の小さな積み重ね)
<input type = "text"プレースホルダ = "名前">
</ラベル>
</ DIV>

<DIVクラス=「中4列">
<ラベル>メディア-4(100上の%の小さな積み重ね)
<input type = "text"プレースホルダ = "名前">
</ラベル>
</ DIV>
</ DIV>
</フォーム>

»をお試しください

インラインタグ

あなたは左(ない上)に表示されるラベルの内容が必要な場合は、別の列の左入力にあるボックスに要素のラベルをタグ付けして使用することができます.inline垂直方向の中心を設定するクラス:

<フォーム>
<DIVクラス = "行">
<DIVクラス= "小-8 ">
<DIVクラス = "行">
<DIVクラス= "小3列">
<= "名前"クラスのラベル = "インライン右">名前</ label>は
</ DIV>
<DIVクラス= "小9列">
<input type = "text"のid = "名前"プレースホルダ= "ファーストネーム..">
</ DIV>
</ DIV>
</ DIV>
</ DIV>
</フォーム>

»をお試しください

フロントとリアのラベル

あなたがすることができます<div class="row collapse"> >前面と背面のタブ要素を追加: < element class="postfix">または< element class="prefix"> 。 あなたは、フロントとリアのラベルのサイズを設定するには、グリッド・システムを使用することができます。

<フォーム>
<DIVクラス = "行">
<DIVクラス= "大6列">
<DIV CLASS = "行崩壊プレフィックス -radius">
<DIVクラス= "小3列">
<スパンクラス= "接頭辞">プレフィックス</ span>の
</ DIV>
<DIVクラス= "小9列">
<input type = "text"プレースホルダ = "値">
</ DIV>
</ DIV>
</ DIV>
<DIVクラス= "大6列">
<DIV CLASS = "行崩壊後置 -radius">
<DIVクラス= "小9列">
<input type = "text"プレースホルダ = "値">
</ DIV>
<DIVクラス= "小3列">
<スパンクラス= "接尾辞"> Postfixの</ span>の
</ DIV>
</ DIV>
</ DIV>
</ DIV>
</フォーム>

»をお試しください

フロントとリアのタブボタン

あなたが使用することができます<a>要素を追加.button前面と背面のボタンを設定するクラス:

<AのHREF = "#"クラス = "postfix button">ゴー</ A>

»をお試しください

フロントとリアのラベル丸ボタン

<フォーム>
<DIVクラス = "行">
<DIVクラス= "大6列">
<DIV CLASS = "行崩壊プレフィックス -radius">
<DIVクラス= "小3列">
<スパンクラス= "接頭辞">プレフィックス</ span>の
</ DIV>
<DIVクラス= "小9列">
<input type = "text"プレースホルダ = "値">
</ DIV>
</ DIV>
</ DIV>
<DIVクラス= "大6列">
<DIV CLASS = "行崩壊後置 -radius">
<DIVクラス= "小9列">
<input type = "text"プレースホルダ = "値">
</ DIV>
<DIVクラス= "小3列">
<スパンクラス= "接尾辞"> Postfixの</ span>の
</ DIV>
</ DIV>
</ DIV>
</ DIV>
<DIVクラス = "行">
<DIVクラス= "大6列">
<DIVクラス= "行崩壊プレフィックス -Round">
<DIVクラス= "小3列">
<AのHREF = "#"クラス = "button prefix">ゴー</ A>
</ DIV>
<DIVクラス= "小9列">
<input type = "text"プレースホルダ = "値">
</ DIV>
</ DIV>
</ DIV>
<DIVクラス= "大6列">
<DIV CLASS = "行崩壊後置 -Round">
<DIVクラス= "小9列">
<input type = "text"プレースホルダ = "値">
</ DIV>
<DIVクラス= "小3列">
<AのHREF = "#"クラス = "button postfix">ゴー</ A>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
</フォーム>

»をお試しください