JavaScript 강화 튜토리얼 - 부트스트랩

부트스트랩 소개
부트스트랩이란?
Bootstrap은 웹 애플리케이션과 웹사이트의 신속한 개발을 위한 프런트 엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JAVASCRIPT를 기반으로 합니다.
역사
Bootstrap은 Twitter의 Mark Otto와 Jacob Thornton이 개발했습니다. 부트스트랩은 2011년 8월 GitHub에 출시된 오픈 소스 제품입니다.
부트스트랩을 사용하는 이유는 무엇인가요?
모바일 우선: Bootstrap 3부터 프레임워크에는 라이브러리 전체에 모바일 우선 스타일이 포함됩니다.
브라우저 지원: 모든 주요 브라우저는 부트스트랩을 지원합니다.
Internet Explorer Firefox Opera Google Chrome Safari
쉬운 시작: HTML과 CSS에 대한 기본 지식만 있으면 Bootstrap 학습을 시작할 수 있습니다.
반응형 디자인: Bootstrap의 반응형 CSS는 데스크톱, 태블릿, 휴대폰에 맞게 조정됩니다. 반응형 디자인에 대한 자세한 내용은 Bootstrap 반응형 디자인을 참조하세요.
반응형 디자인
개발자가 인터페이스를 만들 수 있는 간단하고 통합된 솔루션을 제공합니다.
강력한 내장 구성요소가 포함되어 있으며 사용자 정의가 쉽습니다.
웹 기반 맞춤설정도 제공합니다.
오픈소스입니다.
부트스트랩 패키지 내용
기본 구조: 부트스트랩은 그리드 시스템, 링크 스타일, 배경 등을 포함한 기본 구조를 제공합니다. 이에 대해서는 부트스트랩 기본 구조 섹션에서 자세히 설명하겠습니다.
CSS: Bootstrap에는 전역 CSS 설정, 기본 HTML 요소 스타일 정의, 확장 가능한 클래스 및 고급 그리드 시스템과 같은 기능이 포함되어 있습니다. 이에 대해서는 Bootstrap CSS 섹션에서 자세히 설명하겠습니다.
구성 요소: Bootstrap에는 이미지 생성, 드롭다운 메뉴, 탐색, 경고 상자, 팝업 상자 등을 위한 재사용 가능한 구성 요소가 12개 이상 포함되어 있습니다. 이에 대해서는 레이아웃 구성요소 섹션에서 자세히 설명합니다.
JavaScript 플러그인: Bootstrap에는 12개 이상의 사용자 정의 jQuery 플러그인이 포함되어 있습니다. 모든 플러그인을 직접 포함하거나 개별적으로 포함할 수 있습니다. 이에 대해서는 Bootstrap 플러그인 섹션에서 자세히 설명하겠습니다.
사용자 정의: Bootstrap 구성 요소, LESS 변수 및 jQuery 플러그인을 사용자 정의하여 자신만의 버전을 얻을 수 있습니다.
온라인 예제
이 사이트의 Bootstrap 튜토리얼에는 수백 개의 예제가 포함되어 있습니다.
온라인 편집기를 사용하여 온라인으로 코드를 편집하고 실행 버튼을 클릭하여 결과를 확인할 수 있습니다.
부트스트랩 예시

<div class="container">
  <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小，查看响应式效果！</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3> 
      <p>学的不仅是技术，更是梦想！</p>
      <p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
    </div>
  </div></div>

© 저작권은 작성자에게 있습니다