Al Ikhlas

1. Katakanlah : Dia-lah Allah, Yang Maha Esa 2. Allah adalah Tuhan yang bergantung kepada-Nya segala sesuatu 3. Dia tiada beranak dan tidak pula diperanakkan 4. Dan tidak ada seorangpun yang setara dengan Dia (Al-Qur'an Surat Al-Ikhlas 112)
Tampilkan postingan dengan label Html. Tampilkan semua postingan
Tampilkan postingan dengan label Html. Tampilkan semua postingan

Senin, 03 April 2017

Sistem Grid Pada Bootstrap

Bootstrap memiliki sistem grid yang membagi satu halaman menjadi 12 kolom, jadi lebar halaman dari kiri kekanan di bagi menjadi 12 kolom.
jika tidak ingin menggunakan semua 12 kolom secara satu persatu, kita bisa mengabungkannya, membuat grup kolom sesuai dengan yang kita inginkan dengan jumlah kolom tetap yaitu 12.
untuk lebih jelasnya mengenai sistem grid di bootstrap lihat gambar berikut :


Gbr : sistem grid di Bootstrap.


Sistem grid yang dimiliki bootsrap ini responsive dimana kolomnya akan mengatur dan menyesuaikan dengan lebar ukuran layar perangkat yang di gunakan.

Bootstrap memiliki 4 grid class sebagai berikut :
1. xs (untuk hp)
2. sm (untuk tablet)
3. md (untuk desktop)
4. lg (untuk lebih besar dari desktop)

Adapun struktur sistem grid di bootstrap adalah seperti berikut ini :
kode : Contoh Sistem Grid Pada Bootstrap
 <!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="css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
 <div class="row" align=center>
    <div class="col-sm-1" style="background-color:blueviolet;">1</div>
    <div class="col-sm-1" style="background-color:aqua;">1</div>
    <div class="col-sm-1" style="background-color:blueviolet;">1</div>
    <div class="col-sm-1" style="background-color:aqua;">1</div>
    <div class="col-sm-1" style="background-color:blueviolet;">1</div>
    <div class="col-sm-1" style="background-color:aqua;">1</div>
    <div class="col-sm-1" style="background-color:blueviolet;">1</div>
    <div class="col-sm-1" style="background-color:aqua;">1</div>
    <div class="col-sm-1" style="background-color:blueviolet;">1</div>
    <div class="col-sm-1" style="background-color:aqua;">1</div>
    <div class="col-sm-1" style="background-color:blueviolet;">1</div>
    <div class="col-sm-1" style="background-color:aqua;">1</div>
  </div>
<hr>
  <div class="row" align=center>
    <div class="col-sm-4" style="background-color:aqua;">4</div>
    <div class="col-sm-4" style="background-color:aquamarine;">4</div>
    <div class="col-sm-4" style="background-color:aliceblue;">4</div>
  </div>
<hr>
<div class="row" align=center>
    <div class="col-sm-4" style="background-color:aquamarine;">4</div>
    <div class="col-sm-8" style="background-color:aqua;">8</div>
  </div>
</div>
 </body>
</html>

berikut hasilnya :


Gbr : sistem grid pada Bootstrap.


keterangan : sistem grid pada bootstrap  dibuat dengan sebuah baris : <div class="row">, lalu tambahkan beberapa kolom sesuai yang kita inginkan : <div class="col-*-*"> , angka di dalam kelas .col-*-* harus berjumlah 12 di setiap class="row".

oke sekian tentang Sistem Grid Pada Bootstrap, semoga bermanfaat.
Baca Selengkapnya »
Diposting oleh di
Label: , , ,

Minggu, 19 Maret 2017

tutorial belajar bootstrap - pengenalan bootstrap - bootstrap container

Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.
Bootstrap menyediakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.
dimana dengan menggukan botstrap kita dapat dengan mudah membuat responsive website.
apa responsive website? responsive website adalah website yang secara otomatis menyesuaikan agar terlihat bagus pada setiap perangkat yang mengaksesnya, dari yang kecil seperti HP sampai desktop.

sejarahnya bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan di kenalkan sebagai open source product pada bulan agustus tahun 2011 di GitHub.
untuk mendapatkan Bootstrap dapat di download dari getbootstrap.com

file bootstrap terdiri dari file css, javascript dan fonts, kita bisa menggunakannya dengan cara meletakannya di folder project kita, di server lokal kalau menggunakan xampp di letakan di folder xampp >> htdocs, dan kita bisa juga meletakannya di web hosting kita.

jika kita tidak ingin download dan menggunakan file bootstrap di webserver kita sendiri, kita bisa menggunakannya melalui CDN (Content Delivery Network).
MaxCDN menyediakan CDN yang mendukung bootstrap.

MaxCDN 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


Keuntungan menggunakan bootstrap CDN adalah banyak pengguna sudah mendownload bootsrap dari MaxCDN ketika mengunjungi website yang lain jadi itu akan dimuat dari cache ketika mengunjungi website kita yang mana ini membuat loading lebih cepat.

Containers.
Bootstrap membutuhkan container sebagai wadah untuk menampung kontent website.
ada 2 class containers yang di gunakan di bootstrap.
1. .container
2. .container-fluid

perbedaannya adalah jika menggunakan .container class kontent web yang di dalamnya di sesuaikan dengan lebar container.
jika menggunakan .container-fluid class maka content web yang di dalamnya memenuhi lebar layar device.
berikut contoh nya :

Contoh Code :
<!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="css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h4>menggunakan bootstrap .container</h4>
  <p>Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.Bootstrap menye diakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.</p>          
</div>
<hr>
<div class="container-fluid">
  <h4>menggunakan bootstrap .container-fluid</h4>
  <p>Bootstrap adalah HTML, CSS dan Javascript Framwork yang paling terkenal dalam mengembangkan responsive website, Bootstrap dapat di download dan di gunakan secara bebas.Bootstrap menye diakan html dan css design template untuk typography, forms, buttons, tables, navigation, modals, image carousels dan lainnya termasuk javascript.
</p>
</div>
</body>
</html>

dan hasilnya seperti gambar di bawah ini, klik untuk memperjelas gambar :



dan berikut contoh web sederhana menggunakan bootstrap : www.rahadikusuma.cf
Semoga Bermanfaat....!!
Baca Selengkapnya »
Diposting oleh di
Label: , , , ,