Apa Itu Bootsrap, Tentang, Pengenalan Bootsrap |Belajar Bootsrap

Berbicara tentang Framework User Interface Pasti tak lepas dengan yang namanya Bootstrap. Pada Kesempatan ini zlearn akan mengupas tuntas mengenai framework Bootstrap.

Belajar Bootsrap dari nol sampai mahir

Apa Itu Framework Bootstrap?

Bootstrap adalah sebuah framework yang dibuat oleh Twitter Foundation  yang diperuntukan untuk mempermudah para developer dan desainer web untuk mempermudah membuat user interface website dengan lebih cepat. Bootstrap bersifat gratis dan open source sehingga semua orang dapat menggunakan Bootstrap. Bootstrapdibuat menggunakan HTML 5, CSS, Javascript, dan glyphicon yang berupa font awesome. selain itu Bootstrap juga memiliki banya plugin sperti datepicker, datatables dan sebagainya.

Tentang Bootraps?

Bootstrap merupakan kumpulan HTML, CSS, Jquery dan Font Awesome yang berguna untuk memepermudah dalam proses pembuatan sebuah website dimualai dari vesi Bootstrap 2.xx dan sekarang sudah mencapai versi 4.xx dan versi yang paling banyak digunakan saat ini adalah versi 3.xx

Dimana Tempat Download Bootstrap?

Untuk Mengunduh atau mendownload framework Bootstrap dapat di download di situs resmi Bootstrap yaitu di  http://getbootstrap.com/getting-started/ Tersedia dalam 3 versi download yaitu dalam bentuk Bootstrap Yaitu berupa compiler HTML, CSS dan Javacript yang siap digunakan. Yang kedua yaitu versi Less dalam bentuk less dan perlu di compiller menggunkan less dan biassanya digunakan di OS linux dan OSX, Yang ketiga adalah SASS  Apa Itu SASS dan Cara Instalnya.  Yang paling sering digunakan dan di dwonload adalah compiler yang berupa HTML , CSS dan Javascript karena dapat langsung digunakan tanpa perlu mengcopile kode sumbernya.


Pengenalan Bootstrap?

 Pengenalan directory Bootsrap. Jika anda sudah mendownloa Bootraps setelah di ekstrak maka file root dirictory Bootrap akan seperti berikut:
Root Directory
       -CSS
              -bootsrap.css
              -bootsrap.min.css
       -Font
              -glyphicons-halflings-regular.ttf
             -glyphicons-halflings-regular.svg
             -glyphicons-halflings-regular.EOT
      -JS
              -bootsrap.js
              -bootsrap.min.js
     -index.html
Lalu kiat menaruh file web kita di dalam root directory bersama folder CSS, Font dan JS

Memulai Bootsrap dan Membuat Layout Bootsrap ?

  • Pertama Buat sebuah folder baru terserah anda kemudian Copykan file dan folder yang yang telah anda download tadi.
  • Kemudian setelah itu siapkan text editor boleh menggunakan Notepad, Sublime, Gedit dan sebagainya.
  • Setelah itu buat sebuah file dengan nama index.html Ketik atau salin kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Zlearn.id | Belajar Bootsrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }
    
    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>


</html>
  • Setelah itu buka di browsur anda dan tampilannya kurang lebih seperti ini
Belajar Bootsrap Membuat layout dan TemplateBootsrap
  • Selamat anda sudah membuat layout atau template bootsrap anda.
  • Bagi yang ingin langsung mendownload source kode daat mendownloadnya di tautan dibawah ini:

#catatan 
Passord zip : zlearn.id

Baca Juga


Sekian tutorial kali ini semoga dapat ermanfaat bagi para coder dan programer yang ingin mendalami framework Bootsrap. Jika ini postingan Apa Itu Bootsrap, Tentang, Pengenalan Bootsrap |Belajar Bootsrap.  Membantu anda dan dapat bermanfaat tidak ada salahnya untuk membagikan postingan ini dan bila ada pertanyaan silahkan berkomentarlah di kolo komentar yang telah disediakan.


Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...