Bootstrap 기본
Get Started - http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
Grid Basic - http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Jumbotron - http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp
Alert - http://www.w3schools.com/bootstrap/bootstrap_alerts.asp
Button groups - http://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
Glyphicons - http://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp
참고: Font Awesome http://fontawesome.io/icons/
Dropdowns - http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
Navigation bar - http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Modal - http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Tooltip - http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
실습
아래와 같이 자신의 포트폴리오 페이지를 바꿔보자.
기존에 index.html을 복사해서 index_bootstrap.html 이라고 만들어서 github에 올린다.
http://아이디.github.io/index_bootstrap.html 로 접속 가능해야 함.
grid를 잘 설계하여 자신의 포트폴리오 내용을 잘 배치해보기
navbar, jumbotron, glyphicon을 적절히 사용, 다른 bootstrap 요소들을 추가로 이용하여 꾸며도 좋음
힌트: 아래와 같은 CSS가 필요할 것임, 적용전후에 어떤 차이가 있는지 잘 비교해보고 이해해볼 것!
<style>
.navbar {
background: rgb(255, 200, 255);
margin-bottom: 0;
border: 0;
}
.jumbotron {
background: rgb(255, 200, 255);
}
</style>
