財団ボタングループ
財団ボタングループ
ボタングループ
財団は、同じ行の一連のボタンを作成することができます。
あなたが使用することができます<ul>要素および追加.button-groupボタングループを作成するクラス：
例
<ULクラス= "ボタングループ ">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
»をお試しください
垂直ボタングループ
垂直ボタングループの使用.stack作成するクラス。 ボタンは親要素の幅全体に及ぶことに注意してください：
例
<ULクラス= "ボタングループスタック」>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
»をお試しください
.stack-for-smallクラスの画面、水平に配置されたボタンがあるの小さなサイズのためには、垂直方向の配置を次のようになります。
例
<ULクラス= "ボタングループのスタック用の小型">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
»をお試しください
丸みを帯びたボタングループ
ボタングループの使用.radiusと.round丸みを帯びた角を追加するクラスボタン：
例
<ULクラス= "ボタングループの半径">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<ULクラス= "ボタングループラウンド">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<ULクラス= "ボタングループラウンド">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
»をお試しください
制服延長ボタングループ
.even-numボタングループボタンの幅と100％の親要素の幅全体にわたって均一に分布するためのクラス。
numが 1-8から、ボタングループ内のボタンの数です。
例
<ULクラス= "ボタン群であっても-3">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<ULクラス= "ボタン群であっても-5">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> HTC </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> Huawei社</ button>の</李>
</ UL>
<ULクラス= "ボタン群であっても-8">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> A </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> B </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> C </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> D </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> E </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> F </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> G </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> H </ button>の</李>
</ UL>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
</ UL>
<ULクラス= "ボタン群であっても-5">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">アップル</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">サムスン</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン">ソニー</ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> HTC </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> Huawei社</ button>の</李>
</ UL>
<ULクラス= "ボタン群であっても-8">
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> A </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> B </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> C </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> D </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> E </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> F </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> G </ button>の</李>
<李> <ボタンタイプ= "ボタン"クラス= "ボタン"> H </ button>の</李>
</ UL>
»をお試しください
ドロップダウンボタン
ドロップダウン・メニュー・ボタンユーザが設定良い値を選択することができます。
例
<！ -ドロップダウンをトリガ- >
<AのHREF = "#"データ -dropdown = "id01"クラス= "button dropdown">ドロップダウンボタン</ A>
<！ -実際のドロップダウン- >
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
<AのHREF = "#"データ -dropdown = "id01"クラス= "button dropdown">ドロップダウンボタン</ A>
<！ -実際のドロップダウン- >
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
»をお試しください
分析の例
.dropdownドロップダウンメニューボタンを作成するクラス。
使用data-dropdown=" id "ドロップダウンメニューを開くには、属性ボタンまたはリンク。
idの値は、コンテンツ（ID01）プルダウンメニューに一致する必要があります。
では<ul>に追加します.f-dropdownクラスおよびdata-dropdown-contentコンテンツのドロップダウンメニューを作成する属性。
最後の初期化財団JS。
スプリットボタン
また、分割ボタンのドロップダウンメニューを作成することができます。 あなただけがボタンを追加する必要があり.splitクラスを、方向矢印ボタンを生成するために、span要素を使用します。
例
<Buttonクラス= "ボタンスプリット" >スプリットボタン
<スパンデータ-ドロップダウン= "ID01 "> </ span>の
</ボタン>
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
<スパンデータ-ドロップダウン= "ID01 "> </ span>の
</ボタン>
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
»をお試しください
 | ヒント：このチュートリアルの後半では、我々は、ドロップダウンメニューについて詳しく説明しますが知識です。 |
|---|