Home > Linux > Memulai Web Development dengan Bootstrap

Memulai Web Development dengan Bootstrap

Kalau kita menjelajah situs-situs saat ini, sudah terlihat sangat berbeda dengan era 5 tahun yang lalu. Saat ini lebih responsif, banyak efek yang memukau dan cepat. Sebenarnya ada optimalisasi javascript di dalamnya, yang di kenal dengan jquery.

Bootstrap adalah suatu framework yang dikembangkan oleh komunitas, sehingga membangun web yang responsif menjadi lebih mudah. Kita tidak perlu membuat versi Desktop, mobile ataupun tablet. Karena outputnya akan menyesuaikan penggunanya.

OK, mari kita memulainya.

kita membutuhkan paket npm, dengan menginstall

$ dnf install npm

kemudian kita membutuhkan aplikasi kecil yang di sebut bower, cara installnya menggunakan npm yang baru kita install

$ npm install bower

kita juga membutuhkan file jquery, install dengan cara

$ bower install jquery

file-file jquery akan didapatkan dalam folder bower_components

Nah, sekarang kita mulai dengan bootstrap, dengan mendownloadnya di:

https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

setelah itu, ekstrak di direktori yang kita siapkan.

struktur file akan seperti berikut:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── 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

selanjutnya, copy file jquery.min.js (hasil install jquery diatas) ke direktori js/

selesai, kita sudah mempersiapkan frame-work dasarnya.

sekarang kita buat file index.html sebagai berikut:

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    Bootstrap 101 Template

    <!-- Bootstrap -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]&gt;-->

    <h1>Hello, world!</h1>

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

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

buat file starter-template.css

body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}</pre>
<pre>

jalankan, maka frame-work anda telah siap.

Categories: Linux
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: