Bootstrap: Penempatan Javascript Booststrap dan jquery

Bootstrap Scrollspy

Assalamualaikum Wr.Wb

1.pendahuluan sekaligus penjelasan
Lagi - lagi bootstrap dan kali ini saya akan membahas Scrollspy,yaitu misalkan kita mempunyai navbar dan bila kita klik salah satu menu dari navbar tersebut kita bisa langsung menuju isi menu tanpa berpindah halaman,ini prinsipnya hampir sama dengan Name Anchor.Baiklah dari pada pusing - pusing karna saya juga bingung mau menjelaskan yang bagaimana lagi mari kita mulai hehe.

2.Alat dan Bahan

Pc atau Laptop
file bootsrap
sublime text
browser

3.langkah pembuatan

masukkan scrip untuk memanggil bootstrap

tuliskan scrip di antara <head> dan </head>

Buat stylenya agar lebih menarik

tuliskan scrip style di antara <head> dan </head>

Lalu kita buat scrollspy ini saya terapkan pada navbar

Dan hasilnya seperti berikut

Setelah menu lain di klik maka akan berpindah konten tanpa berpinda halaman

Menu Dropdown

Setelah Dropdown di klik

Jika di lihat dari dari mode responsive

4.penjelasan
Itu tadi sedikit mengenai bootstrap scrollspy semoga bermanfaat walaupun mungkin penjelasan saya masih belum mudah untuk di pahami untuk itu mohon maaf atas kekurangannya,terimakasih sudah berkunjung sampai jumpa di postingan berikutnya.

5.Referensi:

http://w3schools.com/

Wassalamualaikum Wr.Wb

0Comments

, by ahmad fiqih zakaria XI

Bootstrap Carousel

Assalamualaikum Wr.Wb

Apa itu Carousel? Carousel ini merupakan semacam tampilan slide show pada tampilan web yang telah di sediakan Bootstrap selain tampilannya lumayan menarik kita juga tidak perlu repot - repot membuat stylenya.Siapkan beberapa gambar yang akan kita masukkan dalam carousel dan jangan lupa downoad dulu bootstrapnya.

Dan inilah hasilnya, gambar akan berubah seperti slide pada umumnya dan jangan lupa gambar harus jadi satu folder dengan file yang scripnya sudah saya cantumkan di atas simpan dengan fomat .html

Oke itu tadi mengenai carousel dengan bootstrap semoga bermanfaat terima kasih sudah berkunjung sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

0Comments

, by ahmad fiqih zakaria XI

Bootsrap Navbar Part 2

Assalamualaikum Wr.Wb

Mari kita lanjutkan postingan sebelumnya tentang Bootstrap Navbar,baiklah ayo kita mulai yang belum baca part 1 silahkan baca di sini.

Navbar Button

Ini merupakan navbar yang di lengkapi dengan button

Dan inilah hasilnya

Navbar Forms

Navbar ini di lengkapi dengan form misalnya kita ingin membuat fitur pencarian maka tampilannya bisa menggunakan navbar forms ini

Dan inilah hasilnya

Navbar Fixed Top(Atas)

Yang di maksud fixed yaitu saat kita melakukan scrolling maka navbar masih tetap ada dan tidak ikut scrolling,lebih jelasnya mari kita buktikan

Dan hasilnya seperti ini

Navbar Fixed Bottom(Bawah)

Navbar ini prinsipnya sama dengan yang di atasa yang berbeda hanya letaknya yang fixed di bawah tinggal ubah navbar-fixed-top menjadi navbar-fixed-bottom

Maka hasilnya akan seperti gambar di bawah ini

Akhirnya tuntas juga mengenai navbar dengan bootstrap ini,dan mungkin cukup sekian postingan kali ini semoga bermanfaat sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

0Comments

, by ahmad fiqih zakaria XI

Bootstrap Navbar Part 1

Assalamualaikum Wr.Wb

Berjumpa lagi dengan bootstrap kali ini saya akan membahas navbar bootstrap,namanya juga navbar pasti sudah banyak yang tahu bukan?tetapi membuat navbar bootstrap menurut saya lebih mudah karena lagi - lagi sudah tersedia style untuk membuat navbar sehingga membuat navbar menjadi lebih mudah,cepat dan hasilnya menurut saya cukup bagus,baiklah mari kita mulai

Navigation bar

Pada bootstrap, style navbar ini memiliki style yang sederhana

Dan inilah hasilnya

Inverted Navigation Bar

Navbar ini hampir sama dengan navbar yang di atas yang membedakan hanya warnanya saja

Dan inilah hasilnya

Navigation Bar Dropdown

Yaitu navbar yang di lengkapi dengan dropdown

Dan ini hasilnya

Right Aligned Navigation Bar

Ini di gunakan untuk membuat menu pada navbar tetapi dengan letak di sebelah kanan

Dan inilah hasilnya

Oke sebenarnya masih ada beberapa macam navbar, tetapi karena postingannya sudah cukup panjang maka akan saya sambung di postingan berikutnya,sekian sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb

0Comments

, by ahmad fiqih zakaria XI

Pages

Rizqi_Riefa (Jangan Malas Buat Mencari Ilmu Allah Di Dunia Maupun Di Akhirat)

Bootstrap: Penempatan Javascript Booststrap dan jquery

Bootstrap Scrollspy

Bootstrap Carousel

Bootsrap Navbar Part 2

Assalamualaikum Wr.Wb

Bootstrap Navbar Part 1

Assalamualaikum Wr.Wb

Cari pahala

Mumpung Berkah

About me

Blog Archive

Popular Posts

Like us on Facebook

Flickr Images

Pages

Rizqi_Riefa (Jangan Malas Buat Mencari Ilmu Allah Di Dunia Maupun Di Akhirat)

Bootstrap: Penempatan Javascript Booststrap dan jquery

Bootstrap Scrollspy

Bootstrap Carousel

Bootsrap Navbar Part 2

Bootstrap Navbar Part 1

Cari pahala

Mumpung Berkah

About me

Blog Archive

Popular Posts

Like us on Facebook

Flickr Images

Subscribe