2. Bootstrap이란?
• Twiter에서 오픈소스로 공개한 웹 프런트 엔드 개발도
구.
• Twiter 내에서 일관성 없이 개발로 인한 내부 프로
젝트로 시작.
• MIT license.
• http://getbootstrap.com
• Bootstrap 사이트가 bootstrap을 적용한 예
3. 왜 많이 사용할까?
• 복잡한 브라우저환경에 cross browsing 작업부담
을 덜어줌.
• 반응형 디자인 (Responsive Design).
• 개발자도 보기 좋게(?) 화면을 구성이 가능.
• Twiter FE 개발자들의 개발 노하우가 고스란히 들어
있는 css
• 웹표준을 지킴.
4. 디자인 쉽게 적용하기
*bootstrap에서 제공하는 css와 component 이용하면 조금은 더 쉽게 디자인 적용.
*위와 같이 이미지의 변환을 주기 위해선 css의 대한 사전지식 및 style을 직접 작성해야하는 번거로움을 해
결 해줌.
5. 반응형 디자인
• 스크린 크기가 각기 다른 디바이스의 출현 (데스크탑, 테블릿, 폰 등등)
• 1벌의 html로 각각의 디바이스 스크린 크기에 맞게 css3의 media query 를 이용해 최적화
된 화면을 보여줌.
• Bootstrap에서는 greed system과 함께 반응형 디자인을 적용해 제공.
• media query는 출력장치를 참조하여 css코드를 분기 처리함으로써 하나의 html 소스가 여러
가지 뷰를 갖도록 구현할 수 있는 명세.
STEP1 STEP2
STEP3
http://www.bostonglobe.com/metro
6. 설치
• 최신 소스로 다운 받기.
• Bootstrap CDN
• Bower로 설치(http://bower.io/)
• Bower 설치 후 인스톨
• $bower install bootstrap
7. 폴더 구조
• Css, js, fonts 폴더 구조.
• *.min.css, *.min.js 과 같이 min가 붙으면 minified를 의미.
• Minified : 파일의 크기를 최소화(변수명 줄임, 공백제거)
9. 모바일 친화적
• Bootstrap3부터 모바일 친화적으로 재구성. (모바일 우선)
• 적절한 렌더링과 확대/축소를 위해 viewprot Meta Tag 추
가.(<head></head>사이에)
• Viewport에 User-scalble=no를 추가하여 모바일 기기에서 확대
/축소기능을 제어.
13. 기본 Grid 예제
<div class="row"> Grid를 사용하기 위한 선언
<div class="col-md-1">…</div> col-md-1에서 1은 grid 1칸을 의미 (md외에 lg,xs, sm이 올수 있음)
<div class="col-md-4">…</div> col-md-1에서 1은 grid 4칸을 의미
</div>
* 데스크탑이나 md 기준의 디바이스에서는 수평적으로 보여지나 모바일이나 테블릿에서는 자동으로 아래로 쌓이는 구조로
변경.
14. 기기 마다 Grid 값 설정
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
• 모바일에서는 쌓여서 보이고 md기준의 스크린에서는 펼쳐서 보이게 설정하기.
• Grid는 12칸을 기준으로 그 범위를 초과하면 밑으로 내려간다고 생각하면 됨.
MD혹은 데스크탑 기준 화면
테블릿 혹은 모바일 기준 화면
15. Grid 열 이동 시키기
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
* col-md-offset-2 현재 위치 기준으로 2칸이동, 예제에서는 4칸의 열을 선언 하였고 그 열에서 4칸
을 이동한 후 4칸을 차지한다는 의미.
정의 하지 않은 4칸
16. Grid 열 중첩 시키기
* 열 안에 Grid를 선언 하므로 열 기준(예제에서는 9칸의 열의 크기를 기준)으로 그리드 정의.
17. LESS
• Css는 상속이나 변수 개념이 없어서 화면을 수정하기
위해서는 일일이 찾아서 수정해야하는 번거로움.
• 이러한 문제를 해결 하기 위해서 Css 전처리 도구가
생겨남.(LESS, Sass,sytlus)
• 기존 Css문법을 확장하여 변수,믹스인, 상속, 연산 함
수의 기능을 기술가능.
• Bootstrap은 LESS를 사용.
18. LESS 변수선언
• 변수를 선언은 @를 사용
@lessColor: #000000;
@lesswidth: 2048px
@borderStyle: dotted
22. 깔끔한 Css 제공
• Typography
• Tables
• Forms (input)
• Buttons
• Image
23. Typography
• 기본 font size는 14px, 줄 간격은 1.428px
• Text안에 <small> tag를 사용하면 85% 크기로
변환.
• 상황에 맞게 적용 가능한 디자인 문구 도구.
• 강조, 약어, 주소, 인용구, 목록 등.
24. Table
• <table>에 .table class 추가.
<table class="table">
...
</table>
• <table class=".table"> 를 .table_responsive를 감싸므로 작은기기 (768px 이하)
에서도 수평 스크롤이 가능한 반응형 테이블을 만듬.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
• 이미 제공한 Class를 추가하면서 여러가지 효과를 줄 수 있음
25. 기본 Form
으로 과 을 묶어줌
*form-control을 적용하면 <input>,<textarea>,<select> 요소는 width:100%로 적용.
* Input 사용 시 label은 필수로 사용 , 숨기고 싶을때는 sr-only를 사용.
form-control 이용 사용하지 않는 경우
form-control 이용 사용하는 경우
26. 그 외에 Form
• Inline form : inline 형식으로 한 줄로 표현.
<form class="form-inline" role="form">
• Horizontal form : 수평적으로 표현
<form class="form-horizontal" role="form">
27. 지원되는 컨트롤
• Input
• Textarea
• Checkbox, radio (기본적으로 stack구조)
• Select
• Static control
• Form 상태
• Focus, disabled, form 크기 조절
28. components
• 기본 html에서 제공하는 component외엔
bootstrap에서 제공하는 고기능성
components 제공.
• Glyphicons, dropdown, button group, 네
비게이션 바, Pagination 등..
29. Glyphicons
• 180개의 icon을 무료로 제공.
• 폰트기반으로 한 아이콘
• 기본 Class와 개별 Class를 사용 하여 적용
<span class="glyphicon glyphicon-cloud"> //glyphicon 이 기본스타일 , glyphicon-cloud 가 아이콘 모양 지정
30. Dropdowns
• Context menu
• Dropdown 자체만으로 사용 불가능 다른
component과 연계.
• Jquery가 로드 되어야 함.
• Javascript를 사용하여 action을 줌
32. Navbar
• Bootstrap에서 nvabar는 Header 역할
• 창 사이즈가 줄어들면 메뉴가 감춰지고 토글형식으로 보여질
수 있음.
• @grid-float-breakpoint를 이용하여 메뉴가 사라지는
지점을 변경 가능.
일반적인 형태의 Navbar 상태 메뉴가 보임
창 사이즈를 줄였을 경우 메뉴가 사라지고 토글버튼이 생김, 토글버튼
클릭시 메뉴가 dropdown
33. Navbar 예제
창 사이즈 작아 졌을 경우 메뉴가 사라지고 토글버튼이 보여지는 부분
이 부분 삭제 시 토글 메뉴가 보여지지 않음
Dropdown, form 요소들도 추가가능
34. javascript
• Bootstrap에는 css가 적용된 다양한 UI
Component 를 제공 그중 동적으로 action이 필요
한 부분은 jquery 플러그인 형태로 컨트롤 할 수 있
게 했다.
• Modal, dropdown, tooltip, alert,
Button 등.
35. Customize
• Bootstrap이 제공하는 모든부분이 필요하지 않
다.(리소스 낭비)
• 필요한 부분을 체크(css, jquery 플러그인)하여 사
용가능.
• LESS에 적용된 변수 값도 변경가능.
37. 좋은 부분만 있을까?
• 정해진 틀(디자인)로만 개발이 가능하다.
• Bootstrap3 부터 IE7은 지원하지 않는다.
• 기존 프로젝트 개발 중 도입하면 css간 충돌이 발
생할 수 있다.
38. 무언가 하나를 만들어보자(요구사항)
• 프로야구 구단 별 이름 및 슬로건을 리스트로 출력하자.
• Search를 할 수 있는 입력칸도 필요하다. (입력칸
에는 검색을 표현하는 아이콘을 집어넣자)
• 리스트의 배경색은 스트라이프로 표현하자.
• 휴대폰(스크린 사이즈)에서는 슬로건은 히든 처리하고
팀 리스트만 표시하자.
39. 요구사항1. 검색 가능한 입력칸
form-inline으로 label과 input box 한 줄에 표현
Search icon을 input box에 넣기 위해서 has-feedback
glyphicon-search 선언 후 form-control-feedback도 포함
40. 요구사항2. 리스트에 효과주기
팀
슬로건
기본 테이블에서 스트라이프의 효과를 주기위해서 table-striped
Col-md-2 열 2칸을 사용한다는 의미
hidden-xs을 슬로건 열에 주므로 모바일 사이즈시 히든 처리
