Membuat Template Responsive Dengan Bootstrap

Haloo sobat Kursus Komputer Naura … kali ini saya akan berbagi sebuah tutorial bagaimana cara membuat template website dengan bootstrap.sebelumnya admin mau tanya dulu nie sudah pernah denger tentang bootstrap belum? jika belum silahkan berkunjung ke websitenya di http://www.getbootstrap.com.Jadi Bootstrap itu adalah framework yang dibangun untuk mempermudah membangun desain website yang terdiri dari css dan javascript.

Baik langsung kita mulai saja ya..

download terlebih dahulu file bootstrapnya di sini kemudian ekstrak file tesebut,kemudian rename menjadi bootstrap saja biar gampang pindahkan foldernya di dekstop saja,lalu buat buatlah sebuah file baru di dalam folder bootstrap tersebut,beri nama index.html

kemudian buka file tersebut dengan editor anda  lalu ketikkan kode seperti di bawah ini

<!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]>
      https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
      https://oss.maxcdn.com/respond/1.4.2/respond.min.js
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    src="js/bootstrap.min.js">
  </body>
</html>


 

Perhatikan susunan link untuk css dan javascriptnya semua harus sama persis,jika tidak mungkin nanti ada fasilitas bootstrap yang tidak dapat berjalan karena urutan penempatannya

Nah jika sudah kemudian simpan file yang sudah diketik,lalu dobel klik atau klik kanan open untuk melihat hasilnya ..ok sekian dulu tutorial membuat template bootstrap-nya akan kita sambung kembali di lain waktu dan semoga bermanfaat

atau jika anda ingin melihat videonya anda bisa melihat video pembuatan website dengan bootstrap

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s