부트스트랩 테마 "The Band"

테마 만들기: "The Band"

이 페이지에서는 부트스트랩 테마를 처음부터 빌드하는 방법을 보여줍니다.

우리는 간단한 HTML 페이지로 시작한 다음 완전히 기능하고 개인적이고 반응이 빠른 웹 사이트가 될 때까지 점점 더 많은 구성 요소를 추가할 것입니다.

결과는 다음과 같으며 수정, 저장, 공유, 사용 또는 원하는 작업을 자유롭게 수행할 수 있습니다.

HTML 시작 페이지

다음 HTML 페이지로 시작하겠습니다.

부트스트랩 CDN 추가 및 컨테이너 추가

Bootstrap CDN과 jQuery에 대한 링크를 추가하고 HTML 요소를 컨테이너( .container)에 넣습니다.

중앙 텍스트

.text-center컨테이너 내부의 텍스트 중앙에 클래스를 추가하고 <em>요소를 사용하여 "We love music" 텍스트를 기울임꼴로 만듭니다.

패딩 추가

CSS를 사용하여 패딩으로 컨테이너를 보기 좋게 만듭니다.

그리드 추가

너비가 같은 열 세 개( .col-sm-4)를 만들고 텍스트와 이미지를 추가한 다음 컨테이너 안에 넣습니다.

예시

<div class="container text-center">
  <h3>THE BAND</h3>
  <p><em>We love music!</em></p>
  <p>We have created a fictional band website. Lorem ipsum..</p>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
    <div class="col-sm-4">
      <p><strong>Name</strong></p><br>
      <img src="bandmember.jpg" alt="Random Name">
    </div>
  </div>
</div>

결과:

밴드

우리는 음악을 사랑합니다!

우리는 가상의 밴드 웹사이트를 만들었습니다. 로렘 입숨..

이름

이름

이름

원 이미지

.img-circle클래스 와 함께 이미지를 원으로 만듭니다.

또한 이미지를 보기 좋게 만들기 위해 몇 가지 CSS를 추가했습니다.

예시

.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  width: 80%;
  height: 80%;
  opacity: 0.7;
}
.person:hover {
  border-color: #f1f1f1;
}

<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name">

결과:

이름

이름

이름

접을 수 있는 것들

이미지를 접을 수 있게 만드십시오. 각 이미지를 클릭할 때 추가 콘텐츠 표시:

예시

<div class="row">
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo" class="collapse">
      <p>Guitarist and Lead Vocalist</p>
      <p>Loves long walks on the beach</p>
      <p>Member since 1988</p>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo2" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo2" class="collapse">
      <p>Drummer</p>
      <p>Loves drummin'</p>
      <p>Member since 1988</p>
    </div>
  </div>
  <div class="col-sm-4">
    <p class="text-center"><strong>Name</strong></p><br>
    <a href="#demo3" data-toggle="collapse">
      <img src="bandmember.jpg" class="img-circle person" alt="Random Name">
    </a>
    <div id="demo3" class="collapse">
      <p>Bass player</p>
      <p>Loves math</p>
      <p>Member since 2005</p>
    </div>
  </div>
</div>

결과(효과를 보려면 이미지를 클릭하십시오):

이름

기타리스트 및 리드 보컬리스트

해변에서 긴 산책을 좋아합니다.

1988년부터 회원

이름

고수

드럼치는 걸 좋아해

1988년부터 회원

이름

베이스 연주자

수학을 좋아한다

2005년부터 회원

캐러셀 추가

캐러셀을 만들고 컨테이너 앞에 추가합니다.

예시

<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" role="listbox">
    <div class="item active">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>The atmosphere in New York is lorem ipsum.</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago - A night we won't forget.</p>
      </div>
    </div>

    <div class="item">
      <img src="la.jpg" alt="Los Angeles">
      <div class="carousel-caption">
        <h3>LA</h3>
        <p>Even though the traffic was a mess, we had the best time.</p>
      </div>
    </div>
  </div>

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

결과:

뉴욕

The atmosphere in New York is lorem ipsum.

시카고

Thank you, Chicago - A night we won't forget.

LA

Even though the traffic was a mess, we had the best time playing at Venice Beach!

Previous Next

Style The Carousel

Use CSS to style the carousel:

Example

.carousel-inner img {
  -webkit-filter: grayscale(90%);
  filter: grayscale(90%); /* make all photos black and white */
  width: 100%; /* Set width to 100% */
  margin: auto;
}

.carousel-caption h3 {
  color: #fff !important;
}

@media (max-width: 600px) {
  .carousel-caption {
    display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
  }
}

Result:

New York

The atmosphere in New York is lorem ipsum.

Chicago

Thank you, Chicago - A night we won't forget.

LA

Even though the traffic was a mess, we had the best time playing at Venice Beach!

Previous Next

Add Tour Container

Add a new container and add a list (.list-group and .list-group-item) inside of it.

Add a custom class (.bg-1) to the container (black background color) and some styles to its children:

Add Labels & Badges

Add a label (.label) and a badge (.badge) to highlight available tickets/sold out:

Add Thumbnail Images

Inside the Tour container, add three columns of equal width (.col-sm-4):

Inside each column, add an image.

Then, use the .img-thumbnail class to shape the image to a thumbnail.

Normally, you would add the .img-thumbnail class directly to the <img> element. In this example, we have placed a thumbnail container around the image, so that we can specify an image text as well.

Example

<div class="row text-center">
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="paris.jpg" alt="Paris">
      <p><strong>Paris</strong></p>
      <p>Fri. 27 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="newyork.jpg" alt="New York">
      <p><strong>New York</strong></p>
      <p>Sat. 28 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="thumbnail">
      <img src="sanfran.jpg" alt="San Francisco">
      <p><strong>San Francisco</strong></p>
      <p>Sun. 29 November 2015</p>
      <button class="btn">Buy Tickets</button>
    </div>
  </div>
</div>

Result:

Paris

Fri. 27 November 2015

Buy Tickets

New York

Sat. 28 November 2015

Buy Tickets

San Francisco

Sun. 29 November 2015

Buy Tickets

Style Lists, Thumbnails & Buttons

Use CSS to style the list and the thumbnail images. In our example, we have removed the rounded borders from the list and we have tried to make the thumbnail images like cards, by removing their border, and set a 100% width on each image.

We have also modified the default styles of Bootstrap's .btn class, to a black button:

Example

/* Remove rounded borders from list */
.list-group-item:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.list-group-item:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Remove border and add padding to thumbnails */
.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}

.thumbnail p {
  margin-top: 15px;
  color: #555;
}

/* Black buttons with extra padding and without rounded borders */
.btn {
  padding: 10px 20px;
  background-color: #333;
  color: #f1f1f1;
  border-radius: 0;
  transition: .2s;
}

/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
  border: 1px solid #333;
  background-color: #fff;
  color: #000;
}

Result:

• September Sold Out!
• October Sold Out!
• November 3

Paris

Fri. 27 November 2015

Buy Tickets

New York

Sat. 28 November 2015

Buy Tickets

San Francisco

Sun. 29 November 2015

Buy Tickets

Add a Modal

First, change all buttons inside the thumbnail from <button class="btn">Buy Tickets</button> to <button class="btn" data-toggle="modal" data-target="#myModal" >Buy Tickets</button>. These buttons are used to open the actual modal.

To create the modal, look at the following code:

Add Contact Container

Create a new container, with two columns of unequal width (.col-md-4 and .col-md-8).

Add informational icons with text inside the first column and form controls in the second:

Add Toggable Tabs

Add tabs (.nav nav-tabs) inside the contact container, with "quotes" from the band members:

Add Map/Location Image

Add a location image or a map (read our Google Maps Tutorial for google maps):

Example

<!-- Image of location/map -->
<img src="map.jpg" style="width:100%">

Result:

Add a Navbar

Add a navbar at the top of the page that collapses on smaller screens:

Style The Navbar

Use CSS to customize the navigation bar:

Add Scrollspy

Add scrollspy to automatically update navbar links when scrolling:

Add a Footer

1. Create a <footer> element and add some text.

2. Use CSS to style the footer.

3. Add an "Up Arrow" icon, which will take the user to the top of the page when clicked on.

4. Use jQuery to initialize the tooltip plugin:

Adding Smooth Scrolling

Use jQuery to add smooth scrolling (when clicking on the links in the navbar):

Final Touch

Personalize your Theme by adding a font that you like. We have used "Montserrat" and "Lato" from Google's Font Library.

Link to the font in the <head> section:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

Then you can use them in the page:

We have also added some extra style to some elements:

Complete "The Band" Theme