ドットインストールをはじめて眺めてみてました。簡単にレイアウトしてくれるCSSのための言語を紹介していたので試しに使ってみています。かなりキレイにサイトが作成できるのではないでしょうか。説明にもあったのですが、今風のしゃれた感じがちょいと簡単にできます。

まずはheadタグの中に、Bootstrapを利用するために以下のものを記述します。

<head>
  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css" />
</head>

Bootstrap今風のCSS

ドットインストールをはじめて眺めてみてました。この左側の文章はblockquoteをつかっているわけですが、こんな風に簡単にレイアウトしてくれるCSSのための言語を紹介していたので試しに使ってみています。

かなりキレイにサイトが作成できるのではないでしょうか。説明にもあったのですが、今風のしゃれた感じがちょいと簡単にできます。

こんな感じで簡単に段組もできるみたいですね。


こっちはpreタグで囲っています。おもしろいようにキレイに整頓できますね

Navigation


<ul class="breadcrumb">
 <li><a href="">Blogger</a> <span class="divider">/</span></li>
 <li><a href="">Tech-Tech[tekuteku]</a> <span class="divider">/</span></li>
 <li class="active">twitter Bootstrap</li>
</ul>
上のナビはこのソースでできます。

Mini Labelsmall tag

  <span class="label important">NOTE</span>
NOTEimportant

NOTEsuccess

NOTEwarning

NOTEnotice

段組 spanで調整

<div class="row">
  <div class="span8">
  </div>

  </div class="span4">
  </div>
</div>

Modal

display window

Modal使うにはスクリプトを埋め込む必要があります。
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js"></script>

<p><a class="btn" data-controls-modal="myModal" data-backdrop="true">display window</a></p>
<div id="myModal" class="modal hide fade">
<div class="modal-header">
  <a href="" class="close">×</a>
  <h3>小倉奈々</h3>
</div>
<div class="modal-body">
  <img width="240" height="360" src="http://cdn-ak.f.st-hatena.com/images/fotolife/g/ginzashobou/20110128/20110128155515.jpg" />
</div>
<div class="modal-footer">
  <a href="" class="btn">ok!</a>
</div>
</div>

<ul class="tabs" data-tabs="tabs">
 <li class="active"><a href="#menu1">menu1</a></li>
 <li><a href="#menu2">menu2</a></li>
 <li><a href="#menu3">menu3</a></li>
</ul>
<div class="tab-content">
 <div id="menu1">
  <p>menu1menu1menu1menu1menu1menu1menu1menu1menu1</p>
  <p>menu1menu1menu1menu1menu1menu1menu1menu1menu1</p>
  <p>menu1menu1menu1menu1menu1menu1menu1menu1menu1</p>
 </div>
</div>

 <div id="menu2">
  <p>menu2menu2menu2menu2menu2menu2menu2menu2menu2</p>
  <p>menu2menu2menu2menu2menu2menu2menu2menu2menu2</p>
  <p>menu2menu2menu2menu2menu2menu2menu2menu2menu2</p>
 </div>

 <div id="menu3">
  <p>menu3menu3menu3menu3menu3menu3menu3menu3menu3</p>
  <p>menu3menu3menu3menu3menu3menu3menu3menu3menu3</p>
  <p>menu3menu3menu3menu3menu3menu3menu3menu3menu3</p>
 </div>

おわり。

勉強メモブログ

2012年1月14日土曜日

twitter Bootstrap

Bootstrap今風のCSS

Navigation

Mini Labelsmall tag

段組 spanで調整

Modal

tab menu

0 件のコメント:

コメントを投稿