1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

[Share] - Yuk kita bareng bareng belajar bootstrap framework

Discussion in 'Desain Web & Grafis' started by kentooz.com, Dec 16, 2012.

Page 1 of 2
  1. kentooz.com

    kentooz.com Themes seller

    Joined:
    Jun 10, 2012
    Messages:
    870
    Likes Received:
    225
    Location:
    localhost laptop ane
    Sebelumnya ane pernah share dimari bagaimana cara membuat theme wordpress yang baik dan benar...

    Kali ini ane mau share cara membuat website tentang bootstrap framework (CSS dan JS pada bootstrap) - Ane dah cari di forum ini kayaknya belum ada yang membahas masalah bootstrap... Ijinkan newbie membuat thread masalah bootstrap

    Pembuka

    Apa itu bootstrap? Ya bootstrap adalah framework HTML yang sangat populer di kalangan web designer yang menginginkan designnya responsive karena bootstrap mendukung CSS3 dan HTML5 yang sangat powerfull baik itu komersial maupun non komersial. Bootstrap dibuat oleh developer dari twitter yang bernama Mark Otto and Jacob Thornton.

    Langkah langkahnya:
    Pertama yang harus anda lakukan adalah mendownload file bootstrap di github silahkan download filenya di:
    __hxxp://github.com/twitter/bootstrap

    Lalu masuk ke folder docs/index.html buka di browser anda, klik custumized di navbar, nah disini ente bisa setting CSS nya semisal ente bisa merubah warna font, besarnya font, warna button, JS yang ingin diaktifkan dan di nonaktifkan (saran ane sih biarkan default biar lebih mudah untuk update kedepannya) untuk font ente bisa setting di custom CSS buatan ente sendiri...

    Setelah itu silahkan klik customize and download (Anda harus terhubung dengan internet)

    Nah hasil downloadnya kira2 seperti bagan dibawah ini, jika anda ingin mengkonvert ke Wordpress bagan dibawah ini harus ada di folder wp theme anda

    bootstrap/
    +-- css/
    ¦ +-- bootstrap.css
    ¦ +-- bootstrap.min.css
    +-- js/
    ¦ +-- bootstrap.js
    ¦ +-- bootstrap.min.js
    +-- img/
    +-- glyphicons-halflings.png
    +-- glyphicons-halflings-white.png


    Buat file index.html sebagai permulaan untuk mendesain, jika anda tidak ingin repot silahkan klik Get started klik HTML started nah disana ada pilihan template pilih Example yang anda inginkan. Jika anda menginginkan design anda sendiri anda bisa membuatnya dengan menuliskan kode berikut:

    Code:
    
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap title anda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ini harus ada untuk mendeteksi besarnya layar pada perangkat lunak ipad atau iphone -->
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- File CSS anda -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, untuk support responsive di internet explorer 6-10 bisa juga menggunakan modernizr.js seperti di theme WP ane -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!--icons -->
    <link rel="shortcut icon" href="img/favicon.ico">
  </head>

  <body>
    <!-- Masukkan HTML anda disini nanti akan kita pelajari masalah HTML bootstrap dibawah -->

    <!-- Untuk performa yang lebih baik sebaiknya taruh JS difooter dan gunakan selalu minified JS dari bootstrap untuk pengguna akhir -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js.js"></script>

  </body>
</html>
    Sekarang kita akan membahas bagaimana caranya memasukkan HTML di antara body diatas buat, sebelum memulai anda harus terlebih dahulu membuat layout website yang anda inginkan apakah fixed atau fluid dan berapa sidebar yang anda inginkan berapa besar lebar sidebar dan lain2, silahkan bikin layoutnya dikertas atau di photoshop anda masing masing...

    Sudah berikut adalah contoh kode untuk layout 2 grid untuk sidebar di sebelah kanan

    1. Buat header saya menggunakan HTML5 yaitu <header> untuk memudahkan membedakan mana header mana content... Untuk diingat biasakan menggunakan container untuk memulai suatu element website... Silahkan anda lihat file css nya disana terdapat element header
    Code:
       
          <header class="header">
                 <div class="container">                  
                </div>
          </header>
    NB: Container merupakan element penting dalam membuat sebuah layout di bootstrap gunakan selalu container jika anda membuat fixed layout dan gunakan container-fluid jika anda ingin membuat fluid layout

    2. Buat navigasi responsive - disini saya hanya membahas navigasi bawaan dari bootstrap

    Code:
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </nav>
    Catatan penting diatas:
    data-toggle merupakan jquery colapse yang terdapat pada bootstrap js
    data-target adalah target element yang ingin dibuat collapse dilayar kecil
    nav adalah HTML5 untuk memudahkan anda mengetahui element navigasi website anda
    untuk css lainnya silahkan anda baca2 di dokumentasinya karena dokumentasi sangat lengkap buat pemula seperti saya

    2. Buat content + sidebar dengan menggunakan grid bootstrap
    Code:
    <div class="container">
<div class="row">
         <div class="span9">
         </div>
         <div class="span3">
         </div>
</div>
</div>
    Keterangan diatas:
    Seperti biasa gunakan container, untuk membagi beberapa bagian grid gunakan row untuk design fluid gunakan row-fluid, Nah untuk span9 dan span3 untuk lebih jelasnya baca dokumentasi bootstrapnya di scaffolding...

    Berikut list web yang bisa anda gunakan untuk mendesign bootstrap:
    Ini untuk memodifikasi style terus mendownloadnya.
    hXXp://stylebootstrap.info/

    Ini untuk memodifikasi button padd bootstrap perlu diketahui button bootstrap menggunakan css3 yaitu gradient nah situs dibawah berguna untuk itu
    hXXp://charliepark.org/bootstrap_buttons/

    Malas mendesign situs ini adalah pilihan yang tepat untuk anda dan ane tentunya:
    hXXp://bootswatch.com/

    Berikut situs yang menyediakan PSD file untuk design bootstrap
    hXXp://gui.repixdesign.com/#freebies

    Berikut adalah situs modifikasi dari bootstrap khusus font dan icon mantap dah pokoknya
    hXXp://fortawesome.github.com/Font-Awesome/

    Tidak hanya CSS, bootstrap juga disertakan JS didalamnya dan menggunakan jquery sebagai basenya, masih dengan jquery dibawah adalah source jquery-ui yang dibangun oleh framework bootstrap
    hXXp://addyosmani.github.com/jquery-ui-bootstrap/

    Dan masih banyak lagi... Suka dengan share ini jagan lupa untuk tekan like...

    Akhir kata maaf kalau ada salah salah kode atau share, ane cuman newbie, mohon petunjuk dari master disini...
     
    kentooz.com, Dec 16, 2012
    #1
    kurawa, becaknetwork, Kurniawan_84 and 20 others like this.
  2. andritea

    andritea Super Hero

    Joined:
    Jul 15, 2009
    Messages:
    2,428
    Likes Received:
    347
    Location:
    Cirebon-Depok-Takengon
    izin menyimak om... sambil belajar.... #btw ane ud baca pm nya n temen ane yang eksekusi tadi siang hehehhehehe
     
    andritea, Dec 16, 2012
    #2
  3. AfifKurniawan

    AfifKurniawan Banned

    Joined:
    Jun 24, 2012
    Messages:
    631
    Likes Received:
    26
    Location:
    Medan, Indonesia
    Wahhh mastah ane turun tangga domino :lol: ijin gelar tikar mas nyimak sambil belajar juga ama dulurnya :senyum:
     
    AfifKurniawan, Dec 16, 2012
    #3
  4. kentooz.com

    kentooz.com Themes seller

    Joined:
    Jun 10, 2012
    Messages:
    870
    Likes Received:
    225
    Location:
    localhost laptop ane
    Hehehe, oke mastah silahkakn disimak sebelumnya download terlebih dahulu filenya...

    sama sama mastah kita diskusikan bareng2 dimari..

    Barangkali ada yang mau menambahkan silahkakn...
     
    kentooz.com, Dec 16, 2012
    #4
  5. Igoey1122

    Igoey1122 Super Hero

    Joined:
    Sep 12, 2010
    Messages:
    1,245
    Likes Received:
    177
    Location:
    Di Hati Mu
    ajibbb next time ane pelajarin om, izin bookmark like penceeettttddddd :kembang:
     
    Igoey1122, Dec 16, 2012
    #5
  6. andita

    andita Hero

    Joined:
    Mar 6, 2012
    Messages:
    705
    Likes Received:
    24
    Location:
    Hatimu
    kereeeeen mastah, terima kasih untuk share nya.
    dicerna bertahap dulu :)
     
    andita, Dec 16, 2012
    #6
  7. dewaz

    dewaz Super Hero

    Joined:
    Sep 24, 2009
    Messages:
    1,523
    Likes Received:
    211
    Location:
    bali
    duhhhh ... pusing ane,
    gak ada program visual design gan? :'(
     
    dewaz, Dec 16, 2012
    #7
  8. kentooz.com

    kentooz.com Themes seller

    Joined:
    Jun 10, 2012
    Messages:
    870
    Likes Received:
    225
    Location:
    localhost laptop ane
    Download aja filenya di github mastah

    Siap mastah
    Iya mastah sayang kalau gak dipelajari... Soalnya powerfull banget nih framework...
     
    kentooz.com, Dec 16, 2012
    #8
  9. suriemie

    suriemie Ads.id Pro

    Joined:
    Sep 15, 2006
    Messages:
    404
    Likes Received:
    53
    nambah dikit:
    koleksi theme gratis bootstrap yg bs didownload:
    hxxp://bootswatch.com/

    koleksi website yg dibuat pake bootstrap, lumayan buat nyari inspirasi
    hxxp://builtwithbootstrap.com/
     
    suriemie, Dec 16, 2012
    #9
  10. chandra07

    chandra07 Ads.id Starter

    Joined:
    Apr 25, 2011
    Messages:
    84
    Likes Received:
    0
    Location:
    Indonesia
    Nyimakkk om... Selagi ada yang share..
     
    chandra07, Dec 16, 2012
    #10
  11. firdaushuda

    firdaushuda Ads.id Fan

    Joined:
    Dec 19, 2013
    Messages:
    172
    Likes Received:
    3
    nah nemu juga cara buat theme wordpress pake bootstrap.
    langsung praktekin gan.
     
    firdaushuda, Feb 24, 2014
    #11
  12. sibhe7

    sibhe7 Ads.id Pro

    Joined:
    Dec 22, 2012
    Messages:
    427
    Likes Received:
    4
    Wah INI sambungan yg tadi..makasih gan

    Sent from my GT-S5570 using Tapatalk
     
    sibhe7, Feb 24, 2014
    #12
  13. nextkira

    nextkira Ads.id Fan

    Joined:
    Jan 5, 2013
    Messages:
    240
    Likes Received:
    6
    Location:
    Yogyakarta
    Halo,

    Ijin nyimak & nambahin dikit :

    Sekarang develop boostrap lebih mudah dengan adanya beberapa editor instan yang tinggal drag & drop aja, misalnya ini gan :
    layoutit.com

    disitu agan bisa bikin template & fitur - fitur didalamnya cm tinggal tempel2 aja ky mainan widget wordpress :D

    Tips untuk yang baru belajar & pengen develop manual tapi bingung fungsi- fungsi class nya, bisa buka website yang sudah jadi & dibuild pakai bootstrap lalu liat class masing-masing komponennya menggunakan fitur inspect element dari browser :)
     
    nextkira, Mar 16, 2014
    #13
  14. magenta

    magenta Newbie

    Joined:
    Feb 16, 2012
    Messages:
    38
    Likes Received:
    0
    wah. ilmu baru nih. makasih masbro. :-B
     
    magenta, May 20, 2014
    #14
  15. om.bram69

    om.bram69 Newbie

    Joined:
    May 28, 2014
    Messages:
    21
    Likes Received:
    1
    bootstrap, tali sepatu! hehhe keep sharing bro
     
    om.bram69, May 28, 2014
    #15
  16. dewancc

    dewancc Ads.id Fan

    Joined:
    Apr 4, 2009
    Messages:
    152
    Likes Received:
    1
    Yaaah udah sepi yah...
     
    dewancc, Jun 30, 2014
    #16
  17. jta_artikel

    jta_artikel Newbie

    Joined:
    Dec 2, 2013
    Messages:
    36
    Likes Received:
    1
    bootstrap update lagi ya bro..
    tambah pusing @@ hahaha
     
    jta_artikel, Jun 30, 2014
    #17
  18. devprolabs

    devprolabs Ads.id Pro

    Joined:
    Mar 2, 2014
    Messages:
    480
    Likes Received:
    14
    Location:
    Jakarta
    ikutan belajar gan, siapa tau bisa jualan Themes ky agan kentooz :D
     
    devprolabs, Jun 30, 2014
    #18
  19. poseidon

    poseidon Ads.id Fan

    Joined:
    Sep 8, 2012
    Messages:
    148
    Likes Received:
    1
    Ijin ninggalin jejak dimari ya mastah...
    Ane sendiri awal pake bootstrap modal nekat -- ada teman minta dibuatin aplikasi, trus ane gugling akhirnya mutusin pake bootstrap. Ternyata enak banget en jadi gampang bikin aplikasi web yg responsif. So far udah 2 project yg ane garap pake bootstrap. Mungkin kedepannya bakal dipake terus :)
    Thanks sharingnya.. jadi nambah ilmu ane yg masi nubie ini :)
     
    poseidon, Jul 1, 2014
    #19
  20. warsito

    warsito Banned

    Joined:
    Mar 22, 2011
    Messages:
    263
    Likes Received:
    10
    Location:
    jawa
    [h=2]bootstrap itu apa sih,... apa beda sama WP???[/h]
     
    warsito, Jul 15, 2014
    #20
Page 1 of 2

Share This Page