×

Cara Menggunakan Bootstrap Di Localhost XAMPP

Share this article with your friends

Bootstrap merupakan salah satu framework  yang sangat membantu dalam membuat dan mendesain sebuah web/blog dan sangat populer dan banyak digunakan oleh front-end developer.Namun,jika anda baru belajar membuat sebuah web saya sarankan mengerti dulu  dasar dasar penggunaan beberapa bahasa pemrograman berbasis web seperti HTML dan CSS seperti cara menggunakan tag tag pada HTML,bagaimana pemanggilan sebuah CSS file.Sebab dalam penggunaan bootstrap,kita akan lebih banyak menggunakan / memanggil ID dan Class pada CSS.

bootstrap

Struktur file pada Bootstrap 3 :

Pada saat anda mengekstrak Bootstrap yang baru anda download ,akan berisi 3 folder,yaitu css,fonts,js.

image

Siapkan :

Xampp 

Notepad++

Bootstrap

Langkah-langkahnya :

1.Ekstrak Bootstap ke folder root Xampp,yaitu c:/xampp/htdocs/ (di sini saya beri nama boostrap,namun bisa sesuai yang anda inginkan)

2.Jalankan Apache pada Xampp,pastikan Apache berjalan (tidak error).

image

3.Untuk memulai pemanggilan css file pada Bootstrap,gunakan script di bawah !

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>

<!-- Ini script konten -->
<div class="container">
<div class="col-lg-8">
<h1>ini adalah konten </h1>
<p>hallo. . ini adalah isi konten bootstrap ini adalah isi konten
bootstrap ini adalah isi konten bootstrap ini adalah isi konten
bootstrap ini adalah isi konten bootstrap ini adalah isi konten
bootstrap ini adalah isi konten bootstrap ini adalah isi konten
bootstrap ini adalah isi konten bootstrap ini adalah isi konten
bootstrap ini adalah isi konten bootstrap </p>
</div>
 
  <!-- Ini scritp sidebar -->
<div class="col-lg-4">
<h1>Ini Adalah Sidebar</h1>
ini adalah isi  sidebar
ini adalah isi  sidebar
ini adalah isi  sidebar
ini adalah isi  sidebar
ini adalah isi  sidebar
ini adalah isi  sidebar
</div>
</div>
</body>
</html>

Kemudian save dengan nama index.html pada folder bootstrap tadi.

3.Buka web browser,lalu ketikkan localhost/bootstrap,maka hasilnya akan seperti di bawah :

image

1 Response to "Cara Menggunakan Bootstrap Di Localhost XAMPP"