on:2015年7月22日sponsors先日の記事「Bootstrapのグリッドシステムの基本な使い方(翻訳版)」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。Bootstrap下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。引用(blockquote)を実装する連絡先情報(address)を実装するコード(code)を実装する整列のclassを実装する強調のclassを実装するフォーム(form)を実装するテーブル(table)を実装する画像(img)を実装するナビゲーションバーを実装するBootstrapのベースのCSSここで使用するのはBootstrapのベースのCSSで、見出し、パラグラフ、フォーム、テーブルなど、Webページでよく使用するエレメントの実装方法を紹介します。使用するファイルは「bootstrap.css」または、そのファイルをミニファイした「bootstrap.min.css」です。Bootstrapで見出し(hx)を実装する標準的なHTMLと同様に、Bootstrapでも見出しの各レベルに応じて異なるサイズのものが用意されています。サイズは、下記の通りです。H6</h6>下記のように表示されます。print」と呼ばれ、主に法的な但し書きなどのために使用されます。-->上記のコードはp要素にsmall要素を使ったコードで、デフォルトで12pxのサイズを継承します。small要素は見出しに使用することもできます。14pxにBootstrapで引用(blockquote)を実装する引用は通常、外部の情報提供者から引用したテキストを強調して表示します。Bootstrapのデフォルトではテキストの左側に5pxのボーダーが表示されます。Average</cite></small></blockquote>下記のように表示されます。Bootstrapで連絡先情報(address)を実装する連絡先情報はHTMLのaddress要素で実装します。Bootstrapではシンプルなデザインで表示されます。</p></address>下記のように表示されます。Bootstrapでコード(code)を実装するコード要素は通常、HTMLや他の言語などのコンピュータのコードに使用します。Bootstrapでcode要素を使用する時は、pre要素と一緒に記述します。「<」は「&lt;」、「>」は「&gt;」)。Bootstrapで整列のclassを実装するBootstrapではテキストを整列させるために3つのclassが用意されています。text-leftテキストを左に揃えるtext-rightテキストを右に揃えるtext-centerテキストを中央に揃えるtext-justifyテキストを均等揃えに揃えるBootstrapで強調のclassを実装するBootstrapではテキストを強調させるために6つのclassが用意されています。</p>下記のように表示されます。Bootstrapでフォーム(form)を実装するBootstrapではフォームは、標準(normal)とインライン(inline)と水平(horizontal)の3つのスタイルが用意されています。標準(normal)スタイルのフォーム標準スタイルのフォームではform要素にclassを特に使用する必要はありません。btn-success">Log-in!</button></form>下記のように表示されます。「.form-group」で囲まれた要素は適度なスペースでまとめられて表示されます。インライン(inline)スタイルのフォームフォームのスタイルをインラインにするには、form要素に「.form-inline」を使用します。btn-primary">Submit!</button></form>下記のように表示されます。水平(horizontal)スタイルのフォームフォームのスタイルを水平にするには、form要素に「.form-horizontal」を使用します。</div></form>下記のように表示されます。グリッドのclassを加えることで、ラベルを揃えています。span要素を使いアイコンのclassを加えることで、アイコンを簡単に利用できます。class="sr-only">(success)</span></div>下記のように表示されます。Bootstrapでテーブル(table)を実装するBootstrapではテーブルに5つのスタイルが用意されています。Basic水平な区切りだけでシンプルなレイアウトのテーブルで、table要素に「.table」を加えます。rows水平にストライプ柄のレイアウトのテーブルで、table要素に「.table-striped」を加えます。tableそれぞれのサイドにボーダーを表示する典型的なテーブルで、table要素に「.table-bordered」を加えます。rowsBasicなスタイルでセルのホバー時に列をハイライトするテーブルで、table要素に「.table-hover」を加えます。tableセルのスペースとパディングをコンパクトにしたテーブルで、table要素に「.table-condensed」を加えます。</tbody></table>下記のように表示されます。「.table-striped」を使ったストライプ柄のテーブルで、背景カラーを変更する時はLESSの「@table-bg」や「@table-bg-accent」の値を変更します。Bootstrapで画像(img)を実装するBootstrapではimg要素に3つのスタイルが用意されています。img-rounded画像を角丸でスタイルします。img-circle画像をサークルでスタイルします。img-thumbnail画像にパディングとボーダーを加えてスタイルします。</div></div>左から、角丸、サークル、サムネイルの順です。Bootstrapでナビゲーションバーを実装するナビゲーションバーはBootstrapのレスポンシブ用のコンポーネントの一つで、ナビゲーションヘッダやコンテナの役割をします。小さいスクリーンでは独立したバーで表示されます。このナビゲーションバーにはメニューだけでなく、フォームや検索ボックスやドロップダウンメニューを加えることができます。</div></div>Bootstrapではアクセシビリティを確保するためにナビゲーションを定義する必要があります。「.navbar」に続いて「.navbar-inverse」「.navbar-fixed-top」を使用します。「.navbar-inverse」を加えるのは、メニューにブラックの背景とホワイトのテキストを加え、「.navbar-fixed-top」をページをスクロールした際に固定位置に表示させます。次にdiv要素に「.navbar-header」を与え、その中のa要素に「.navbar-brand」を与えました。ナビゲーションをレスポンシブ対応にするために、「.navbar-collapse」と「.collapse」を設定します。「.navbar-toggle」は「data-toggle」と「data-target」の2つのデータ要素を可能にします。メニューに使用するリンクを加えるためにリストを使い、「.nav」と「.navbar-nav」を与えます。最後のステップとして、「.navbar-form」で検索フォームを加え、右側にシンプルな検索バーを加えました。Posts関連記事が見つかりませんでした。WordPress当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。