Modern(モダン) - TOLI...P4・P13 056 不燃認定 モダン Modern(モダン) Created Date 10/9/2018 4:28:52 PM ...
モダンでオサレなwebサイト
-
Upload
munenori-sugimura -
Category
Technology
-
view
2.963 -
download
2
description
Transcript of モダンでオサレなwebサイト
Bootstrap, from TwitterBootstrap, from Twitter
• もともとは社内利用を目的に開発していたもの• 2011 年 8 月に OSS として公開• 2012 年 1 月 2.0 にメジャーバージョンアップ• 現在のバージョンは 2.0.1• スマートフォン・タブレット対応• github で開発• ライセンスは Apache License 2.0
CSS を読み込む
<head> 内にスタイルシートのパスを書くだけ
<link href="./css/bootstrap.css" rel="stylesheet"><link href="./css/bootstrap-responsive.css" rel="stylesheet">
Before → After
参考: http://blog.esuteru.com/archives/5677048.html
JavaScript for BootstrapJavaScript for Bootstrap
• カスタム jQuery plugin のコンポーネントが豊富に用意されています。
• クローズできるアラート、ツールチップ、スライドショー等リッチな UI を作りたい時に便利。
LESS with BootstrapLESS with Bootstrap
• JS で書かれた CSS メタ言語「 LESS 」を使うことができます。
• CSS で変数、ミックスイン、入れ子ルール、名前空間、四則演算と関数などが使えるようになります。
http://lesscss.org/
Twitter Bootstarp Rails
http://ppworks.hatenablog.jp/entry/2012/02/19/033644
まとめ• 簡単。 CSS 読み込むだけ。• グリッドシステム画期的。• デザイン諸々一通り揃ってる。• ドキュメント充実。• jQuery でよりリッチに。• LESS でよりモダンに。• リア充になれる。