Skip to main content

Part 1 Instalasi Bootstrap - Bagaimana cara membuat template Bootstrap 4 sendiri

Assalamulaikum wb wb

Hai kawan-kawan apa kabar, kali ini saya akan menjelaskan bagaimana cara membuat template web sendiri menggunakan Bootstrap 4. Apa itu Bootstrap 4 ? bootstrap suatu framework front-end yang bagus, dan mempermudah kita dalam mendesain sebuat tampilan website yang responsive dengan mobile dalam bootstrap sudah disediakan liberary css dan javascript untuk memangun sebuah template yang elegan dan juga kita bisa menggabungkan koding css kita sendiri dengan bootstrap. Dengan bootstrap kita bisa membangun website yang dinamis atapun yang statis. Ada beberapa berapa versi bootstrap yang ada saat ini, yaitu versi bootstrap 3 dan juga yang update ada versi bootstrap 4. Kali ini saya akan menjelaskan bagaimana Cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap.



Bagaimana cara memulai membuat website dengan bootstrap, yah pertama kalian harus mengisntal beberapa tools dalam proses pembuatan website, langkah pertama kalian download file distribusi bootstrap yaitu bootstrap 4 silakan download disini atau kunjungi langsung website resminya disini.
Setealah itu kalian download tools untuk membuat website seperti notepad atau notepad ++ atau dreamweaver atau tools lainnya. Jika teman ingin memakai notepad ++ bisa dilihat diartikel ini.

Langkah ketiga adalah kalian bikin sebuah file semisal disini saya membuat file pada direktori C:\xampp\htdocs\belajar1 disini saya menggunakan localhost jika teman ingin mengikuti menggunakan localhost bisa baca artikel ini. Bisa dilihat pada gambar dibawah ini.



Setelah itu anda akan mendapatkan sebuah file zip. Jika teman belum memiliki zip silakan download disini. Langkah selanjutnya teman - teman sekalian mengestrak file yang telah didownload dan memasukannya pada file yang sudah dibuat didalam direktori C:\xampp\htdocs\belajar1. Lihat gambar dibawah :







Langkat selanjutnya adalah membuka notepad ++ atau tools lainnya dalam proses pembuatan website, dan anda masukan struktur HTML5, contoh seperti gambar dibawah : 



  1. Langkah pertama, anda buat sebuah folder contohnya sama memberi folder yaitu dengan name belajar1, lalu kalian membuat struktur HTML5 yaitu diawali dengan kalian ketikan <!doctype html> lalu dilanjutkan dengan <html lang="en"> dan beri jarak dengan enter 2 kali kemudian ditutup dengan </html>, setelah itu tambahkan atribut <head> dan beri jarak dengan enter 2 kali, kemudian antara koding <head> dan penutup </head> anda akan membuat memberi judul template dengan mengetik <title>judul anda </title>, dan kemudian terakhir anda ketikan koding dibawah atribut penutup </head> dengan anda ketik <body> dilanjutkan memberi enter 2 kemudian ditutup </body>, setelah tag <body> kalian enter satu setelah penutup </body> kemudian ketikan <footer> kemudian beri penutup </footer> beri enter 1.
  2. Langkah kedua masukan kode antara atribut <head> dengan penutup </head> dengan anda ketikan tag meta dengan koding <meta charset="utf-8"> dan enter satu ketikan juga  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  3. Langkah ketiga masukan tag Bootstrap CSS dan Bootstrap Jquary, Java script dll. Pertama anda  download dulu file bootstrap.min klik disini, lalu buat dulu file cssnya didalam folder yang telah anda buat lalu pindahkan file bootstrap.min yang sudah didownload kedalam folder css, lihatlah gambar dibawah ini.
  4. Yang tag awal anda masukan dibawah koding <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> beri enter 1 kemudian ketikan koding <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> kemudian beri enter 1. 
  5. Setelah didownload anda extrak didalam file yang anda buat. Setelah itu ketikan dibawah penutup </footer> dengan mengetik <script src="js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> beri enter 1 kemudian ketikan lagi <script src="js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> lalu enter lagi <script src="js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> dan beri enter 1 lagi.
  6. Langkah ke enam langkah terakhir adalah membuat tag <h1> dibawah tag <body> ketikan <h1> Hello world!</h1>.
Jika belum mengerti tentang pengkodingan direktori bisa dilihat artikel ini, langkah selanjutnya bisa anda jalankan dan hasil awa akan seperti gambar ini :




Demikian tutotial Cara membuat template Bootstrap 4 sendiri - Part 1 Instalasi Bootstrap, langkah selanjutnya anda bisa melihat artikel selanjutnya disini, jangan lupa share dan ikuti blog saya dan saya akan update selalu sekian terima kasih salam sejahtera buat kita semua wassalamualaikum wr wb.

Labels:

Comments

Post a Comment

Popular posts from this blog

Part 4 ASIDE - BAGAIMANA CARA MEMBUAT TEMPLATE BOOTSTRAP 4 SENDIRI

Assalaikum wr wb Get Link Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat NavBar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website. Kali ini saya akan bahas tentang cara membuat konten menggunakan bootstrap 4, begitu banyak hal yang harus diperhatikan dalam pembuatan konten pada tutorial ini, perhatikan pembukaan atribut dan juga penutupnya contohnya seperti ini, <div class="aside"> ini adalah satu pembuka dalam sebuah struktur css <div> adalah penanda bahwa itu adalah awal dari  pembukaan dalam css, sedang kan tag </div> adalah menandakan bahwa itu adalah batas css yang dibuat sedang diluar tersebut berbeda css yang ada. Hal-hal tersebut harus kita perhatikan karena itu jika tidak diperhatikan maka akan terjadi ketidak sesuaian st...
3 comments
Read more

Part 3 Slider Bar - Bagaimana cara membuat template Bootstrap 4 sendiri

Assalaikum wr wb Get Link Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat Slider Bar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website. Slider Bar adalah sebuah gambar yang bergerak yang berisi informasi slider bar memiliki gambar bergerak dari horizontal dan ada juga yang vertikal. Kali ini kita akan membahas Bagaimana cara membuat Slider Bar, Slider Bar berfungsi memberi informasi dari gambar yang banyak didalam satu slide, Slider Bar dari nama bisa kita ketahui bahwa slider bar adalah sebuah fitur yang ada pada HTML 5 dan css. Pada bootstrap 4 disediakan fitur Slider bar kalau istilah Bootsrap 4 adalah carousel slide. Jika kita membuat Slider Bar menggunakan  koding css tersendiri itu agak memakan waktu. Oleh karena itu terciptalah sebuah framew...
Post a Comment
Read more

Part 6 Sharing Button Bar - BAGAIMANA CARA MEMBUAT TEMPLATE BOOTSTRAP 4 SENDIRI

Get Link Assalaikum wr wb Apa kabar teman sekalian, kali ini kita akan membahas tentang bagaimana cara membuat NavBar menggunakan Bootstrap 4 yang telah disediakan. Seperti yang kalian ketahui bahwa Bootstrap 4 menyediakan beberapa fitur css yang sudah ada dan juga responsive pada smartphone, jadi kita mudah dalam pembuatan template website. Didalam pembahasan kali ini saya akan membagikan beberapa tips untuk membuat Sharing Button Bar . Kali saya akan menjelaskan tentang tutorial lanjutan cara membuat template dengan bootstrap 4, namu ditambah dengan beberapa css sendiri yang saya desain. Teman-teman bisa mengikutinya dari awal atau langsung. Hal-hal tersebut harus kita perhatikan karena itu jika tidak diperhatikan maka akan terjadi ketidak sesuaian struktur css atau tata letak template yang akan dibuat. Lihat gambar dibawah ini adalah contoh konten yang saya buat. Ok langsung saja kita masuk kepembahasan tentang Bagaimana cara membuat  Sharing Button Bar...
1 comment
Read more