부트스트랩은 반응형(적응형) 웹 개발을 더 빠르고 쉽게 만들어주는 가장 인기 있고 강력한 프런트 엔드(HTML, CSS 및 JavaScript) 프레임워크입니다.
Bootstrap 소개
Bootstrap은 원래 2010년대 중반 Twitter의 디자이너와 개발자에 의해 만들어졌습니다. 오픈 소스 프레임워크가 되기 전에 Bootstrap은 Twitter Blueprint로 알려졌습니다.
Bootstrap은 웹 개발을 더 빠르고 쉽게 만들어주는 강력한 프런트 엔드 프레임워크입니다. 여기에는 양식, 버튼, 탐색, 드롭다운, 경고, 모달, 탭, 아코디언, 캐러셀, 도구 설명 등과 같은 일반적인 사용자 인터페이스 구성 요소를 생성하기 위한 HTML 및 CSS 기반 디자인 템플릿이 포함되어 있습니다.
부트스트랩을 사용하면 많은 시간과 노력을 절약할 수 있습니다.
참고: 기본적으로 Bootstrap 4는 반응형이며 모바일 우선 접근 방식을 채택합니다. Bootstrap 4.3은 Bootstrap의 가장 안정적인 최신 버전입니다. Bootstrap 4는 Google Chrome, Firefox, Safari, Internet Explorer 10 이상 등 모든 주요 최신 브라우저에서 지원됩니다.
Bootstrap으로 할 수 있는 일
Bootstrap으로 할 수 있는 일이 훨씬 더 많습니다.
반응형 웹사이트를 쉽게 만들 수 있습니다.
사전 정의된 클래스를 사용하여 다중 열 레이아웃을 빠르게 만들 수 있습니다.
다양한 유형의 양식 레이아웃을 빠르게 만들 수 있습니다.
다양한 탐색 모음 변형을 빠르게 만들 수 있습니다.
JS 코드를 작성하지 않고도 아코디언, 모달 등과 같은 구성 요소를 쉽게 만들 수 있습니다.
동적 탭을 쉽게 만들어 대량의 콘텐츠를 관리할 수 있습니다.
툴팁과 팝업을 쉽게 만들어 프롬프트 텍스트를 표시할 수 있습니다.
캐러셀이나 이미지 슬라이더를 쉽게 만들어 콘텐츠를 선보일 수 있습니다.
다양한 유형의 경고 상자를 빠르게 만들 수 있습니다.
사실 그 이상으로 Bootstrap을 사용하면 다른 많은 흥미로운 작업을 수행할 수 있습니다. 다음 장에서 이 모든 것에 대해 자세히 알아볼 것입니다.
Bootstrap 사용의 장점
프런트 엔드 프레임워크에 대한 경험이 있다면 Bootstrap이 그토록 특별한 이유가 무엇인지 궁금할 것입니다. Bootstrap 프레임워크를 선택해야 하는 몇 가지 장점은 다음과 같습니다.
시간을 많이 절약 - Bootstrap의 사전 정의된 디자인 템플릿과 클래스를 사용하면 많은 시간과 노력을 절약하고 다른 개발 작업에 집중할 수 있습니다.
반응형 기능 - Bootstrap을 사용하면 마크업을 변경하지 않고도 다양한 장치와 화면 해상도에서 더 잘 작동하는 반응형 웹 사이트를 쉽게 만들 수 있습니다.
일관적인 디자인 - 모든 Bootstrap 구성 요소는 중앙 라이브러리를 통해 동일한 디자인 템플릿과 스타일을 공유하므로 웹 페이지의 디자인과 레이아웃이 일관되게 유지됩니다.
사용하기 쉬움 - 부트스트랩은 사용하기 매우 쉽습니다. HTML, CSS 및 JavaScript에 대한 기본 실무 지식이 있는 사람이라면 누구나 Bootstrap으로 개발을 시작할 수 있습니다.
브라우저 호환 - Bootstrap은 최신 웹 브라우저를 염두에 두고 만들어졌으며 Chrome, Firefox, Safari, Internet Explorer 등과 같은 모든 최신 브라우저와 호환됩니다.
오픈 소스 - 가장 좋은 점은 완전히 무료로 다운로드하여 사용할 수 있다는 것입니다.
이 튜토리얼에서 다루는 내용
이 Bootstrap 튜토리얼 시리즈는 그리드 시스템, 타이포그래피 스타일 메커니즘, 양식 스타일링 방법 및 테이블과 같은 일반적인 사용자 인터페이스 요소 스타일링과 같은 기본 사항부터 시작하여 Bootstrap 프레임워크의 모든 기능을 다룹니다. 목록, 이미지 등) 기술.
또한 입력 그룹, 버튼 그룹, 미디어 개체, 탐색 표시줄, 패널, 페이지 매김, 레이블 및 배지, 진행률 표시줄 등과 같은 즉시 사용 가능한 부트스트랩 구성 요소를 활용하는 방법과 이를 사용자 정의하는 방법을 배우게 됩니다. 다양한 변형을 만듭니다.
마지막으로 모달 창, 동적 탭, 도구 설명, 경고, 아코디언 메뉴, 캐러셀, 스크롤링 등과 같은 Bootstrap의 고급 기능 중 일부와 사용 가능한 옵션 및 방법을 사용하여 이를 사용자 정의하거나 확장하는 방법을 살펴보겠습니다. 기능.
이 과정을 공부하기 전에
을 공부하세요.최신 장
- Bootstrap CSS编码规范 2016-10-19
- Bootstrap HTML编码规范 2016-10-19
- Bootstrap v2 教程 2016-10-19
- Bootstrap UI 编辑器 2016-10-19
- Bootstrap 附加导航 2016-10-19
- Bootstrap 轮播 2016-10-19
- Bootstrap 折叠 2016-10-19
- Bootstrap 按钮 2016-10-19
관련 강좌
- 웹 프론트 엔드 개발에 대한 빠른 소개 2021-12-10
- 당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본] 2022-09-30
- Gulp 시작하기 비디오 튜토리얼 2022-04-18
- 전우 Gao Luofeng CSS3 비디오 튜토리얼 2022-04-20
- AngularJS 개발 웹 애플리케이션 기본 예제 비디오 튜토리얼 2022-04-18
- Ajax 전체 접촉 2022-04-13
- MUI 프레임워크 기본 비디오 튜토리얼 2022-04-13
- 온라인 교육 수업 체험 수업 2019-01-10