ASSALAMUALAIKUM WR .WB

NAMA:RETNA SARI

Belajar Membuat Template Web Menggunakan Bootstrap

Apa itu bootstrap ?

Bootstrap adalah front-end framework atau framework css yang sengaja dibangun untuk memudahkan pendesain web dalam membuat website atau membuat template website. Framework yang dulu pernah dikenal dengan twitter bootstrap ini dilengkapi dengan komponen-komponen website yang sering digunakan seperti breadcrumb, pagination, modal dialog, navigation bar dan lain-lain yang sangat memudahkan pendesain web saat membuat webiste, bahkan bootstrap ini selalu diunggul-unggulkan dengan fitur website responsive-nya yang memungkinkan kita cukup membuat satu template website saja dan kita bisa memperoleh template yang bisa dibuka atau kompatibel diberbagai device (laptop, handphone, atau tablet).

Cara Install Bootstrap Secara Offline

1. Untuk install/menggunakan bootstrap secara offline kalian memerlukan file dari bootstrap. Untuk mendownloadnya silahkan klik link Download Bootstrap 4.3.1 ZIP

2. Ekstrak file .zip yang telah di download di folder index/project kalian.


3. Panggil file bootstrap di project kalian di bagian <head>(seperti memanggil file css)



<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">


Nah, mulai sekarang kalian bisa dengan mudah menggunakan fitur-fitur dari bootstrap secara offline atau tanpa jaringan internet. Tapi perlu diingat bahwa file bootstrap yang telah kalian instal tidak termasuk file JavaScript dan JQuery. Tapi, dengan file css nya saja pun, kalian sudah bisa melakukan banyak hal ribet dengan simpel yang berkaitan dengan css menggunakan Bootstrap. Karena banyak programmer yang menggunakan Bootstrap didalam project yang mereka buat.

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Bootstrap CSS -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


    <title>Hello, world!</title>

  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

      <ul class="navbar-nav">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Features</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Pricing</a>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

        </li>

      </ul>

    </div>

  </div>

</nav>


    <!-- Optional JavaScript; choose one of the two! -->


    <!-- Option 1: Bootstrap Bundle with Popper -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

    -->

  </body>

</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

cara membuat laporan

Gambar
  ASALAMUALAIKUM WR.W B CARA MEMBUAT LAPORAN DENGAN MICROSOFT WORD nama :retna sari  cara membut laporan prakerin ada beberapa langkah: 1.tata cara penulisan  jenis huruf  naskah di ketik melalui komputer dengan font times new roman  dengan ukuran 12 poin dengan warna hitam .untuk seluruh naskah memakai huruf yang sama 2. jarak antara spasi  jarak antara dua baris di buat 1,5 spasi   3 batas tepi  batas batas pengetikan di tinjau dari tepi kertas di atur sebagai beriikut : tepi atas:3 cm tepi bawah:4cm  tepi kiri:4 cm tepi kanan:3cm 4.penulisan judul  judul harus di tulis dengan huruf besar ( kapital )di cetak tebal ( blold) sub judul anak sub judul dan seterusnya ditulis di tepi kiri semua kata di mulai dari huruf besar.  berikut contoh nya sekian dari saya terimakasih  
Baca selengkapnya

cara mendownload xammpp

ASSALAMUALAIKUM WR.WB NAMA:RETNA SARI CARA MENDOWNLOAD XAMMPP dengan langkah langkah sebagai berikut: XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri sendiri, yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP . 1.buka chrome 2.klik download xammp 3 . cari souceforget net /5.6.3 4 . Selanjutnya Anda akan diminta untuk memilih aplikasi yang mau diinstal. 5.Tunggu beberapa menit hingga proses instalasi selesai Cara menjalankan xammp Bukalah aplikasi XAMPP, bisa melalui “Start Menu” atau “Desktop” ,  dan klik icon XAMPP. Atau, jika Anda membukanya begitu proses instalasi selesai maka klik “Yes”  seperti yang terlihat pada gambar di atas. Setelah terbuka, silahkan klik tombol “Start” pada kolom “Action” sehingga tombol tersebut berubah menjadi “Stop” .  Dengan mengklik tombol tersebut, art...
Baca selengkapnya

Bersih bersih leb komputer (Senin 22/3/2021)

Gambar
  Assalamualaikum wr.wb Retna sari Bersih bersih leb komputer Kebersihan  adalah keadaan bebas dari kotoran, termasuk di antaranya, debu, sampah, dan bau. Di zaman modern, setelah Louis Pasteur menemukan proses penularan penyakit atau infeksi disebabkan oleh mikrob,  kebersihan  juga bererti bebas dari virus, bakteria patogen, dan bahan kimia berbahaya. Perawatan lab komputer terdiri dari dari beberapa macam yakni : perawatan perangkat keras, perawatan perangkat lunak, perawatan jaringan komputer lab, perawatan ruangan, perawatan jaringan listik serta perawatan pendingin ruangan Sekian dari saya terimakasih Wassalamu'alaikum wr.wb
Baca selengkapnya