본문 바로가기

Dev.FrontEnd/HTML_CSS

[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 파일에 저장되어있다.

링크를 추가함으로써, 아이콘을 추가할 수 있다.
px을 조절함으로써 크기를 조정할 수 있다.
아이콘은 icon이므로 i라는 약자로 element를 표시한다.
<i class=“fa fa-thumbs-up”></i>
열고 바로 닫아준다.

좋아요 = fa-thumbs-up
쓰레기통 = fa-trash

infor = fa-info-circle



3. Bootstrap Frameword 끝