Bootstrapの基本htmlコード サンプルと使い方

Bootstrapの基本構造

Bootstrapの基本構造やheadタグ内の記述について、サンプルコードを状況別にカスタマイズして掲載しています。使い方としては、2通りあります。
①http://getbootstrap.com/でBootstrapのファイルをダウンロードして自分のサイトに組み込む
※cssフォルダ、fontフォルダ、jsフォルダ、3つのフォルダがダウンロードされます。
②CDNを使ってリンク先を指定する。※この場合は、ダウンロードは必要ありません。

基本コード

以下が、http://getbootstrap.com/getting-started/#templateに記載してあるサンプルコードです。

html lang=”ja”のコード

日本語ページの場合は「html lang=”en”」を「html lang=”ja”」に変更してください。

デザインのカスタマイズ

bootstrap.min.cssの次の行に自分でカスタマイズしたbootstrap-theme.cssを追加してください。

Fontawsomeを使いたい場合は、下記のコードを追加してください。

デザインとFontawesomeを追記したコード

CDNに書き換えたコード

CDNの最新ドレスはこちらで確認できます→http://getbootstrap.com/getting-started/#download

jquery.min.jsとbootstrap.min.jsをbodyタグ最下部ではなく、headエリアに記載したコード

WordPressの場合のheadエリアのサンプルコード