Help us understand the problem. What is going on with this article?

Bootstrap v4 - Getting started編 -

More than 3 years have passed since last update.

この記事では実際にBootstrapを導入して、使用できるところまでを追っていきます。

Bootstrapをはじめる

Bootstrapを始めるためには、jQueryとBootstrapの提供するJSファイルとCSSファイル、この3つを読み込む必要がある。

簡単に始める(CDNの利用)

CDNを利用すれば、わざわざダウンロードする必要もなく簡単。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  </body>
</html>

このコードはBootstrapのdocumentから引っ張ってきたもの。
ポイントとしては

  • HTML5による記述
  • Internet Explorerは最新版でのみ1
  • viewportを使ってレスポンシブに対応
  • box-sizingはborder-boxで指定
  • Normalize.css実装済み

ダウンロードする

Bootstrapの公式ページから

ダウンロードは以下から
Bootstrap/getting-started/download

Bootstrap v4からはCSSでもLessでもなくSassで配布されている。
利用するにはGruntの環境が必要に。がんばりましょう。

2015/09/11 追記
v3ではLessが配布されていたのですが、v4からはSassに以降したということです。
CSSはすでにGruntでビルト済みのものがdistフォルダに入っています!!

パッケージマネージャーを使う

以下に対応。

  • Bower bower install bootstrap
  • npm npm install bootstrap
  • Meteor meteor add twbs:bootstrap
  • Composer composer require twbs/bootstrap

カスタムビルド

Bootstrapの中でも使いたいものだけダウンロードすることができる。
v4ではまだ準備中っぽいのでまた今度更新します。

ちょっとしたカスタマイズ

以下の値は_variables.scssの42-62行目あたりを書き換えてGruntで再コンパイルすることで、カスタマイズが簡単にできる。

variable default Description
$spacer 1rem デフォルトのspacerの値
$enable-flex false float, display:tableとdisplay:flexの切り替え2
$enable-rounded true border-radiusを定義しておく
$enable-shadows false box-shadowを定義しておく
$enable-gradients false 背景グラデーションを定義しておく
$enable-transitions true transition効果を定義しておく
$enable-hover-media-query false タッチデバイスの時はhover要素を無効化にする3

カスタマイズオプションや、カスタマイズ性そのものは、v4で強化されたっぽいのでたくさん試していきたいな!


  1. v4ではIE8をサポート外としました。なのでピクセルではなくremやemといった単位が使われています。 

  2. flexへの対応はv4での目玉っぽいです。flexboxをベースとしたグリッドシステムやコンポーネントが用意されているそうな。 

  3. タッチデバイスに関する:hoverや:focusに関する記述はここに 

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away