Membuat website dengan Bootstrap

Pada kesempatan kali ini saya akan berbagi cara membuat website dengan menggunakan Bootstrap. Bagi anda pengembang web yang tidak ingin repot dalam masalah disain anda bisa menggunakan Bootstrap dalam pengerjaan web anda.

Apa Bootstrap itu?
Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Untuk mendownload Bootstrap silahkan klik disini.

Cara menggunkan Bootstrap?

1. Setelah anda selsai mengunduh filenya silahkan extrak filenya

hasil extark

2. buatlah file index.html seperti gambar diatas.

3. kemudian copy letakkan pada document anda seperti berikut :

<!DOCTYPE html>

<html>

  <head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

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

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>

      <script src="../../assets/js/html5shiv.js"></script>

      <script src="../../assets/js/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="//code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

untuk mencobanya saya akan membuat tabel dengan bootstrap.
setelah script diatas anda copy maka selanjutnya copy script berikut dibawah <body>

<table class="table">
   <caption>Basic Table Layout</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

hasilnya seperti berikut:

Basic Table Layout
Name	City
Tanmay	Bangalore
Sachin	Mumbai

Membuat website dengan Bootstrap

0 Komentar untuk "Membuat website dengan Bootstrap"

Popular Posts