웹페이지를 만들때 필요한 UI컴포넌트를 제공하기때문에 이것을 이용해
빠르고 안정적으로 구축할수있게 해준다 (* 반응형웹을 지원해준다)
현재로서는 전세계 개발자들이 가장 많이 사용하는 웹디자인/퍼블리싱 프레임워크
- getbootstrap.com 접속
- Get started 로 들어가준다.
부트스크랩에서 제공하는 CSS와 JS 파일을 URL링크로 html에 넣어서 사용할수있게 제공해준다.
복사해서 html 코드에 넣어주도록한다.
html
부트스트랩의 그리드시스템
기본적으로 12 그리드 시스템을 제공
하나의 행을 12개의 열로 나눈다는것
Layout -> Grid -> options을 찾아보면 그리드 시스템을 동작시킬때 사용하는 명령어가 보인다.
html 코드에 테스트코드를 작성
row는 하나의 행을 뜻하고 col은 하나의 열을 뜻한다.
lg는 큰사이즈 , md 중간사이즈 , sm 작은사이즈
- lg 일때는 3만큼의 크기를 가진다
- md 일때는 4만큼의 크기를 가진다
- sm 일때는 A와 B는 6만큼의 크기를 가지고 C는 12만큼의 크기를 가진다.
lg
md
sm
부트스트랩 Documentation 메뉴의 components
자주쓰는 UI들을 컴포넌트화해서 모아둔 카테고리
컴포넌트 메뉴 설명
클래스 패턴 ( primary , secondary , success , danger , warning , info , light , dark )
기본적인 색상 , 다른 컴포넌트에서 사용하기 쉽게끔 하기위함
Alerts
시스템의 메세지를 보여줄때 사용한다.
자세히 살펴보면 부트스트랩은 시스템 전체에 한번에 그 색상을 반영 할수있게끔
몇가지 중요한 색상을 클래스패턴으로 만들어 놓았다.
Badge
email 몇건 숫자(카운트)나 게시판 새글표시
span태그로 badge를 만드는데 안에 클래스안에 badge를 적용해서 동일한 클래스 패턴으로 적용
Breadcrumb
메뉴의 경로만들때 사용한다.
nav라는 태그 밑에 ol태그를 이용해 사용한다.
Buttons
버튼 역시 버튼의 약자인 btn으로 시작해 btn-primary 등으로 패턴이 정해져있다.
그 외 outline , sizes 등으로 버튼의 속성을 적용할수있다.
Button group
말 그대로 버튼의 그룹으로 여러가지 형태의 그룹된 버튼들의 UI를 적용하기위한 코드들이있다.
Card
카드형태를 띄고있는 UI ( 주로 웹페이지의 제품소개 할때 많이 사용되는 UI )
Carousel
슬라이드 웹사이트 가장 첫페이지 상단에 사이트의 핵심을 보여줄수있다
옵션을 통해서 순환의 반응과 , 지연시간 등을 적용할수있다.
Collapse
특정 컨텐츠를 보였다 안보였다 할수있는 기능
안의 내용을 href를 통해 id값을 주면서 id값을 매칭해 같은 id값의 내용을 보여준다.
Dropdowns
콤보박스와 비슷하다 (눌렀을때 하위메뉴가 나오게하는 버튼)
Split button 을 통해 화살표를 눌렀을때만 동작하게 하는 방법도 가능
사이즈 역시 부트스트랩 기준 (lg,md,sm) 으로 조절가능
Directions으로 Dropdown의 위치를 Dropup으로 할수있다. (오른쪽 왼쪽도 가능)
Forms (4.5)
부트스트랩 4.5버전의 Forms 을 보면 부트스트랩이 만들어놓은 양식들로 자동으로 CSS가 들어가는것을 확인할수있다.
input group (4.5)
두가지 이상이 하나의 컴포넌트로 합쳐진 그룹
Dropdown 또한 inputgroup에 같이적용해서 사용할수있다.
Jumbotron(4.5)
선택적으로 전체 뷰포트를 확장하여 사이트에 주요 마케팅표시를 할수있는 기능 (광고)
Listgroup
부트스트랩에서는 기본적으로 밑에보이는것을 리스트 그룹이라 한다.
Active를 추가해 원하는 컨텐츠를 강조할수도있다.
badge와 함께 사용해 이런식으로 적용하는것 또한 가능하다.
Media object
이미지와 글을 결합하는 형태
Flexbox를 사용하여 상단,하단,중단 정렬할수있다.
Modal
특정 버튼을 누르면 화면에 팝업창을 띄운다.
부트스트랩은 한 번에 하나의 Modal창만 지원한다.
backdrop modal을 사용하여 밖을 클릭해도 닫히지 않게 설정할수도있다.
사이즈 수정또한 가능하며 여러가지 옵션이 있다.
Navs
메뉴 링크라고 생각하면 된다.
Navbar
실제 사용하는 메뉴바 형태랑 비슷하다.
Navbar는 반응형이기때문에 css만으로 크기가줄었을때 자동적으로 버튼이 생긴다.
Pagenation
페이지 하단에 적용할수있는 컴포넌트
Popovers
특정 컨턴츠에서 부과적인 설명을 하고싶을때 사용한다.
예를 들어서 마우스를 버튼에 올렸을때 버튼의 설명이 나오게 많이 사용한다.
Toolstips
마우스를 올렸을때 추가적인 설명을 하고싶을때 사용
Progress
누적막대 , 사용자 지정 진행률 막대
다양한 Progress를 제공한다.
Scrollspy
스크롤의 위치에 따라서 부트스트랩의 탐색이나 목록구성요소를 자동으로 업데이트해서 보여준다.
Spinners
구성요소 또는 페이지로드 상태를 표시하는 로딩바
위치나 색 다양한 형태의 Spinners가 존재한다.
버튼에도 사용이 가능하다.
Toasts
시스템에서 특정 메세지가 나타나게 하는 기능
(ex) 이메일도착 , 선물도착 , 쿠폰도착 등.. 사용할수있다.
전부다 다루지 않았지만 부트스트랩 컴포넌트 메뉴에는 웹디자인시 자주쓰는 UI들을 모아둔것을 알수있다.
* 필요한것이 있다면 부트스트랩 도큐먼트에서 찾아보고 복사한뒤 html파일에 붙여넣고 사용하면된다.
부트스트랩 Docmentation 메뉴의 Utilities
Colors
text나 background color 또한 클래스패턴의 기본적인 색상을 적용할수있다.
밝고 어두어지는 gradient 또한 적용이 가능하다.
Display
컨텐츠가 화면에 보이고 안보이고를 관리
( * 화면 사이즈별로 보이고 안보이고 관리 )
Print할때 또한 유용하게 사용할수있다.
Interactions
all : 클릭으로만 전체 드래그가된다 (복사하기 쉽게)
auto : 클릭시 범위블럭 , 드래그 가능 ( 일반적인형태 )
none : 클릭 , 드래그 불가능 범위선택 불가능 (스크랩 불가)
Text
text에 관련된 모든것들이 들어있다.
사용할수 있는 다양한 스타일들이 들어가있다.
부트스트랩 Themes메뉴
전세계 웹디자이너들이 테마를 만들어서 올려둔것
여러가지 형태의 테마들을 볼수있다. ( 유,무료로 판매되고있다 )
구글에 bootstrap themes 검색후 본인이 만들고자하는 웹사이트에 가장 유사한 테마를 다운받아 사용하면된다.
wrapbootstrap.com/ 사이트에서도 판매하는 테마들을 확인할수있다.
여러개의 버전 ( AJAX , HTML , ANGULAR ... ) 을 제공하고있다.
테마역시 부트스트랩기반으로 만들어져있기때문에 부트스트랩을 알고있어야한다.
부트스트랩 Example
부트스트랩 자체에서 예제를 주는것들이 있다.
보통 일반적인 형태를 다 띄고있기때문에 페이지 소스보기를 사용해 필요한 컨포넌트를 사용하면된다.