Cara Membuat Scrollspy Menggunakan Bootstrap 4
Di hakekatnya program di sajikan atau dibangun semenarik mungkin, bagi mempermudah dan menolong profesi manusia menjadi lebih bagus, di tampilan atau sisi dari user interface betul-betul berpengaruh pada merancang sebuah desain, desain ini akan betul-betul mahal bila dipoles dengan sentuhan yang telah di risetkan dan direncanakan sebaik mungkin, nah di pembahasan kita kali ini saya akan membahas mengenai Bagaimana Cara Membuat Scrollspy Menggunakan Bootstrap 4
scrollspy atau merancang halaman blog menjadi minim,kenapa minim karena di pembahasannya hanya menggunakan 1 halaman saja, tak memakan banyak halaman, menarik, bagi kita coba, oke seketika saja saya akan praktekan, teman-teman dapat salinkan scriptnya dibawah sini :
<body data-spy=scroll>
<nav class=navbar navbar-expand-lg navbar-light bg-danger fixed-top>
<div class=container>
<a class=navbar-brand href=#>Navbar</a>
<button class=navbar-toggler type=button data-toggle=collapse data-target=#navbarNavDropdown aria-controls=navbarNavDropdown aria-expanded=false aria-label=Toggle navigation>
<span class=navbar-toggler-icon></span>
</button>
<div class=collapse navbar-collapse id=navbarNavDropdown>
<ul class=navbar-nav>
<li class=nav-item>
<a class=nav-link href=#satu> Pertama-tama <span class=sr-only>(current)</span></a>
</li>
<li class=nav-item>
<a class=nav-link href=#dua>Kedua</a>
</li>
<li class=nav-item>
<a class=nav-link href=#tiga>Ketiga</a>
</li>
<li class=nav-item>
<a class=nav-link href=#empat>Keempat</a>
</li>
</ul>
</div>
</div>
</nav>
<div class=container style=margin-top: 80px>
<div class=row>
<div class=col-md-12>
<div data-spy=scroll data-target=#navbar-example2 data-offset=0>
<div class=satu>
<h1 id=satu>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam quam quis deserunt molestiae. Temporibus at architecto expedita inventore animi quo, amet iure molestias magnam, quia quisquam ullam non molestiae eveniet!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur accusamus odio, optio, commodi minima quibusdam accusantium magni a ex placeat eius laborum totam, quisquam illum alias quam numquam dicta. Iste.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
<div class=dua>
<h1 id=dua>Lorem ipsum dolor sit amet Dua</h1>
<p>consectetur adipisicing elit. Assumenda eligendi, maiores odio officiis dignissimos similique quia. Ut architecto porro reiciendis doloremque, earum maxime quae soluta, natus cum dolore, dolores eius?Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
<div class=tiga>
<h1 id=tiga>Lorem ipsum dolor sit ametTiga</h1>
<p>consectetur adipisicing elit. Iusto tempore eius, eligendi aperiam quasi voluptate, ipsum eveniet et, nam doloremque nulla odio dolorum deserunt ex, rem possimus mollitia fugit. Eligendi!Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
<div class=empat>
<h1 id=empat>Lorem ipsum dolor sit amet Empat</h1>
<p>consectetur adipisicing elit. Quam, illum maiores est nostrum, alias sed quia numquam rem aliquid, recusandae et natus optio. Consectetur ducimus alias tempore, praesentium a explicabo.Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nemo, architecto soluta possimus asperiores sed eius at dolorum illo, provident natus assumenda tempora nulla. Repudiandae cumque obcaecati, in magni quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed molestiae nobis atque aut ad, id, facilis hic culpa inventore maiores veritatis animi architecto eius deleniti esse beatae. Doloremque inventore, harum.</p>
</div>
</div>
</div>
</div>
</div>
Seandainya telah coba save dan jalankan, lumayan gampang bukan, sekianlah panduan mengenai Cara Membuat Scrollspy Menggunakan Bootstrap 4, hingga bertemu diartikel berikutnya dan hingga jumpa.
#KeepLearn
#IsmetMA
Sumber https://kursuswebsite.org
