Bootstrap CSS组件之导航(nav)

网友投稿 218 2023-06-24


Bootstrap CSS组件之导航(nav)

本文实例为大家分享了Bootstrap导航的具体代码,供大家参考,具体内容如下

//源码

.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-justhttp://ified 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

Dropdown


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:使用HttpClient实现文件的上传下载方法
下一篇:教你一步步用jQyery实现轮播器
相关文章

 发表评论

暂时没有评论,来抢沙发吧~