次のページへBootstrapデフォルトのボタンスタイルBootstrapを使うと、簡単にボタンにスタイルを付けられます。btn-***"」(***はプロパティ名)を追加すると、ボタンのスタイルの指定ができます。プロパティ名と対応するスタイルは以下のようになっています。概要default白地に黒文字primary青地に白文字success緑地に白文字info水色地に白文字warningオレンジ色地に白文字danger赤色地に白文字link白地に青文字sample0.htmlでは、以下のようにスタイルを使っています。btn-link">Link</button>sample0.htmlより抜粋Bootstrapデフォルトのボタンサイズa要素、button要素のclassに「"btn-***"」(***はプロパティ)を追加すると、ボタンのサイズの指定ができます。プロパティ名と対応するサイズは以下のようになっています。ボタンサイズのプロパティ名と概要プロパティ名サイズlg大きいボタンsm小さいボタンxsより小さいボタンsample0.5.htmlsample0.5.htmlでは、以下のようにスタイルを使っています。3の大きな特徴である「グリッドシステム」に関して説明していきます。Bootstrapでは、これによりレスポンシブWebデザインを手軽に実現できます。グリッドシステムは、以下ルール内で使用しましょう。options」より引用)サンプルファイルのコードを見ていきましょう。class="container">フッター</footer>sample1.htmlより抜粋sample1.htmlを実行すると、以下のようになります(※パソコンのブラウザーウィンドウを狭めてみても確認できます)。ウィンドウ最大で表示した場合(パソコン)ウィンドウ最小の幅で表示(スマートフォン、タブレット)classの中で複数指定また、col-{prefix}-{columns}はclassの中で複数指定できます。これにより、例えば、スマホでは縦3×横2、タブレットでは縦2×横3、パソコンでは縦1×横6というように柔軟なレイアウトが可能です。</section>sample1.5.htmlより抜粋sample1.5.htmlを実行すると、以下のようになります(※パソコンのブラウザーウィンドウを狭めてみても確認できます)。以下、Bootstrapサイトのグリッドオプション情報を参考にした、{prefix}と画面サイズの対応表です。col-lg-*画面サイズによって非表示/表示を制御また、hidden-{prefix}やvisible-{prefix}を指定することで、画面サイズによって非表示/表示を制御できます。</section>sample2.htmlを実行すると、以下のようになります(※パソコンのブラウザーウィンドウを狭めてみても確認できます)。以下、Bootstrapサイトのvisible、hiddenの情報からの引用です。visible、hiddenのプロパティ表この表の見方として、class名(赤文字)を指定すると、グリーンの箇所は表示され、白い箇所は非表示となります(※xs、sm、md、lgの指定が大事です)。alpha」がリリースされた。中の人に聞く、Bootstrap対応を強化するDreamweaverの新機能と今後、コーディングが捗る裏技とはもうすぐ2015年2度目の大きな機能追加が予定されているDreamweaverについて、機能追加の方向性や、あまり知られていない裏技などを開発担当者に聞いた。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。