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

[Dokumentasi] Fungsi terbilang pada Microsoft SQL

Hasil dari browsing diinternet untuk fungsi terbilang pada Microsoft SQL Server. Sumber : http://songkar13.blogspot.com/2013/10/membuat-fungsi-terbilang-di-sql-server.html CREATE FUNCTION terbilang(@the_amount money) RETURNS varchar(250) AS BEGIN DECLARE     @divisor    bigint,     @large_amount    money,     @tiny_amount    money,     @the_word    varchar(250),     @dividen    money,     @dummy        money,     @weight    varchar(100),     @unit        varchar(30),     @follower    varchar(50),     @prefix    varchar(10),     @sufix        varchar(10) --SET NOCOUNT ON SET @the_word = '' SET @large_amount = FLOOR(ABS(@the_amount) ) SET @tiny_amount = ROUND((ABS(@the_amount) - @large_amount ) * 100.00,0) SET @divisor = 1000000000000.00 IF @large_amount > @divisor * 1000.00     RETURN 'OUT OF RANGE'     WHILE @divisor >= 1 BEGIN            SET @dividen = FLOOR(@large_amount / @divisor)     SET @large_amount = CONVERT(bigint,@large_amount
Post a Comment
Read more

[Dokumentasi] Memulai Penggunaan yii framework

Yii adalah framework (kerangka kerja) PHP berbasis-komponen, berkinerja tinggi untuk pengembangan aplikasi Web berskala-besar. Yii menyediakan reusability maksimum dalam pemrograman Web dan mampu meningkatkan kecepatan pengembangan secara signifikan. Nama Yii (dieja sebagai /i:/ ) singkatan dari "Yes It Is!". Untuk membuat web dengan menggunakan framework yii, kita bisa membuat main project nya dengan menggunakan tool yiic (command line tool). Berikut langkah-langkah membuat aplikasi web yii dengan tool yiic. Download framework yii dari website yiiframework : http://www.yiiframework.com/download/ Extract folder isi file archive yiiframework yang telah di download ke direktori htdocs. Rename folder yii tersebut menjadi “yii” Buka command prompt, dan masuk ke direktori htdocs/yii/framework jalankan perintah berikut :yiic webapp ../../namafolderaplikasi Jika proses berhasil, maka akan otomatis melakukan generate folder-folder dan file-file aplikasi dengan framework
Post a Comment
Read more

[Dokumentasi] Konfigurasi PHP agar mendukung DB PostgreSQL

Pada saat kita menginstall PHP baik dengan menginstal paket PHP yang terpisah dengan Apache ataupun yang satu paket dengan Apachenya (ex : XAMPP), terkadang PHP tersebut belum mendukung penggunaan database PostgreSQL, untuk menjadikan PHP dapat mendukung penggunaan database PostgreSQL, berikut ini langkah-langkah yang perlu dilakukan : a. Windows Edit php.ini dan php-pear.ini  Hilangkan tanda comment (;) pada extension=php_pdo_pgsql.dll extension=php_pgsql.dll Tambahkan path lokasi folder bin Postgre pada Environment Variable -> path ex : C:\Program Files\PostgreSQL\8.3\bin Restart Windows b. Debian Install paket php, postgresql, dan paket php postgre nya -> apt-get install php5-pgsql -> apt-get install libpq-dev apt-get install postgresql-8.4 php5-pgsql tambahkan baris berikut ke php.ini extension=pgsql.so extension=pdo_pgsql.so Restart service apachenya
Post a Comment
Read more