Bootstrap - 적용방법, Container

Bootstrap - 적용방법, Container

FrontEnd_day3 정리 (2021.12.06 월요일)

Bootstrap

HTML, CSS, JS 라이브러리

jQuery 기반의 HTM5 Web Framework

프론트엔드에서 작동되는 프레임워크

트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈 소스 프레임 워크 (라이브러리)

HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함

자바스크립트를 선택적으로 확장 가능

Bootstrap 특징

쉽고 편리하게 사용할 수 있음

HTML/CSS 기본 지식만 있으면 누구나 사용 가능

반응형 웹 디자인

PC 또는 스마트폰이나 태블릿 등의 모바일용 디자인 지원

모든 최신 브라우저와 호환

Bootstrap 기능

CSS 기능 : 디자인이나 스타일 적용

컴포넌트 기능 : 내비게이션 바, 탭, 버튼 등의 기능을 간단하게 수정해서 사용 가능

자바스크립트 기능 : 사용자의 액션과 상호작용하는 기능 제공

Bootstrap 장점

쉽고 빠르게 다양한 기능 개발 가능

모바일 환경과 반응형 웹 제작 가능

수준 높은 퀄리티 제공

개발 시간 단축으로 개발 비용 절감

오픈 소스이며 상업적 이용 가능

Bootstrap 단점

jQuery 의존성 높음

정형화된 디자인

사용 방법

파일을 다운 받아서 사용 Bootstrap 구성 css 폴더 js 폴더 Bootstrap을 다운로드 받아 프로젝트 폴더에 css, js 폴더를 넣는다. jQuery파일 필요 jQuery 파일을 다운로드 받아서 프로젝트 폴더에 넣는다.

CDN 이용 링크를 통해서 네트워크로 import

Bootstrap 사용

부트스트랩에 정의된 다양한 클래스들을 HTML 태그에 적용하고 (class 속성에 지정)

부가적인 속성들을 정의한 클래스들을 조합해서 사용

<태그 class=”bs클래스이름1 bs클래스이름2, …..” >

Bootstrap 색상

주요 기능

Containers

Jumbotron

Grid

button

Table

Image

Containers

레이아웃 최상위 요소로 다른 요소 포함

.container : 반응형 고정 폭 컨테이너

.container-fluid : 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너

컨테이너 예제 (container.html)

viewport 포함

: css/bootstrap.min.css

순서 주의!!! jquery 파일 소스 지정이 먼저 와야 함

container.html

Document bootstrap container bootstrap container

from http://5bong2-develop.tistory.com/86 by ccl(A) rewrite - 2021-12-06 23:01:26