Apa itu Bootstrap?

Bootstrap adalah salah satu framework yang mudah digunakan untuk membuat layout sebuah halaman website. Dengan memanfaatkan bootstrap, kita bisa dengan mudah membuat sebuah halaman web yang responsive.

Untuk sekedar diketahui bahwa banyak sekali framework HTML5 dan CSS3 siap pakai baik yang gratis maupun yang premium. Nah kali ini kita akan membahas dan mencoba gunakan salah satunya tentunya yang gratisan yaitu Twitter Bootstrap. Pada mulanya Bootstrap dibuat oleh 2 orang karyawan Twitter yaitu Mark Otto and Jacob Thornton untuk membantu Developer utama Twitter dalam mengembangkan prototype tampilan UI situs tersebut. Saat ini, Bootstrap telah menjelma menjadi sesuatu yang luar biasa, lebih fleksibel dan juga bersifat Open Source yang artinya siapa saja bisa mengunduhnya, mengubahnya, memodifikasinya dan menggunakannya untuk keperluan personal maupun komersial.

Menggunakan BootStrap sebagai framework utama dalam membangun desain halaman web memudahkan pengguna dalam hal akses CSS dan JS siap pakai. Kompilasi CSS dan JS BootStrap berguna untuk menangani berbagai fungsi dan animasi dalam halaman web. Untuk lebih lengkapnya anda bisa langsung kunjungi situs resminya http://getbootstrap.com/2.3.2/getting-started.html.

Cara Pakai Bootstrap

Pertama, silahkan download paketan versi siap pakainya di http://getbootstrap.com/2.3.2/getting-started.html . Sebenarnya anda bisa melakukan personalisasi akan apa saja komponen yang ingin anda pakai di BootStrap, tapi pada tutorial ini kita gunakan yang versi dasar dulu. Setelah diunduh, silahkan ekstrak file .zip tersebut sehingga anda akan mendapatkan folder “bootstrap” yang berisi 3 folder: css, js dan img.

Mengenal Framework Twitter Bootstrap dan Cara Pakainya

Sekarang copy ketiga folder tersebut (beserta isinya) ke folder lain tempat anda meletakkan proyek desain web anda. Contoh.

Selanjutnya kita buat sebuah file HTML baru. Sebagai contoh saya beri nama index.html dan simpan di folder yang sama. Caranya, buka text editor, klik “Save as”, lalu pilih “All file types” dan beri nama dengan akhiran .html.

Tip:

Gunakan Text Editor dengan fungsi highlighting, biar lebih mudah. Sebagai rekomendasi bisa anda coba NotePad++ atau NotePad2.

Mengenal Framework Bootstrap dan Cara Pakainya

Karena untuk tujuan latihan, kita coba pakai template html berikut ini:

<!doctype html>

<html>

<head>

<title>Bootstrap</title>

</head>

<body>

<h1>Ira Fitri Auliana</h1>

</body>

</html>

Yang perlu diperhatikan adalah bahwa BootStrap menggunakan bahasa pemrograman HTML5 sehingga jangan sampai lupa untuk menambahkan tag <!DOCTYPE html> di bagian paling atas.

Kita tambahkan Bootstrap di template html tersebut dengan memasukkan file css dan js di dalamnya sehingga menjadi kira – kira seperti ini:

<!doctype html>

<html>

<head>

<title>BootStrap</title>

</head>

<body>

<h1>Ira Fitri Auliana</h1>

</body>

</html>

Dengan demikian template html tersebut sudah siap memakai segala fungsi dan fitur dari Bootstrap.

Untuk membuat tab menu pada website dengan menggunakan bantuan bootstrap :

<li><a href="#">Homepage</a></li>

<li><a href="#">Berita</a></li>

<li><a href="#">Artikel</a></li>

<li><a href="#">Gosip</a></li>

</ul>

</nav>

Untuk membuat header halaman web dan judul utama yang besar pada halaman web menggunakan bantuan bootsrap :

<h3>Dokumen Web dengan Bootstrap</h3>

</header>

<h1>Ira Fitri Auliana</h1>

<p>Selamat Datang di Website Ira Fitri Auliana <3 </p>

</section>

Untuk membuat kolom pada halaman web dengan kelipatan 3 (contoh: 12 : 4 [<section class="col-md-4">] maka jumlah kolom ada 3 nantinya di tampilan halaman web :

dengan simbol globe sebagai bullet judul kolom Judul Berita :

<h3><i class="glyphicon glyphicon-globe"></i>Berita Terkini <3</h3>

<ul>

<li>Judul Berita 1</li>

<li>Judul Berita 2</li>

<li>Judul Berita 3</li>

<li>Judul Berita 4</li>

<li>Judul Berita 5</li>

</ul>

<a href="#" class="btn btn-default">Lihat Berita Lainnya</a>

</section>

dengan simbol folder-open sebagai bullet judul kolom Artikel Berita :

<h3><i class="glyphicon glyphicon-folder-open"></i> Berita Terkini <3</h3>

<ul>

<li>Artikel Berita 1</li>

<li>Artikel Berita 2</li>

<li>Artikel Berita 3</li>

<li>Artikel Berita 4</li>

<li>Artikel Berita 5</li>

</ul>

<a href="#" class="btn btn-default">Lihat Artikel Lainnya</a>

</section>

dengan simbol heart sebagai bullet judul kolom Gosip Artis :

<h3><i class="glyphicon glyphicon-heart"></i> Berita Terkini <3</h3>

<ul>

<li>Gosip Artis 1</li>

<li>Gosip Artis 2</li>

<li>Gosip Artis 3</li>

<li>Gosip Artis 4</li>

<li>Gosip Artis 5</li>

</ul>

<a href="#" class="btn btn-default">Lihat Gosip Lainnya</a>

</section>

Tambahan lainnya, jika ingin menambahkan tombol untuk perintah ke artikel lainnya, menggunakan :

<a href="#" class="btn btn-default">Lihat Gosip Lainnya</a>

</section>

Berikut adalah contoh penerapan HTML menggunakan bootstrap :

<!doctype html>

<html>

<head>

<title>Bootstrap</title>

type="text/css"

href="./bootstrap/css/bootstrap.min.css" />

src="jquery-2.1.1.min.js"></script>

</head>

<body>

<li><a href="#">Homepage</a></li>

<li><a href="#">Berita</a></li>

<li><a href="#">Artikel</a></li>

<li><a href="#">Gosip</a></li>

</ul>

</nav>

<h3>Dokumen Web dengan Bootstrap</h3>

</header>

<h1>Ira Fitri Auliana</h1>

<p>Selamat Datang di Website Ira Fitri Auliana <3 </p>

</section>

<h3><i class="glyphicon glyphicon-globe"></i>Berita Terkini <3</h3>

<ul>

<li>Judul Berita 1</li>

<li>Judul Berita 2</li>

<li>Judul Berita 3</li>

<li>Judul Berita 4</li>

<li>Judul Berita 5</li>

</ul>

<a href="#" class="btn btn-default">Lihat Berita Lainnya</a>

</section>

<h3><i class="glyphicon glyphicon-folder-open"></i> Berita Terkini <3</h3>

<ul>

<li>Artikel Berita 1</li>

<li>Artikel Berita 2</li>

<li>Artikel Berita 3</li>

<li>Artikel Berita 4</li>

<li>Artikel Berita 5</li>

</ul>

<a href="#" class="btn btn-default">Lihat Artikel Lainnya</a>

</section>

<h3><i class="glyphicon glyphicon-heart"></i> Berita Terkini <3</h3>

<ul>

<li>Gosip Artis 1</li>

<li>Gosip Artis 2</li>

<li>Gosip Artis 3</li>

<li>Gosip Artis 4</li>

<li>Gosip Artis 5</li>

</ul>

<a href="#" class="btn btn-default">Lihat Gosip Lainnya</a>

</section>

</footer>

</body>

</html>

Contoh tampilan hasil di browser :

Mengapa memilih BootStrap?

Waktu pembuatan yang lebih cepat

Template yang menggunakan Bootstrap lebih rapi

Template yang menggunakan Bootstrap lebih ringan.

Responsive dan tidak responsive.

Banyak template bootstrap gratis dan contoh untuk belajar

Demikian artikel yang bisa saya share tentang membuat halaman web dengan bootstrap, saya akui masih kurang dan agak ga jelas artikel nya, tapi itu yang bisa saya serap dan pahami dari pengajaran dosen saya hehehehe. Saya akan belajar lebih keras lagi biar lebih paham dan mengerti bagaimana mengaplikasikan bootstrap. Semoga bermanfaat dan selamat mencoba !

[Ira Fitri Auliana / 1306470792]

Sumber :

http://www.ngulikweb.com/design/tutorial-responsive-bootstrap/
http://virtuemagz.com/memahami-cara-kerja-bootstrap-3.html
http://www.panduaji.net/2014/05/kenalan-dengan-bootstrap.html

Apa yang berbeda dari CSS3 dengan CSS versi sebelumnya ? Banyak sekali perbedaannya, Dengan menggunakan CSS3 anda bukan hanya sekedar melakukan formating tampilan website, Namun anda juga bisa membuat animasi yang sering diterapkan oleh jQuery. Contohnya seperti Polaroid, Crop Images, Accordion, & masih banyak lainnya. Berikut ini saya akan menuliskan beberapa fitur terbaru CSS3 yang akan membuat anda terkagum-kagum.

Fitur-Fitur CSS3

Properti Border

Border Color
Border Image
Border Radius
Box Shadow

Properti Background

Background Origin
Background Clip
Background Size
Multiple Background

Properti Color

HSL Color
HSLA Color
RGBA Color
Opacity

Properti Text

Text Effects
Text Shadow
Text Overflow
Wordwrap

Properti User Interface

User Interface
Box Sizing
Outline
Resize

Properti Navigation

Nav Top
Nav Bottom
Nav Left

Properti Selector

Attribute Selector

Properti Lainnya

Basic Box Model
Overflow X
Overflow Y
Generated Content
Content
Other Modules
Media Queries
Multi Column Layout
Web Font
Speech

Walaupun CSS3 ini sangat menakjubkan, namun belum semua web browser support CSS3 karena CSS3 masih merupakan teknologi terbaru. Tenang, secara bertahap semua browser akan mendukungnya karena sudah menjadi standard. Untuk saat ini web browser yang support diantaranya adalah Mozilla Firefox, Safari, Opera, Google Chrome & Internet Explorer 9 meski belum support secara keseluruhan fitur CSS3.

CSS kepanjangan dari “Cascading Style Sheets” yang merupakan format atau style untuk tampilan website. CSS dapat dibuat dalam halaman bersama perintah HTML dengan menyisipkan tag <style>(CSS Internal / Inline) atau dibuat dengan file tersendiri yang berektensi .css.

Keuntungan Penggunaan CSS

Dengan menggunakan CSS, kamu akan lebih mudah untuk mengatur style elemen dalam halaman web Anda. Sebagai contoh, misalnya untuk mengatur style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixel dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading yang ada. Tentu saja hal ini akan sangat merepotkan. Perhatikan contoh berikut ini :

<!doctype html >

<html>

<head>

<title>CSS Guide</title>

h1 {

color: red;

font-family: "arial";

}

</style>

</head>

<body>

<h1>Ini adalah heading 1</h1>

<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.

Ini adalah paragraf. Ini adalah paragraf. </p>

<h1>Ini adalah heading 1</h1>

<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.

Ini adalah paragraf. Ini adalah paragraf. </p>

</body>

</html>

Struktur Style

Style pada CSS memiliki struktur sebagai berikut

Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan. Selector dapat berupa nama id elemen atau nama class. Bagian deklarasi menerangkan style yang akan dibuat. Bagian ini terdiri dari properti dan value. Properti dapat diisi dengan jenis warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai dari propertinya, misalnya red untuk warna dll. Setiap akhir penulisan properti dan value harus diakhiri dengan tanda titik koma (semicolon). Tanda ini juga digunakan sebagai pemisah antar satu properti dengan properti lain.

Apabila Anda lupa memberikan tanda titik koma, maka style tersebut tidak akan dijalankan oleh browser. Mungkin Anda bertanya, bagaimana jika kita akan membuat style untuk beberapa elemen yang berbeda namun stylenya sama? Misalkan kita akan membuat style untuk elemen h1, h2, h3 namunmemiliki style yang sama. Berikut ini adalah sintaksnya:

h1, h2, h3 { properti1 : value1;

properti2 : value2;

properti3 : value3;

}

Selector

Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.

<!doctype html >

<html>

<head>

<title>CSS Guide</title>

P {

color: red;

}

p em {

color: green;

}

</style>

</head>

<body>

<h1>Ini adalah heading 1</h1>

<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.

Ini adalah paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf.

Ini adalah paragraf. Ini adalah paragraf. </p>

<h1><em>Ini adalah heading 1</em></h1>

<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.

Ini adalah paragraf. Ini adalah paragraf. <em>Ini adalah huruf dicetak miring</em>. Ini adalah paragraf. Ini adalah paragraf.

Ini adalah paragraf. Ini adalah paragraf. </p>

</body>

</html>

Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan untuk emphasize atau <em> (cetak miring seperti halnya italic).

VALUE

Terdapat beberapa jenis value yang dapat berikan pada properti style, antara lain berupa

predefined value, bilangan, prosentase, url, dan juga warna.

Predefined Value

Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini dapat dipilih

dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined value ini adalah pada style

berikut

h1 {

font-style : italic;

}

Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini value

‘italic’ merupakan predefined value. Untuk properti font-style terdapat pilihan value yang telah

didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique. Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik.

Bilangan

Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini contohnya:

p {

line-height : 2;

}

Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari ukuran fontnya.

Panjang, Besar dan Prosentase

Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px

(pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini beberapa

contohnya :

h1 {

font-size : 20px; /* membuat ukuran font 20 pixel */

}

hr {

width : 20%; /* membuat garis horizontal dengan panjang 20% terhadap lebar jendela browser /*

}

URL

Sebuah value juga dapat berupa URL. Berikut ini contohnya

body {

background : url(img/image.jpg);

}

Style di atas untuk memberi background image pada body yang diambil dari folder img dengan nama file image.jpg.

Membuat Text Indent

Pada bagian awal paragraf biasanya terdapat text indent atau teks yang agak menjorok ke dalam

paragraf dalam jarak tertentu. Berikut ini adalah properti yang digunakan untuk mengaturnya:

text-indent : jarak;

Contoh:

<!doctype html>

<html>

<head>

<title>CSS Guide</title>

p {

text-indent : 40px;

}

</style>

</head>

<body>

<h1>Ini Judul Heading</h1>

<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.

Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1

Ini adalah paragraf 1. Ini adalah paragraf 1. </p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

</p>

</body>

</html>

Membuat Drop Cap
Ingin mempercantik tampilan paragraf dengan menambahkan drop cap pada huruf pertamanya? Berikut ini contoh penulisan style untuk membuat hal tersebut.

<!doctype html >
<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
p.styleku:first-letter {
float: left;
font-family: "Lucida Grande";
font-size: 80px;
}
p {
text-align : justify;
}
</style>
</head>
<body>
<h1 id="heading1">Ini Judul Heading 1</h1>
<p class="styleku">
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf.
Bagian ini adalah paragraf. </p>
</body>
</html>

Mengubah Warna Background Text

Apabila Anda ingin mengubah warna background text, maka berikut ini adalah propertinya:

background : warna;

cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit warna yang

diinginkan maupun kode hexadesimalnya.

Contoh:

<!doctype html >

<html>

<head>

<title>CSS Guide</title>

body {

background : green;

}

p.styled {

font-family: "Palatino Linotype";

font-size: 20px;

color: #FF0000;

background: #FFFFFF; /* warna putih */

}

p {

color: orange;

font-weight: bold;

background: #000000; /* warna hitam */

}

</style>

</head>

<body>

<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf

1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah

paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2.

</p>

</body>

</html>

Pada contoh di atas, bagian body diberi warna background (seluruh halaman), namun perkecualian

untuk bagian paragraf. Paragraf pertama diberi warna background putih sedangkan paragraf kedua

diberi warna hitam.

Style Untuk Font Family

Font family digunakan untuk menentukan jenis huruf/font pada suatu tampilan teks. Berikut ini

adalah nama properti dan penulisan valuenya:

font-family: name;

dengan name adalah jenis font yang Anda inginkan. Contoh:

p {

font-family: arial;

}

Anda juga dapat memberikan jenis font lebih dari satu yang dipisahkan dengan koma.

Contoh:

p {

font-family : "arial black", arial, "Times New Roman";

}

Maksud dari style di atas adalah bahwa jenis font arial black akan diprioritaskan untuk

digunakan. Namun apabila font tersebut tidak disupport oleh browser maka yang digunakan arial, begitu seterusnya. Sebagai catatan, untuk jenis font yang terdiri dari lebih satu kata harus diapit dengan tanda petik ganda (double quotes).

Mengatur Ukuran Font

Pengaturan ukuran font dapat dilakukan dengan style yang menggunakan properti

font-size : size;

dengan size diisi angka yang menyatakan ukuran disertai satuannya.

Contoh:

<!doctype html>

<html>

<head>

<title>CSS Guide</title>

p.styled {

font-size: 20px; /* membuat font berukuran 15 pixel */

}

</style>

</head>

<body>

<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. </p>

<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>

</body>

</html>

Pada contoh di atas, paragraf pertama berukuran 20 pixel sedangkan paragraf kedua berukuran normal

(default). Sebagai catatan, teks berukuran 16px secara default.

Berikut adalah contoh file CSS3 sederhana yang mengaplikasikan style-style diatas:

Dan ini merupakan tampilan hasilnya di web browser :

Demikian artikel yang bisa saya share untuk teman-teman. Semoga bermanfaat dan selamat mencoba!

[Ira Fitri Auliana / 1306470792]

Sumber :

http://ibbi.ac.id/ibbiacid/bahan/penggunaan-css-dalam-perancangan-web.pdf
http://id.wikipedia.org/wiki/CSS_3
http://www.syakirurohman.net/2013/08/mengenal-apa-itu-css-dan-bagaimana-menggunakannya.html

Welcome to Ira Fitri's blog !

Selasa, 28 Oktober 2014

Membuat Halaman Web dengan Bootstrap

Waktu pembuatan yang lebih cepat

Template yang menggunakan Bootstrap lebih rapi

Template yang menggunakan Bootstrap lebih ringan.

Responsive dan tidak responsive.

Banyak template bootstrap gratis dan contoh untuk belajar

Membuat Halaman Web dengan Menggunakan CSS3

Fitur-Fitur CSS3

Blog Archive

Followers

Selasa, 28 Oktober 2014

Membuat Halaman Web dengan Bootstrap

Waktu pembuatan yang lebih cepat Template yang menggunakan Bootstrap lebih rapi Template yang menggunakan Bootstrap lebih ringan. Responsive dan tidak responsive. Banyak template bootstrap gratis dan contoh untuk belajar

Membuat Halaman Web dengan Menggunakan CSS3

Fitur-Fitur CSS3

Waktu pembuatan yang lebih cepat

Template yang menggunakan Bootstrap lebih rapi

Template yang menggunakan Bootstrap lebih ringan.

Responsive dan tidak responsive.

Banyak template bootstrap gratis dan contoh untuk belajar