Rumah >hujung hadapan web >Tutorial Bootstrap >Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

青灯夜游ke hadapan: 2021-11-23 18:48:441991semak imbas

Artikel ini akan membawa anda melalui navigasi dan komponen tab dalam bootstrap, dan memperkenalkan cara menggunakan komponen navigasi dan komponen tab saya harap ia akan membantu semua orang!

1 Asas Navigasi

Bar navigasi ialah fungsi yang diperlukan bagi sistem tapak web Pada masa lalu, ia memerlukan banyak usaha untuk membuat yang baik bar navigasi, tetapi kini ia tersedia navigasi Bootstrap5, mulai sekarang, anda boleh mencipta bar navigasi yang cantik dengan hanya beberapa saat salin dan tampal. [Cadangan berkaitan: "tutorial bootstrap"]

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <ul>
                <li>
                <a class="nav-link href="#">首页</a>
                </li>
                <li>
                <a href="#">文章</a>
                </li>
                <li>
                <a href="#">图片</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
                </li>
                </ul>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

Anda juga boleh menjadikan kod anda lebih ringkas

<nav class="nav">
  <a class="nav-link" href="#">首页</a>
  <a class="nav-link" href="#">文章</a>
  <a class="nav-link" href="#">图片</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>

Kod ini memaparkan sama seperti di atas bagi butang yang tidak tersedia di dalam, tidak perlu meletakkannya dalam menu melainkan ia adalah untuk tujuan khas (contohnya, ia tersedia untuk ahli tetapi tidak tersedia untuk orang biasa).

Kedua-dua kaedah penulisan mempunyai kelebihan tersendiri;

Cara pertama lebih teratur dan jelas apabila terdapat elemen hiasan lain dalam navigasi, seperti ikon, dsb., dan juga Anda boleh menukar kaedah paparan pautan dengan menulis kelas gaya li Di sesetengah syarikat, prestasi kerja pekerja akan dinilai berdasarkan jumlah kod (saya mendengar bahawa banyak syarikat melakukan ini).
Yang kedua lebih ringkas Apa yang boleh dicapai oleh yang kedua boleh dicapai oleh yang pertama, tetapi sebaliknya adalah tidak benar, versi lite telah mengebiri beberapa fungsi.
Saya akan menggunakan kaedah kedua untuk demonstrasi berikut Tidak ada masalah untuk beralih kepada kaedah pertama untuk semua demonstrasi.

2 Gaya Biasa

2.1 Penjajaran Mendatar

Menggunakan kelas umum flexbox anda boleh menukar penjajaran mendatar navigasi dengan mudah. Navigasi dijajarkan ke kiri secara lalai, dan anda boleh menukarnya ke tengah atau kanan dengan mudah.

Gunakan .justify-content-center untuk menjajarkan tengah:
Gunakan .justify-content-end untuk menjajarkan ke kanan:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav justify-content-center">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav justify-content-end">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

Anda juga mungkin melihat bahawa berbilang navigasi boleh diletakkan pada halaman.

2.2 Navigasi Menegak

Tukar navigasi kepada navigasi menegak dengan menggunakan kelas generik .flex-column. Jika anda hanya mahu menyusun di bawah port pandangan tertentu, gunakan versi responsif (cth. .flex-sm-column).

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav flex-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav flex-sm-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

ps: Respons ini menegak apabila lebih besar daripada titik putus, kerana navigasi menegak biasanya digunakan untuk navigasi sekunder atau navigasi dalam halaman Jika skrin terlalu kecil, Navigasi menegak mengambil ruang bacaan, jadi ia tidak digunakan. Jika anda ingin menyembunyikan fungsi navigasi mendatar apabila skrin dibuat lebih kecil, bar alat navigasi dalam bab seterusnya akan diperkenalkan secara terperinci.

2.3 Gaya tab

Gunakan navigasi asas dan tambah .nav-tabs untuk menjana antara muka dengan tab halaman. Buat blok boleh tukar melalui pemalam JavaScript halaman dalam bahagian "Penggunaan Tab" di bawah. Gaya tab sangat mudah Jika anda ingin melaksanakan fungsi tertentu, kami akan memperkenalkannya secara terperinci kemudian, dan terdapat juga kod terperinci kemudian.

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

2.4 Kapsul

Kapsul digunakan sama seperti tab, tetapi gunakan .nav-pills dan bukannya nav-tabs:

<ul class="nav nav-pills">

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

2.5 Isi dan selaraskan

kandungan nav mempunyai dua kelas untuk pengembangan lebar Menggunakan .nav-fill akan memperuntukkan ruang untuk kandungan .nav-item secara berkadaran. Ambil perhatian bahawa ini mengambil semua ruang mendatar, tetapi tidak setiap item navigasi mempunyai lebar yang sama.

Sila gunakan .nav-justified untuk mencipta elemen monowidth. Semua ruang mendatar akan diambil oleh pautan navigasi, tetapi tidak seperti .nav-fill di atas, setiap item navigasi akan mempunyai lebar yang sama.

 <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

            <br><br>

            <ul class="nav nav-pills nav-justified">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

Anda boleh membandingkan perbezaan antara dua penjajaran.

3 Perluasan lagi komponen navigasi

3.1 Menggunakan kelas utiliti kotak fleksibel

Jika anda memerlukan perubahan navigasi responsif, sila gunakan satu siri kelas biasa kotak fleksibel. Kelas umum ini menyediakan lebih banyak penyesuaian antara titik putus. Dalam contoh di bawah, navigasi kami akan disusun di bawah titik putus kecil dan susun atur secara mendatar dari titik putus kecil untuk mengisi semua lebar yang tersedia.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="nav nav-pills flex-column flex-sm-row">
                <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Paparan di bawah lebar penyemak imbas yang berbeza.

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

3.2 使用下拉列表

加入额外的HTML和下拉菜单JavaScript插件

带下拉列表的选项卡

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <br><br><br>
            <ul class="nav nav-tabs">
                <li>
                <a class="nav-link active" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><hr></li>
                <li><a href="#">Separated link</a></li>
                </ul>
                </li>
                <li>
                <a href="#">Link</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                </ul>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

带下拉列表的胶囊只需要将nav-tabs换成nav-pills

<ul class="nav nav-pills">

Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

4 使用选项卡

4.1 普通选项卡

前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
                </li>
                <li role="presentation">
                <button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
                </li>
                <li role="presentation">
                <button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
                </li>
                </ul>

                <div id="myTabContent">

                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                </div>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

4.2 胶囊选项卡

跟前面胶囊一样，只是换一个标签这么简单。

<ul class="nav nav-pills" id="myTab" role="tablist">

1Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

4.3 垂直胶囊选项卡

这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。

需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <div class="d-flex align-items-start">
                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
                <button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
                <button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
                </div>

                <div id="v-pills-tabContent">

                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
               
            </div>
            </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan

4.4 淡入淡出效果

要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Atas ialah kandungan terperinci Bagaimana untuk menambah komponen navigasi dan komponen tab dalam Bootstrap? Analisis ringkas penggunaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript bootstrap html 堆 class JS column flex li

Kenyataan：

Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menggunakan jadual dalam Bootstrap? Analisis ringkas tentang penggunaan jadual berkuasaArtikel seterusnya：Bagaimana untuk menggunakan jadual dalam Bootstrap? Analisis ringkas tentang penggunaan jadual berkuasa

Artikel berkaitan

Lihat lagi