#3 - Membuat halaman pertama di Bootstrap

 


  • Siapkan folder dan file bootstrap terlebih dahulu. 
          Setelah mendownload file bootstrap, kemudian kita ekstrak file bootstrapnya. Hasil ekstrak file tadi kita simpan di dalam server lokal kita. Untuk tutorial ini saya menggunakan server local XAMPP, untuk mendapatkannya kalian bisa download di disini !! .

    Gambar diatas, merupakan tempat file bootstrap yang telah tersimpan di dalam server lokal XAMPP kita, file tersebut berisi  folder untuk file CSS dan folder untuk file JS. Nah, sekarang kita bisa memulai membuat halaman pertama bootstrap di dalam folder tersebut, misalkan kita membuat file dengan nama index.php.
 
  • Tambahkan kode program HTML5 doctype
           Perlu diketahui, framework bootstrap membutuhkan kode HTML5 doctype di bawah ini, untuk menjalankan HTML dan CSS. Jika kita tidak menambahkan kode dibawah ini, maka tampilan yang dihasilkan akan terlihat kurang sempurna, namun hal tersebut tidak menimbulkan masalah yang besar pada program bootstrap.            

    1. <!doctype html>
    2. <html lang="en">
    3.   ...
    4. </html>

  • Tambahkan kode meta tag responsif
        Untuk membuat halaman bootstrap menjadi responsif di perangkat seluler,  tambahkan kode tag <meta> di bawah ini ke dalam tag elemen <head>.

    1. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    Setelah selesai di tambahkan, maka tampilannya akan seperti berikut ini :
                    
    1. <!doctype html>
    2. <html lang="en">
    3.   <head>
    4.     <!-- Required meta tags -->
    5.     <meta charset="utf-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    7.     <!-- Bootstrap CSS -->
    8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    9.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    10.     <title>....</title>
    11.   </head>
    12.   <body>
    13.     <h1>......</h1>
    14.   </body>
    15. </html>
                            
   
  • Menampilkan kata hello world di bootstrap
        Untuk menampilkan kata hello world di bootstrap, kita tinggal menyisipkan tulisan "Hello World" ke dalam tag elemen <body>. Hasilnya akan seperti berikut ini:

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <!-- Bootstrap CSS -->
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  9.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  10.     <title></title>
  11.   </head>
  12.   <body>
  13.     Hello World <!-- masukkan kode programnya di sini -->
  14.   </body>
  15. </html>

 


at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Pages

Created By SoraTemplates X Ainul idham