Root Flash

Cara Root dan Flashing Semua Jenis Hp Android

Tampilkan postingan dengan label Bootstrap 3. Tampilkan semua postingan
Tampilkan postingan dengan label Bootstrap 3. Tampilkan semua postingan

Bootstrap 3 Pagination - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Pagination

TrikSonic - Apa itu Pagination ? Pagination ialah suatu prosses yang mengorganisir dan menata konten atau artikel dengan membaginya menjadi halaman terpisah.
Dengan memakai Bootstrap, keperluan untuk menciptakan Pagination sanggup dilakukan atau dibentuk dengan cepat efisien dan modern.
Berikut tutorial dan referensi wacana menciptakan Pagination dengan memakai Bootstrap 3 :

Default pagination

Secara default untuk menciptakan Pagination pada bootstrap memakai class dasar yaitu .pagination yang diterapkan pada elament html <ul> atau <ol>

Contoh :

<ul class="pagination">   <li><a href="#">&laquo;</a></li>   <li><a href="#">1</a></li>   <li><a href="#">2</a></li>   <li><a href="#">3</a></li>   <li><a href="#">4</a></li>   <li><a href="#">5</a></li>   <li><a href="#">6</a></li>   <li><a href="#">&raquo;</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 pagination</h2>  <ul class="pagination">   <li><a href="#">&laquo;</a></li>   <li><a href="#">1</a></li>   <li><a href="#">2</a></li>   <li><a href="#">3</a></li>   <li><a href="#">4</a></li>   <li><a href="#">5</a></li>   <li><a href="#">6</a></li>   <li><a href="#">&raquo;</a></li> </ul>  </div> </body> </html>

Ukuran Pagination

Untuk mengatur ukuran pagination pada bootstrap 3, tambahkan class .pagination-lg (untuk ukuran besar) atau .pagination-sm (untuk ukuran kecil) pada class dasar .pagination

Contoh :

<nav aria-label="Page navigation">   <ul class="pagination pagination-lg">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>  <nav aria-label="Page navigation">   <ul class="pagination pagination-sm">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Ukuran pagination</h2>  <nav aria-label="Page navigation">   <ul class="pagination pagination-lg">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>  <nav aria-label="Page navigation">   <ul class="pagination pagination-sm">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>  </div> </body> </html>

Pagination status active

Untuk menampilkan sebuah pagination yang sedang aktif, tambahkan class .active pada element <li> yang berada didalam rentang pagination.

Contoh :

<nav aria-label="Page navigation">   <ul class="pagination">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li class="active"><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - pagination Aktif</h2>  <nav aria-label="Page navigation">   <ul class="pagination">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li class="active"><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>  </div> </body> </html>

Pagination status disabled

Untuk menampilkan sebuah pagination yang tidak aktif atau nonaktif, tambahkan class .disabled pada element <li> yang berada didalam rentang pagination.

Contoh :

<nav aria-label="Page navigation">   <ul class="pagination pagination">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li class="disabled"><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - pagination Disabled</h2>  <nav aria-label="Page navigation">   <ul class="pagination pagination">     <li><a href="#">&laquo;</a></li>     <li><a href="#">1</a></li>     <li class="disabled"><a href="#">2</a></li>     <li><a href="#">3</a></li>     <li><a href="#">4</a></li>     <li><a href="#">&raquo;</a></li>   </ul> </nav>  <p>  Area nomor 2 mempunyai tampilan disabled </p>  </div> </body> </html>

Bootstrap 3 Pager - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Pager

TrikSonic - Apa itu Pager Pada Bootstrap ? Pager merupakan bab dari Pagination dengan susunan dan tampilan yang sederhana.
Berikut tutorial dan teladan wacana menciptakan Pager memakai Bootstrap 3 :

Default Pager

Untuk menciptakan pager memakai bootstrap 3 diharapkan susunan dan class default biar dapat direalisasikan dengan sebagimana mestinya
Nama class default yang dipakai ialah .pager yang ditulis didalam element <ul> atau <ol> (rekomendasi gunakan element <ul>)

Contoh :

<ul class="pager">   <li><a href="#">Previous</a></li>   <li><a href="#">Next</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Pager</h2>   <ul class="pager">   <li><a href="#">Previous</a></li>   <li><a href="#">Next</a></li> </ul>   </div> </body> </html>

Posisi Pager

Untuk mengatur Keselarasan atau posisi pager tambahkan class .previous (posisi kiri) dan .next (posisi kanan) kedalam element <li> yang berada didalam rentang element Pager.

Contoh :

<ul class="pager">   <li class="previous"><a href="#">Previous</a></li>   <li class="next"><a href="#">Next</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Posisi Pager</h2>   <ul class="pager">   <li class="previous"><a href="#">Previous</a></li>   <li class="next"><a href="#">Next</a></li> </ul>   </div> </body> </html>

Bootstrap 3 Pager dengan Status disabled

Untuk menunjukkan tampilan nonaktif atau tidak aktif tambahkan class .disabled kedalam element <li> yang berada didalam rentang element Pager

Contoh :

<ul class="pager">   <li class="previous disabled"><a href="#">Previous</a></li>   <li class="next"><a href="#">Next</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Pager Disabled</h2>   <ul class="pager">   <li class="previous disabled"><a href="#">Previous</a></li>   <li class="next"><a href="#">Next</a></li> </ul>   </div> </body> </html>

Bootstrap 3 Navs - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Navs

TrikSonic - Navs pada Bootstrap dipakai untuk menciptakan sebuah navigasi atau pinjaman panduan berupa sajian dan pada umumnya berisi sebuah link atau URL.
Berikut beberapa pola yang dapat dipelajari ihwal Bootstrap Navs :

Tabs

Metode yang dipakai untuk menciptakan navigasi berupa Tab.
Untuk menerapkannya gunakan class .nav sebagai class dasar dan disertai class .nav-tabs, yang dituliskan pada element HTML <ul>

Contoh :

<ul class="nav nav-tabs">   <li class="active"><a href="#">Beranda</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tabs</h2>  <ul class="nav nav-tabs">   <li class="active"><a href="#">Beranda</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li> </ul>  <!--note--> <p style="margin-top:25px;">  Tambahkan class <code>.active</code> pada element <code>LI</code>,   untuk memberi tanda daftar yang sedang aktif </p> </div>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Tab View

Tab view artinya yaitu sebuah tab peralihan yang kalau ada interaksi oleh user maka akan memicu peralihan panel yang terlihat
Untuk menerapkannya tambahkan attribute data-toggle="tab" pada setiap tautan yang ada, lalu sasaran view element harus memiliki Attribute ID unik dan memiliki class dasar .tab-pane
Bungkus semua element tab dengan element HTML <div> berikan class .tab-content
Class pemanis yang dapat disisipkan pada .tab-pane yaitu : .fade, .in dan .active

Contoh :

<ul class="nav nav-tabs">   <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>   <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul>  <!-- area tab view --> <div class="tab-content">    <div id="menu1" class="tab-pane fade in active">     <h3>Menu 1</h3>     <p>Konten lainnya</p>   </div>      <div id="menu2" class="tab-pane fade">     <h3>Menu 2</h3>     <p>Konten lainnya</p>   </div>      <div id="menu3" class="tab-pane fade">     <h3>Menu 3</h3>     <p>Konten lainnya</p>   </div>    </div>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tab View</h2>   <ul class="nav nav-tabs">   <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>   <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul>  <div class="tab-content">   <div id="menu1" class="tab-pane fade in active">     <h2>Menu 1</h>     <p>Konten lainnya</p>   </div>   <div id="menu2" class="tab-pane fade">     <h3>Menu 2</h3>     <p>Konten lainnya</p>   </div>   <div id="menu3" class="tab-pane fade">     <h3>Menu 3</h3>     <p>Konten lainnya</p>   </div> </div>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Pills

Bootstrap Pills intinya sama dengan Tabs, perbedaannya hanya terhadap tampilannya atau cara menampilkannya
Untuk menerapkannya gunakan class .nav sebagai class dasar dan disertai class .nav-pills, yang dituliskan pada element HTML <ul>

Contoh :

<ul class="nav nav-pills">   <li class="active"><a href="#">Beranda</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Pills</h2>  <ul class="nav nav-pills">   <li class="active"><a href="#">Beranda</a></li>   <li><a href="#">Link</a></li>   <li><a href="#">Link</a></li> </ul>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Pills dengan metode Tab View

Cara dan penjelasannya hampir sama dengan Tab View yang sebelumnya, perbedaannya hanya pada penggunaan nama class.

Contoh :

<ul class="nav nav-pills">   <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>   <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul>  <div class="tab-content">   <div id="menu1" class="tab-pane fade in active">     <h3>Menu 1</h3>     <p>Konten lainnya</p>   </div>   <div id="menu2" class="tab-pane fade">     <h3>Menu 2</h3>     <p>Konten lainnya</p>   </div>   <div id="menu3" class="tab-pane fade">     <h3>Menu 3</h3>     <p>Konten lainnya</p>   </div> </div>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Pills Tab View</h2>  <ul class="nav nav-pills">   <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>   <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> </ul>  <div class="tab-content">   <div id="menu1" class="tab-pane fade in active">     <h3>Menu 1</h3>     <p>Konten lainnya</p>   </div>   <div id="menu2" class="tab-pane fade">     <h3>Menu 2</h3>     <p>Konten lainnya</p>   </div>   <div id="menu3" class="tab-pane fade">     <h3>Menu 3</h3>     <p>Konten lainnya</p>   </div> </div>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Status Disabled

Untuk memperlihatkan status tidak aktif atau disabled pada tab link, tambahkan class .disabled pada element <li>
Catatan : class disabled dipakai hanya untuk memperlihatkan tampilan tidak aktif, sedangkan secara fungsi, link pada element masih tetap akan aktif kalau terjadi interaksi
Tips : Agar fungsi dari element menjadi tidak berfungsi sebagaimana mestinya, tindakan manual mungkin dianjurkan, atau gunakan javascript untuk melaksanakan DOM element.

Contoh :

<ul class="nav nav-tabs">   <li class="active"><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li class="disabled"><a href="#">Menu 3</a></li> </ul>  <hr/>  <ul class="nav nav-pills">   <li class="active"><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li class="disabled"><a href="#">Menu 3</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tab Disabled</h2>  <ul class="nav nav-tabs">   <li class="active"><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li class="disabled"><a href="#">Menu 3</a></li> </ul>  <hr/>  <ul class="nav nav-pills">   <li class="active"><a href="#">Menu 1</a></li>   <li><a href="#">Menu 2</a></li>   <li class="disabled"><a href="#">Menu 3</a></li> </ul>   <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Menggunakan Dropdown

Contoh :

<ul class="nav nav-tabs">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu</a></li>   <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">      Dropdown <span class="caret"></span>     </a>      <ul class="dropdown-menu">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="divider"></li>       <li><a href="#">Link Lainnya</a></li>     </ul>   </li> </ul>  <hr/>  <ul class="nav nav-pills">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu</a></li>   <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">      Dropdown <span class="caret"></span>     </a>      <ul class="dropdown-menu">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="divider"></li>       <li><a href="#">Link Lainnya</a></li>     </ul>   </li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Tabs Dengan Dropdown Menu</h2>  <ul class="nav nav-tabs">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu</a></li>   <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">      Dropdown <span class="caret"></span>     </a>      <ul class="dropdown-menu">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="divider"></li>       <li><a href="#">Link Lainnya</a></li>     </ul>   </li> </ul>  <hr/>  <ul class="nav nav-pills">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu</a></li>   <li class="dropdown">     <a href="#" class="dropdown-toggle" data-toggle="dropdown">      Dropdown <span class="caret"></span>     </a>      <ul class="dropdown-menu">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="divider"></li>       <li><a href="#">Link Lainnya</a></li>     </ul>   </li> </ul>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Posisi Vertikal

Untuk menciptakan sebuah navigasi tab secara vertikal gunakan class .nav-stacked pada class dasar .nav

Contoh :

<ul class="nav nav-pills nav-stacked">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu</a></li>   <li><a href="#">Menu</a></li> </ul>

Hasil :

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- CSS Bootstrap 3 -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 Nav-stacked</h2>  <ul class="nav nav-pills nav-stacked">   <li class="active"><a href="#">Home</a></li>   <li><a href="#">Menu</a></li>   <li><a href="#">Menu</a></li> </ul>  <!-- jQuery, bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </div> </body> </html>

Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia

Tutorial Bootstrap 3 Navbar

TrikSonic - Tutorial kali ini kita akan berguru ihwal cara menciptakan navbar dengan memakai bootstrap 3.
Apa itu navbar ? navbar ialah kafetaria navigasi atau blok navigasi yang dipakai pada sebuah halaman html atau sebuah aplikasi yang pada umumnya berada diposisi atas sebuah dokumen.
Dengan memakai Bootstrap, keperluan untuk menciptakan navabar sanggup dilakukan atau dibentuk dengan cepat efisien dan modern serta yang tidak kalah penting ialah desain responsive pada semua perangkat
Berikut tutorial dan pola ihwal Navbar dengan memakai Bootstrap 3 :
Table of contents

Bootstrap 3 - Default navbar

Default navbar ialah komponen dasar penggunaan bootstrap navbar, nama class yang dipakai ialah .navbar-default yang ditulis pada class dasarnya .navbar

Cara penulisan

<nav class="navbar navbar-default"> ... </nav>

Contoh

<nav class="navbar navbar-default">   <div class="container-fluid">        <div class="navbar-header">       <!-- tombol membuka dropdown [media responsive] -->       <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">       <span class="icon-bar"></span>       <span class="icon-bar"></span>       <span class="icon-bar"></span>       </button>       <!-- Nama Blog / website -->       <a class="navbar-brand" href="#">TrikSonic</a>     </div>          <div class="collapse navbar-collapse" id="collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Link</a></li>         <li><a href="#">Link</a></li>         <li class="dropdown">           <!-- tombol membuka dropdown list-->           <a href="#" class="dropdown-toggle" data-toggle="dropdown">           Dropdown <span class="caret"></span>           </a>           <!-- dropdown list -->           <ul class="dropdown-menu">             <li><a href="#">Menu 1</a></li>             <li><a href="#">Menu 2</a></li>             <li><a href="#">Menu 3</a></li>             <li><a href="#">Menu 4</a></li>             <li><a href="#">Menu 5</a></li>           </ul>         </li>       </ul>     </div>        </div> </nav>

Hasil

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!--Bootstrap 3 CSS-->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <h2>Bootstrap 3 - Navbar default</h2>  <nav class="navbar navbar-default">   <div class="container-fluid">        <div class="navbar-header">       <!-- tombol membuka dropdown [media responsive] -->       <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1">       <span class="icon-bar"></span>       <span class="icon-bar"></span>       <span class="icon-bar"></span>       </button>       <!-- Nama Blog / website -->       <a class="navbar-brand" href="#">TrikSonic</a>     </div>          <div class="collapse navbar-collapse" id="collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Link Active</a></li>         <li><a href="#">Link 2</a></li>         <li class="dropdown">           <!-- tombol membuka dropdown list-->           <a href="#" class="dropdown-toggle" data-toggle="dropdown">           Dropdown <span class="caret"></span>           </a>           <!-- dropdown list -->           <ul class="dropdown-menu">             <li><a href="#">Menu 1</a></li>             <li><a href="#">Menu 2</a></li>             <li><a href="#">Menu 3</a></li>             <li><a href="#">Menu 4</a></li>             <li><a href="#">Menu 5</a></li>           </ul>         </li>       </ul>     </div>        </div> </nav>  <p>  Silahkan atur area preview untuk melihat media screen (atau tampilan) </p>  <div class="alert alert-warning"> <strong>Catatan :</strong> Penggunaan javascript diharapkan untuk demo ini. </div>   <!-- jquery dan bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Bootstrap 3 - Inverted navbar

Jika tidak ingin dengan tampilan warna pada navbar default, bootstrap juga memperlihatkan warna lainnya yaitu hitam dengan tingkat kepekatan diatas sedang, yang mempunyai nilai warna : #222;
Untuk menerapkannya, cukup menambahkan class .navbar-inverse ke class dasar .navbar

Cara Penulisan

<nav class="navbar navbar-inverse"> ... </nav>

Contoh

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Menu 1</a></li>       <li><a href="#">Menu 2</a></li>       <li><a href="#">Menu 3</a></li>       <li><a href="#">Menu 4</a></li>     </ul>   </div> </nav>

Hasil

<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- Bootstrap 3 css -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Inverted navbar</h2>  <!-- navbar open --> <nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li class="active"><a href="#">Menu 1</a></li>       <li><a href="#">Menu 2</a></li>       <li><a href="#">Menu 3</a></li>       <li><a href="#">Menu 4</a></li>     </ul>   </div> </nav> <!-- navbar close -->  <p>  Atur lebar preview, untuk melihat media responsive </p>  <p> Contoh ini tanpa penggunaan javascript,  untuk fungsi dropdown sajian sanggup melihat pola yang lainnya. </p>  </div> </body> </html>

Bootstrap 3 - Navbar Forms dan Dropdown Menu

Berikut pola yang sanggup dipelajari untuk menciptakan navbar dengan memasukan sebuah form dan sajian dropdown

Contoh

<nav class="navbar navbar-inverse">   <div class="navbar-header">     <!-- tombol untuk membuka dan menutup menu, diarea responsive -->     <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">     <span class="sr-only">Toggle navigation</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     </button>     <!-- Judul -->     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <div id="navbarCollapse" class="collapse navbar-collapse">     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="dropdown">         <a data-toggle="dropdown" class="dropdown-toggle" href="#">         Dropdown <span class="caret"></span>         </a>         <!-- Dropdown List -->         <ul class="dropdown-menu">           <li><a href="#">Sub Menu 1</a></li>           <li><a href="#">Sub Menu 2</a></li>           <li><a href="#">Sub Menu 3</a></li>           <li class="divider"></li>           <li><a href="#">Sub Menu 4</a></li>         </ul>       </li>     </ul>     <!-- form -->     <form class="navbar-form navbar-left">       <div class="input-group">         <input class="form-control" type="text"/>         <span class="input-group-btn">         <!--ganti nilai dari type button, sesuai dengan keperluan-->         <button class="btn btn-default" type="button">Search</button>         </span>       </div>     </form>   </div> </nav>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!--Bootstrap 3 CSS-->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <h2>Bootstrap 3 - Navbar Form dan Dropdown Menu</h2>   <nav class="navbar navbar-inverse">   <div class="navbar-header">     <!-- tombol untuk membuka dan menutup menu, diarea responsive -->     <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">     <span class="sr-only">Toggle navigation</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     </button>     <!-- Judul -->     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <div id="navbarCollapse" class="collapse navbar-collapse">     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="dropdown">         <a data-toggle="dropdown" class="dropdown-toggle" href="#">         Dropdown <span class="caret"></span>         </a>         <!-- Dropdown List -->         <ul class="dropdown-menu">           <li><a href="#">Sub Menu 1</a></li>           <li><a href="#">Sub Menu 2</a></li>           <li><a href="#">Sub Menu 3</a></li>           <li class="divider"></li>           <li><a href="#">Sub Menu 4</a></li>         </ul>       </li>     </ul>     <!-- form -->     <form class="navbar-form navbar-left">       <div class="input-group">         <input class="form-control" type="text"/>         <span class="input-group-btn">         <!--ganti nilai dari type button, sesuai dengan keperluan-->         <button class="btn btn-default" type="button">Search</button>         </span>       </div>     </form>   </div> </nav>  <p>  Silahkan atur area preview untuk melihat media screen (atau tampilan) </p>  <div class="alert alert-warning"> <strong>Catatan :</strong> Penggunaan javascript diharapkan untuk demo ini. </div>   <!-- jquery dan bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Bootstrap 3 - Navbar Brand image

Digunakan untuk mengganti teks Judul dengan sebuah gambar. Mungkin css pelengkap diharapkan semoga tampilan sesuai dengan keinginan.

Contoh

<style> /*custom css navbar brand*/ .navbar-brand.triksonic-logo {   /*property : value*/ } </style>  <nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand triksonic-logo" href="#">        <!-- Logo image-->         <img alt="demo" src="..."/>       </a>     </div>   </div> </nav>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- css, jQuery, dan bootstrap3 js -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>    <style> /* custom css navbar merk image Sesuaikan dengan logo anda */ .navbar-brand.triksonic-logo {   padding : 7px 15px; } </style>  </head> <body> <div class="container"> <h2>Bootstrap 3 - Navbar Brand image</h2>  <!-- navbar open --> <nav class="navbar navbar-inverse">   <div class="container-fluid">     <!-- tombol untuk membuka dan menutup menu, diarea responsive -->     <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">     <span class="sr-only">Toggle navigation</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     </button>          <div class="navbar-header">       <a class="navbar-brand triksonic-logo" href="#">         <img alt=" Tutorial kali ini kita akan berguru ihwal cara menciptakan navbar dengan memakai bootst Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQGvS1ZzQaRBpa-6ECWy1_zFbq3p_yBoQ2sc2GDVaMCfXDtwWHvfNqSp429m75KuApTLo7EBvlzYJAQ296md4N_QuicYDpLwVHfyvjMWXokC3IAVxr8ASrRJOMWcvFHtL12fO8EI1Hh46g/s1600/TrikSonic-Logo.png"/>       </a>     </div>          <div id="navbarCollapse" class="collapse navbar-collapse">     <ul class="nav navbar-nav">       <li><a href="#">Link</a></li>       <li class="dropdown">         <a data-toggle="dropdown" class="dropdown-toggle" href="#">         Dropdown <span class="caret"></span>         </a>                  <!-- Dropdown List -->         <ul class="dropdown-menu">           <li><a href="#">Sub Menu 1</a></li>           <li><a href="#">Sub Menu 2</a></li>           <li><a href="#">Sub Menu 3</a></li>           <li class="divider"></li>           <li><a href="#">Sub Menu 4</a></li>         </ul>                </li>     </ul>          <!-- form -->     <form class="navbar-form navbar-left">       <div class="input-group">         <input class="form-control" type="text"/>         <span class="input-group-btn">         <!--ganti nilai dari type button, sesuai dengan keperluan-->         <button class="btn btn-default" type="button">Search</button>         </span>       </div>     </form>        </div>      </div> </nav> <!-- navbar close -->  <div class="alert alert-info"> <strong>Catatan :</strong> JavaScript diharapkan untuk  open close sajian dan dropdown sajian </div>   </div> </body> </html>

Bootstrap 3 - Navbar Buttons

Digunakan untuk menambahkan sebuah tombol atau button, yang mungkin dipergunakan untuk fungsi dari javascript. Tambahakan class .navbar-btn pada class dasar .btn, misal menyerupai ini :
<button class="btn btn-default navbar-btn">Button</button> <button class="btn btn-primary navbar-btn">Button</button> <button class="btn btn-danger navbar-btn">Button</button> etc..

Contoh

<!-- navbar 1 open --> <nav class="navbar navbar-default">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>     </ul>         <button class="btn btn-primary navbar-btn">Button</button>       </div> </nav> <!-- navbar 1 close -->   <!-- navbar 2 open --> <nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>     </ul>         <button class="btn btn-danger navbar-btn">Button</button>       </div> </nav> <!-- navbar 2 close -->
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- css, jQuery, dan bootstrap3 js -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 3 - Navbar Button</h2>  <!-- navbar 1 open --> <nav class="navbar navbar-default">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>     </ul>         <button class="btn btn-primary navbar-btn">Button</button>       </div> </nav> <!-- navbar 1 close -->   <!-- navbar 2 open --> <nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>     </ul>         <button class="btn btn-danger navbar-btn">Button</button>       </div> </nav> <!-- navbar 2 close -->   <p>   Resize area preview untuk melihat media screen </p>  </div> </body> </html>

Bootstrap 3 - Navbar Text

Digunakan untuk menuliskan sebuah teks biasa, didalam navbar. Untuk penerapan gunakan class .navbar-text pada element html, misal <p> atau <div>

Contoh

<nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>     </ul>     <!-- navbar text open-->     <div class="navbar-text">Teks Biasa</div>     <div class="navbar-text">Teks Biasa</div>     <!-- navbar text close-->   </div> </nav>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!-- css, jQuery, dan bootstrap3 js -->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 3 - Navbar Text</h2>  <!-- navbar open --> <nav class="navbar navbar-inverse">   <div class="container-fluid">     <div class="navbar-header">       <a class="navbar-brand" href="#">TrikSonic</a>     </div>     <ul class="nav navbar-nav">       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>     </ul>     <!-- navbar text open-->     <div class="navbar-text">Teks Biasa</div>     <div class="navbar-text">Teks Biasa</div>     <!-- navbar text close-->   </div> </nav> <!-- navbar close -->   <p>   Resize area preview untuk melihat media screen </p>  </div> </body> </html>

Bootstrap 3 - Navbar Component alignment

Digunakan untuk mengatur posisi atau keselarasan element. Untuk penerapannya gunakan class .navbar-left atau .navbar-right pada element HTML yang ingin diatur posisi nya.
Sebenarnya Bootstrap 3 sudah menyediakan class tertentu untuk mengatur keselarasan element, menyerupai .pull-left dan .pull-right, tapi untuk tampilan navbar yang sempurna disemua perangkat penggunaan class .navbar-left atau .navbar-right lebih disarankan

Contoh

<nav class="navbar navbar-inverse">   <div class="navbar-header">     <!-- tombol untuk membuka dan menutup menu, diarea responsive -->     <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">     <span class="sr-only">Toggle navigation</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     </button>     <!-- Judul -->     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <div id="navbarCollapse" class="collapse navbar-collapse">     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="dropdown">         <a data-toggle="dropdown" class="dropdown-toggle" href="#">         Dropdown <span class="caret"></span>         </a>         <!-- Dropdown List -->         <ul class="dropdown-menu">           <li><a href="#">Sub Menu 1</a></li>           <li><a href="#">Sub Menu 2</a></li>           <li><a href="#">Sub Menu 3</a></li>           <li class="divider"></li>           <li><a href="#">Sub Menu 4</a></li>         </ul>       </li>     </ul>          <!-- form -->     <form class="navbar-form navbar-right">         <input class="form-control" type="text"/>     </form>        </div> </nav>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!--Bootstrap 3 CSS-->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <h2>Bootstrap 3 - Navbar Component alignment</h2>  <!-- navbar open--> <nav class="navbar navbar-inverse">   <div class="navbar-header">     <!-- tombol untuk membuka dan menutup menu, diarea responsive -->     <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">     <span class="sr-only">Toggle navigation</span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     <span class="icon-bar"></span>     </button>     <!-- Judul -->     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <div id="navbarCollapse" class="collapse navbar-collapse">     <ul class="nav navbar-nav">       <li class="active"><a href="#">Home</a></li>       <li><a href="#">Link</a></li>       <li><a href="#">Link</a></li>       <li class="dropdown">         <a data-toggle="dropdown" class="dropdown-toggle" href="#">         Dropdown <span class="caret"></span>         </a>         <!-- Dropdown List -->         <ul class="dropdown-menu">           <li><a href="#">Sub Menu 1</a></li>           <li><a href="#">Sub Menu 2</a></li>           <li><a href="#">Sub Menu 3</a></li>           <li class="divider"></li>           <li><a href="#">Sub Menu 4</a></li>         </ul>       </li>     </ul>          <!-- form -->     <form class="navbar-form navbar-right">         <input class="form-control" type="text"/>     </form>        </div> </nav> <!-- navbar close-->  <p>  Silahkan atur area preview untuk melihat media screen (atau tampilan) </p>  <div class="alert alert-warning"> <strong>Catatan :</strong> Penggunaan javascript diharapkan untuk demo ini. </div>   <!-- jquery dan bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  </body> </html>

Bootstrap 3 - Navbar Fixed to top

Digunakan untuk menciptakan navbar mempunyai posisi tetap berada di atas dan lepas dari gulir sebuah halaman
Untuk menerapkannya tambahkan class .navbar-fixed-top pada class dasar .navbar

Contoh

<nav class="navbar navbar-inverse navbar-fixed-top">   <div class="navbar-header">     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <!-- code anda selanjutnya--> </nav>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!--Bootstrap 3 CSS-->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container">   <nav class="navbar navbar-inverse navbar-fixed-top">   <div class="navbar-header">     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <!-- code anda selanjutnya--> </nav>   <!--hanya untuk demo--> <div style="background:pink;height:300px;margin:70px 0px 20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div>  </body> </html>

Bootstrap 3 - Navbar Fixed to bottom

Digunakan untuk menciptakan navbar mempunyai posisi tetap berada di bawah dan lepas dari gulir sebuah halaman
Untuk menerapkannya tambahkan class .navbar-fixed-bottom pada class dasar .navbar

Contoh

<nav class="navbar navbar-inverse navbar-fixed-bottom">   <div class="navbar-header">     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <!-- code anda selanjutnya--> </nav>
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/>   <title>Triksonic Demo Bootstrap 3</title>   <meta name="viewport" content="width=device-width, initial-scale=1"/>   <!--Bootstrap 3 CSS-->   <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container">   <nav class="navbar navbar-inverse navbar-fixed-bottom">   <div class="navbar-header">     <a href="#" class="navbar-brand">TrikSonic</a>   </div>   <!-- code anda selanjutnya--> </nav>   <!--hanya untuk demo--> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px 70px 0px">Demo</div>  </body> </html>
Langganan: Postingan ( Atom )