创建一个响应式导航栏边栏“抽屉"，然后单击“创建".在Bootstrap中? [英] Create a responsive navbar sidebar "drawer" in Bootstrap?
问题描述
尝试实现以下目标: https://www.muicss.com/examples/v1/example-layouts/sensitive-side-menu/index.html
我在网上看到了一些使用其他版本的引导程序的示例，但是它们都改变了CSS太多，这使得学习引导程序变得更加困难.
我想知道在Bootstrap 4中是否可以使用折叠，堆叠药丸，flexbox之类的工具来做到这一点?
这是我可以实现的目标: https://jsfiddle.net/kL9u6esw/20/
我的Jsfiddle缺少什么:
- 响应不正确
- 导航栏在粘性类上无法正确滚动
- 即使我设置了课程，菜单按钮也不是粘滞的.
- 背景调光器虽然不是答案所必需的，但效果很好
在我的示例中，我无法弄清楚如何插入导航栏，不确定是否需要它才能正确响应.
还不确定是否将其作为一列是正确的方法，难道它不适合画布吗?
HTML代码:
< div class ="container-fluid h-100">< div class ="row h-100">< div class ="col-5 col-md-3 crash m-0 p-0 h-100 bg-dark" id ="collapseExample">< ul class ="nav flex-column navbar-dark sticky-top">< 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></div>< div class ="col">< div class ="row">< div class ="col-12">< button class ="btn sticky-top" data-toggle ="collapse" href =#collapseExample" role ="button">菜单</button></div>< div class ="col-12">洛雷姆...</div></div></div></div></div> Bootstrap 5 Beta 3(更新2021年)
现在有一个正式的 Bootstrap 5 Offcanvas组件使得创建侧边栏变得更加容易.当然，也可以不使用Offcanvas组件(例如 Bootstrap 5
引导程序4(原始答案)
侧边栏导航可能非常复杂.这可能就是为什么Bootstrap没有开箱即用"的原因.成分.侧边栏有很多注意事项:
- 响应式-根据屏幕宽度设置不同的宽度，可见性或方向吗?
- 多级-导航项是否具有子级?这个高度会受到怎样的影响?
- 可切换-边栏可以通过按钮或汉堡"来切换吗?
- 推送与重叠-页面内容是隐藏在侧边栏的后面还是旁边?
- 左或右-侧边栏位于页面内容的左侧或右侧吗?
- 固定或粘滞-侧边栏在页面滚动中的位置如何?
- 动画样式-向左/向右/向上/向下滑动?是否折叠?
在此侧边栏"中，case ...而不是在右列上使用 col-auto ，而使用 col .这样，它将在折叠菜单时填充宽度: https://jsfiddle.net/0rhyzu7o/
< div class ="container-fluid h-100">< div class ="row h-100">< div class ="col-5 col-md-3收合宽度m-0 p-0 h-100 bg-dark"id ="collapseExample"..</div>< div class ="col">< div class ="row">< div class ="col-12">< button class ="btn sticky-top"data-toggle =收合"href =#collapseExample"角色=按钮"菜单</button></div>< div class ="col-12">..</div></div></div></div></div> 要使动画更加平滑，必须覆盖Bootstrap的折叠过渡，该过渡通常在高度上起作用
根据赏金要求，我用另外2个示例更新了侧边栏.这些更接近示例，并且大多使用Bootstrap类.
最低版本
该版本更接近示例，并且具有相同的左/右抽屉"幻灯片.动画.
body {高度:100vh；溢出-x:隐藏;padding-top:56像素；}.vh-100 {最低高度:100vh；}.sidebar.collapse.show，.sidebar.collapse.show + .col {过渡:.18秒轻松；转换:translate(0,0,0);左:0；}.sidebar.collapse，.sidebar.collapsing，.sidebar.collapsing + .col {过渡:.18秒轻松；转换:translate(-25％，0,0);z索引:1050；左:-25％;} 演示最低版本: https://codeply.com/go/w1AMD1EY3c
< link href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"rel =" stylesheet"/>< link href ="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel ="stylesheet">< script src ="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>< style>身体 {高度:100vh；溢出-x:隐藏;padding-top:55像素；}/*设置侧边栏宽度*/.w-sidebar {宽度:200像素；最大宽度:200像素；}.row.collapse {左边距:-200px;左:0；过渡:边距左.15s线性；}.row.collapse.show {左边距:0！重要;}.row.collapsing {左边距:-200px;左:-0.05％;过渡:所有.15s线性；}/* 可选的 */.vh-100 {最低高度:100vh；}/*对于小屏幕上的覆盖侧栏为可选*/@media(最大宽度:768px){.row.collapse，.row.collapsing {左边距:0！重要;左:0！重要；溢出:可见；}.row>.sidebar.collapse {显示:flex！important;左边距:-100％！重要;过渡:所有.3s线性；位置:固定；z索引:1050；最大宽度:0；最小宽度:0；flex-basis:自动;}.row>.sidebar.collapse.show {左边距:0！重要;宽度:100％;最大宽度:100％；最小宽度:初始；}.row>.sidebar.collapsing {显示:flex！important;剩余边距:-10％！重要;过渡:所有.2s线性！重要;位置:固定；z索引:1050；最小宽度:初始；}}</style>< div class ="container-fluid固定顶部bg-dark py-3">< div class =行折叠显示无排水沟d-flex h-100相对位置">< div class ="col-3 px-0 w-sidebar navbar-collapsecollapse d-none d-md-flex"><！-spacer col-></div>< div class ="col px-2 px-md-0"><！-切换器->< a data-toggle ="collapse" href =#" data-target =.collapse" role ="button" class ="p-1">< i class ="fa fa-bars fa-lg"></i></a></div></div></div>< div class ="container-fluid px-0 h-100">< div class =行vh-100折叠显示无排水沟d-flex h-100相对位置">< div class ="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapsecollapse d-none d-md-flex sidebar"><！-固定的侧边栏->< div class ="position-fixed bg-dark text-white h-100 w-sidebar pl-2">< ul class ="nav flex-column">< li class ="nav-item">< a class ="nav-link active" href =#"> Link</a></li>< li class ="nav-item">< a class ="nav-link" href =#"> Link</a></li></ul></div></div>< div class ="col p-3">< h3>内容..//h3>< p class ="lead">尝试以全页视图查看大屏幕上的动画！</p>< p> Sriracha生物柴油动物标本剥制后的高智商，Intelligentsia丹参胡子90年代的代码编辑早午餐.屠夫宝丽来VHS艺术晚会，话题标签Brooklyn deep v PBR独角鲸可持续混合带子赃物狼鱿鱼手提袋.手提袋cronut符号学，粗斜纹棉布深v动物标皮斜挎包.豆腐YOLO Etsy，直接贸易道德Odd Future牛仔短裤古色.牧草肖尔迪奇(Forage Shoreditch)抛弃了具有讽刺意味的讽刺意味，街头艺术有机布什威克(Bushwick)工匠陈词滥调符号学和合成器寒潮冥想.破旧别致的lomo格子乙烯基青年布副.副可持续开衫，Williamsburg大师清洗了DIY 90的博客.道德的Kickstarter PBR不对称lo-fi.Dreamcatcher街头艺术Carles，坎普特无麸质Kickstarter工匠Wes Anderson狼哈巴狗.从农场到餐桌的纯素食主义者，您可能从未听说过Godard Sustainable！</div></div></div>< script src ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 演示完整版: https://codeply.com/go/XJE8LOdX8k
另请参阅:引导Navbar崩溃以覆盖侧边栏
Trying to achieve something like this : https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html
I've seen some examples online using other versions of bootstrap, but they all change the css too much, which makes it harder to learn bootstrap.
I was wondering if in Bootstrap 4 this can be done using tools like collapse, stacked pills, flexbox?
This is what I could achieve : https://jsfiddle.net/kL9u6esw/20/
What is missing from my Jsfiddle :
- Not correctly responsive
- The navbar isn't scrolling properly with the sticky class
- The menu button isn't sticky even though I set the class.
- A background dimmer, although not necessary for the answer, would be great
In my example I couldn't figure out how to insert a navbar, not sure if its necessary for it to be properly responsive.
Also not sure if having it as a columns is the correct way to do it, shouldn't it be off-canvas?
Html code :
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
<ul class="nav flex-column navbar-dark sticky-top">
<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>
</div>
<div class="col">
<div class="row">
<div class="col-12">
<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
Menu
</button>
</div>
<div class="col-12">
Lorem...
</div>
</div>
</div>
</div>
</div>
Bootstrap 5 Beta 3 (update 2021)
There is now an offical Bootstrap 5 Offcanvas Component that makes creating sidebars much easier. Of course it can still be done without using the Offcanvas component like this sidebar example for Bootstrap 5
Bootstrap 4 (original answer)
Sidebar navs can be very complex. This may be why Bootstrap doesn't have an "out-of- the-box" component. There are many considerations for Sidebars:
- Responsive - different width, visibility or orientation based on screen width?
- Multi-level - do the nav items have sub levels? How will this impact height?
- Toggleable - can the sidebar be toggled by a button or "hamburger"?
- Push vs. Overlay - is page content hidden behind or next to the sidebar?
- Left or right - is the sidebar to the left or right of page content?
- Fixed or sticky - how is the sidebar positioned on page scroll?
- Animation style - slide left/right/up/down?, collapse?
In this "sidebar" case... instead of using col-auto on the right column, use col. That way it will fill the width when the menu is collapsed: https://jsfiddle.net/0rhyzu7o/
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
..
</div>
<div class="col">
<div class="row">
<div class="col-12">
<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
Menu
</button>
</div>
<div class="col-12">
..
</div>
</div>
</div>
</div>
</div>
To make the animation a little smoother, you must override Bootstrap's collapsing transition which normally works on height
EDIT:
Based on the bounty request, I updated the sidebar with 2 more examples. These are closer to the example, and mostly use Bootstrap classes.
Minimal version
This version is closer to the example, and has the same slide left/right "drawer" animation.
body {
height: 100vh;
overflow-x: hidden;
padding-top: 56px;
}
.vh-100 {
min-height: 100vh;
}
.sidebar.collapse.show,
.sidebar.collapse.show + .col {
transition: .18s ease;
transform: translate(0,0,0);
left: 0;
}
.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing + .col {
transition: .18s ease;
transform: translate(-25%,0,0);
z-index: 1050;
left: -25%;
}
Demo minimal version: https://codeply.com/go/w1AMD1EY3c
Full version (very close to the example):
This sidebar features:
- fixed-width
- automatically closes on smaller screens, opens on wider screens
- can be toggled open/closed at any width
- responsive - becomes a fixed overlay on smaller widths
This full version does require a little more CSS, but some of it is optional...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
height: 100vh;
overflow-x: hidden;
padding-top: 55px;
}
/* set the sidebar width */
.w-sidebar {
width: 200px;
max-width: 200px;
}
.row.collapse {
margin-left: -200px;
left: 0;
transition: margin-left .15s linear;
}
.row.collapse.show {
margin-left: 0 !important;
}
.row.collapsing {
margin-left: -200px;
left: -0.05%;
transition: all .15s linear;
}
/* optional */
.vh-100 {
min-height: 100vh;
}
/* optional for overlay sidebar on small screens */
@media (max-width:768px) {
.row.collapse,
.row.collapsing {
margin-left: 0 !important;
left: 0 !important;
overflow: visible;
}
.row > .sidebar.collapse {
display: flex !important;
margin-left: -100% !important;
transition: all .3s linear;
position: fixed;
z-index: 1050;
max-width: 0;
min-width: 0;
flex-basis: auto;
}
.row > .sidebar.collapse.show {
margin-left: 0 !important;
width: 100%;
max-width: 100%;
min-width: initial;
}
.row > .sidebar.collapsing {
display: flex !important;
margin-left: -10% !important;
transition: all .2s linear !important;
position: fixed;
z-index: 1050;
min-width: initial;
}
}
</style>
<div class="container-fluid fixed-top bg-dark py-3">
<div class="row collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
<!-- spacer col -->
</div>
<div class="col px-2 px-md-0">
<!-- toggler -->
<a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1">
<i class="fa fa-bars fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="container-fluid px-0 h-100">
<div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3">
<h3>Content..</h3>
<p class="lead">Try this is full-page view to see the animation on larger screens!</p>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog. Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table!</p>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Demo full version: https://codeply.com/go/XJE8LOdX8k
Both the minimal and robust examples are much closer to the original example. It's easy to change color and tweak the styles. Here's another variation with the sidebar overlaying the toggle bar at the top.
Also see: Bootstrap Navbar Collapse to Overlay Sidebar
这篇关于创建一个响应式导航栏边栏“抽屉"，然后单击“创建".在Bootstrap中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
