More

    Tutorial Cara Menggunakan Bootstrap Untuk Pemula

    Oke Sebelum kita melangkah ke tutorial Cara menggunakan Bootstrap Untuk Pemula ada baiknya kita simak dulu.

    Apa itu bootstrap?

    Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

    Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.

    OK. Cukup segitu aja. untuk selengkapnya silahkan baca2 di wiki..atau web resminya.

    Sekarang kita lanjut ke tutorial cara penggunaan bootstrap.

    1. Download dulu bootstrapnya Disini. versi terbaru untuk saat ini yaitu bootstrap 3.2

    2. Ektrak dan taruh dalam satu folder. biarkan strukturnya seperti dibawah ini.

    cara menggunakan boostrap

     

    3. Buka text editor seperti notepad, notepad++ ,sublime text dsb.

    yang dikira nyaman aja di pake, kalau saya sendiri menggunakan notepad++(karena sekarang cuma ada itu, biasanya pake sublime 😀 )

    4. klik New dan buat tag html,head,body seperti biasa.

     

    5. Klik Simpan(CTRL+S) lalu tempatkan di file bootstrap yang sudah di ektrak tadi. beri nama

    misalkan latihan.html

     

    cara menggunakan bootstrap

    6. Nah sekarang kita panggil CSS bootstap dengan perintah eksternal.

    Apa itu perintah external? baca2 dulu disini.

    7. Masukkan code berikut diantara tag <head> dan </head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media
    queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page
    TUTORIALS POINT
    Simply Easy Learning
    via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
    html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
    respond.min.js"></script>
    <![endif]-->

    Sehingga akan terlihat seperti ini.

     

    8. Setelah itu masukkan code berikut diatas tag </body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files
    as needed -->
    <script src="js/bootstrap.min.js"></script>

    Penampakannya akan seperti berikut ini.

    cara menggunakan bootstrap

     

    9. Sekarang Kita buat tulisan di diantara tag <body> dan </body>

    Ex:

    <h1><center>Hello World!</center></h1>

     

    Tampilan HTML biasa tanpa bootstrap

    Tampilan HTML yang sudah menggunakan bootstrap

    itulah tutorial sederhana cara menggunakan bootstrap untuk pemula. Adapun keuntungan apabila kita menggunakan framework css bootstrap adalah kita tidak perlu repot-repot lagi mendesain web dengan css dari awal, cukup gunakan class-class yang sudah di sediakan oleh bootstrap. Untuk lebih detailnya silahkan kunjungi situs resmi bootstrap disini.

     

    Free $100
    Deal

    Daftar menggunakan link di pojok kanan atas, minimal top up $25 usd. Maka dalam waktu 30 hari setelah registrasi anda akan mendapatkan credit $100 gratis dari vultr untuk mencoba layanan mereka.

    More Less
    Doesn't expire

    Recent Articles

    aplikasi billing rtrw net

    Aplikasi Billing RTRW NET Untuk Manajemen PPPOE dan Hotspot

    0
    Untuk anda yang berkecimpung di dunia RTRW Net pasti sangat membutuhkan aplikasi untuk me-menajemen user PPPOE dan juga Hotspot. Untuk itu saya akan mencoba...
    cara remote mikrotik

    Cara Remote Mikrotik dari Luar Jaringan

    0
    Cara Remote Mikrotik - Pada artikel kali ini, saya akan mencoba membuatkan tutorial cara remote mikrotik dari luar jaringan. Lalu, apasih fungsinya remote mikrotik dari...
    tips memilih staking crypto

    Tips Memilih Staking Crypto yang Aman

    0
    Tips Memilih Staking Crypto - Pada umumnya, orang mendapatkan keuntungan dari aset crypto melalui mining atau menambang coin dan baru-baru ini juga banyak orang yang...
    cara setting pppoe client

    Cara Setting PPPoE Client di TP Link WR840n dengan Mudah

    0
    Cara Setting PPPoE Client - Pada artikel sebelumnya saya sudah memberikan tutorial bagaimana Cara Setting PPPoE Server di Mikrotik. Pada tutorial berikutnya, kita akan mengaplikasikan pppoe kepada...

    Apa itu Staking Crypto dan Bagaimana Cara Melakukan Staking

    0
    Apa itu Staking Crypto - Akhir-akhir ini staking crypto banyak sekali menjadi pembicaraan buah bibir di kalangan investor crypto. Mungkin masih banyak dari para investor...

    Related Articles

    1 Comment

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Dapatkan konten terbaik dari kami!