TiTatoggle は、Bootstrap3_html/css_WEB-ITnose に基づく純粋な CSS スライド スイッチ ボタン コンポーネントです。

TiTatoggle とは一体何ですか?

TiTatoggle は、実際には Bootstrap3 に基づいた純粋な CSS スライド スイッチ ボタン コンポーネントです。

他のボタン コンポーネントとは異なり、TiTatoggle スライド ボタン コンポーネントは Javascript を使用しません。このコンポーネントの HTML 構造は基本的にネイティブの Bootstrap チェックボックス コンポーネント構造と同じであり、便利で使いやすく、さまざまなテーマを提供します。スタイル: IOS スタイルやマテリアル スタイルなど。 TiTatoggleのインストール方法と使い方を見てみましょう。

1. インストール

TiTatoggle はとても便利で使いやすいですが、どうやってインストールしますか?実際、Bower を通じてインストールできます:

$ bower install titatoggle

2. 使い方

TiTatoggle の具体的な使い方は？ Bootstrap3ベースのスライドスイッチコンポーネントなので、使用する際にはBootstrap関連ファイルの導入に加えて、titatoggle-dist.cssファイルの導入も必要です。

3. TiTatoggle の HTML 構造

TiTatoggl スライド スイッチ コンポーネントの HTML 構造は基本的にネイティブの Bootstrap チェックボックス コンポーネントの構造 同じなので、TiTatoggle の HTML 構造は、ネイティブ HTML 構造に .checkbox-slider--TYPE クラスを追加し、 の後に 要素を追加するだけです。詳細は次のとおりです。

nativeブートストラップチェックボックスコンポーネント構造：

＆lt; div class = "チェックボックス"＆gt;構造:

TiTaToggle

< ;/label>

4. TiTatoggle の具体的なアプリケーション

次の画像を使用できます:

5. ブラウザの互換性

以下のブラウザに対応していますTiTatoggle コンポーネントを使用する場合、次のトラフィック プロバイダーを通じて開くことができます:

Internet Explorer 9

FireFox

Safari

Chrome

Safari Ios

Stock Android ブラウザ 4.2

Chrome Android

以上がBootstrap3をベースにしたCSSスライドスイッチボタンコンポーネントTiTatoggleの具体的なインストール方法と使い方です。気に入ったら早速インストールしてみましょう。