twitter-bootstrap 如何使用 Twitter Bootstrap 创建类似 Gmail 的布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15666834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a Gmail like layout with Twitter Bootstrap
提问by zehrer
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?
是否可以使用 Twitter Bootstrap 创建类似 GMail/GoogleGroups 的布局，以便布局始终适合视口（窗口高度）并且侧边栏和内容区域可以单独滚动？
--------------------------------------------------------------------------
| |
| Fixed top navbar |
--------------------------------------------------------------------------
| | |
| Sidebar | Content area scrollable |
| scrollable |
| | |
| | |
| | |
| | |
|------------------------------------------------------------------------|
回答by Tim Medora
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 来创建这个布局（我也不认为 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 用于页面上的所有其他内容。如果您真的想要 Google Apps 的外观，则需要调整一些默认的 Bootstrap 样式。
What's Possible
什么是可能的
For fun, here's a quick knockoff of the Gmail interface using the basic techniques I describe below and a variety of Bootstrap components.
为了好玩，这里使用我在下面描述的基本技术和各种 Bootstrap 组件快速仿制 Gmail 界面。
Demo:http://jsfiddle.net/Ly6wmyr2/1/
演示：http : //jsfiddle.net/Ly6wmyr2/1/
The code here is definitely demo quality and beyond the scope of a Stack Overflow question. I'll leave it up to the reader to dissect.
这里的代码绝对是演示质量，超出了堆栈溢出问题的范围。我会把它留给读者来剖析。
Simple Breakdown
简单分解
Demo:http://jsfiddle.net/vLm26g4g/1/
演示：http : //jsfiddle.net/vLm26g4g/1/
Notes
笔记
- We're using absolute positioning.
- Just because it's absolutely positioned doesn't mean it can't be responsive (if desired).
- Containers are positioned using all 4 sides inside a 100% height body.
- This approach will work in all browsers IE 7+. If you can support IE8+, using
box-sizing: border-boxmakes the dimension calculations easier. - Layouts like this really benefit from LESS CSS, as you can declare the basic sizes in a single location.
- 我们使用绝对定位。
- 仅仅因为它绝对定位并不意味着它不能响应（如果需要）。
- 容器使用 100% 高度主体内的所有 4 个侧面进行定位。
- 这种方法适用于所有浏览器 IE 7+。如果能支持IE8+，使用
box-sizing: border-box更容易进行尺寸计算。 - 像这样的布局确实受益于 LESS CSS，因为您可以在一个位置声明基本尺寸。
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;
}
回答by Zim
I don't think there is an out-of-the-box Bootstrap solution but with a few overrides to the Bootstrap CSSand a position:absolutecontainer around the left side navand *wide content are*a this should work. You'll see that both left/right spans have independent scroll bars...
我不认为这是一个不折不扣的现成解决方案引导但有几个覆盖到引导CSS和position:absolute周围的容器左侧导航和*宽内容是*一个这应该工作。你会看到左右跨度都有独立的滚动条......
Gmail-like Bootstrap Layout Demo
类似 Gmail 的 Bootstrap 布局演示
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<!-- top nav --->
</div>
</div>
</div>
<div class="box">
<div class="row-fluid">
<div class="column span3">
<!-- left-side nav --->
</div>
<div class="column span9">
<!-- content area --->
</div>
</div>
</div>
Add some Bootstrap CSS overrides, and tweak the .box and .column containers..
添加一些 Bootstrap CSS 覆盖，并调整 .box 和 .column 容器。
html, body {
height: 100%;
}
.row-fluid {
height: 100%;
}
.column:before, .column:after {
content: "";
display: table;
}
.column:after {
clear: both;
}
.column {
height: 100%;
overflow: auto;
}
.box {
bottom: 0; /* increase for footer use */
left: 0;
position: absolute;
right: 0;
top: 40px;
}
.span9.full {
width: 100%;
}
Here is the working Bootply: http://bootply.com/60116(also includes the content area rows and pagination)
这是工作的 Bootply：http://bootply.com/60116 （还包括内容区域行和分页）
回答by Jimmy Johnson
Check out the scaffolding section at
查看脚手架部分
http://twitter.github.com/bootstrap/scaffolding.html#layouts
http://twitter.github.com/bootstrap/scaffolding.html#layouts
Specifically under the Fluid Layout/Fixed Layout sections
特别是在 Fluid Layout/Fixed Layout 部分下
If you want to make the sections scrollable just add
如果您想让部分可滚动，只需添加
overflow-y:auto;
to the css in your divs
到你的 div 中的 css
回答by Daniel Steiner
that would be your code using a scrollspy to highlight the current "visibl" section in the body
这将是您使用滚动间谍突出显示正文中当前“可见”部分的代码
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li class="active"><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
<li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
<li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
<li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
<li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
</ul>
</div>
<div class="span9">
<section id="global"></section>
<section id="gridSystem</section>
<section id="fluidGridSystem"></section>
<section id="layouts"></section>
<section id="responsive"></section>
</div>
</div>
</div>
</body>
if you want to add a fixed navbar simply add "position:fixed" to the navbar css
如果你想添加一个固定的导航栏，只需将“位置：固定”添加到导航栏 css
