<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrapスタイルの追加 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<title>Bootstrapボタン</title>
</head>
<body>
<header>
<h1 class="dlw-title">Bootstrapボタン</h1>
<p class="dlw-description">Bootstrapフレームワークの標準的なボタンデザインです。</p>
</header>
<section>
<h2 class="dlw-subtitle">[1] デフォルトボタン</h2>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</section>
<section>
<h2 class="dlw-subtitle">[2] アウトラインボタン</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</section>
<section>
<h2 class="dlw-subtitle">[3] ボタンのサイズ</h2>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<br>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<br>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
</section>
<section>
<h2 class="dlw-subtitle">[4] ボタンの状態</h2>
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Active State</a>
<button type="button" class="btn btn-lg btn-primary" disabled>Disabled State</button>
</section>
<section>
<h2 class="dlw-subtitle">[5] ボタングループ</h2>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[6] ボタンツールバー</h2>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[7] ボタングループのサイズ</h2>
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Large Left</button>
<button type="button" class="btn btn-primary">Large Middle</button>
<button type="button" class="btn btn-primary">Large Right</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Small Left</button>
<button type="button" class="btn btn-primary">Small Middle</button>
<button type="button" class="btn btn-primary">Small Right</button>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[8] ボタングループの入れ子</h2>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[9] 垂直ボタングループ</h2>
<div class="btn-group-vertical" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Top</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Bottom</button>
</div>
<br>
<div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[10] チェックボックス(ボタントグルスタイル)</h2>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> Active
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Check
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Check
</label>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[11] ラジオボタン(ボタントグルスタイル)</h2>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
</section>
</body>
</html>
ここではテキストにスタイルシートで様々な効果を付したデザインサンプルを掲載しています。
見出しは、その下の記事の性質を示すテキストです。
ここでは、スタイルシートを使用した見出しのデザインサンプルが掲載しています。
HTML <ol> 要素は順序付けられた項目リストを表します。
ここでは、スタイルシートを使用するolのデザインサンプルを掲載しています。
HTML <hr>要素は、段落レベルの要素間のテーマ区切りを表します。
ここでは、スタイルシートを使用してhrのデザインサンプルを掲載しています。
CSSプロパティbox-shadowは、要素のフレーム枠の周囲にシャドーエフェクトを追加するために使用されます。
ここでは、スタイルシートを使用したボックスシャドウプロパティのデザインサンプルを掲載しています。
このサンプルではIE用にPicturefillを追加しています。
Bootstrapフレームワークの標準的なボタンデザインです。
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
Button.cssは、CSS3のボタンアニメーションのコレクションです。
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
Arctext.jsは文字列を指定した円半径に沿ってカーブさせるjQueryプラグインです。
Lettering.jsは、1文字、1単語、1列の指定された文字列を<span>タグで囲むjQueryプラグインです。
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
FitText.jsは、親要素の幅に応じてフォントサイズをフィットさせるjQueryプラグインです。
FeedEkは、RSSフィードとAtomフィードを解析して表示するjQueryプラグインです。
YouTubeのさまざまな埋め込み方法の紹介。
FitVidsはiframeで埋め込まれたYouTube動画をレスポンシブ対応に変換するjQueryプラグインです。
xZoomは画像のズームプレビューを表示するjQueryプラグインです。
プレビュー位置とズームをカスタマイズすることができます。
Instagram.cssは、インスタントグラムのような写真をフィルタリングするスタイルシートです。
Moment.jsは日付と時刻を処理して表示するjavascriptです。
このサンプルでは日本語にローカライズしています。
Bootstrap Material DatePickerはMoment.jsを使用したjQueryデータピッカープラグインです。
MultifilterはjQueryテーブルフィルタリングプラグインです。
"display: flex;"を使用したレスポンステーブル
rowspanはサポートされていません。
"display: grid;"を使用したレスポンステーブル
rowspanはサポートされていません。
Bootstrapフレームワークの標準的なテーブルデザインです。
jQuery Mask Pluginは、フォームフィールドでマスク(検証)を行うjQueryプラグインです。
Select2は、セレクトフォームをより高度にするjqueryプラグインです。
Select2の基本的な使い方は次のとおりです。
jQuery Searcherは、さまざまなマークアップをサポートするjQuery検索/フィルタリングプラグインです。
Bootstrapフレームワークの標準的なカルーセルです。
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的な単一スライダー設定を掲載しています。
FlexSliderはレスポンシブjQueryスライダープラグインです。
ここにはFlexsliderの基本的なカルーセルスライダー設定を掲載しています。
fancyBoxはjQueryライトボックスプラグインです。
ここではfancyBoxの基本的なイメージライトボックスの設定を行います。
fancyBoxはjQueryライトボックスプラグインです。
ここでは、YouTube、Vimeo、Instagram、Googleマップ、fancyBoxのインラインHTML、iframeライトボックスの設定を掲載しています。
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
GreedyNavは画面縮小時にはみ出した項目をドロップダウンに切り替えるjQueryを用いたレスポンシブナビゲーションメニューです。
GridTabはグリッドベースのレスポンシブタブを作成する軽量なjQueryプラグインです。
jQuery.NiceScrollはスクロールの表示と機能を拡張するjQueryプラグインです。
metisMenuは水平・垂直メニューを展開するjQueryプラグインです。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、左側オフキャンバスが展開するサンプルです。
Offside.jsはオフキャンバス展開するJavaScriptキットです。
これは、複数のオフキャンバスが展開するサンプルです。
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはオプションを使用しない基本的なサンプルです。
Filterizrはコンテナ内のアイテムをフィルタリング、並べ替え、シャッフル、検索をするjQueryプラグインです。
これはFilterizrのより高度なフィルタリングのサンプルです。
animsitionはページ遷移時にアニメーションエフェクトを追加するjQueryプラグインです。
Textillate.jsは、イン/アウトアニメーションエフェクトをテキストに追加するjQueryプラグインです。
Scrollaはスクロール時に表示するアイテムにアニメーション効果を付加するjQueryプラグインです。
Hover.cssはマウスオーバー効果のスタイルシートコレクションです。
Animate.cssはアニメーション効果のスタイルシートコレクションです。
jQuery Easing Plugin はjQueryのイージング(アニメーション効果)を拡張するプラグインです。
ここでは要素へのイージングのサンプルを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここでは、基本的なfullPage.jsのフルスクリーンスクロールを掲載しています。
fullPage.jsはフルスクリーンスクロールjQueryプラグインです。
ここではナビゲーションメニューを表示しています。
jQuery.mb.YTPlayerは背景にYouTube動画を表示するjQueryプラグインです。
Hint.cssはツールチップ用のスタイルシートです。
クラス名を追加するだけでツールチップを表示することが出来ます。
Protipはツールチップを生成するjQueryプラグインです。
ツールヒントの位置、大きさなどは、データ属性のみで設定します。
Bootstrapフレームワークの標準的なカルーセルです。
これはBootstrapフレームワークの標準的なカードデザインのまとめです。
Bootstrapフレームワークの標準的なボタンデザインです。
Bootstrapフレームワークの標準的なテーブルデザインです。
GreenSockによるTweenMAX、TweenLite、TimelineLite、TimelineMaxのチートシート
このページでは、コードをまとめて検索することができます。