Cara menggunakan Bootstrap Untuk Pemula

Sebelum ke tutorial Cara menggunakan Bootstrap Untuk Pemula , sebaiknya anda harus tahu dulu apa itu bootstrap??

Cara menggunakan Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan bootstrap sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Untuk cara menggunakan bootstrap silahkan simak panduannya berikut ini:

1. cara menggunakan bootstrap yang pertama. Download Bootstrap disini

2. cara menggunakan bootstrap yang kedua yaitu Ekstrak dan buat struktur folder seperti dibawah ini:

Cara menggunakan bootstrap

3. Buka text editor seperti notepad++ atau sublime dan buat struktur html seperti biasa, dimana terdapat section head,title, dan body

Cara menggunakan bootstrap

4. Klik Simpan(CTRL+S) lalu tempatkan di file bootstrap yang sudah di ektrak tadi. beri nama

misalkan index.html

Cara menggunakan bootstrap

5. Masukkan kode berikut diantara tag <head> </head>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->

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

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media

queries -->

<!-- WARNING: Respond.js doesn't work if you view the page

TUTORIALS POINT

Simply Easy Learning

via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/

html5shiv.js"></script>

<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/

respond.min.js"></script>

<![endif]-->

Sehingga tampil seperti dibawah ini:

cara menggunakan bootstrap

6. tambahkan kode berikut diatas tag </body>

1

2

3

4

5

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="https://code.jquery.com/jquery.js"></script>

<!-- Include all compiled plugins (below), or include individual files

as needed -->

<script src="js/bootstrap.min.js"></script>

Akan tampil seperti berikut ini:

cara menggunakan bootstrap

7. Sekarang kita akan mencoba membuat tulisan diantara tag <body> dan </body>

1

<h1><center>Hello World!</center></h1>

dan jalankan file latihan.html yang sudahdibuat tadi.

Tampilan tanpa bootstrap

cara menggunakan bootstrap

Tampilan ketika sudah menggunakan bootstrap

cara menggunakan bootstrap

Bagaimana??

menjadi lebih keren kan??

Demikian artikel tentang Cara Menggunakan Bootstrap Untuk Pemula

Muh94

Cara menggunakan Bootstrap Untuk Pemula

Share this

Author : Muharam

Related Posts

1 komentar: