Cara memulai menggunakan Twitter Bootstrap

linkdesain.com. Bootstrap adalah front-end framework untuk mengembangkan website yang responsive, dengan lebih mengutamakan tampilan web di perangkat mobile. Untuk Memulai menggunakan Bootstrap pertama buatlah folder-folder yang Anda butuhkan agar tidak membingungkan dan dapat menggunakan file-filenya dengan mudah dan rapi, Anda harus menyimpan file-file pendukung di folder yang berbeda-beda sesuai tempatnya. Pertama buatlah 1 folder bernama template_bootstrap. kemudian untuk awalnya buat 4 folder didalamanya yakni css (untuk file css), js (untuk file js), img (untuk file gambar), dan fonts (untuk folder font) , jika anda tidak mau repot anda bisa import font dari https://www.google.com/fonts , Anda tinggal pilih font yang anda suka kemudian buka css anda dan import, contohnya seperti ini

@import url(http://fonts.googleapis.com/css?family=Roboto);

kemudia di class css (dalam hal ini class .fontnya) masuka style seperti berikut

.fontnya {font-family: 'Roboto', sans-serif;}

ok skip .. skip.. lanjut ke bootstrap..

Buka http://getbootstrap.com/ pilih download bootstrap versi terakhir. Setelah anda download dan ekstrak anda akan menapatkan 3 buah folder, yakni css, fonts, js.

isi folder css, font, dan js dari bootstrap yang telah kita download adalah

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

kemudian masukan isi css ke dalam folder css yang telah anda buat di folder template_bootstrap , begitu juga dengan folder js, dan fonts (atau anda replace aja biar cepet).

Jangan lupa, anda juga perlu mendownload file js jquery nya dan meletakan file javascript jquery di folder js, anda dapat mendownload file jquery tsb di http://jquery.com/ saat artikel ini ditulis versi terakhir adalah versi v 1.11.0 (jquery-1.11.0.min.js)

untuk template html basic nya adalah seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
    <h1>Template bootstrap sudah siap!</h1>
    masukan komponen bootstrap anda disini!

    
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Untuk membuat template responsive dengan Bootstrap anda perlu mengetahui cara kerja grid system pada bootstrap.

Untuk komponen, class-class, element, dll bisa anda dapatkan di websitenya >>> http://getbootstrap.com (hdra)

Cara memulai menggunakan Twitter Bootstrap

Author : hidra

Share this

1 comments:

Cara memulai menggunakan Twitter Bootstrap

Author : hidra

Share this

Related Posts

1 comments: