Belajar Bootstrap

Friday, November 6, 2015

Grid dan Layout

Posted by Unknown, on 9:17 PM
Pengertian Grid System

Grid adalah struktur dua dimensi yang terdiri dari sumbu horisontal dan sumbu vertikal sehingga akan tersusun kolom dan baris. sistem grid pada awalnya digunakan dalam dunia desain percetakan.

Dalam dunia web Grid sangat efektif untuk menghasilakn layout yang tetap menggunakan HTML dan CSS, sehingga dalam desain web sistem grid adalah komponen yang sangat penting.

bootstrap memiliki sistem grid tersendiri yang merupakan sistem grid variasi dari 960 grid sistem, yang memiliki lebar grid 940px dan kolom maksimal 12 kolom pada lebar layar dekstop.

kelibahan dari sistem grid pada bootstrap antara lain, memiliki sintaks yang sederhana dan mempunyai fitur responsive, yang berarti layout yang dibuat dengan bootstrap dapat beradaptasi terhadap ukuran laya mobie devices mulai dari komputer, tablet maupun heandphone

Dasar Gird

Untuk membuat baris horisontal Bootstrap menggunakan kelas CSS.row dan untuk membuat kolom menggunakan CSS.spanx, untuk nilai x menunjukan banyaknya jumlah kolom yang akan ditampilkan misal, span1 makan akan menghasilkan 12 kolom, lalu span2 akan menghasilkan 6 kolom dan seterusnya.
grid+bootstrap
Dasar grid pada bootstrap





<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.css" rel="stylesheet"/>
<title>Belajar Bootstrap</title>
</head>
<div class="container-fluid">
  <h1>Belajar Membuat Grid!</h1>
  <p>contoh membuat kolum pada bootstrap</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:#00CC33"> Belajar membuat kolom 1 </div>
 <div class="col-sm-4" style="background-color:#FF0000"> Belajar membuat kolom 2 </div>
 <div class="col-sm-4" style="background-color:#0000FF"> Belajar membuat kolom 3 </div>
</div>
<body>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>







</pre>   









Hasilnya seperti ini 







membuat+grid+bootstrap











semoga dapat menambah wawasan rekan-rekan semua



























                            

                          

                          

                        



Wednesday, November 4, 2015




                          

                        
















Mengenal Bootstrap







                            Posted by 

Unknown, 
                            



                            on 

4:59 PM

























pengertian bootstrap





Pengertian Bootsrap



Boostrap
 adalah sebuah framework ataupun sebuah toll yang digunakan untuk 
membuat aplikasi  atau website yang responsive secara cepat, mudah, dan 
gratis.











Bootstrap memiliki CSS dan HTML untuk mengahsilkan Grid, Layout, Typograp, Tabel, Form Navigation serta yang lainnya yang merupakan elemen  dalam pembuatan website.Boostrap Sendiri Sudah memiliki jQuery yaitu sebuah plugin yang digunakan untuk menghasilkan komponen UI untuk mempercantik Modal, Dropdown, Scrollspy, Tooltip, Tab, Popover, Alert, Button dan lain-lainya.







Dengan menggunak Bootstrap kita dapat membuat sebuah website yang responsive mudah dengan cepat dan dapat berjalan di bebagai jenis browser.







Struktur File Bootstrap



Pertama-tama kita harus mendownload bootstrap terlebih dahalu untuk mengetahui struktur file yang terdapat didalam bootstrap. Bootstrap dapat didownload melalui situs http://getbootstrap.com/ 





pengertian bootstrap









kilik tombol Download Bootstrap kemuad simpan, setelah itu ekstrap file yang barusan didownload. maka akan terdapat tiga buah folder  yang ada dalam bootstrap yaitu :


    

  • CSS
    • 

  • font
    • 

  • js
    • 




Didalam folder CSS terdapat 6 File yaitu


    

  1. bootstrap.css adalah file css yang biasanya digunakan untuk development, karena merupakan disusun sedemikian rupa agar mudah dibaca dan terdapat banyak comment atau penjelan masing-masing perintah.
    2. 

  2. bootstrap.min.css adalah file css yang biasanya digunakan dalam production, karena sudah dikompres agar ukurannya berukuran lebih kecil.
    3. 

  3. bootstrap-theme.css adalah file css yang merupakan theme atau tema dari bootstrap digunakan dalam development
    4. 

  4. bootstrap-theme.min.css adalah file css  theme boostrap digunakan dalam production
    5. 

  5. bootstrap.css.map digunakan untuk sumber pemetaan firefox dan chorem debugger
    6. 

  6. bootstrap-theme.css.map digunakan untuk memudahkan pemetaan oleh firedox chorem dll terhadap web yang kita buat  
    7. 




didalam folder font terdapat 5 file : 



    

  1. glyphicons-halflings-regular.eot adalah sebuah font berbentuk icon yang digunakan oleh bootstrap dalam membuat icon dengan format eot.
    2. 

  2. glyphicons-halflings-regular.svg adalah sebuah font icon yang memiliki format file svg.
    3. 

  3. glyphicons-halflings-regular.ttf adalah sebuah font icon yang memiliki format file ttf. 
    4. 

  4. glyphicons-halflings-regular.woff adalah sebuah font icon yang memiliki format file woff. 
    5. 

  5. glyphicons-halflings-regular.woff2 – adalah sebuah font icon yang memiliki format file woff2.
    6. 


didalan folder js terdapat 3 file :


    

  1. bootstrap.js adalah javascript asli dari bootstrap.
    2. 

  2. bootstrap.min.js adalah javascript bawaan dari boostrap yang sudah di kompres dalam ukuran yang lebih kecil.
    3. 

  3. npm.js adalaha javascript dari nodejs digunakan untuk menginstal program node.
    4. 


Demikinan lah pengenalan tentang Bootstrap semoga membantu rekan-rekan sekalian. terima kasih 

























                        

                      


















Subscribe to:

Posts
                        (
                        Atom
                        )