Welcome!

I am Omah Pemrograman Web Designer Web Aplication

View Work Hire Me!

About Me

Web Design
IT Aplication
Digital Marketing
Who am i

Omah Pemrograman.

Professional Web Designer

Omah Pemrograman.

Omah Pemrograman Merupakan situs yang membahas tentang materi, tutorail Pemrograman, baik Pemrograman Web, Web Design, Web Aplication, IT Aplication, Designer, IT Network, dan Digital Marketing.

Services

Web Design

Materi dan Tutorial Tentang Web Design

IT Aplication

Materi dan Tutorial Tentang IT Aplication

IT Network

Materi dan Tutorial Tentang IT Network

Marketing

Materi dan Tutorial Tentang Digital Marketing

Our Blog

Tampilkan postingan dengan label Web Design. Tampilkan semua postingan
Tampilkan postingan dengan label Web Design. Tampilkan semua postingan

Cara membuat website dengan Bootstrat 5

Apa itu Bootstrap?
Bootstrap adalah framework CSS yang digunakan khusus untuk pengembangan front-end website. Framework ini mempunyai nama asli Twitter Blueprint. Ada kata ‘Twitter’ karena pada awalnya dikembangkan untuk sosial media Twitter yang sangat terkenal saat ini dengan pengguna hampir 326 juta orang.
Sebelum Bootstrap muncul, sudah ada framework lain yang tersedia. Namun tingkat konsistensi dalam proses pengembangan buruk dan butuh biaya perawatan mahal. Dengan adanya khasus ini, akhirnya para Developer menemukan Bootstrap yang berbeda dengan framework sebelumnya karena lebih konsisten dan lebih sederhana. 
Bootstrap adalah salah saatu frameework yang memungkinkan developer dapat mengembangkan website dengan mudah dan cepat. Developer hanya perlu memanggil class tertentu untuk membuat tombol, panel, tabel, pesan peringatan, dan lain sebagainya.
Untuk memulai dan lebih jelasnya silahkan kunjungi situs resminya Disini


Langsung Kita Mulai saja cara penggunaannya.

Instalasi Secara Online
    Maksud dari instalasi secara online adalah menguhubungkan tag HTML dan bootsrtat dengan cara online, jadi kita tidak perlu download bootstrap yang akan kita gunakan.

1. Pertama buka web server, Disini menggunakan XAMPP bagi yang menggunakan web server lain bisa menyesuaikan. Kemudian jalankan Apachenya.


2. Buat Folder baru Di C:\xampp\htdocs dengan nama bootstrap.


3. kemudian buat file baru didalam folder bootstrap dengan nama index.html (File berekstensi .html) atau lebih tepatnya seperti ini 
4. Selanjutnya edit file index.html dengan text editor yang anda miliki. setalah itu buka bootsrtap di situs resminya klik disini  , dan pilih menu Get started.
5. Pilih menu Startter Template kemudian copy script yang ada di dalamnya dengan cara klik menu copy.
6. Selanjutnya paste script yang sudah di copy tadi kedalam file index.html tadi atau bisa copy di bawah ini.

<!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>Belajar Bootstrap</title>
  </head>
  <body>
    <h1>Belajar Bootstrap Online</h1>

    <!-- 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>


7. Selanjutnya buka browser anda untuk menjakankan hasilnya ketikkan localhost/bootstrap pada kolom URL Browser anda, jika sukses hasilnya seperti ini. 
Keterangan:  
tag <meta name="viewport" content="width=device-width, initial-scale=1"> digunakan untuk membuat responsive meta tag.
tag  <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"Digunakan untuk menghubungkan CSS bootstrap 5 secara online.
Sekian tutorial dari Omah Pemrpgraman Semoga bermanfaat bagi kita semua. terimakasih. 

Contact Us

Phone :

0895386051606

Address :

Kecamatan Kedung
Kab. Jepara

Email :

Belajarpemrograman4@gmail.com