Twitter Bootstrapを使ってみる
2014/01/27 Web twitter Bootstrap
お恥ずかしいんですが、
わたくし、twitter BootstrapもSASSも使ったことがない…
てことでWordPressはちょっと離れて本日はtwitter Bootstrapを使ってみようと思います。
twitter Bootstrapとは？
CSSフレームワークの一つ。
オープンソースで誰でも使えちゃいます。
他にも各OS、各ブラウザにも対応しちゃってるらしく検証が楽ちん。
※IE7以下とか一部を除くらしい
よくわからないけど早速ダウンロードしてみます。
ダウンロードはここ
ダウンロードしたzipファイルの中を見るとこんな感じに
index.htmlを作ってみる
まずはここからコピペです。
Basic Templateってやつです。
でました！Hello,world!
index.htmlの中身はこんなのです。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
誰もが一度は通る道。
数年前の学生時代…
#include<stdio.h>
main()
{
printf("Hello,World!");
}
とかそんなんやった気がするなあ。
さて、このBootstrapがlessというものを使っているらしいのですが
こいつがイマイチわからない。
CSSを直接書き換えるのではなく、このlessを使っていくようです。
lessとは？
ここを読んでみます。
CSSの記述が3倍速くなる「LESS」の使い方
ふむふむ。
CSSの拡張メタ言語ってやつなのか…
なるほどねえ
わからないのでこっちも読んでみます。
今日からはじめる！Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜
・プログラミングの要領でCSSが書ける独自の言語
・一箇所色を変更したら関連するファイルが全て変更される
らしい。
とても便利そうではないか。
大規模なサイトだとCSSのプロパティとか忘れがち…
あれ？ここの色コードなんだっけとかそんなことも多いし。
そしてさらに読む
Twitter Bootstrapを使ったサイト構築の流れ（前編）
いまだによくわかってないけど
LESSのソースコードをダウンロード。
他にもコンパイラが必要なのね。
ってことでダウンロード
WinLess
これで準備は整ったはず！！
それでは次回に…
