Bootstrap Layout & Content (for beginner)[4real]"no clickbait"

Assalamualaikum....
What's up my readers..
Kali ini aku akan membantu kamu tentang membuat Bootstrap Layout & Content.

Mari kita awali dengan Layout dulu~~

Download Bootstrap
1. Download terlebih dahulu file Bootstrapnya, ada file .zip,
2. Abis tuh ada 2 folder di download-an bootstrap tadi. Copy-Paste folder tersebut ke dalam folder "asset" di program yg sedang di kerjakan.

After Download Bootstrap
Lalu copy-paste code CSS & JS pada Website Bootstrap tadi kedalam "index" yg kita buat sebelumnya. Hal ini dilakukan supaya code bootstrap nya dapat bekerja...
- CSS di Paste dibawah <head>
- JS di Paste dibawah <body>

SEKARANG KITA MASUK KE CONTENT....

1. META VIEW PORT
Berfungsi sebagai ""instruktur" browser untuk melakukan perubahan skala pada dimensi layar
browser. Nama kerennya "responsive", berikut script meta viewport.


2. NAVIGATION BAR
Kolom navigasi untuk pindah-pindah ke laman lain.
saya menggunakan salah 1 kode navbar dari website Bootstrap, dan ini lah hasilnya

codenya : 
<nav class="navbar navbar-light" style="background-color: #FA8072;">
<a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button> 


PS: untuk background-color dapat diganti(Klik untuk Code Warna CSS)


Berikut adalah kode Navbar lengkap dengan isinya : 
<nav class="navbar navbar-light" style="background-color: #FA8072;">
<a class="navbar-brand" href="#">Menu</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
Dan hasilnya seperti ini :
3. Carousel
Carousel sebuah script untuk menampilkan gambar yang dapat berganti-ganti, tujuan untuk memperindah tampilan website kita.
Carousel yang saya gunakan adalah Carousel dengan indikator agar mempermudah untuk next dan berikut adalah kodenya :




<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

 Dan ini adalah hasilnya :
 Bisa dilihat kalau terdapat 3 kotak yg saya lingkari. Itu berfungsi sebagai tombol next. Kamu bisa menambah banyak gambar dengan cukup meng Copy-Paste kode: 
 <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div> 
 Untuk mengganti gambar, gunakan code src=".../800x400?. Pastikan input code sesuai dengan lokasi penyimpanan gambar.
 
4. Card
Hampir sama seperti Carousel, Tetapi bedanya dia lebih kecil dan tak bergerak.
Berikut adalah script saya:
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="img/t shirt 1.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Encore Gold Standart Tees</h5>
    <p class="card-text">Colors: BLACK </p>
 <p class="card-text">Size:S, M, L, XL</p>
 <p class="card-text">Rp. 150.000.- </p>
    <a href="#" class="btn btn-primary">Buy Now</a>
  </div> 
 
Letakkan code ini dibawah </body>.jangan lupa untuk merubah src="image/mesjid2.png" menjadi lokasi tempat gambar teman-teman jangan lupa format gambarnya dan 
jangan lupa merubah judul dan deskripsi cardnya, jika teman-teman ingin 
merapihkan agar ada jarak antara konten dengan komponen lainnya bisa 
menggunakan perintah <br> atau <hr> sebelum atau sesudah konten.

Maka tampilannya akan menjadi seperti ini :

 OK begitu lah tutorial dari saya. Semoga Bermanfaat 😁✌ 
WASSALAMUALAIKUM~~~ 

Komentar

Posting Komentar

Postingan populer dari blog ini

ERD Usaha Kecil Mandiri (WakJek)

Gambar
ERD USAHA KECIL MENENGAH BAB I Kata Pengantar Puji syukur kehadirat Allah SWT atas rahmat serta petunjuknya. sehingga kami dapat mengisi pada halaman blogger ini untuk dijadikan sebagai sarana ajang ide-ide kreatif , ilmu pengetahuan, informasi dan lain sebagainnya. blogger ini adalah  tugas mata kuliah basis data yang bejudul " ERD Usaha Kecil Menengah" makalah ini saya buat sebagai kewajiban untuk memenuhi tugas. Tidak lupa Kami ucapkan terima kasih yang sebesar-besar nya kepada dosen Kami, Bpk.Muhammad Ropianto.S.kom, M,kom atas pengarahan mata kuliah dan tugas yang diberikan. Akhirnya saran dan kritik pembaca yang dimaksud untuk mewujudkan kesempurnaan makalah ini penulis sangat hargai. Batam, 23 Mei 2017 Penulis BAB II Pembahasan 1.        Pengertian Wakjek WakJek     adalah penyedia layanan ojek online pertama di Batam. Wakjek bermitra dengan puluhan pengendara ojek lokal guna menyediakan layanan oje...
Full Version »

Simple Tag HTML (Hyperlink, Table, List & Image)

Gambar
STRUKTUR HTML TAG TITLE HEADING TEXT GAMBAR 1. Buat Folder "img" didalam folder "asset", 2. Masukan gambar dalam folder "img", 3. masukan Code Sesuai dengan nama gambar, 4. Hasil dari kode yg di input. HYPERLINK 1. Masukan Code untuk menampilkan link kita, 2. Jika muncul seperti digambar, coba clik link nya, 3. Link yg di input Berhasil di tampilkan . ORDERED LIST Mengurutkan urutan secara berurut. UNORDERED LIST Hampir Sama seperti ordered list, bedanya hanya ini tidak memakai angka . TABLE Demikian yang saya sampaikan. Semoga Bermanfaat😉
Full Version »