「Twitter Bootstap」がフラットデザインになりました。

Bootstrap3

Bootstrap3

以前使っていたTwitter Bootstrap

デザインに便利な「Twitter Bootstrap」というものを使ってみました。

新しくなってフラットデザインになったみたいです。

スポンサードリンク

Twitter Bootstrap3.0を設置

まずBootstrapをダウンロードします。

Twitter Bootstrap

Bootstrapダウンロード

Bootstrapダウンロード

赤枠の箇所からダウンロードします。

ダウンロードした圧縮ファイルを解凍すると3つフォルダがあります。

フォルダ

フォルダ

3.0からフォントも増えたようです。

基本的に使うのはcssフォルダとjsフォルダの中身だけです。

cssフォルダの「bootstrap.min.css」または「bootstrap.css」

jsフォルダの「bootstrap.min.js」または「bootstrap.js」

あとはjQueryが必要になります。

minが付いたものは付いていないファイルを圧縮したものなので

ファイルの中身が見たいとか、追加・変更したことがなければ

minが付いたファイルでいいと思います、

では、ダウンロードしたファイルを設置します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Bootstrap3.0</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    ・・・省略・・・
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

jsファイルはheadタグ内で読み込ませてもいいです。

これで使えるようになりました。

基本的に使い方は前のバージョンと同じみたいです。

ただ、設定が増えているので

色々試してみたいですね。

アイコンが増えているのがうれしいですね。

次に作るサイトで使ってみようかな?

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ