[부트스트랩(BootStrap)] 기본 구조 파악하기

레이아웃

• 그리드 시스템 : 총 12*4으로 이루어져 있음

  • 구조는 container -> row -> col 순서로 진행

  • <div class=‘container’>
        <div class='row'>
            <div class='col-md-1'>
            <div class='col-md-2'>
            <div class='col-md-1'>
            ...
            <div class='col-md-5'>

폰트

• 만일 폰트가 없으면 구글 서버에서 불러오거나 운영 서버에 fonts를 다운받아서 사용한다.

• @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 

• @font-face{
    font-family:'NanumGothic';
    src:url("../fonts/NanumGothic.eot");
    src:local(""), url("../fonts/NanumGothic.woff") format("woff");
  }
  
  @font-face{
    font-family:'NanumBarunGothic';
    src:url("../fonts/NanumBarunGothic.eot");
    src:local(""),url("../fonts/NanumBarunGothic.woff") format("woff");
  }

타이포그래피

/** h1 ~ h6 태그 사용 **/
<small></small> 테그를 지정하면 원래 크기의 65%(h1, h2, h3), 75%(h4, h5, h6)크기롤 축소

/** p 태그 사용 **/
em, strong, .lead
/*부트스트랩 문장정렬*/
.text-left, .text-center, .text-right 클래스를 사용한다.
/*부트스트랩 강조 클래스*/
class="text-muted"
class="text-primary"
class="text-success"
class="text-info"
class="text-warning"
class="text-danger"

/* 약어 태그 사용 */ 
<abbr title="멘탈붕괴"> 멘붕</abbr>

/* 주소 address 태그 */
<address>
    <strong>저자:양용석</strong> <br> 
    주소:제주시 노형동 <br> 
    전화번호:010-234-7895 <br>
</address>

/* 인용구 사용 */
<blockquote>
    현재까지 쓰인 CSS 속성은 부트 스트랩 웹 사이트에서도 동일하게 설명이 되어 있습니다. 
    <small>
        CSS 속성 <cite>http://bootstrapk.com/BS3/css</cite>
    </small>
</blockquote>

/*인용구 오른쪽 정렬 */
<blockquote class="pull-right">
    인용구에 class="pull-right"를 적용해 주면 오른쪽으로 정렬됩니다. 
    <small>
        CSS 속성<cite>http://bootstrapk.com/BS3/css</cite>
    </small>
</blockquote>

테이블

/* table class 종류 */
<table class="table">
            <table class="table table-striped">
            <table class="table table-bordered">
            <table class="table table-hover">
            <table class="table table-condensed">

/* 다양한 tr class 적용 */
<table class="table">
    <thead>
        <tr class="active">
            <th>번 호</th>
            <th>tr class="active"</th>
            <th>글쓴이</th>
        </tr>
    </thead>
    <tbody>
        <tr class="success">
            <td>1</td>
            <td>tr class="success"</td>
            <td>홍길동</td>
        </tr>
        <tr class="warning">
            <td>2</td>
            <td>tr class="warning"</td>
            <td>임꺽정</td>
        </tr>
        <tr class="danger">
            <td>3</td>
            <td>tr class="danger"</td>
            <td>성춘향</td>
        </tr>
    </tbody>
</table>

리스트 (ul, ol)

/* ul, ol, dt */


/* 옆으로 정렬 */
<ul class="list-inline">
    <li>ul에 class="list-inline" 을 적용하면</li>
    <li>목록이 세로에서 가로로 펼쳐집니다.</li>
    <li>각 li 사이는 오른쪽과 왼쪽으로 5픽셀의 패딩값이 적용됩니다.</li>
</ul>


/* list style 제거하여 여백 제거 */
<ul class="list-unstyled">
    <li>여기는 ul 또는 ol 태그에 class="list-unstyled"를 적용한 부분입니다.list-unstyled 클래스 선택자를 사용하면 왼쪽 20px 여백이 0으로 바뀝니다.</li>
    <li>상단에 있는 ul과 ol 태그가 적용된 부분을 확인해 보세요.
        <ul>
            <li>목록 내부에 다시 ul 태그를 사용하면 원래의 ul 또는 ol 값과 동일한 결과를 얻을 수 있습니다.</li>
            <li>상단의 ul 과 비교해 보시기 바랍니다.</li>
        </ul>
    </li>
    <li>반드시 소스 파일을 확인해 보시기 바랍니다.</li>
</ul>

/* dl 세로정렬(default)*/
<dl>
    <dt>HTML</dt>
    <dd>Hyper Text Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheet</dd>
    <dt>bootstrap</dt>
    <dd>Twitter에서 만든 웹 사이트 제작용 프레임워크</dd>
</dl>

/* dl 가로정렬*/
<dl class="dl-horizontal">
    <dt>HTML</dt>
    <dd>Hyper Text Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheet</dd>
    <dt>bootstrap</dt>
    <dd>Twitter에서 만든 웹 사이트 제작용 프레임워크</dd>
</dl>

폼

<form role="form">
    <div class="form-group">
        <label for="Name">이름</label>
        <input type="text" class="form-control" placeholder="이름">
    </div>
    <div class="form-group">
        <label for="emailaddress">이메일</label>
        <input type="email" class="form-control" placeholder="이메일">
    </div>
    <div class="form-group">
        <button type="submit">확인</button>
    </div>
</form>

/* 폼의 크기가 적용되서 inline으로 진행 */
<form role="form" class="form-inline">

/* label에 class = "sr-only"를 추가하여 label 보이지 않게 */
<form role="form" class="form-inline">
    <div class="form-group">
        <label for="Name" class="sr-only">이름</label>
        <input type="text" class="form-control" placeholder="이름">
    </div>



/*form class="form-horizontal",  label class, div class 지정 */
<form class="form-horizontal" role="form">
    <div class="form-group">
            <label for="Name" class="col-xs-2 col-lg-2 control-label">이름</label>
        <div class="col-xs-10 col-lg-10">
            <input type="text" class="form-control" placeholder="이름">
        </div>
    </div>
</form>

버튼

/* 기본 */ 
<button type="button">클래스 선택자 적용하지 않는 경우</button>
/* button type="button" */
<button type="button" class="btn btn-default">기본 버튼 모양</button>
<button type="button" class="btn btn-primary">중요한 버튼</button>
<button type="button" class="btn btn-success">긍정적 의미의 버튼</button>
<button type="button" class="btn btn-info">정보제공 버튼</button>
<button type="button" class="btn btn-warning">주의를 알리는 버튼</button>
<button type="button" class="btn btn-danger">위험을 나타내는 버튼</button>
<button type="button" class="btn btn-link">단순 링크로 처리하는 버튼</button>

/* input type="button "*/ 
<input type="button" class="btn btn-default" value="기본 모양 버튼 ">

/* a class="btn btn-default" role="button" */
<a href="#" class="btn btn-default" role="button">기본 모양 버튼 </a>

/* 버튼 크기 설정 */

<button type="button" class="btn btn-default btn-lg">큰 버튼 btn-lg</button>

<button type="button" class="btn btn-default">기본 버튼</button>

<button type="button" class="btn btn-default btn-sm">작은 버튼 btn-sm</button>

<button type="button" class="btn btn-default btn-xs">아주 작은 버튼 btn-xs</button>

<button type="button" class="btn btn-default btn-lg btn-block">화면 전체 버튼 btn-lg btn-block</button>

/* 버튼 disable 처리 */
<button type="button" class="btn btn-default" disabled="disabled">버튼 작동 안함</button>

<input type="submit" class="btn btn-default" value="버튼 작동 안함" disabled="">

/* a 태그로 하는 경우에는 disabled라도 클릭이 될 수 있으므로 주의 요망 */
<a href="#" class="btn btn-default" disabled="disabled">버튼 작동 안함 </a>