Belajar cara instalasi bootstrap

By Anonymous - February 01, 2017

Definisi Bootstrap

selamat datang di arsipbertuah blog. pada posting ane ini ane akan baerbagi kepada agan yang masih pemula untuk belajar desain web menggunakan bootstrap.bootstrap adalah sebuah framework yang menyediakan komponen interface dasar pada web yang telah dimodifikasi sedemikian rupa untuk mempermudah dalam mendesain atau merancang tampilan web dengan cepat dan desain komponen yang kren daripada komponen default html. bootsrap juga sarana untuk membengun desain web yabg responsive, rapi dan membuat tampilan dasar HTML lebih teratur dengan komponen lain. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.selain itu bootstrap juga berkolaborasi dengan javascript yang mana dapat membuat tampilan web menjadi lebih interaktif kepada usernya.

Cara menggunakan atau instalansi Bootstrap

untuk menggunakan bootsrap ada dua cara yang sering digunakan yaitu

1. instalansi dengan cara mendownload komponen bootsrap

cara ini agan bisa juga digunakan saat pc dalam keadaan offline. karena semua komponen bootsrap yang sudah dirancang sedemikin rupa kedalam bentuk dokumen CSS dan javascript bisa agan simpan di directori pc agan.

1.cara pertama agan harus mendownload botrap di websitenya www.getbootstrap.com

2.setelah download selesai extract hasil download tadi yang masih terbungkus rar dan letakkan semua folder yang ada ke sebuah folder tempat project agan.

3.sekarang buat sebuah halaman html seperti dibawah ini simpan di dalam folder project agan

<html>
<head>
<title>Belajar bootsrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="" href="css/bootstrap.min.css">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/bootstrap.js"></script>
</head>
<body>

 <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

</body>
</html>

dan jalankan di browser

2. cara intalansi menggunakan CDN

CDN (Content Delivery Network)adalah sebuah sistem jaringan server untuk mendistribusikan konten yang ada dalam sebuah aplikasi/web ke berbagai pengakses/pengguna di berbagai belahan dunia agar data/konten yang dikirim diterima lebih cepat. namun cara ini agan harus belajar dalam kondisi online. perbedaan dengan instalansi diatas hanya pada pemaggilan file css dan javasciptnya saja. perhatikan didalam tag <head> pada kode diatas, css bootstrap akan di panggil memlalui url folder sedangkan menggunakan CDN file css dan jsnya akan dipanggil melalui url internet. jadi keuntungan menggunakan CDN kita tidak perlu lagi mendownload lebih simple . lihat contoh pemanggilan css dan js pada koding html dibawah ini:

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

sekian penjelasan dari ane semoga dapat memberikan manfaat.terimakasih atas kunjugan agan. silahkan bertanya pada kolom koment dibawah ini.

Search This Blog

Seputar Ilmu