부트 스트랩 기법

Bootstrap은 바로 사용할 수있는 구성 요소를 선택할 수있는 인기있는 프레임 워크입니다. 부트 스트랩은 시차 스크롤링을 구현하기 위해 코드를 최적화 할 수 있습니다.

이 장에서는 시차 스크롤링을 구현하기 위해 Jumbotron 구성 요소를 사용하는 방법을 예제로 설명하겠습니다.

Bootstrap4 Jumbotron이있는 전체 너비 시차 페이지

사용자에게 할인 또는 할인과 관련된 일부 콘텐츠가 포함 된 큰 "클릭 유도 문안"상자가 표시되는 웹 사이트를 상상해보십시오. 일반적으로 Jumbotron은 이러한 장소에서 응용 프로그램을 찾습니다. 사용자의 시선을 사로 잡는 데 유용한 큰 상자입니다.

Bootstrap의 한 구성 요소 만 사용하고 있으므로이 예제에서는 별도의 CSS 파일을 만들지 않습니다. HTML 코드를 바로 살펴 보겠습니다.

<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <meta charset = "utf-8">  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> 
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
         integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
         crossorigin = "anonymous">  
      
      <style>  
         .jumbotron{  
            margin:15px 30px 0px 30px;  
            border-radius:10px;  
            background:   
            linear-gradient(
               rgba(0, 0, 250, 0.25), 
               rgba(125, 250, 250, 0.45)),
               url(img/ruin.jpg);  
            
            background-repeat: no-repeat;  
            background-attachment: fixed;  
            color:white !important;  
            height:440px;  
         }  
         .page-scroll {
            height:5000px;  
         }  
         .lead {
            font-family:raleway;  
            font-weight:100;  
            margin-top:-10px;  
         }  
      </style>  
   </head>  
   
   <body>  
      <div class = "jumbotron jumbotron-fluid">  
         <div class = "container">  
            <h1 class = "display-2">Jumbotron Example</h1>  
            <p class = "lead">Example text for parallax using jumbotron</p>  
         </div>  
      </div>  
      <div class = "page-scroll"> </div>  
   </body>
   
</html>

코드 분석

그만큼 line 6Bootstrap 4 라이브러리를 참조하십시오. jumbotron의 여백과 테두리 반경을 지정합니다.line 8 to 11.

우리가 볼 수 있듯이 line 33, 우리는 특정 이미지를로드 할 큰 상자를 표시하기 위해 jumbotron 클래스가있는 div를 만들고 있습니다. 이번에는 이미지에 대한 직접 URL이 없으므로 다운로드 한 이미지를 사용하겠습니다. 예를 들어 고해상도 이미지를 다운로드하고 다음에서 지정할 수 있습니다.line 16.

위의 주어진 코드를 실행할 때 볼 수있는 출력은 다음과 같습니다.