ホームページ > ウェブフロントエンド > CSSチュートリアル > Bootstrap の純粋な CSS3 矢印ボタン スタイルの詳細な説明

Bootstrap の純粋な CSS3 矢印ボタン スタイルの詳細な説明

PHPz
リリース: 2018-10-16 16:43:29
オリジナル
9703 人が閲覧しました
簡単なチュートリアル

これは、Bootstrap に基づいた純粋な CSS3 矢印ボタン スタイルです。このボタンは、ネイティブのブートストラップ ボタン スタイルを変更して、左または右を指す矢印ボタンを生成します。

【関連ビデオ推奨: Bootstrapチュートリアル

インストール

Bootstrap矢印ボタンファイルは、npmまたはbowerを通じてインストールできます。

npm install bootstrap-directional-buttons
 
bower install bootstrap-directional-buttons
ログイン後にコピー

使用方法

ブートストラップ スタイル ファイルと bootstrap-direction-buttons.css ファイルをページに導入します

<link>
<link>
ログイン後にコピー
HTML 構造

使用するには、btn-arrow-left クラスまたは btn-arrow-rightclass を追加するだけですクラスをボタンに設定できます。矢印ボタンのグループの間に隙間がないようにしたい場合は、 btn-group クラスを使用してコンテナに矢印ボタンを配置できます。

<button>箭头向左的按钮</button>
<button>箭头向右的按钮</button>
ログイン後にコピー

Bootstrap の純粋な CSS3 矢印ボタン スタイルの詳細な説明

Bootstrap の純粋な CSS3 矢印ボタン スタイル関連記事の詳細な説明については、PHP 中国語 Web サイトに注目してください。

関連記事:

jQueryはBootStrapスタイルに基づいた無限領域連携を実装します

美しく簡潔なCSS3価格表サンプルソースコードを実装するBootstrapの詳細な説明

Bootstrapフォームを使用してサンプルコードを作成します

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