Day65 - [css]부트스트랩.폼 , 모달, Carousel

이번에는 부트스트랩의 폼과 모달을 알아 봅시다.

 

폼

부트스트랩 에서 제공하는 style 들은, 전부 w3schools.com 에서 확인 할 수 있습니다.

 

그 중에서, 폼을 한번 알아보도록 하겠습니다.

 

폼의 기능은 html 에서 사용하는 태그고, 부트스트랩은 해당 폼에 디자인을 입히는 건데요

 

w3schools.com 에 들어가서, 원하는 형태를 골라서 Example 를 복사해서 가져오면 됩니다.

※아래의 초록색 박스에 있는 "Try it Yourself" 를 클릭해서, 어떻게 작용하는지도 바로 알 수 있습니다.

모달

모달창은 화면에 창을 숨겨두고, 버튼클릭시 숨겨진 창을 보여주는 형태로 동작 합니다.

모달창 같이 동적인 기능을 사용하라면 jquery라이브러리 참조가 필요 합니다.

 

저는 부트스트랩 을 다운로드 받았기 때문에, jquery 부분만 홈페이지 절대경로를 통해서 참조했습니다.

※ jquery참조 위치는 항상 bootstrap.js 위에 있을 것.

 

모달창은 해당 버튼을 클릭했을 때 숨겨져 있던 창을 보여 줍니다.

역시나, 마찬가지로 모달창도 w3schools.com 에서 복사해서 가져오면 됩니다.

 

Carousel

Carousel는, 아래와 같이 이미지 파일 들을 넘기는 형태를 말합니다.

역시나, 해당하는 style 도 w3scholls.com 에서 복사해서 가져오면 됩니다.

 

하지만, 이미지 파일은 직접 변경해주어야 겠죠?

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>