Membuat Layout Zigzag Responsive part 1

Setelah kemarin kita sempat membahas beberapa trik tentang menggunakan bootstrap, sekarang ini kita akan mencoba trik baru untuk membuat sebuah layout zigzag responsive menggunakan bootstrap.

Pada artikel sebelumnya kita sudah pernah membahas tentang cara membuat timeline sederhana dengan bootstrap 3

Bootstrap sendiri adalah framework responsive yang bisa dibilang menjadi salah satu yang paling banyak digunakan dalam membangun sebuah website. dengan banyak sekali fitur dan kemudahan yang diberikan dalam setiap kode yang dibuat pada bootstrap.

Baiklah teman teman, cara membuat layout zigzag bootstrap kita mulai dari menghubungkan file html dengan file javascript serta css bootstrap.

Selanjutnya kita akan membuat struktur html yang akan kita gunakan untuk membuat struktur layout zigzag responsive dengan bootstrap.

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/1" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step One</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/2" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step Two</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/3" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step Three</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li class="timeline-inverted">
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/4" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step Three</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/5" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Bonus Step</h4>
              <h4 class="subheading">Subtitle</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet,              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Dengan struktur diatas kita memanfaatkan struktur list UL dan LI pada bootstrap dan memberikan custom class dengan nama timeline, timeline-image, timeline-panel,dan timeline-body

Pada artikel selanjutnya kita akan bahas lebih lanjut mengenai penggunaan property CSS yang akan kita terapkan pada layout zigzag responsive dengan bootstrap ini.

Baiklah teman teman, demikian artikel kali ini yang membahas tentang layout zigzag responsive dengan bootstrap. Selanjutnya ada di Membuat Layout Zigzag Responsive Part 2.