Bootstrap이란

Bootstrap 

-       HTML, CSS, JS 라이브러리

-       jQuery 기반의 HTM5 Web Framework

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

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

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

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

 

Bootstrap 특징

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

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

-       반응형 웹 디자인

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

-       모든 최신 브라우저와 호환

 

Bootstrap 기능

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

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

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

 

Bootstrap 장점

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

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

-       수준 높은 퀄리티 제공

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

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

 

Bootstrap 단점

-       jQuery 의존성 높음 

-       정형화된 디자인

 

Bootstrap 사용 방법

-       파일을 다운로드 받아서 사용

-       Bootstrap 파일 구성

-       css / js 폴더

-       jQuery 파일 필요

-       CDN 이용

-       링크를 통해 서버에서 제공 받음

 

2개 다운로드

-       Bootstrap

-       jQuery

 

Bootstrap 프로젝트 생성 (Dynamic Web Project)

-       webapp 폴더에 

-       Bootstrap의 css와 js 폴더 복사해 넣음

-       jquery-3.6.0.min.js 파일 복사해 넣음

 

부트스트랩 사용법

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

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

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

-       <button type=”button” class=”btn btn-primary”>

-       <div class=”container bg-primary text-white”>

 

부트스트랩 주요 기능

-       Containers

-       Jumbotron

-       Grid

-       button

-       Table

-       Image