Grid System Pada Twitter Bootstrap

Kali ini saya masih ingin berbagi buat para pemula pengguna Twitter Bootstrap. Masih ada yang suka bertanya pada saya, grid system di Twitter bootstrap itu untuk apa?
Grid system bisa dibilang sebagai pengaturan ukuran tampilan dan tata letak desain website. Dalam suatu pembuatan website, biasa nya kita akan menentukan berapa ukuran pages kita, berapa jumlah kolom halaman website kita dan menentukan yang lainnya. Misalkan kita akan akan membuat suatu tampilan website dengan 2 kolom. Maka kita akan mengatur ukuran lebar masing-masing kolom. Berapa pixel ukuran kolom kiri dan kolom kanan yang akan dibuat? itulah yang dinamakan Grid System. Dan ini berfungsi untuk meletakan content - content website yang akan anda muat nanti nya. 

Lalu bagaimana dengan Grid System yang terdapat pada Twitter Bootstrap ?
Yang pasti twitter bootstrap mempermudah anda untuk mengatur layout dan tata letak (Grid System) tanpa harus anda mengukur sendiri. Karena Twitter Bootstrap telah menentukan ukurannya.Ukuran-ukuran itu terdapat didalam file bootstrap.css dan kelebihan lainnya lagi, Twitter Bootstrap juga membuat desain grid tersebut menjadi responsive terhadap beberapa gadget. Skrip responsive tersebut, terdapat pada file bootstrap-responsive.css. 2 File tersebut bisa anda lihat jika ingin dipelajari bagaimana cara pembuatannya. 

Sekarang, Bagaimana Cara Menggunakan Grid System Pada Twitter Bootstrap ? Sebelum masuk ke percobaan grid system ini, anda mengetahui dulu tentang LayoutPada Twitter Bootstrap

Disini saya menggunakan aturan Twiter Bootstrap versi terbaru, V.2.3.2 

Perlu diketahui dahulu, bahwa grid yang disediakan oleh bootstrap, di bagi menjadi 2 bagian yaitu :

Grid System (Memiliki 9 Bagian / Potongan / Angka Grid)

Fluid Grid System (Memiliki 12 Bagian / Potongan / Angka Grid)

Seperti yang dapat anda lihat di link berikut ini : http://twitter.github.io/bootstrap/scaffolding.html#gridSystem 

Untuk mendeklarasikannya kita hanya perlu membuat Tag dengan attribute class="row" untuk Grid System / class="row-fluid" untuk Fluid Grid System dan class="span[angka grid yang diinginkan]" (misal: class="span8"). 

Catatan : Didalam class="row" , jumlah span harus pas dan tidak boleh lebih dari jumlah angka grid yang dimiliki oleh setiap row. * Kecuali menggunakan tambahan class="offset" & beberapa kondisi lain. Silahkan di baca keterangan lebih jelas nya di Dokumentasi Twitter Bootstrapnya.  

Sebagai contoh, anda akan membuat layout dengan 2 Kolom. Sidebar kiri dan Content di sebelah kanan. Bisa di buat dengan cara berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div class="container-fluid" style="bacground-color: #333333"> <!-- Tag & Attribute untuk Fluid Layout -->   <div class="row-fluid">     <div class="span4" style="background-color:#cccccc">       <!--Isi Sidebar-->               <h3>Ini Sidebar</h3>     </div>     <div class="span8" style="background-color:#cccccc">       <!--Isi Body-->                <h1>            Belajar Bootstrap        </h1>             <h6>            <a href="http://cumangoding.blogspot.com ">Cuma Ngoding</a>        </h6>     </div>   </div> </div>

Contoh diatas, saya menggunakan fluid grid dan span4 dan span8, jika di jumlah 4+8 = 12. artinya sesuai. Jika saya rubah, sidebar kiri menggunakan class="span6", maka sebelah kanan juga harus saya rubah menjadi class="span6", agar total angka grid nya menjadi 12. Hal ini mempengaruhi segi tampilan, tata letak dan juga responsive desain nya. Jadi sebisa mungkin, jika ingin membuat suatu website menggunakan twitter bootstrap, aturan Grid System nya jangan sampai di langgar. 

Okee.. kurang lebih seperti itu contoh penggunaan Grid System pada Twitter Bootstrap. Silahkan mencoba, lalu dimodifikasi kembali dan di buat sesuka hati anda. Terima Kasih 

Layout Pada Twitter Bootstrap

Terima Kasih masih bersedia berkunjung ke tutorial saya tentang Twitter Bootstrap. Kali ini masih untuk para pemula yang masih ada kebingungan tentang pengaturan Layout pada Twitter Bootstrap. Yang jelas, anda pasti sudah paham tentang apa yang dimaksud dengan Layout. Simple nya pengaturan layout ini digunakan untuk menentukan seberapa lebar tampilan desain User Interface yang akan anda buat. Apakah akan di buat full screen atau tidak. Itu semua tergantung selera anda dan kebutuhannya.

Dengan Twitter Bootstrap, pengaturan layout kembali dipermudah.. Kita tak perlu mengukur berapa pixel lebar screen yang akan kita gunakan, tetapi kita hanya perlu menentukan atau memilih, apakah desain website yang akan kita buat nanti ingin menggunakan Sidebar atau tidak. Itulah kuncinya jika kita akan menentukan jenis layout yang akan digunakan pada Twitter Bootstrap. Karena Twitter Bootstrap hanya membuat 2 pilihan layout, yaitu :  

•  Fluid Layout : Biasanya digunakan untuk Yang menggunakan Sidebar
• Fixed Layout : Biasanya digunakan untuk yang TIDAK menggunakan Sidebar

Lalu, dimana perbedaan nya ? Silahkan lihat dokumentasinya disini => http://twitter.github.io/bootstrap/scaffolding.html#layouts

Secara teknis, Perhitungan Fluid itu menggunakan Persentase (%). Dan untuk ygFixed menggunakan pixel (.px)
jadi, ukuran untuk fluid menyesuaikan/berpatokan dengan ukuran layar dan untuk yg Fixed ukurannya sesuai dengan yang sudah di atur dengan satuan pixel.

Untuk mendeklarasikannya cukup mudah, karena anda hanya akan bermain pada attribute class nya saja.

Baiklah, sekarang langsung saja kita coba praktekan, biar anda bisa lebih jelas mengetahui perbedaannya dan bisa menentukan jenis layout mana yang akan anda gunakan. Saya harap anda sudah membaca tutorial saya yang Sebelumnya, karena saya tidak akan menuliskan coding nya dari awal, tp langsung menuju bagian penerapan layoutnya.Mari disimak.. atau Copas langsung :D

Fixed layout

1 2 3 4 5 6 7 8 9 10 11

<div class="container" style="background-color: #cccccc"> <!--Tag & Attribute untuk Fixed Layout-->     <!-- isi -->            <h1>         Belajar Bootstrap     </h1>     <h6>         <a href="http://cumangoding.blogspot.com">Cuma Ngoding</a>     </h6> </div>

Fluid Layout

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div class="container-fluid" style="bacground-color: #333333"> <!-- Tag & Attribute untuk Fluid Layout -->   <div class="row-fluid">     <div class="span4" style="background-color:#cccccc">       <!--Isi Sidebar-->               <h3>Ini Sidebar</h3>     </div>     <div class="span8" style="background-color:#cccccc">       <!--Isi Body-->                <h1>            Belajar Bootstrap</h1>             <h6>            <a href="http://cumangoding.blogspot.com">Cuma Ngoding</a>        </h6>     </div>   </div> </div>

Untuk bagian Fluid Layout ini, ada perbedaan. Dimana terdapat attribut Class= "row-fluid" dan Class="Span2" & Class="span10". Apa itu ? Silahkan simak penjelasan nya di tutorial Grid System Twitter Bootstrap

Tutorial Penggunaan Twitter Bootstrap

INSTALASI TWITTER BOOTSTRAP

Langkah 1 : 

Download file Bootstrap yang ada Disini.
Hasil download berupa file .Zip yang berisikan folder CSS, JS & IMG. 

Isi folder CSS : bootstrap.css , bootstrap.min.css, bootstrap-responsive.css & bootstrap-responsive.min.css

Isi folder JS : bootstrap.js & bootstrap.min.js 

Isi folder IMG :  glyphicons-halflings.png  & glyphicons-halflings-white.png

Selanjutnya Download juga jQuery.js / jQuery.min.js , ini WAJIB ADA karena function Javascript yang ada di Twitter Bootsrap diambil dari jQuery.  Silahkan Download Disini (Direkomendasikan untuk download versi yang terbaru). 

Langkah 2 : 

Buat sebuah folder dengan nama Belajar_Bootstrap di derektori mana saja / lebih bagus lagi kalau di buat di derektori local webserver yang anda gunakan seperti Apache , XAMPP & WAMPP. 

Langkah 3 : 

Copy kan folder hasil download dari Twitter Bootstrap (Folder : JS,CSS,IMG) kedalam folde Belajar_Bootstrap. 

Berikutnya copy kan hasil dowload jquery.js kedalam Folder JS

Lalu, Buat file HTML dengan nama index.html, Letakan / simpan di dalam folder Belajar_Bootstrap.

Jika sudah selesai, Struktur foldernya kurang lebih akan seperti ini : 

Belajar_Bootstrap

css

             bootstrap.css
             bootstrap.min.css
             bootstrap-responsive.css
             bootstrap-responsive.min.css

img

             glyphicons-halflings.png
             glyphicons-halflings-white.png

js

             bootstrap.js

             bootstrap.min.js 

             jquery.js

index.html

Keterangan : Yang di Bold (Cetak Tebal) itu = Folder

Sekarang instalasi / pengaturan struktur file dan folder sudah selesai. Berikut nya kita mulai untuk coding awal. 

Silahkan ketikan coding berikut ini di file index.html untuk permulaan.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!DOCTYPE html> <html> <head>     <title>Belajar Bootstrap</title>     <!--Load CSS-->     <link rel="stylesheet" href="css/bootstrap.min.css"/>     <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>     <style type="text/css"><!--Dibutukan bila anda menggunakan navbar fixed top-->         body {             padding-top:60px;             padding-bottom: 40px;         }     </style>     <!--Load jQuery-->     <script type="text/javascript" src="js/jquery.js"></script> </head> <body>     <!--CODING HERE-->     <!--Load Bootstrap JS ( Diletakan dibawah merupakan rekomendasi,agar proses load page lebih cepat )-->     <script type="text/javascript" src="js/bootstrap.min.js"></script> </body>   </html>

Coding diatas fungsinya : memanggil file-file yang dibutuhkan. Jika ada 2 file dengan nama sama dan akhirannya berbeda, contoh: dengan akhiran ---.js atau ---.min.js , panggil / load salah satu aja. 

IMPLEMENTASI TWITTER BOOTSTRAP

Setelah langkah di atas selesai, maka tahap instalasi / pengaturan struktur folder dan file, serta pemanggilan file kedalam file index.html telah selesai.  Silahkan anda coba modifikasi atau buat code-code yang ada pada Dokumentasi dari Twitter Bootstrap. Ketikan Coding anda di bagian yang ada tulisan CODING HERE.
Sebagai contoh awal, silahkan Copy Paste Code berikut ,dan lihat hasil nya.. 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

<div class="navbar navbar-inverse navbar-fixed-top">       <div class="navbar-inner">         <div class="container">           <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">             <span class="icon-bar"></span>             <span class="icon-bar"></span>             <span class="icon-bar"></span>           </button>           <a class="brand" href="#">Belajar Bootstrap </a>           <div class="nav-collapse collapse">             <ul class="nav">               <li class="active"><a href="#">Home</a></li>               <li><a href="#about">About</a></li>               <li><a href="#contact">Contact</a></li>               <li class="dropdown">                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>                 <ul class="dropdown-menu">                   <li><a href="#">Action</a></li>                   <li><a href="#">Another action</a></li>                   <li><a href="#">Something else here</a></li>                   <li class="divider"></li>                   <li class="nav-header">Nav header</li>                   <li><a href="#">Separated link</a></li>                   <li><a href="#">One more separated link</a></li>                 </ul>               </li>             </ul>             <form class="navbar-form pull-right">               <input class="span2" type="text" placeholder="Email">               <input class="span2" type="password" placeholder="Password">               <button type="submit" class="btn">Sign in</button>             </form>           </div><!--/.nav-collapse -->         </div>       </div>     </div>     <div class="container">       <!-- Main hero unit for a primary marketing message or call to action -->       <div class="hero-unit">         <h1>Hello, world!</h1>         <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>         <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>       </div>       <!-- Example row of columns -->       <div class="row">         <div class="span4">           <h2>Heading</h2>           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>           <p><a class="btn" href="#">View details &raquo;</a></p>         </div>         <div class="span4">           <h2>Heading</h2>           <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>           <p><a class="btn" href="#">View details &raquo;</a></p>        </div>         <div class="span4">           <h2>Heading</h2>           <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>           <p><a class="btn" href="#">View details &raquo;</a></p>         </div>       </div>       <hr>       <footer>         <p>&copy; <a href="https://cumangoding.blogspot.com">Cuma Ngoding</a></p>       </footer>     </div> <!-- /container -->

Baiklah,sekian dulu tutorial dari saya,silahkan diperdalam & dipelajari sendiri tentang penggunaan Twitter Bootstrap dengan membaca Dokumentasi yang ada. Perhatikan attribute class pada setiap Tag dan pelajari itu,karena pada dasarnya untuk menggunakan bootstrap kita hanya bermain pada selector tersebut untuk menampilkan suatu desain / toolkit lain yang ada pada Twitter Bootstrap.

Semoga tutorial ini bermanfaat khusus nya buat para pemula yang baru ingin belajar mengenai Twitter Bootstrap. Sampai ketemu di Tutor berikutnya. 

Pengenalan Twitter Bootstrap

Berawal dari iseng-iseng mencari informasi tentang bagaimana cara untuk mempermudah dan mempercepat kita dalam mendesain sebuah tampilan website (front-end) dengan tampilan yang simple tapi tetap bisa dikatakan elegan. Dengan begitu dalam mendevelop desain sebuah web aplikasi atau suatu website pages tidak akan memakan waktu yang lama. 

Setelah menjelajahi Mbah Google, saya menemukan beberapa frontend framewok yang salah satunya adalah Twitter Bootstrap. Dari beberapa frontend framewok yang saya dapatkan, Twitter Bootstrap ini bisa dibilang memiliki rating yang sangat baik, mungkin karna segi tampilan yang baik, kemudahan menggunakan nya dan juga Dokumentasi yang disediakan oleh pihak Twitter Bootstrap sangat lengkap dan mudah dipahami. 

Twitter Bootstrap itu sendiri (menurut saya) adalah Framework yang menyediakan berbagai macam Open Source (JS,CSS,HTML) desain User Interface yang sangat powerfull, responsive dan juga umum digunakan dalam suatu pembuatan website.

Twitter Bootstrap sampai saat ini masih terus dikembangkan menyesuaikan kebutuhan-kebutuhan berbagai kalangan pengguna, jadi saya pribadi yakin bahwa Twitter Bootstrap ini pasti akan sangat Booming di dunia dan juga di Indonesia. Website yang juga memanfaatkan Twitter Bootstrap sudah sangat banyak, dan salah satu nya adalah Website ini.

Oke, sekarang bagi yang masih belum mengenal sama sekali dan ingin mengetahui apa itu Twitter Bootstrap, Silahkan langsung saja kunjungi Official Twitter Bootstrap.