부트 스트랩 4-환경 설정

CDN (Content Delivery Network)에서 포함하거나 getbootstrap.com 에서 다운로드 하여 웹 사이트에서 Bootstrap 4 사용을 시작할 수 있습니다 .

CDN 사용

Bootstrap 4는 Content Delivery Network 에서 포함하여 웹 사이트에서 사용할 수 있습니다 .

프로젝트에서 아래 컴파일 된 Bootstrap의 CSS 및 JS CDN을 사용하십시오.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

JavaScript 의 컴파일 된 버전을 사용하는 경우 축소 된 Bootstrap JavaScript 앞에 jQueryPopper.js 의 CDN 버전 (Bootstrap 4는 jQuery 및 Popper.js를 사용하여 모달, 도구 설명, 팝 오버 등의 JavaScript 구성 요소 사용)을 포함합니다 .

다음은 jQuery가 필요한 일부 구성 요소입니다-

  • 닫을 수있는 경고에 사용

  • 버튼과 확인란 / 라디오 버튼을 사용하여 상태를 전환하고 콘텐츠 전환을 위해 축소합니다.

  • 슬라이드, 컨트롤 및 표시 기용 캐 러셀

  • 드롭 다운 ( 완벽한 위치 지정을 위해 Popper.js 사용 )

  • 모달 열기 및 닫기

  • Navbar 축소 용

  • 툴팁 및 팝 오버 ( 완벽한 위치 지정을 위해 Popper.js 사용 )

Bootstrap 4 다운로드

Bootstrap 4는 다음에서 다운로드 할 수 있습니다. https://getbootstrap.com/docs/4.1/getting-started/download/. 이 링크를 클릭하면 아래와 같은 화면이 나타납니다.

여기에 두 개의 버튼이 있습니다.

  • Download− 이것을 클릭하면 Bootstrap의 CSS와 JavaScript의 미리 컴파일되고 축소 된 버전을 다운로드 할 수 있습니다. 문서 나 원본 소스 코드 파일은 포함되어 있지 않습니다.

  • Download Source − 클릭하면 최신 Bootstrap SCSS, JavaScript 소스 코드 및 문서 파일을 얻을 수 있습니다.

더 나은 이해와 사용 편의를 위해 튜토리얼 전체에서 미리 컴파일 된 부트 스트랩 버전을 사용할 것입니다. 파일이 컴플라이언스 및 축소되므로 개별 기능에 대해 별도의 파일을 포함 할 때마다 신경 쓸 필요가 없습니다.

파일 구조

미리 컴파일 된 부트 스트랩 4

컴파일 된 버전 Bootstrap 4가 다운로드되면 ZIP 파일을 추출하면 다음 파일 / 디렉토리 구조가 표시됩니다.

보시다시피, 컴파일 된 CSS 및 JS (bootstrap. *), 컴파일 및 축소 된 CSS 및 JS (bootstrap.min. *)가 있습니다.

부트 스트랩 4 소스 코드

Bootstrap 4 소스 코드를 다운로드 한 경우 파일 구조는 다음과 같습니다.

  • js /scss / 아래의 파일 은 Bootstrap CSS 및 JavaScript의 소스 코드입니다.

  • DIST는 / 폴더 위의 미리 컴파일 다운로드 섹션에 나와있는 모든 것을 포함한다.

  • 문서 / 예 / , 부트 스트랩 문서 및 부트 스트랩 사용의 예제 소스 코드가 포함되어 있습니다.

부트 스트랩 4로 첫 번째 웹 페이지 만들기

아래 예제는 Bootstrap 4의 간단한 웹 페이지를 지정합니다.

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

다음 결과가 생성됩니다-

산출