Breaking News

Belajar Bootstrap

Januari 19, 2018
A.    Judul
Membuat Halaman Web Pertama Dengan Bootstrap

B.    Pendahuluan
Kali ini saya akan memposting apa yang saya lakukan dalam mempelajari Bootstrap kali ini. Sebelumnya saya sngat bingung sekali mempraktikan bootstrap pertama kali tapi lama kelamaan saya tidak sabar karena saat saya mencoba terus menerus tapi hasil tampilannya tidak sesuai lalu saya bertanya kepada teman saya dan ternyata setelah saya tahu tenyata bootstrap itu lumayan mudah bagi saya. Langsung saja ya….

1.     Pengertian
Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan mudah.

2.    Latar belakang dan batasan permasalahan
Saya mempelajari bootstrap karena saya ingin bisa membuat suatu web yang baik dan menarik.

3.    Maksud dan tujuan
Ingin bisa mempraktikan dan membuat web yang rapid an menarik.

4.    Hasil yang diharapkan
Web yang dapat diminati banyak orang dan bermanfaat bagi banyak orang.

C.     Alat dan Bahan
1.       Laptop
2.       File Items
3.       Text Editor

4.       Browser 
. Hasil yang didapatkan
1.       Bootstrap Grids
Sistem grid Bootstrap memungkinkan hingga 12 kolom di seluruh halaman. Jika anda tidak ingin menggunakan semua 12 kolom secara terpisah, anda dapat mengelompokkan kolom bersama-sama untuk membuat kolom yang lebih luas :
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 1
Rentang 4
Rentang 4
Rentang 4
Rentang 4
Rentang 8
Rentang 6
Rentang 6
Rentang 12
System grid Bootstrap responsive, dan kolom akan diatur ulang secara otomatis tergantung pada ukuran layar.
KELAS KISI
Sistem grid Bootstrap memiliki empat kelas :
1)      xs (untuk ponsel – layar kurang dari 768px lebar)
2)      sm (untuk layar tablet sama dengan atau lebih besar dari 768px)
3)      md (untuk laptop kecil – layar berukuran sama dengan atau lebih besar dari lebar 992px)
4)      lg (untuk laptop dan desktop – layar sama dengan atau lebih besar dari lebar 1200px)
kelas di atas dapat dikombinasikan untuk menciptakan layout yang lebih dinamis dan fleksibel.
STRUKTUR DASAR DARI SEBUAH BOOTSTRAP GRID
Berikut ini adalah struktur dasar dari sebuah kotak Bootstrap:
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>
Pertama; buat baris (<div class=”row”>). Kemudian, tambahkan jumlah kolom yang diinginkan (tag dengan kelas .col-*-* ).
Perhatikan bahwa angka dalam .col-*-* harus selalu menambahkan kingga 12 untuk setiap baris.
Di bawah ini contoh layout grid Bootstrap dasar :
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="../../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="../../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

</body>
</html>

Hasilnya seperti ini :
2.       Text /  Tipografi Bootstrap
Setelan Default Bootstrap
Ukuran huruf default global Bootstrap adalah 14px, dengan garis-tinggi 1,428.
Ini diterapkan pada elemen <body> dan semua paragraph (<p>).
Selain itu, semua elemen <p> memiliki margin bawah yang sama dengan setengah tinggi baris yang dihitung (10px secara default).
BOOTSTRAP VS DEFAULT BROWSER
Dalam bab ini, kita akan melihat beberapa elemen HTML yang akan ditata sedikit berbeda dengan bootstrap daripada default browser.
<h1>-<h6>
Secara default, Bootstrap akan menata judul HTML (<h1> ke <h6>) dangan cara berikut :
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
  <div class="container">
     <h1>h1 Bootstrap heading (36px)</h1>
     <h2>h2 Bootstrap heading (30px)</h2>
     <h3>h3 Bootstrap heading (24px)</h3>
     <h4>h4 Bootstrap heading (18px)</h4>
     <h5>h5 Bootstrap heading (14px)</h5>
     <h6>h6 Bootstrap heading (12px)</h6>
</div>

  </body>
</html>
Hasilnya:
    

D.   Referensi
1.       https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://www.w3schools.com/bootstrap/bootstrap_tables.asp&usg=ALkJrhjkKtMgX0z1NosCnsiTxkqiqWKLvw
https://translate.googleusercontent.com/translate_c?depth=1&hl=id&prev=search&rurl=translate.google.co.id&sl=en&sp=nmt4&u=https://www.w3schools.com/bootstrap/bootstrap_typography.asp&usg=ALkJrhgoXmR0bm_BjBS8FlaeFneL4vuSRw

Tidak ada komentar

Langganan: Posting Komentar ( Atom )