Bootstrap을 사용하여 신속하게 컨베이어 벨트_javascript 기술 구축

부트스트랩 소개

부트스트랩은 프런트엔드 개발에 널리 사용되는 프레임워크입니다. 처음에는 트위터에서 내부 도구로 사용되었으며 오픈 소스로 공개된 후 빠르게 모든 측면에서 인정을 받았습니다. 이 책은 최신 부트스트랩 3을 기준으로 작성되었습니다. 설치 및 구성에 대한 간략한 소개 후 바로 주제로 넘어가서 가장 대표적인 개인 업무 사이트, 워드프레스 테마, 기업 사이트, 전자상거래 사이트, 싱글페이지 등을 소개합니다. 마케팅 웹사이트, 응용사례를 결합하여 Bootstrap과 LESS의 활용방법과 기법을 자세히 분석합니다.

너무 많이 이야기해서 주제에서 벗어난 컨베이어 벨트를 만드는 부트스트랩 코드를 살펴보겠습니다.

진행률 표시

<div id="homepage-feature" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
<li data-target="#homepage-feature" data-slide-to="1" ></li>
<li data-target="#homepage-feature" data-slide-to="2" ></li>
<li data-target="#homepage-feature" data-slide-to="3" ></li>
</ol>

진행률 표시기의 data-target 속성은 컨베이어 벨트에 활성 클래스를 추가하기 위해 컨베이어 벨트의 ID 홈페이지-featureJS 플러그인을 사용해야 합니다.

<div class="carousel-inner">
<div class="item active">
<img >
</div>
<div class="item ">
<img >
</div>
...
</div>

이전과 다음을 표시하는 버튼이 있습니다

<a class="left carousel-control" href="#homepage-feature" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homepage-feature" data-slide="next">
<span class="glyphicon glyphicon-chevron-left"></span>
</a></div>

그렇습니다. 위 내용은 에디터가 소개한 부트스트랩을 이용한 컨베이어 벨트 구축에 대한 지식입니다. 또한 스크립트하우스 홈페이지에 많은 지원 부탁드립니다!