简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah> hujung hadapan web> Tutorial Bootstrap> teks badan

Bootstrap中怎么添加导航组件和选项卡组件？用法浅析

青灯夜游
Lepaskan： 2021-11-24 19:34:00
ke hadapan
1904 orang telah melayarinya

本篇文章带大家一起了解一下bootstrap中的导航和选项卡组件，介绍一下导航组件和选项卡组件的使用方法，希望对大家有所帮助！

Bootstrap中怎么添加导航组件和选项卡组件？用法浅析

1 导航基础

导航栏是网站系统必须的功能，以前为了做好一个导航栏，需要花很多的功夫，现在有了 Bootstrap5导航，从此做一个漂亮的导航栏，只是片刻功夫复制粘贴就可以完成。【相关推荐：《bootstrap教程》】

        导航演示
Salin selepas log masuk

1.png

你还可以让你的代码更简洁

Salin selepas log masuk

这段代码显示的与上面是一样的，至于里面的不可用按钮，除非出于某种特殊目的（例如会员可用，对普通人显示不可用），否则没必要放在菜单处。

这两种写法各有优点;

  • 第一种更有条理一点，在导航中有其他修饰元素，如图标等的时候，更加清晰，另外还可以通过写li的样式类来更改链接显示方式，甚至在有些公司，会通过代码量来考核员工的工作绩效（听说不少公司这样干）。
  • 第二种则更为简洁，第二种能实现的，第一种都能，反之不成立，毕竟lite版都是阉割了一些功能的。
  • 后面的演示我就用第二种，所有的演示换成第一种都是完全没问题的。

2 常用样式

2.1 水平对齐

使用弹性盒子通用类可以轻松更改导航的水平对齐方式。 默认情况下导航会向左对齐，您可以轻松地将其更改为居中或向右对齐。

  • 使用.justify-content-center居中对齐：
  • 使用.justify-content-end靠右对齐：
        导航演示
Salin selepas log masuk

2.png

您可能还看出了，一个页面中可以放置多个导航。

2.2 垂直导航

通过使用.flex-column通用类更改导航为垂直导航。如果只希望在特定的viewports下堆叠，可使用响应式版本（例如.flex-sm-column）。

        导航演示
Salin selepas log masuk

3.png

ps:这个响应是当大于断点的时候垂直，因为垂直导航一般用于二级导航或者页内导航，屏幕太小的话，垂直导航占用了阅读空间，所以剧不用了。如果你想屏幕变小后可以隐藏水平导航的功能，下一章的导航工具条会具体介绍。

2.3 选项卡样式

使用基本的导航，并加入.nav-tabs以生成具有分页标签的界面。透过后面“选项卡使用”中的分页JavaScript插件来创造可切换的块。 选项卡样式很简单，要想实现具体功能，后面会详细介绍，后面也有详细代码。

4.png

2.4 胶囊

胶囊使用和选项卡相同，但使用.nav-pills取代nav-tabs：

    Salin selepas log masuk
    Salin selepas log masuk

    5.png

    2.5 填充并对齐

    .nav内容有两种宽度扩展用的Class，使用.nav-fill会将.nav-item内容按照比例分配空间。注意，这会占用所有的水平空间，但并不是每个导航项目都具有相同宽度。

    创建等宽元素请使用.nav-justified。所有的水平空间将被导航连接占据，但与上面的.nav-fill不同，每个导航项都将是相同的宽度。
    Salin selepas log masuk

    6.png

    大家可以对比一下两种对齐的区别。

    3 导航组件的进一步扩展

    3.1 使用弹性盒子实用类

    如果需要响应式的导航变化，请使用一系列弹性盒子通用类。这些通用类在断点之间提供更多的自定义设定。在下面的示例中，我们的导航将在最小断点以下堆叠，并从small断点开始采用水平排版以填满所有可用宽度。

            导航演示
    Salin selepas log masuk

    不同浏览器宽度下的显示。

    7.png

    8.png

    3.2 使用下拉列表

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

    带下拉列表的选项卡

            导航演示
    Salin selepas log masuk

    9.png

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

      Salin selepas log masuk
      Salin selepas log masuk

      10.png

      4 使用选项卡

      4.1 普通选项卡

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

              导航演示 

        

       
        
       
       
      首页内容
       这里可以放文字、列表等一切页面元素 
       
       
      个人资料
       这里可以放文字、列表等一切页面元素 
       
       
      联系方式
       这里可以放文字、列表等一切页面元素
      Salin selepas log masuk

      11.png

      4.2 胶囊选项卡

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

      Salin selepas log masuk

      12.png

      4.3 垂直胶囊选项卡

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

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

              导航演示 

        

       
       
        
       
       
      首页内容
       这里可以放文字、列表等一切页面元素 
       
       
      个人资料
       这里可以放文字、列表等一切页面元素 
       
       
      联系方式
       这里可以放文字、列表等一切页面元素
      Salin selepas log masuk

      13.png

      4.4 淡入淡出效果

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

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

      Atas ialah kandungan terperinci Bootstrap中怎么添加导航组件和选项卡组件？用法浅析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

      Label berkaitan：
      bootstrap Komponen tab
      sumber：juejin.cn
      Artikel sebelumnya：Bootstrap中怎么使用表格？强大表格的用法浅析 Artikel seterusnya：Bootstrap中怎么添加导航工具条？Navbar组件用法浅析
      Kenyataan Laman Web ini
      Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
      Artikel terbaru oleh pengarang
      Isu terkini
      Langkah-langkah untuk memasang jQuery dalam Nuxt.js Walaupun saya cuba menambah jQuery dalam projek saya, saya mendapat ralat mengatakan ia ti...
      daripada 2023-11-06 16:41:50
      0
      1
      225
      Laravel 9 masih tidak dapat mencari App.css dan App.js, walaupun selepas menjalankan npm run dev Memandangkan agak baru kepada Laravel, saya memastikan saya benar-benar melihat dokumentas...
      daripada 2023-10-26 23:41:22
      0
      1
      489
      Sesuaikan titik putus sistem grid Bootstrap 4 Saya mempunyai aplikasi di mana reka bentuk memerlukan 1280 titik putus dari desktop ke ta...
      daripada 2023-10-18 23:01:50
      0
      2
      197
      Cara menjadikan imej pengepala, teks dan butang responsif Saya sedang membuat laman web menggunakan Bootstrap5. Dalam pengepala tapak web saya mengg...
      daripada 2023-09-17 09:51:15
      0
      1
      283
      Mengapa bar navigasi Bootstrap saya tidak dipaparkan dengan betul? Saya cuba membuat bar navigasi menggunakan Bootstrap4 tetapi kod saya nampaknya tidak berf...
      daripada 2023-09-16 16:14:06
      0
      1
      522
      Topik-topik yang berkaitan
      Lagi>
      Cadangan popular
      Tutorial Popular
      Lagi>
      Tutorial berkaitan
      Cadangan popular
      Kursus terkini
      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！