如何使用Twitter Bootstrap创建一个类似Gmail的布局 [英] How to create a Gmail like layout with Twitter Bootstrap

问题描述

是否可以使用Twitter Bootstrap创建一个GMail / GoogleGroups布局，以使布局总是适合视口（窗口高度），边栏和内容区域是
可单独滚动？

Is it possible to create a GMail/GoogleGroups-like layout using Twitter Bootstrap, so that the layout always fits to the viewport (window height) and the sidebar and content area are separately scrollable?

--------------------------------------------------------------------------
|                                                                        |
|                    Fixed top navbar                                    |
--------------------------------------------------------------------------
|         |                                                              |   
| Sidebar |       Content area scrollable                                |
| scrollable                                                             |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|------------------------------------------------------------------------|

推荐答案

您不需要使用Bootstrap来创建布局（我也不认为Bootstrap支持它，至少没有没有重大修改）。

You don't need to use Bootstrap to create this layout (nor do I think Bootstrap supports it, at least not without significant modification).

当然，你仍然可以在页面上使用Bootstrap。

Of course, you can still use Bootstrap for everything else on the page. If you really want the Google Apps look, you'll need to tweak some of the default Bootstrap styles.

有趣的是，这里是使用下面描述的基本技术和各种Bootstrap组件的Gmail界面的快速淘汰。

For fun, here's a quick knockoff of the Gmail interface using the basic techniques I describe below and a variety of Bootstrap components.

演示： / strong> http://jsfiddle.net/Ly6wmyr2/1/

_{这里的代码绝对是演示质量，超出了Stack Overflow问题的范围。我会留给读者剖析。}

演示： http://jsfiddle.net/vLm26g4g/1/

注释

1. 我们正在使用绝对定位。


2. 只是因为它绝对定位并不意味着它不能响应（如果需要）。


3. 容器是使用100％


4. 此方法适用于所有浏览器IE 7+。如果您可以支持IE8 +，使用 box-sizing：border-box 可以更轻松地计算尺寸。


5. LESS CSS，因为您可以在一个位置声明基本尺寸。

1. We're using absolute positioning.
2. Just because it's absolutely positioned doesn't mean it can't be responsive (if desired).
3. Containers are positioned using all 4 sides inside a 100% height body.
4. This approach will work in all browsers IE 7+. If you can support IE8+, using box-sizing: border-box makes the dimension calculations easier.
5. Layouts like this really benefit from LESS CSS, as you can declare the basic sizes in a single location.

HTML {
    height: 100%;
}
BODY {
    position: relative;
    height: 100%;
}
HEADER {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 8px;
    background-color: #ddd;
}
#side {
    position: absolute;
    top: 80px;
    left: 0;
    bottom: 0;
    width: 20%;
    background-color: #eee;
    overflow: auto;
}
#content {
    position: absolute;
    top: 80px;
    left: 20%;
    bottom: 0;
    right: 0;
    overflow: auto;
}

这篇关于如何使用Twitter Bootstrap创建一个类似Gmail的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！