【Bootstrap v3】を導入する方法

bootstrap 導入設定

最近Bootstrapもバージョン４がでたんですが、
まだまだ、３をお使いの方も多いのでは？

ということで、bootstrap導入に関しましては３を基準に記事を書いていきたいと思います。

Bootstrapについて

導入って何すればいいの。
というかそもそもBootstrapはなに？

などなど、導入いは色々と疑問もあると思いますが、
（かくいう私も疑問だらけでした）

私のざっくりとしたイメージですが、
Bootstrapはめっちゃホームページ作成に精通した人が、

コードを記述してマークアップするだけで簡単にホームページが作れるように、
CSSやjsやなんならiconfontまで全部用意しちゃったよ！
さらに、いろんなカラーやスタイルがあるだろうからそれにも対応してるよ！
さらにさらにいうと、簡単なスクリプトなら搭載しちゃってるから、マークアップするだけで呼び出せるよ！
さらにさらにさらにいうと、レスポンシブにも対応してるんだぜ！

という、

で持って、それを使ったホームページテンプレートまで用意しています。

ってもんなので、とっても優れものなのです。

はじめは私も、

つってもさ、マークアップのためのclassとかを覚えないとできないでしょ？
自分でマークアップしてスタイリングしていったほうが早いんじゃね？

と思って導入に難色を示していました。

今はそんな過去の自分をビンタして「何やってんだ！」といってやりたい。

Bootstrap導入方法

前置きがすごく長くなってしまいました。

さて、そんなこんなで導入方法。

まずはダウンロード

定番、ダウンロード。

こちらからダウンロードしてください！

Bootstrap

https://getbootstrap.com/

最新版はバージョン４となっていますが、
私は現在バージョン３を使っています。

フォルダ内構造

ダウンロードしたらフォルダ内の構造はこのようになっています。

フォルダの中身はこのような構造になっています。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

bootstrapページ内に記載があります。→　bootstrap v3

ページソース

HTML

[html] 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上のmetaタグは先頭に来なければなりません。そのほかはこれより下にある必要があります。 -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- 警告：Respond.jsは、file：//経由で入れても表示されません -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
<h1>Hello, world!</h1>


    <!-- jQuery (BootstrapのJavaScriptプラグインに必要) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- コンパイルされたすべてのプラグインを含めたり、必要に応じてファイルを組み込んでください -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 [/html]

bootstrapページ内に記載があります。→　bootstrap v3

これで、Bootstrapを使用してページを作成する用意が整いました。

私は上記の他に、
CSSフォルダの中にオリジナルスタイルシートを入れれるように

「style.css」

を追加したりと、ちょっとカスタマイズしています。

Category

Archive