twitter bootstrap tutorial

출처 : http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

강의 : http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-introduction/

부트 스트랩 홈페이지 : http://twitter.github.com/bootstrap/


1. 그리드 시스템 

  .container 사이즈 bootstarp 은 940px , bootstrap-responsive 은 1174px 삽입시 기본 정해짐 

  그리드는  기본 12 개 조각으로 나눔. 
  .row 행별로 그리드 구성 
  .show-grid  
  .span숫자( 1 ~ 12 ) 로 사이즈를 지정 할 수 있다.

  -- 사용자 정의
  .span4 offset4 간격을 줄 수 있다. 

2. 레어아웃

고정 레이어아웃 : .container 
유동 레어아웃 : .container-fluid


  @gridColumns 12
@gridColumnWidth 60px 1개의 그리드 사이드
@gridGutterWidth 20px 공백 간격
@siteWidth 사이트의 컬럼 수의 계산 값 .container-fixed() mixin 지정

3. Base Css

Typography 

 

<em>tortor mauris condimentum nibh</em>

<address>
        <strong>Twitter, Inc.</strong><br>
        795 Folsom Ave, Suite 600<br>
        San Francisco, CA 94107<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
      </address>

<abbr title="attribute">attr</abbr>

<blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
        <small>Someone famous in <cite title="">Body of work</cite></small>
      </blockquote>

<blockquote class="pull-right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
        <small>Someone famous in <cite title="">Body of work</cite></small>
      </blockquote>

 

Lists

ul class="unstyled"  : 리스트 스타일 표시를 하지 않음

설명
<dl>
        <dt>Description lists</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Euismod</dt>
        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
        <dt>Malesuada porta</dt>
        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
      </dl>


Table

class="table"  밑줄라인

class="table table-striped" 짝수열 색칠

class="table table-bordered" 테이블 라인 만표시

table table-condensed
table table-striped table-bordered table-condensed

Button
a Tag 에 class 를 지정 하여 출력 한다.

<a href="#" class="btn btn-primary">Primary</a>

.btn_info
.btn_success
.btn_warning
.btn_danger
.btn btn-large
.btn btn-large btn-primary
.btn btn-large btn-primary disabled
.btn btn-large disabled

iCon 사용
<i class="icon-search"></i>


      <div style="margin-bottom: 9px" class="btn-toolbar">
        <div class="btn-group">
          <a href="#" class="btn"><i class="icon-align-left"></i></a>
          <a href="#" class="btn"><i class="icon-align-center"></i></a>
          <a href="#" class="btn"><i class="icon-align-right"></i></a>
          <a href="#" class="btn"><i class="icon-align-justify"></i></a>
        </div>
        <div class="btn-group">
          <a href="#" class="btn btn-primary"><i class="icon white user"></i> User</a>
          <a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
            <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="i"></i> Make admin</a></li>
          </ul>
        </div>
      </div>
      <p>
        <a href="#" class="btn"><i class="icon-refresh"></i> Refresh</a>
        <a href="#" class="btn btn-success"><i class="icon-shopping-cart icon-white"></i> Checkout</a>
        <a href="#" class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</a>
      </p>
      <p>
        <a href="#" class="btn btn-large"><i class="icon-comment"></i> Comment</a>
        <a href="#" class="btn btn-small"><i class="icon-cog"></i> Settings</a>
        <a href="#" class="btn btn-small btn-info"><i class="icon-info-sign icon-white"></i> More Info</a>
      </p>
    </div>


<div style="padding: 8px 0;" class="well">
        <ul class="nav nav-list">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#"><i class="icon-book"></i> Library</a></li>
          <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
          <li><a href="#"><i class="i"></i> Misc</a></li>
        </ul>
      </div>

<div class="controls">
            <div class="input-prepend">
              <span class="add-on"><i class="icon-envelope"></i></span>
              <input type="text" id="inputIcon" class="span2">
            </div>
          </div>