Skip to main content

Cara Menggunakan Bootstrap

1. Download File Bootstrap

Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di http://getbootstrap.com/getting-started/
Screen Shot 2015-12-21 at 17.01.00
Kemudian klik tombol Download Bootstrap yang paling kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu merupakan pembahasan yang terpisah :D
Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama bootstrap-3.3.6-dist.zip.

2. Ekstrak File Bootstrap

Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu css, js dan fonts. Jika file Bootstrap yang kamu download sama versinya dengan saat tulisan ini dibuat, maka kurang lebih seperti berikut isi file bootstrap-3.3.6-dist.zip yang telah diekstrak tadi.
bootstrap-3.3.6-dist/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

3. Buatlah Sebuah File

Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama index.html, simpan file tersebut di dalam folder bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:

<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">
    
    <title>Bootstrap 101 Template</title>

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

    
    
    
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>

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

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:

1. Pastikan link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS Bootstrap berada, relative terhadap file html yang memanggilnya.

Karena kebetulan file index.html yang kita buat berada di dalam folder bootstrap-3.3.6-dist dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis css/bootstrap.min.css.

2. Pastikan juga script JavaScript Bootstrap mengarah pada path yang tepat dimana file JavaScript Bootstrap berada, relative terhadap file html yang memanggilnya.

<script src="js/bootstrap.min.js"></script>
Karena pada contoh kita, file index.html yang kita buat di dalam folder bootstrap-3.3.6-dist dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis js/bootstrap.min.js. Jika nanti kamu membuat file index.html nya tidak seperti path yang kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.

3. Pastikan JQuery terpanggil

Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil JQuery langsung dari library-nya Google:
Sebenernya kamu bisa juga sih memanggil JQuery-nya offline (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja.
Jika semuanya sudah aman, silahkan buka file index.html yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah seperti berikut, maka itu artinya kamu telah berhasil menginstall Bootstrap pada halaman web yang kamu buat.
Labels:

Comments

Post a Comment

Popular posts from this blog

Twitter memposting keuntungan pertama meski ada masalah bot

Jaringan sosial lambat berkembang karena berkaitan dengan kekhawatiran akan jutaan akun palsu yang melakukan tweet dan retweet di seluruh platform.   Ada jutaan akun palsu yang melakukan tweet , retweet dan like ke sebagian besar akun terkenal di Twitter. Jadi apa yang akan dilakukan perusahaan tentang hal itu?   Masalahnya telah menggelegak di bawah permukaan di Twitter selama bertahun-tahun. Tapi itu dibawa ke permukaan oleh The New York Times, yang menemukan perusahaan yang menghasilkan uang dengan menggunakan bots - program komputer otomatis yang terkadang berperan sebagai orang sungguhan - untuk memperbanyak pengikut selebriti, eksekutif bisnis, dan bahkan anggota dewan Twitter sendiri sebenarnya punya. Twitter mulai membersihkan jutaan akun palsu untuk menanggapi hal ini. Sulit untuk mengatakan berapa banyak akun palsu di luar sana. Sebuah studi yang dirilis tahun lalu menemukan bahwa sebanyak 15 persen akun Twitter aktif dikendalikan oleh bot. Twitter menga...
Post a Comment
Read more

Acer Swift 7 saat ini merupakan komputer tertipis di dunia

Acer mengatakan 8.98mm Swift 7 adalah laptop tertipis di dunia. Acer memulai 2018 dengan meluncurkan salah satu laptop tertipis yang pernah ada di CES 2018. The ultra-skinny Swift 7 (SF714-51) terlihat sangat ramping dan futuristik dengan ketebalan hanya 8.98mm. Acer mengklaim itu adalah laptop tertipis di dunia. Laptop ini akan mulai dijual pada bulan April dengan harga mulai dari $ 1,699 dan £ 1,599. Harga dan ketersediaan Australia belum dikonfirmasi namun harga awal Inggris dikonversi ke AU $ 2.765. Laptop yang berpenampilan bagus ini memiliki desain aluminium hitam seluruhnya dengan layar sentuh 14 inci dengan bezels sempit. Laptop ini juga memiliki konektivitas 4G LTE; Desainnya mengintegrasikan antena ke sasis unibody.   Spesifikasi : 7th-generation Intel Core i7 processor 256GB of PCIe SSD storage 8GB LPDDR3 memory 4G LTE connectivity 14-inch Corning Gorilla Glass touchscreen 1,920x1,080-pixel resolution display Backlit keyboard Up to 10 hours of battery life Wi...
Post a Comment
Read more

Manfaat Temulawak bagi Kesehatan

Temulawak merupakan tanaman rempah asli Indonesia yang memiliki beragam khasiat untuk kesehatan. Bagian yang sering dimanfaatkan adalah bagia akar atau sering jug disebut dengan rimpang. Bagian inilah yang sering diolah untuk dijadikan sebagai obat berbagai penyakit. Khasiat dari tanaman temulawak adalah untuk mengatasi gangguan ginjal, melancarkan pencernaan, menyehatkan jantung, dan menjaga kesehatan hati. Sebenarnya masih banyak jenis penyakit lain yang bisa disembuhkan dengan tanaman obat ini. Apalagi bila penggunaannya dikombinasikan dengan tanaman obat lain, tentu khasiatnya akan semakin terasa. Manfaat Temulawak bagi Kesehatan Berikut ini manfaat temulawak bagi kesehatan: 1. Melancarkan Proses Pencernaan Manfaat temulawak yang pertama adalah melancarkan proses pencernaan. Hal ini dikarenakan temulawak mengandung senyawa yang diketahui dapat merangsang produksi empedu, yang dapat membantu meningkatkan kesehatan pencernaan dan mengatasi masalah pencernaan. 2....
Post a Comment
Read more