【问题标题】:Toggleable sidebar with bootstrap 4带有引导程序 4 的可切换侧边栏
【发布时间】:2017-05-18 23:52:38
【问题描述】:

我正在尝试找出使用引导程序 4 创建可切换侧边栏的“正确”(最佳实践)方法。浏览了互联网上的示例,但不确定这些示例是否如此好......所以如果有人可以发送我相关的资源链接,如果我能分析一下就好了。

-我来自 android 平台,所以在 Web 开发方面我是新手,但我正在尝试实现像这边这样的侧边栏:link -notice:侧边栏不会改变它的宽度(拉伸)同时更改浏览器的大小 - 直到它跳转到图标宽度。

【问题讨论】:

    标签: html css bootstrap-4


    【解决方案1】:

    Bootstrap 没有“官方” 侧边栏实现,所以这里没有任何“正确”。只要它可以跨浏览器/跨设备运行,什么都可以。

    关于侧边栏实现本身,有多种选择:

    • 在内容上方打开,
    • 将内容推到对面
    • 压缩内容

    上述选项和动画可能性数组:

    • 侧边栏本身,
    • 菜单项容器,
    • 菜单名称/标签
    • 和菜单图标...,

    ...尝试提供一个容易产生主观偏好的示例,这会使您的问题偏离主题。

    其他可能的功能是

    • 超过一定宽度自动打开,
    • 低于一定宽度自动关闭,
    • 元素的重新排序,
    • 三态(全、最小和关闭)。

    但是关于主题,您问题的唯一客观答案是:没有(官方)。

    作为初学者,您可能想看看这个simple sidebar。它与 v4 完美配合。只需导入 simple-sidebar.css 并调整调用以匹配您项目的元素。

    最后,侧边栏是关于两个容器和应用一个类(加上,理想情况下,屏幕阅读器的一些aria- 属性)。您在这些容器中放入的内容以及如何调整内容以在每个元素状态下显示完全取决于您自己(或设计师或客户)的个人喜好。

    【讨论】:

    • 正是我需要的 ty (y)
    猜你喜欢
    • 2019-07-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-22
    • 2015-09-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多