부트스트랩(Bootstrap) 트위터사가 만든 HTML, CSS, JS 개발을 위한 오픈소스 툴킷
Bootstrap 기술 소개 부트스트랩(Bootstrap)이란? 트위터 사가 만든 편리하고 효율적인 HTML5, CSS3, Javascript 오픈소스 툴킷 반응형(responsive), 모바일위주(mobile first) 웹 개발을 위한 웹 프레임워크 전문가들이 미리 만들어놓은 css, js, 클래스들을 사용하여 높은 품질의 웹페이지를 손쉽게 개발 jQuery 프레임워크를 이용
Bootstrap 기술 소개 부트스트랩(Bootstrap) 관련 자료 http://getbootstrap.com/ (영문 홈페이지 v4.1.1) http://bootstrap4.kr/ (한글 문서 서비스, v4.0.0) https://bootswatch.com/ (부트스트랩 테마) https://www.w3schools.com/bootstrap4/ (w3schools.com에서 제공하는 Bootstrap 4 튜토리얼)
Bootstrap 기술 소개 부트스트랩 프로젝트 시작 방법 소스를 다운로드하여 사용하는 방법 http://bootstrap4.kr/docs/4.0/getting-started/download/ 에서 zip파일 다운로드, 압축 풀기 (컴파일된 css, js를 다운로드) 내 서버에서 제공하는 css, js 파일을 사용 CDN(content delivery network)을 이용하는 방법 CDN 서버에서 제공하는 css, js 파일을 링크하여 사용 기본 템플릿을 복사하여 시작 패키지 매니저를 이용하여 설치하여 사용 (npm)
Bootstrap 기술 소개 기본 템플릿을 이용하여 페이지 작성 시작 http://bootstrap4.kr/docs/4.0/getting-started/introduction/ 반응형 동작을 위해 뷰포트 메타 태그 Bootstrap CSS 파일 링크 Bootstrap이 정상 작동하려면 jquery가 반드시 필요 Bootstrap.min.js 포함 CDN을 이용하는 사례
레이아웃 – 컨테이너 Bootstrap은 전문가가 디자인한 클래스(class)들의 모음 https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes. asp 첫 번째 해야 하는 일은 컨테이너 클래스 사용하기 고정폭 콘테이너 .container 최대폭 콘테이너 .container-fluid
레이아웃 – 그리드 시스템 그리드 시스템 12개의 컬럼 시스템, 5개의 반응형 계층, Sass 변수 및 믹스인 및 수십 개의 미리 정의 된 클래스를 사용하여 강력한 mobile-first 플렉스박스 그리드로 모든 형태의 레이아웃을 만듭니다. 부트스트랩의 그리드 시스템은 일련의 컨테이너, 행 및 열을 사 용하여 내용을 정렬하고 구성합니다. 그것은 플렉스 박스로 제작 되었으며 완전히 반응형 입니다.
레이아웃 – 미디어 객체 미디어 객체
컨텐츠 - 타이포그래피 Typography
컨텐츠 - 타이포그래피 Typography
컨텐츠 – 테이블 각종 테이블 클래스 .table .table-dark .table-striped .table-bordered .table-hover .table-sm
컨텐츠 – 이미지, 피규어 반응형 이미지 .img-fluid 섬네일 이미지 .img-thumbnail 이미지 정렬 .float-left .float-right
컴포넌트 – 알림
컴포넌트 – 배지
컴포넌트 – 버튼
컴포넌트 – 버튼 그룹
컴포넌트 – 카드
컴포넌트 – 캐러셀 캐러셀 Carousel 회전목마와 같이 순환하는 슬라이드 쇼(이미지 또는 텍스트 슬라 이드)를 구성하는 컴포넌트.
컴포넌트 – 컬랩스
컴포넌트 – 드롭다운
컴포넌트 – 폼
컴포넌트 – 점보트론
컴포넌트 – 목록그룹
컴포넌트 – 모달 (modal)
컴포넌트 – 내비게이션
컴포넌트 – 내비게이션바 (메뉴)
여러 페이지를 갖는 메뉴 시스템 작성하기 홈페이지 메뉴 구상 Index.html 파일에 내비게이션바 추가 메뉴 item의 파일명 지정 이 파일을 복사하여 다른 파일명으로 저장 내용 수정 li Item의 class를 active로 지정