Bootstrap
- 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 : 파일의 크기를 최소화(변수명 줄임, 공백제거)
- 8. Basic template • bootstrap.min.js 가 Load 하기전에 jquery 가 로드 되어 있어야 함. • bootstrap.min.js가 jquery 기반으로 작성되있기 때문.
- 9. 모바일 친화적 • Bootstrap3부터 모바일 친화적으로 재구성. (모바일 우선) • 적절한 렌더링과 확대/축소를 위해 viewprot Meta Tag 추 가.(<head></head>사이에) • Viewport에 User-scalble=no를 추가하여 모바일 기기에서 확대 /축소기능을 제어.
- 10. 반응형 이미지 • Bootstrap3에서 이미지에 .img-responsive class를 추가하여 반응형으로 만들 수 있음.
- 11. Grid system • Grid는 레이아웃 디자인의 기본적인 요소. • 일반적으로 <div>와 css 이용해 배치 • Bootstrap은 grid system을 제공 12열 그리드를 제공.
- 12. Grid options
- 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
- 19. LESS 믹스인 함수
- 20. LESS 상속 상속 상속 * 클래스 선택자로 믹스인 함수를 정의 하므로 클래스 선택자도 믹스인 함수처럼 사용가능.
- 21. 반응형 유틸리티 • 기기(스크린 크기) 마다 보이고 싶거나 숨기고 싶은 contents가 있는 경우 사용.
- 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에 적용된 변수 값도 변경가능.
- 36. Theme site • http://bootswatch.com/ • http://wrapbootstrap.com/ • http://stylebootstrap.info/ • http://bootply.com
- 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을 슬로건 열에 주므로 모바일 사이즈시 히든 처리
- 41. 전체 소스 #1
- 42. 전체소스 #2 팀 슬로건
- 43. 완성된 예제 데스크탑 환경에서는 전체 표시 모바일 환경에서는 팀만 표시