Elemen navigasi Bootstrap


Dalam bab ini kami akan menerangkan beberapa pilihan yang disediakan oleh Bootstrap untuk mentakrifkan elemen navigasi. Mereka menggunakan markup dan kelas asas yang sama .nav. Bootstrap juga menyediakan kelas pembantu untuk berkongsi markup dan keadaan. Menukar kelas yang diubah suai membolehkan anda menukar antara gaya yang berbeza.

Navigasi jadual atau tab

Buat menu navigasi tab:

  • Buat menu navigasi tab dengan kelas .nav< Bermula dengan senarai 🎜> yang tidak tersusun.

  • Tambah kelas

    .nav-tabs.

Contoh berikut menunjukkan ini:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签式的导航菜单</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

</body>
</html>

Instance Running» Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Menu navigasi kapsul

Menu navigasi kapsul asas

Jika anda perlu meletakkan label Untuk menukar kepada gaya kapsul, hanya gunakan kelas

.nav-pills bukannya .nav-tabs Langkah-langkah lain adalah sama seperti di atas.

Contoh berikut menunjukkan ini:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的胶囊式导航菜单</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

</body>
</html>

Run Instance»Klik "Run butang instance" untuk melihat kejadian dalam talian

Menu navigasi kapsul menegak

Anda boleh menggunakannya semasa menggunakan kelas

.nav, .nav-pills kelas .nav-stacked, membolehkan kapsul disusun secara menegak.

Contoh berikut menunjukkan ini:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 垂直的胶囊式导航菜单</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

</body>
</html>

Run Instance»Klik "Run butang instance" untuk melihat contoh dalam talian

Navigasi sejajar

Anda boleh menggunakan

.nav, .nav- apabila lebar skrin lebih besar daripada 768px. Gunakan kelas .nav-justified bersama-sama dengan tab atau .nav, .nav-pills untuk menjadikan menu navigasi tab atau kapsul sama lebar dengan elemen induk. Pada skrin yang lebih kecil, pautan navigasi bertindan.

Contoh berikut menunjukkan ini:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 两端对齐的导航元素</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul><br><br><br>

<ul class="nav nav-tabs nav-justified">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>

</body>
</html>

Run Instance»Klik "Run Butang Instance" untuk melihat contoh dalam talian

Pautan dilumpuhkan

untuk setiap kelas

.nav, jika kelas .disabled ditambah , pautan kelabu akan dibuat dan keadaan :hover pautan akan dilumpuhkan, seperti ditunjukkan dalam contoh berikut:

Instance

rreee

Jalankan contoh»Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Kelas ini hanya menukar rupa <a>, bukan fungsinya. Di sini anda perlu menggunakan JavaScript tersuai untuk melumpuhkan pautan.

Menu lungsur turun

Menu navigasi menggunakan sintaks yang serupa sebagai menu lungsur. Secara lalai, sauh item senarai bekerjasama dengan beberapa atribut data untuk mencetuskan senarai tidak tertib dengan kelas .dropdown-menu.

Tag dengan menu lungsur turun

Langkah-langkah untuk menambah menu lungsur ke teg adalah seperti berikut:

  • Buat teg dengan kelas .nav< Bermula dengan senarai tidak tertib 🎜>.

  • Tambah kelas

    .nav-tabs.

  • Menambahkan senarai tidak tertib dengan kelas

    .dropdown-menu.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 导航元素中的禁用链接</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
   <li><a href="#">VB.Net</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul><br><br>

<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li  class="disabled"><a href="#">VB.Net（禁用链接）</a></li>
   <li><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
</ul>	

</body>
</html>

Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

Kapsul dengan menu lungsur turun

Langkahnya adalah sama seperti membuat tab dengan menu lungsur, kecuali anda perlu menukar

.nav-tabs kelas kepada .nav-pills, seperti yang ditunjukkan dalam contoh berikut:

Instance

rreee

Jalankan Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

←
→