일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 불교예절
- 개발자도구
- Bootstrap badge
- 부트스트랩 구성요소
- 부트스트랩 badge
- 탁주
- bootstrap breafcrumb
- html5r기본구조
- 반응형레이아웃
- 부트스트랩구성요소
- 절하는법
- 반응형홈페이지
- bootstrap
- bootstrap alert
- 검색엔진봇
- 부트스트랩
- 부트스트랩4
- Alert
- 반응형테스트
- developertool
- 크롬개발자도구
- Boowser width
- bootstrap component
- html5
- 반응형
- bootstrap4
- Chrome
- 반응형웹
- bootstrap 구성요소
- 격자형레이아웃
- Today
- Total
모래알 반응형웹
Bootstrap(부트스트랩) 4.0 소개, 다운로드 및 파일 구성 본문
부트스트랩(Bootstrap)은 트위터의 UI 디자이너 Mark Otto(@mdo)와 개발자 Jacob Thornton(@fat)이 만든 오픈소스 프런트 엔드(front-end) 툴킷이다. '프런트 엔드'란 사용자와의 직접적인 인터페이스를 말하는 것으로 알기쉽게 말하면 홈페이지가 어떻게 보여질 것인가를 정하는 기능을 모은 것이다.
부트스트랩이 제공하는 Grid Layout System(격자형 레이아웃 시스템: 12열의 격자로 이루어져 있음)은 반응형 웹디자인을 가능하게 하는 기본적인 구성요소이다.
뿐만 아니라 웹페이지를 구성하는 메뉴, 타이포그래피, 표, 입력폼, 버튼 심지어 아이콘까지 이미지가 아닌 텍스트 형식으로 표현할 수 있도록 하는 요소들을 제공한다.
여기에 다양한 JQUERY 플러그인까지 활용하여 웹페이지에 역동적 기능을 부여할 수 있다.
부트스트랩 (Bootstrap)이 적용되면
1) 데스크탑, 태블릿, 스마트폰 브라우저 모두에서 잘 보이고 동작하는 홈페이지 (반응형 홈페이지)
2) HTML5, CSS3, JQUERY, 자바스크립트 조합의 효율적인 UI 구성
3) 깔끔하고 잘 정돈된 느낌의 구성요소들 - 표, 입력폼, 버튼, 아이콘 등
4) Youtube 영상까지 모두 반응형으로
부트스트랩 (Bootstrap) 다운로드
먼저 부트스트랩을 다운로드 받는다.
다운로드 페이지에서 컴파일된 파일과 원본 파일(Source files)을 다운로드 받을 수 있는데 , 나중에 작업을 하다보면 부트스트랩 원본 CSS를 수정해야할 일이 있으므로 원본 파일을 다운로드 받는다.
다운로드 받은 파일의 압축을 풀면 부트스트랩을 사용하기에 꼭 필요한 파일 외의 파일 들이 엄청 많다.
부트스트랩을 활용하기 위해 필요한 파일은 아래의 폴더에 모두 들어있다.
bootstrap/
├── dist/
├── css/
└── js/
├── js/
└── scss/
해당 폴더와 포함된 파일들을 내 작업 폴더 안에 복사한다.
'부트스트랩' 카테고리의 다른 글
Bootstrap 4 (부트스트랩) 구성요소, Alert (0) | 2018.04.19 |
---|---|
Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (2/2) (0) | 2018.03.30 |
Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (1/2) (0) | 2018.03.29 |
Bootstrap 4 (부트스트랩), 지원 브라우저와 디바이스 (0) | 2018.03.29 |
Bootstrap(부트스트랩) 시작, 필수 요소 (0) | 2018.03.28 |