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.
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
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon