Home Archives for Maret 2017

Jumat, 31 Maret 2017

Cara Install W3Schools Offline di Linux


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Install W3Schools Offline di Linux.

Pngertian

W3Schools adalah situs web developer informasi, dengan tutorial dan referensi yang berkaitan dengan topik pengembangan web seperti HTML, CSS, JavaScript, PHP, SQL, dan JQuery. Situs ini mendapatkan namanya dari singkatan untuk World Wide Web, W3 adalah numeronym dari www.w3schools tidak berafiliasi dengan W3C. Hal ini dibuat dan dimiliki oleh Refsnes data, pengembangan perangkat lunak milik keluarga Norwegia dan perusahaan konsultan. Situs ini menyediakan panduan referensi yang mencakup banyak aspek pemrograman web, termasuk teknologi seperti HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL dll. W3Schools menyediakan ribuan contoh kode. Dengan menggunakan editor online yang disediakan, pembaca dapat mengedit contoh dan mengeksekusi kode eksperimental.

Maksud & Tujuan

Untuk memudahkan kita dalam belajar pemrograman seperti HTML,CSS,Javascript dll dengan ofline (tanpa harus terhubung dengan internet)

Alat & Bahan

PC/Laptop
Install Lamp Server
File W3Schools Download disini

Langkah-Langkah

1. Buka Terminal (Ctrl+Alt+T)
2. Masuk sebagai superuser
$sudo su
3. Ketikkan:
#caja
jika terjadi eror sobat harus install caja terlebih dahulu dengan mengetikkan perintah :
#apt-get install caja
4. Setelah masuk caja, extract file W3School lalu pindahkan ke File System/var/www/html
5. Lalu beri hak akses direktori tersebut agar bisa diakses web browser. Dengan cara:
  • Buka Terminal baru (CTRL+Alt+T)
  • Masuk sebagai superuser
  • Ketikkan:
#chomod -R 755 /var/www/html/w3schools_offline2016
6. Buka web browser dan ketikkan localhost/w3schools_offline2016

Sekian Cara Install W3Schools Offline di Linux.
Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb
Read More

Kamis, 30 Maret 2017

Bootstrap: Buttons/Tombol


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Buttons (Tombol) dengan Bootstrap.

Gaya Tombol

Bootstrap memberikan tujuh gaya tombol dengan class-class sebagai berikut:
  1. .btn-default
  2. .btn-primary
  3. .btn-success
  4. .btn-info
  5. -btn-warning
  6. .btn-danger
  7. .btn-link
Contoh berikut menunjukkan kode untuk tombol yang berbeda gaya:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Gaya Tombol</h2>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>     
</div>

</body>
</html>


Class tombol dapat digunakan pada elemen <a>, <button> atau <input>

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Tag Button (Tombol)</h2>
  <a href="#" class="btn btn-info" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Input Button">
  <input type="submit" class="btn btn-info" value="Submit Button">
</div>

</body>
</html>


Ukuran Tombol

Bootstrap memberikan empat ukuran tombol:
  1. Large (Besar)
  2. Medium
  3. Small (Kecil)
  4. Xsmall (Sanngat Kecil)
Contoh berikut untuk menunjukan ukuran tombol yang berbeda:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Ukuran Button (Tombol)</h2>
  <button type="button" class="btn btn-primary btn-lg">Large (Besar)</button>
  <button type="button" class="btn btn-primary btn-md">Medium</button>   
  <button type="button" class="btn btn-primary btn-sm">Small (Kecil)</button>
  <button type="button" class="btn btn-primary btn-xs">XSmall (Sangat Kecil)</button>
</div>

</body>
</html>


Tombol Tingkat Blok

Sebuah tombol tingkat blok meliputi seluruh lebar dari elemen induk. Tambahkan class .btn-block untuk membuat tombol tingkat blok.

 Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Tombol Tingkat Blok</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>

  <h2>Tombol Tingkat Blok Besar</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

  <h2>Tombol Tingkat Blok Kecil</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>

</body>
</html>


Active/Disabled Buttons (Tombol)

Sebuah tombol dapat diatur untuk aktif (muncul ditekan) atau cacat (unclickable). Class .active membuat tombol bisa ditekan. Class .disabled membuat tombol tidak bisa di tekan.

 Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Button States</h2>
  <button type="button" class="btn btn-primary">Primary Button</button>
  <button type="button" class="btn btn-primary active">Active Primary</button>
  <button type="button" class="btn btn-primary disabled">Disabled Primary</button>
</div>

</body>
</html>



Sekian Cara Membuat Buttons (Tombol) dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Rabu, 29 Maret 2017

Bootstrap Badges (Lencana) dan Label


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Badges (Lencana) dan Label).

Badges (Lencana)

Badges (Lencana) adalah indikator numerik dari berapa banyak item yang terkait dengan link. Gunakan Class .badge dalam elemen <span> untuk membuat lencana.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">Badges (Lencana)
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badges (Lencana)</h2>
  <a href="#">Berita <span class="badge">5</span></a><br>
  <a href="#">Komentar <span class="badge">10</span></a><br>
  <a href="#">Terbaru <span class="badge">2</span></a>
</div>

</body>
</html>


Badges (Lencana) juga dapat digunakan di dalam unsur-unsur lain, seperti tombol.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badges (Lencana) pada Tombol</h2>
  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
  <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>   
  <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>       
</div>

</body>
</html>


Label

Label digunakan untuk memberikan informasi tambahan tentang sesuatu. Gunakan class .label, diikuti salah satu dari enam class kontekstual .label-default, .label-primary, .label-success, .label-info atau .label-danger dalam elemen <span> untuk membuat label.

 Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Label</h2>
  <h1>Contoh <span class="label label-default">Baru</span></h1>
  <h2>Contoh <span class="label label-default">Baru</span></h2>
  <h3>Contoh <span class="label label-default">Baru</span></h3>
  <h4>Contoh <span class="label label-default">Baru</span></h4>
  <h5>Contoh <span class="label label-default">Baru</span></h5>
  <h6>Contoh <span class="label label-default">Baru</span></h6>
</div>

</body>
</html>


Contoh berikut menunjukkan class label kontekstual:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Class Label Kontekstual</h2>
  <p>Class kontekstual dapat digunakan untuk mewarnai label.</p> 
  <span class="label label-default">Default Label</span>
  <span class="label label-primary">Primary Label</span>
  <span class="label label-success">Success Label</span>
  <span class="label label-info">Info Label</span>
  <span class="label label-warning">Warning Label</span>
  <span class="label label-danger">Danger Label</span>
</div>

</body>
</html>


Sekian Cara Membuat Badges (Lencana) dan Label).
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Senin, 27 Maret 2017

Bootstrap: Popover


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Popover dengan Bootstrap.

Popover Plugin

Popover Plugin ini mirip dengan tooltips, yaitu kotak pop-up yang muncul saat pengguna mengklik pada sebuah elemen. Perbedaannya adalah bahwa popover dapat berisi konten.

Cara Membuat Popover

Untuk membuat popover, tambahkan atribut data-toggle="popover". Gunakan atribut title untuk menentukan teks header popover, dan gunakan atribut data-content untuk menentukan teks yang harus ditampilkan dalam tubuh popover.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Contoh Popover</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});
</script>

</body>
</html>

Posisi Popover

Secara default, popover akan muncul di sisi kanan dari elemen. Gunakan atribut data-placement untuk mengatur posisi popover di atas, bawah, kiri atau sisi kanan elemen.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Contoh Popover</h3>
  <ul class="list-inline">
    <li><a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Atas</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bawah</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Kiri</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Kanan</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});
</script>

</body>
</html>
Tips:
  • Secara default, popover ditutup ketika Anda mengklik pada elemen lagi. Namun, Anda dapat menggunakan atribut data-triger="focus"
    yang akan menutup popover ketika mengklik luar elemen. 
  • Jika Anda ingin popover yang akan ditampilkan ketika Anda memindahkan pointer mouse di atas elemen, gunakan atribut data-triger="hover".

Sekian Cara Membuat Popover dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Sabtu, 25 Maret 2017

Bootstrap: Tooltip


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Tooltip dengan Bootstrap.

Tooltip Plugin

Tooltip plugin kotak pop-up kecil yang muncul saat pengguna menggerakkan pointer mouse di atas unsur.

Untuk membuat tooltip, tambahkan atribut data-toggle"tooltip". Gunakan atribut title untuk menentukan teks yang harus ditampilkan dalam tooltip.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Contoh Tooltip</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Arahkan kursor ke sini</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();  
});
</script>

</body>
</html>

Posisi Tooltip

Secara default, tooltip akan muncul di atas elemen. Gunakan atribut data-placement untuk mengatur posisi tooltip diatas, bawah, kiri atau kanan elemen.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Belajar Tooltip</h3>
  <p>Gunakan atribut data-placement untuk mengatur posisi tooltip.</p>
  <ul class="list-inline">
    <li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Atas</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bawah</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Kiri</a></li>
    <li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Kanan</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();  
});
</script>

</body>
</html>

Sekian Cara Membuat Tooltip dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Jumat, 24 Maret 2017

Bootstrap: Modal


Assalamu'alakum wr.wb

Kali saya akan berbagi Cara Membuat Modal dengan Bootstrap.

Modal Plugin

Modal plugin kotak dialog / popup window yang ditampilkan di atas dari halaman saat ini.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
   
      <!-- Isi Modal -->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
     
    </div>
  </div>
 
</div>

</body>
</html>

Ukuran Modal

Mengubah ukuran modal dengan menambahkan class .modal-sm untuk modal kecil atau class .modal-lg untuk modal besar. Tambahkan class ukuran ke elemen <div> dengan class .modal dialog.

Sekian Cara Membuat Modal dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Kamis, 23 Maret 2017

Bootstrap: Carousel (Korsel)


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Carousel (Korsel) dengan Bootstrap.

Carousel Plugin

Carousel Plugin adalah komponen untuk bersepeda melalui unsur-unsur, seperti carousel (slide).

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">
  <br>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="linux.png" alt="Linux" width="460" height="345">
      </div>
   
      <div class="item">
        <img src="Bootstrap-3.jpg" alt="Bootstrap" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

</body>
</html>

Keterangan:

1. <div> terluar
  • Komedi putar memerlukan penggunaan id (dalam ha ini id="myCarousel") untuk kontrol carousel berfungsi dengan baik.
  • class="carousel" menetapkan bahwah <div> ini berisi carousel.
  • Class .slide menambahkan CSS transisi dan animasi efek.
  • Atribut data-ride="carousel" memberi tahu bootstrap untuk mulai menghidupkan carousel.
2. bagian "Indicators"
  • Indikator adalah titik-titik kecil di bagian bawah setiap slide (yang menunjukkan berapa banyak slide yang ada di carousel, dan yang geser pengguna sedang melihat).
  • dikator-indikator tersebut ditentukan dalam daftar dipesan dengan class .carousel-indicator.
  • Atribut data-target menunjuk ke id dari carousel.
  • Atribut data-slide-to menentukan yang meluncur saat di klik pada titik tertentu. 
3. bagian "Wrapper for slides"
  • Slide ditentukan dalam <div> dengan class .carousel-inner
  • Isi dari setiap slide didefinisikan dalam <dive> debgan class .item
  • Class .active perlu di tambahkan ke salah satu slide. Jika tidak, carousel tidak akan terlihat.
4. bagian "Left and right controls"
  • Kode ini menambahkan "kiri" dan "kanan" tombol yang memungkinkan pengguna untuk pergi bolak-balik antara slide secara manual.
  • Atribut data-slide menerima kata kunci "prev" atau "next", yang merubah posisi geser pada saat ini.
NB: Jika ingin menambahkan keterangan pada setiap slide, tambahkan <div class="carousel-caption"> dalam setiap <div class="item">.

Sekian Cara Membuat Carousel (Korsel) dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Rabu, 22 Maret 2017

Bootstrap: Ukuran Input


Assalamu'alaikum wr.wb

Kali ini saya berbagi Cara Mengatur Ukuran Input dengan Bootstrap.

Ukuran Input Pada Form

  • Mengatur ketinggian elemen input menggunakan class .input-lg dan input-sm.
  • Mengatur lebar dari elemen menggunakan class .col-lg-* dan .col-sm-*.

Anda dapat membuat ukuran label cepat dan bentuk kontrol dalam bentuk horizontal dengan menambahkan .form-group-* ke elemen <div class="form-group">:


Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Ukuran Input</h2>
  <p> Anda dapat membuat ukuran label cepat dan bentuk kontrol dalam bentuk horizontal dengan menambahkan .form-group-* ke elemen div class="form-group": </p>
  <form class="form-horizontal" role="form">
    <div class="form-group form-group-lg">
      <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="lg">
      </div>
    </div>
    <div class="form-group form-group-sm">
      <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
      <div class="col-sm-10">
        <input class="form-control" type="text" id="sm">
      </div>
    </div>
  </form>
</div>

</body>
</html>

Ukuron Kolom

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Ukuran Kolom</h2>
  <p>Formulir dibawah ini menunjukkan elemen input dengan lebar yang berbeda menggunakan berbagai class .col-xs-*: </p>
  <form role="form">
    <div class="form-group">
      <div class="col-xs-2">
        <label for="ex1">col-xs-2</label>
        <input class="form-control" id="ex1" type="text">
      </div>
      <div class="col-xs-3">
        <label for="ex2">col-xs-3</label>
        <input class="form-control" id="ex2" type="text">
      </div>
      <div class="col-xs-4">
        <label for="ex3">col-xs-4</label>
        <input class="form-control" id="ex3" type="text">
      </div>
    </div>
  </form>
</div>

</body>
</html>

Teks Bantuan

Gunakan class .help-block untuk menambahkan tingkat blok text bantuan pad form.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Teks Bantuan</h2>
  <p>Gunakan class .help-block untuk menambahkan tingkat blok text bantuan pad form:</p>
  <form role="form">
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      <span class="help-block">Ini adalah beberapa teks bantuan yang memecah ke baris baru dan dapat memperpanjang lebih dari satu baris.</span>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

Sekian Cara Mengatur Ukuran Input dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Selasa, 21 Maret 2017

Bootstrap: Form Input 2






Assalamu'alaikum wr.wb

Kemari saya sudah berbagi Cara Membuat Form Input dengan Bootstrap. Ini adalah lanjutan dari postingan kemarin.

Kontrol Statis

Jika anda perlu mamasukkan teks biasa disamping label dalam bentuk horisontal, gunakan class .form-control-static pada elemen <p>.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form Inline: control states</h2>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="focusedInput">Focused</label>
      <input class="form-control" id="focusedInput" type="text">
    </div>
    <div class="form-group">
      <label for="inputPassword">Disabled</label>
      <input class="form-control" id="disabledInput" type="text" disabled>
    </div>
    <div class="form-group has-success has-feedback">
      <label for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
      <label for="inputError2">Input with error</label>
      <input type="text" class="form-control" id="inputError2">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
  </form>
</div>

</body>
</html>

Sekian artikel kali ini.
Semoga Beermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Senin, 20 Maret 2017

Bootstrap: Form Input






Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Form Input dengan Bootstrap.

Pendukung Form Control

Bootstrap mendukung kontrol form berikut:

  • Input (Masukan)
  • Textaerea
  • Checkbox (Kotak Centang)
  • Radio
  • Select (Memilih)


Input (Masukan)

Bootstrap mendukung semua jenis input HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Input tidak akan sepenuhnya ditata jika jenis mereka tidak dinyatakan dengan benar.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: input</h2>
  <p>Formulir di bawah ini mengandung dua unsur masukan; salah satu jenis text dan satu Jenis password:</p>
  <form>
    <div class="form-group">
      <label for="usr">Username:</label>
      <input type="text" class="form-control" id="usr">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
  </form>
</div>

</body>
</html>

Textarea

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: textarea</h2>
  <p>Formulir di bawah ini berisi textarea untuk komentar:</p>
  <form>
    <div class="form-group">
      <label for="comment">Komentar:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>
  </form>
</div>

</body>
</html>

Checkbox (Kotak Centang)

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: checkbox</h2>
  <p>Formulir di bawah ini berisi tiga checkbox. Opsi terakhir dinonaktifkan:</p>
  <form>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 1</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" value="">Option 2</label>
    </div>
    <div class="checkbox disabled">
      <label><input type="checkbox" value="" disabled>Option 3</label>
    </div>
  </form>
</div>

</body>
</html>

Contoh2:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>formulir di bawah ini berisi tiga checkbox inline:</p>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
</div>

</body>
</html>

Radio

Tombol radio digunakan jika Anda ingin membatasi pengguna untuk hanya memilih 1 dari daftar pilihan yang telah ditetapkan.

Contoh:
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: radio buttons</h2>
  <p>Formulir di bawah ini berisi tiga tombol radio. Opsi terakhir dinonaktifkan:</p>
  <form>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 1</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="optradio">Option 2</label>
    </div>
    <div class="radio disabled">
      <label><input type="radio" name="optradio" disabled>Option 3</label>
    </div>
  </form>
</div>

</body>
</html>



  Select (Memilih)

 Contoh:
 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: select</h2>
  <p>formulir di bawah ini berisi dua menu dropdown:</p>
  <form>
    <div class="form-group">
      <label for="sel1">Daftar pilih (pilih salah satu)::</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>
      <label for="sel2">Daftar pilih ganda (tahan shift untuk memilih lebih dari satu):</label>
      <select multiple class="form-control" id="sel2">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
  </form>
</div>

</body>
</html>



Sekian Cara Membuat Form Input dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More

Sabtu, 18 Maret 2017

Cara Install WPS Office Lewat Terminal Linux


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Install WPS Office Terminal Linux.

Pengertian

WPS Office (Sebelumnya dikenal Kingsoft Office) adalah sebuah paket aplikasi perkantoran yang dikembangkan oleh pengembang perangkat lunak dari Tiongkok yang berbasis di Zhuhai, yaitu Kingsoft. WPS Office merupakan sebuah paket aplikasi perkantoran yang terdiri dari tiga komponen utama: WPS Writer, WPS Presentation, and WPS Spreadsheet.

Aplikasi perkantoran memang seringkali menjadi kendala bagi pengguna baru pada sistem GNU/Linux. Proses peralihan penggunaannya pada beberapa aplikasi menjadi beban tersendiri. Seringkali dijumpai beberapa pengguna baru maupun sudah lama menjadi kendala aplikasi yang dibutuhkan untuk pekerjaannya.

Sebagai contoh aplikasi perkantoran seperti Microsoft Office, masih banyak pengguna yang seringkali menggunakan aplikasi tersebut pada sistem GNU/Linux. Hal ini secara teknis memang menyalahi aturan, namun beberapa faktor penyebab yang menjadi kebutuhan sehari-hari juga tidak bisa dielak begitu saja. Sebagai catatan, lebih baik Anda menggunakan aplikasi pada tempatnya saja. Jangan memaksakan sesuatu yang bukan pada tempat dan platformnya.

Aplikasi alternatif dari Microsoft Office ini ada banyak. Contohnya LibreOffice, WPS Office, OpenOffice.org dan sebagainya. Namun beberapa tampilan yang seringkali menyulitkan pengguna juga menjadi salah satu faktor kesulitan mereka. Nah, untuk itu aplikasi WPS Office lah menjadi solusi dari permasalahan Anda.

Perintah Untuk Menginstal WPS Office

Untuk 32-bit
  • cd && wget -O wps-office.deb http://kdl.cc.ksosoft.com/wps-community/download/a21/wps-office_10.1.0.5672~a21_i386.deb
  • sudo dpkg -i wps-office.deb
  • sudo apt-get -f install && rm wps-office.deb
  • wget -O web-office-fonts.deb http://kdl.cc.ksosoft.com/wps-community/download/a15/wps-office-fonts_1.0_all.deb
  • sudo dpkg -i web-office-fonts.deb
Untuk 64-bit
  • cd && wget -O wps-office.deb http://kdl.cc.ksosoft.com/wps-community/download/a21/wps-office_10.1.0.5672~a21_amd64.deb
  • sudo dpkg -i wps-office.deb
  • sudo apt-get -f install && rm wps-office.deb
  • wget -O web-office-fonts.deb http://kdl.cc.ksosoft.com/wps-community/download/fonts/wps-office-fonts_1.0_all.deb
  • sudo dpkg -i web-office-fonts.deb

Referensi:

  1. https://id.wikipedia.org/wiki/WPS_Office
  2. http://migrasilinux.or.id/cara-install-wps-office/
  3. http://askubuntu.com/questions/783927/how-to-install-wps-office-via-terminal

Sekian Cara Install WPS Office Lewat Terminal Linux.
Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb
Read More

Jumat, 17 Maret 2017

Bootstrap: Navigation Bar


Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Navigation Bar dengan Bootstrap.

Navigation Bar

Sebuah Navigation Bar adalah header navigasi yang ditempatkan di bagian atas halaman. Dengan Bootstrap , navigation bar bisa memperpanjang atau runtuh, tergantung pada ukuran layar. Sebuah navigation bar standar dibuat dengan<nav class="navbar navbar-default">.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Contoh Navbar Dasar</h3>
  <p>Sebuah bar navigasi adalah header navigasi yang ditempatkan di bagian atas halaman.</p>
</div>

</body>
</html>

Inverted Navigation Bar

Jika Anda tidak menyukai gaya bar navigasi default, Bootstrap memberikan alternatif, navbar hitam. Hanya mengubah class .navbar-default menjadi .navbar-inverse.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Inverted Navbar</h3>
  <p>Sebuah navbar terbalik hitam bukan abu-abu.</p>
</div>

</body>
</html>

Fixed Navigation Bar

Navigation Bar juga bisa diperbaiki di bagian atas atau di bagian bawah halaman. Sebuah navbar tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir. Class .navbar-fixed-top membuat navbar tetap diatas.

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body style="height:1500px">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Fixed Navbar</h3>
  <div class="row">
    <div class="col-md-4">
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>   
    </div>
    <div class="col-md-4">
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
    </div>
    <div class="col-md-4">
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
      <p>Sebuah bar navigasi tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.</p>
    </div>
  </div>
</div>

<h1>Gulir halaman ini untuk melihat efek</h1>

</body>
</html>
NB: Jika ingin membuat navbar tinggal dibagian bawah gunakan class .navbar-fixed-bottom.

Navigation Bar dengan Dropdown

Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Nama WebSite</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Navbar dengan Dropdown</h3>
  <p>Contoh ini menambahkan menu dropdown untuk tombol "Page 1" di navbar.</p>
</div>

</body>
</html>

Blok-Kanan Navigation Bar

Class .navbar-right untuk blok-kanan tombol navbar.
Pada contoh berikut kita menyisipkan tombol"Sign Up" dan tombol "Login" di sebelah kanan navbar. Saya juga menambahkan glyphicon pada masing-masing dua tombol baru:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

</body>
</html>

Collapsing Navigation Bar

Kita harus menyembunyikan navbar dan hanya ditampilkan ketika dibutuhkan.
Pada contoh berikut navbar digantikan oleh tombol di pojok kanan atas. Hanya ketika tombol diklik, bar navigasi akan ditampilkan:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/lib/bootstrap.min.css">
  <script src="/lib/jquery-1.12.2.min.js"></script>
  <script src="/lib/bootstrap.min.js"></script>
</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="#">Nama WebSite</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
 
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>Dalam contoh ini, navbar tersembunyi di layar kecil dan digantikan oleh tombol di pojok kanan atas.
  <p>Hanya ketika tombol diklik, bar navigasi akan ditampilkan.</p>
</div>

</body>
</html>

Sekian Cara Membuat Navigation Bar dengan Bootstrap.
Semoga Bermanfaat...!!!

Referensi:www.w3schools.com

Wassalamu'alaikum wr.wb
Read More
Langganan: Postingan (Atom)