Cara Menggunakan Bootstrap Template Web Gratis Terbaru 2019

Tips Cara Menggunakan Bootstrap Template Web untuk Pemula – Untuk memperindah tampilan dari web, blog atau situs yang kita buat biasanya kita memerlukan sebuah  framework CSS. Salah satu framework CSS tersebut adalah Bootstrap. Dengan adanya Bootstrap kita akan lebih mudah dalam urusan bagaimana cara mendesain web sehingga terlihat lebih bagus dan profesional.

Selain dapat mempercantik tampilan web, Bootstrap juga mampu untuk mempermudah pekerjaan kita dalam mengelola web, hal ini karena Bootstrap telah menyediakan berbagai class CSS dan plugin Java Script, serta memberikan banyak bagian penting dokumentasi.

Cara Menggunakan Bootstrap Template Web Gratis

Cara kerja Bootstrap dapat mempermudah pekerjaan kita dari yang tadinya cukup rumit. Misalnya pada saat kita akan mendesain tampilan web kita akan memerlukan file HTML yang terdiri dari berbagai TAG HTML, biasanya kita akan membuat dari awal, akan tetapi bila kita menggunakan Bootstrap kita tinggal menuliskan kode CCS saja. Untuk lebih jelas, berikut ini adalah tips dan tutorial cara menggunakan Bootstrap.

Cara Menggunakan Bootstrap untuk Mempercantik Tampilan Web

  • Download terlebih dahulu sampai diperoleh file bootstrap-3.3.6-dist.zip. Klik di sini untuk mengunduh.
  • Simpan pada folder tertentu file bootstrap yang sudah diekstrak, di dalam folder tersebut terdiri dari fonts, ccs, js dan file bootstrapnya sendiri.
  • Tambahkan satu file percobaan dengan nama file tertentu, misalnya index.html kemudian kita simpan pada bootstrap-3.3.6-dist.
  • Ketikan kode format standar bootstrap 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″>

<!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –>

<title>Bootstrap 101 Template</title>

 

<!– Bootstrap –>

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

 

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>

<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>

<!–[if lt IE 9]>

<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script>

<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script>

<![endif]–>

</head>

<body>

<div class=”container”>

<h1>Hello, world!</h1>

 

<p><button class=”btn btn-primary btn-lg”>SAMPLE BUTTON</button></p>

</div>

 

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<!– Include all compiled plugins (below), or include individual files as needed –>

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

</body>

</html>

Hal-hal yang Harus Diperhatikan

Kita sudah bisa menjalankan index.html apabila sudah memenuhi hal-hal berikut ini:

  • Kita harus memastikan bahwa link stylesheet bootstrap sudah diarahkan ke file CCS bootstrap berada.
  • Kita juga harus sudah memastikan bahwa script Javascript Bootstrap diarahkan ke path yang sesuai dengan tempat penyimpanan file Javascript.
  • Terakhir kita harus memastikan bahwa Javascript-nya sudah terpanggil.
  • Apabila ketiga hal di atas sudah terpenuhi, kita tinggal membuka dan menjalankan index html melalui browser.

Berbagai class sudah disiapkan Bootstrap mulai dari list, nav, table, form, grid, tombol dan lain sebagainya untuk bisa kita gunakan. Semoga dengan adanya bootstrap ini, web yang kita buat lebih menarik dan dapat menarik minat orang lain untuk mengunjunginya. Keberadaan bootstrap akan membuat tampilan web kita lebih hidup, mudah dan menarik sesuai keinginan dan kebutuhan.

Itu saja ulasan mengenai tips dan trik serta tutorial cara menggunakan bootstrap dari hariantechno.com. Selamat bereksperimen dan semoga web anda ramai pengunjung.

Loading...
Cara Menggunakan Bootstrap Template Web Gratis Terbaru 2019 | Joe | 4.5