[HTML/CSS] 3. Bootstrap Framework CSS 프레임워크 부트스트랩 사용해보기!

3. Responsive design with bootstrap

Bootstrap Framework

부트스트랩을 사용하는 방법은,

이미 부트스트랩에서 지정된 class를 정의하는 방식으로 사용한다.

반응형 이미지

class = img-responsive

버튼

class = “btn btn-block"

btn : 버튼 모양

btn-block : 100%로 가득찬 버튼

Grid

<div class=“row">

     <div class="col-xs-4”> </div>

     <div class="col-xs-4”> </div>

     <div class="col-xs-4”> </div>

</div>

Font Awesome

Font Awesome은 아이콘 라이브러리로, vector 이미지이다.

.svg 파일에 저장되어있다.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

링크를 추가함으로써, 아이콘을 추가할 수 있다.

px을 조절함으로써 크기를 조정할 수 있다.

아이콘은 icon이므로 i라는 약자로 element를 표시한다.

<i class=“fa fa-thumbs-up”></i>

열고 바로 닫아준다.

좋아요 = fa-thumbs-up

쓰레기통 = fa-trash

infor = fa-info-circle

3. Bootstrap Frameword 끝