Our social:

Latest Post

Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

Thursday, May 11, 2017

Template Login Sederhana Dengan Bootstrap

Halaman Login terdapat pada Website Dinamis. Halaman ini adalah ‘pintu’ menuju halaman administrator, atau halaman user jika website-nya merupakan website yang mengharuskan penggunanya mempunyai akun.

Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.

Maka Dari itu saya disini akan share membuat template sederhana dengan menggunakan HTML dan Bootstrap. dengan model sederhana :D
oke langsung saja :

1. Download Bootstrap di Website Resmi nya ( cari di google )
2. setelah download selesai silahkan kamu buka XAMPP dan nyalakan Apache untuk web servernya, dan kemudian extract bootstrap kamu yg sudah di download tadi  di folder project kamu, misalnya di C:\xampp\htdocs\login . maka nanti akan muncul 3 buah folder css, fonts dan js.
3.folder css berisi tentang file file style yang digunakan oleh bootstrap, file fonts berisi font yang dibutuhkan oleh css dan file js berisi file - file javascript.

setelah berhasil kamu extract di folder project kamu sekarang buatlah sebuah file dengan nama login.php
 
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Login - CODEBARENG.NET
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
  </head>
  <body style="background:#3598DC;">
   <div id="row" style="margin-top:9pc;">
    <div class="col-lg-3 col-lg-offset-4 centered">
     <div class="panel panel-default"  style="margin-left:3pc;">
      <div class="panel-heading">
       <h3>Input Data Login</h3>
      </div>
      <div class="panel-body">
       <form>
        <input type="text" class="form-control" placeholder="Username" name="user">
        <br>
        <input type="text" class="form-control" placeholder="Password" name="pass">
        <br>
        <button class="btn btn-primary btn-md"> SIGN IN</button>
        
        <span class="pull-right" style="padding-top:5px;">
         <a href="#">lost your password ?</a>
        </span>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>
Oke Setelah itu Save dan Lihat Hasil nya
berikut hasilnya


  Atau kamu bisa Download Disini :

Wednesday, February 8, 2017

Tutorial Cara Membuat Button dengan Bootstrap


Setiap berkaitan dengan web pasti ada tombol button.. agar tampilan menarik dan bagus / tidak usah koding lagi css nya saya sarankan memakai bootstrap. apa itu bootstrap ? kamu bisa lihat di artikel sebelumnya Pengertian Bootstrap

Oke langsung saja kita buat..
Untuk gaya button bootstrap ada beberapa diantara nya seperti :
Hasil gambar untuk button bootstrap
  • .btn-default = Putih
  • .btn-primary  = Biru
  • .btn-success = Hijau
  • .btn-info = biru muda
  • .btn-warning = oranye
  • .btn-danger = Merah
  • .btn-link
cara penulisan tag HTML seperti ini :

<button type="button" class="btn btn-primary btn-lg">Warna Biru</button>
untuk besar kecil nya button seperti gambar di atas kamu hanya perlu menambah kode btn-lg, btn-md,  btn-sm dan btn-xs
  1. btn-lg = untuk ukuran besar button (large)
  2. btn-md = untuk ukuran sedang button (medium)
  3. btn-sm = untuk ukuran kecil button (small)
  4. btn-xs = untuk ukuran sangat kecil button (XSmall)
penulisan seperti ini :

<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary btn-md">Medium</button>

<button type="button" class="btn btn-primary btn-sm">Small</button>

<button type="button" class="btn btn-primary btn-xs">XSmall</button>

itu saja tulisan dari saya terima kasih sudah berkunjung

Tuesday, February 7, 2017

Pengertian Bootstrap

Bootstrap adalah sebuah framework yang dibuat dengan menggunakan bahasa dari html dan css, namun juga menyediakan efek javascript yang dibangun dengan menggunakan jquery. Kelebihan dari bootstrap ini adalah dapat memudahkan seorang develop dalam membangun website static atau template web atau tema web.
Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.
Tentu anda bertanya-tanya kenapa sangat banyak yang telah menggunakan bootstrap dalam pengembangan website. berikut ini akan di jelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootsrap. adapun beberapa kelebihan bootstrap adalah sebagai berikut.
  • Penggunaan bootstrap sangat menghemat waktu.
  • Tampilan bootstrap yang sudah cukup terlihat modern.
  • Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
  • Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
  • Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.
Jika anda mau tau cara menggunakan bootstrap  masuk ke link ini Cara Menggunakan Bootstrap
oke itu saja sekian ..

Tutorial Cara Menggunakan Bootstrap

 

Pada artikel kali ini saya akan nulis Cara Menggunakan Bootstrap. Tentu nya dengan menggunakan Framework Boostrap ini kamu telah di permudah dalam segi design website-website yang kamu inginkan :D

langsung aja :
  1. langkah pertama adalah silahkan kunjugi website resmi bootstrap di http://getbootstrap.com kemudian donwload bootstrap.
  2. setelah download selesai silahkan kamu buka XAMPP dan nyalakan Apache untuk web servernya, dan kemudian extract bootstrap kamu yg sudah di download tadi  di folder project kamu, misalnya di C:\xampp\htdocs\latihan1 . maka nanti akan muncul 3 buah folder css, fonts dan js.
  3. folder css berisi tentang file file style yang digunakan oleh bootstrap, file fonts berisi font yang dibutuhkan oleh css dan file js berisi file - file javascript.
setelah berhasil kamu extract di folder project kamu sekarang buatlah sebuah file dengan nama index.php

kemudian ketikan kode standar berikut ini :
<!DOCTYPE html>

<html lang="en">

    <head>

      <title>Contoh Bootstrap</title>

      <meta charset="utf-8">

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

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

    </head>

    <body>

        <div class="container">

          <h1>menggunakan bootstrap</h1>

          <p>Ini adalah Text</p>

        </div>

    </body>

</html>
 
penjelasan :
1. script untuk memanggil file css bootstrap, dengan memakai cara pemanggilan memakai type penulisan  "css external", di link kan masuk kedalam folder css lalu nama filenya. seperti di bawah ini :
<link rel="stylesheet" href="css/bootstrap.css">
2. lalu ini adalah salah satu contoh class yang terdapat dalam bootstrap
<div class="container">

lalu kamu jalankan di browser kesayangan anda di ketikan di url seperti ini :
http://localhost/latihan1/index.php

dan lihat hasilnya.
itu saja tulisan pada kali ini terimakasih sudah berkunjung..

Copyright 2017 CODEBARENG All Rights Reserved