Bootstrap4 导航

如果你想创建一个简单的水平导航栏，可以在

元素上添加 .nav类，在每个
• 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:

  

  实例

  <
  ul
  
  class
  =
  "
  nav
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  尝试一下 »

  导航对齐方式

  .justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。

  实例

  
  
  <
  ul
  
  class
  =
  "
  nav justify-content-center
  "
  >
  
  
  
  <
  ul
  
  class
  =
  "
  nav justify-content-end
  "
  >
  
  div
  >
  
  尝试一下 »

  垂直导航

  .flex-column 类用于创建垂直导航：

  实例

  <
  ul
  
  class
  =
  "
  nav flex-column
  "
  >
  
  尝试一下 »

  选项卡

  使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。

  实例

  <
  ul
  
  class
  =
  "
  nav nav-tabs
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  尝试一下 »

  胶囊导航

  .nav-pills 类可以将导航项设置成胶囊形状。

  实例

  <
  ul
  
  class
  =
  "
  nav nav-pills
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  尝试一下 »

  导航等宽

  .nav-justified 类可以设置导航项齐行等宽显示。

  实例

  <
  ul
  
  class
  =
  "
  nav nav-pills nav-justified
  "
  >
  ..
  ul
  >
  
  <
  ul
  
  class
  =
  "
  nav nav-tabs nav-justified
  "
  >
  ..
  ul
  >
  
  尝试一下 »

  胶囊下拉菜单

  实例

  <
  ul
  
  class
  =
  "
  nav nav-pills
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item dropdown
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link dropdown-toggle
  "
  
  data-toggle
  =
  "
  dropdown
  "
  
  href
  =
  "
  #
  "
  >
  Dropdown
  a
  >
  
  <
  div
  
  class
  =
  "
  dropdown-menu
  "
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 1
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 2
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 3
  a
  >
  
  div
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  尝试一下 »

  选项卡下拉菜单

  实例

  <
  ul
  
  class
  =
  "
  nav nav-tabs
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  href
  =
  "
  #
  "
  >
  Active
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item dropdown
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link dropdown-toggle
  "
  
  data-toggle
  =
  "
  dropdown
  "
  
  href
  =
  "
  #
  "
  >
  Dropdown
  a
  >
  
  <
  div
  
  class
  =
  "
  dropdown-menu
  "
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 1
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 2
  a
  >
  
  <
  a
  
  class
  =
  "
  dropdown-item
  "
  
  href
  =
  "
  #
  "
  >
  Link 3
  a
  >
  
  div
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  href
  =
  "
  #
  "
  >
  Link
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link disabled
  "
  
  href
  =
  "
  #
  "
  >
  Disabled
  a
  >
  
  li
  >
  
  ul
  >
  
  尝试一下 »

  动态选项卡

  如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡内容的

  元素使用 .tab-content 类 。。

  如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

  实例

  
  
  <
  ul
  
  class
  =
  "
  nav nav-tabs
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  data-toggle
  =
  "
  tab
  "
  
  href
  =
  "
  #home
  "
  >
  Home
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  tab
  "
  
  href
  =
  "
  #menu1
  "
  >
  Menu 1
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  tab
  "
  
  href
  =
  "
  #menu2
  "
  >
  Menu 2
  a
  >
  
  li
  >
  
  ul
  >
  
  
  
  <
  div
  
  class
  =
  "
  tab-content
  "
  >
  
  <
  div
  
  class
  =
  "
  tab-pane active container
  "
  
  id
  =
  "
  home
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu1
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu2
  "
  >
  ...
  div
  >
  
  div
  >
  
  尝试一下 »

  胶囊状动态选项卡

  胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill":

  实例

  
  
  <
  ul
  
  class
  =
  "
  nav nav-pills
  "
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link active
  "
  
  data-toggle
  =
  "
  pill
  "
  
  href
  =
  "
  #home
  "
  >
  Home
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  pill
  "
  
  href
  =
  "
  #menu1
  "
  >
  Menu 1
  a
  >
  
  li
  >
  
  <
  li
  
  class
  =
  "
  nav-item
  "
  >
  
  <
  a
  
  class
  =
  "
  nav-link
  "
  
  data-toggle
  =
  "
  pill
  "
  
  href
  =
  "
  #menu2
  "
  >
  Menu 2
  a
  >
  
  li
  >
  
  ul
  >
  
  
  
  <
  div
  
  class
  =
  "
  tab-content
  "
  >
  
  <
  div
  
  class
  =
  "
  tab-pane active container
  "
  
  id
  =
  "
  home
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu1
  "
  >
  ...
  div
  >
  
  <
  div
  
  class
  =
  "
  tab-pane container
  "
  
  id
  =
  "
  menu2
  "
  >
  ...
  div
  >
  
  div
  >
  
  尝试一下 »

  新闻标题：创新互联Bootstrap4教程：Bootstrap4导航
  浏览地址：http://www.mswzjz.cn/qtweb/news37/324237.html

  攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

  广告

  声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

  贝锐智能技术为您推荐以下文章

  • 租用车辆前应该考虑什么？五个实用建议
  • 租用美国服务器有哪几种独特之处，美国服务器的特点
  • 西部数码域名找回-其他问题
  • tiktok服务器怎么租？怎么样在国外租服务器
  • 从程序员到布道师——JetBrains技术布道师范圣佑的成长之路
  • uiLinux下安装soapUI实现API测试（linux安装soap）
  • 微信报错40125
  • LevelDB性能分析和表现
  • 抖音怎么推广