Twitter Bootstrap Typography tutorial

Typography adalah seni tata tulis.

dalam bootstrap kita telah di berikan setingan untuk penulisan header, paragrap, list dan juga inline element.

typography tidaklah begitu sulit, saya cuma akan menerangkan saja supaya anda lebih mengetahui yang ada di dalam bootstrap ini.

klik link dibawah ini,

Demo view

Disitu sudah lengkap sekali semua typography yang ada di bootstrap twitter, anda tinggal klik kanan dan view page source untuk melihat kode nya.

tapi semua yang ada di situ standar bawaan, kalo saya biasa menggunakan google web font untuk mempercantik halaman webnya, jika belum pernah mencoba, ini saya kasih link nya.. silahkan di coba. google.com/webfont

bingung cara make nya?

mudah kok, pilih pilih aja yang pengen kamu gunain..

jika sudah ketemu klik quick-use nanti akan muncul kode seperti ini.

---------------------------------------------------------

<link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>

---------------------------------------------------------

masukan link code tersebut di mana aja, tapi kalo saya biasanya malah di bawah sendiri supaya memperingan bukaan pertama sebuah web.

kalo sudah anda juga akan disuguhi nama font nya.

nah masukkan saja di mana akan anda gunakan, misal

---------------------------------------------------------

&lt;p style=&quot;font-family: 'Audiowide', cursive;&quot;&gt; font kata-kata ini akan berubah &lt;/p&gt;

---------------------------------------------------------

semoga bermanfaat, ^^

Read more »

Posted in: bootstrap,google webfont,tutorial,web development

Twitter Bootstrap Layout Tutorial

Pada kesempatan ini saya akan memberikan tutorial tentang Layout.
Pada tutorial ini saya menggunakan bootstrap twitter v2.0.2 dimana bootstrap pada versi ini telah mendukung responsibilitas dengan device yang kita gunakan.
Responsibilitas yang dimaksud disini dimana nanti layout akan melebar dan menciut sesuai dengan lebar browser ponsel ataupun tablet, jika tablet landscape maka lebar otomatis akan mengikuti dengan sendirinya.
Sebagai contoh anda bisa membuka web toko online saya yang sekarang sedang dalam masa pembuatan. LifestyleJogja.com jika anda telah membukanya, coba saja anda lebar ciutkan browser anda, akan tampil berbeda bukan?

Langsung saja sekarang menuju notepad++

Oh iya, supaya anda tidak bingung akan saya beri sedikit trik dalam belajar bootstrap. Buka folder hasil download bootstrap, Anda akan menemukan folder Docs, nah buat document html atau php anda disitu. nanti untuk tag html css dan javascriptnya tinggal samakan aja dengan contoh yang ada, misal fluid.html . Jadi jika anda bingung anda tinggal membuka source html contoh yang dibawakan, buka contoh tersebut dengan notepad++ juga dan cari (ctrl+F) yang akan anda buat..
Mungkin cara dari saya seperti itu akan sangat membantu.. ^^

Oke, yg pertama..
Untuk membuat web layout fixed pixel gunakan tag seperti dibawah ini, lebarnya sudah diatur dengan class=container *(class ini ada di bootstrap.css) disini container lebarnya 940 pixel, bisa anda ubah nilainya tapi harus disesuaikan dengan class yang lain juga :p
-------------------------------------------------------
<body>
<div class="container">
...
</div>
</body>
-------------------------------------------------------

silahkan buka hero.html di folder example, buka dengan notepad++.
disitu anda akan menemukan beberapa class yang ada.

untuk membuat fluid layout, yaitu layout yang flexible kanan kirinya. dengan celah diantara keduanya yang juga bisa semakin besar dan kecil tergantung browser.
dan berikut scriptnya.
-------------------------------------------------------
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
-------------------------------------------------------



lihat gambar tersebut, span2 dan span10 ada didalam class row fluid.
untuk membuat layout yang bersebelahan seperti itu anda tinggal masukkan div dengan ukuran berapa misal span2 span6 dan span2, asal jumlah jangan melebihi 12 karena ukurannya akan melebihi container nya itu sendiri.
anda bisa latihan mencoba-coba sendiri.

seperti biasa, tutorial selanjutnya akan saya sampaikan di postingan selanjutnya.
mungkin satu hari lagi.

Read more »

Posted in: bootstrap,tutorial,web development