网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是bootstrap vertical tabs的升级版本,可以帮助开发人员在bootstrap4项目中创建一个完全响应的垂直标签组件。在小屏幕上它会自动切换到水平选项卡。
1. 重写默认变量- custom-variables.scss.
// When the view is narrower than this navpill-like buttons are used,
// otherwise horizontal tabs are used up until $vertical-tabs-min width
$horizontal-tabs-min: 26em;
// When the view is wider than this, vertical tabs are used
$vertical-tabs-min: 48em;
// Set this depending on the longest caption text of the tabs
// If the text is still longer than that, it will be truncated with ellipsis
// NOTE: there are practical limits on this value, the "good" values
// seem to be somewhere between 4 and 12rem;
$fixed-tab-size: 8rem;
// These only apply to regular (not sideways) vertical tabs
// In all other cases the text is center-aligned
$left-tabs-text-align: left;
$right-tabs-text-align: right;
2. 在html页面中加载bootstrap框架。
<link rel="stylesheet" href="b4vtabs.min.css" />
<link rel="stylesheet" href="bootstrap.min.css" />
<script src="jquery.slim.min.js"></script>
<script src="bootstrap.min.js"></script>
3. 使用以下CSS类在框的左侧或右侧放置选项卡:
<ul class="nav nav-tabs left-tabs">
Tabs Here
</ul>
<ul class="nav nav-tabs right-tabs">
Tabs Here
</ul>
4. 创建“横向”左或右选项卡:
<ul class="nav nav-tabs left-tabs sideways-tabs">
Tabs Here
</ul>
<ul class="nav nav-tabs right-tabs sideways-tabs">
Tabs Here
</ul>
转载请注明来源:Bootstrap4响应式垂直选项卡插件
本文永久链接地址:https://www.moyouyouw.cn/code/860.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论