BootStrap--CSS组件--导航(nav)

最新推荐文章于 2024-05-14 09:55:02 发布

github_34514750

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量1.5k

点赞数 1

分类专栏： BootStrap 文章标签： BootStrap CSS组件导航

本文链接：https://blog.csdn.net/github_34514750/article/details/53694255

版权

//源码
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #777;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}

和默认的.btn样式不同，默认的.nav样式不提供默认的导航，必须通过附加另外一个样式才行，比如.nav-tabs样式表示选项卡导航。
nav nav-tabs nav-pills nav-stacked nav-justified navbar
1.选项卡导航(nav nav-tabs)
2.胶囊式选项卡导航(nav nav-pills)
3.堆叠式导航(nav nav-pills nav-stacked)
4.自适应导航(nav nav-tabs/nav-pills nav-justified)
5.二级导航(nav nav-tabs dropdown dropdown-menu)

例子见导航.html

<!DOCTYPE html>
<html lang="en">
  <head>

最低0.47元/天解锁文章

github_34514750

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap--CSS组件--导航(nav)

//源码.nav { padding-left: 0; margin-bottom: 0; list-style: none;}.nav > li { position: relative; display: block;}.nav > li > a { position: relative; display: block; padding: 10px 15
复制链接

扫一扫

专栏目录