ホームページ > ウェブフロントエンド > htmlチュートリアル > TiTatoggle は、Bootstrap3_html/css_WEB-ITnose に基づく純粋な CSS スライド スイッチ ボタン コンポーネントです。

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

WBOY
リリース: 2016-06-24 11:38:38
オリジナル
2372 人が閲覧しました

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ブートストラップチェックボックスコンポーネント構造:

< div class = "チェックボックス">構造:

TiTaToggle

< ;/label>

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

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

5. ブラウザの互換性

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

Internet Explorer 9

FireFox

Safari

Chrome

Safari Ios

Stock Android ブラウザ 4.2

Chrome Android

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート