Langsung ke konten utama

Belajar cara instalasi bootstrap

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

belajar bootsrapcara 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.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Metode (SAW) Simple Additive Weighting dan contoh coding PHP

Pengertian SAW Simple Additive Weighting meupakan metode penjumlahan terbobot konsep dasar metode SAW adalah mencari penjumlahan terbobot dari rating kinerja pada setiap alternative pada semua kriteria (Kusumadewi, 2006) Menurut Fajar Nugraha (2011), metode SAW membutuhkan proses normalisasi matrik keputusan (X) ke suatu skala yang dapat diperbandingkan dengan semua rating alternatif yang ada. Metode SAW mengenal adanya 2(dua) atribut yaitu kriteria (benefit) dan kriteria biaya (cost) perbedaan mendasar dari kedua kriteria ini adalah dalam pemilihan kriteria ketika mengambil keputusan. Adapun langkah penyelesaian dalam menggunakannya adalah 1. Menentukan alternative, yaitu Ai 2. Menentukan kriteria yang akan dijadikan acuan dalam pengambilan keputusan, yaitu Cj 3. Memberikan nilai rating kecocokan setiap alternative pada setiap kriteria. 4. Menentukan bobot preferensi atau tingkat kepentingan (W) setiap kriteria W=[ W1 W2 W3 W4] 5. Membuat table rating kecocokan dari setiap
3 komentar
Baca selengkapnya

Php root Url untuk include dari dalam dan luar folder

Pada Posting ini akan membahas pemanggilan file-file php atau juga html document. yang melalui fungsi yang telah disediakan oleh php dan membahas bagaimana menggali berdasarkan letak file atau root(akar) didalam folder,sub folder dan sub sub folder. Fungsi PHP untuk memanggil file php lainya Bahasa pemograman PHP  memiliki kemampuan utuk menyertakan file php yang lainnya.adapun fungsi untuk menyertakan file php lainya yaitu. include(); require(); include_once(); requere_once(); agan bisa gunakan salah satu dari fungsi tersebut sesuai dengan kebutuhan agan. Bagaimana memanggil file php berdasaran lokasi akar foldernya ? 1.memanggil di dalam satu folder yang sama memanggil dalam satu folder ini maksunya adalah file php yang akan memanggil dan file php yang akan di panggil berada dalam satu folder. nah, untuk menyertakan file php didalam folder yang sama pathnya seperti  contoh dibawah ini: include(‘koneksi.php’); pada conto diatas file php koneksi berada dalam satu folder dengan file yan
Posting Komentar
Baca selengkapnya

Belajar php : membuat nomor ID otomatis untuk insert data

Penjelasan tentang membuat nomor id otomatis Hallo gan pada postingan saya kali ini .saya akan berbagi cara untuk membuat id otomatis pada pemograman PHP dan mySQL . id otomatis maksudnya adalah kita akan menciptakan sebuah nomor unik dengan proses penambahan kode tersebut tanpa kita inputkan alias akan dibuat dan diproses oleh php.hampir semua aplikasi menggunakan id otomatis untuk penambahan data baik itu program berbasis desktop maupun berbasis web.jadi jangan diragukan lagi ,agan sudah berada dalam kesempatan yang baik untuk belajar menjadi programmer yang handal. dalam pemograman PHP banyak sekali cara yang dapat dilakukan untuk generate nomor unik yang dapat digunakan sebagai primary key pada database. pada kasus tutorial kali ini saya praktekan menyimpan sebuah data ke database menggunakan PHP yang sesuai dengan posting ini membuat id otomatis.untuk itu saya asumsikan ,agan sudah bisa membuat tabel database dan mengkoneksikannya.pada kasus ini saya mengunakan database seperti in
Posting Komentar
Baca selengkapnya