如何用Twitter Bootstrap创建一个类似Gmail的布局

How to create a Gmail like layout with Twitter Bootstrap

本文关键字：一个 Gmail 布局 Twitter 何用 Bootstrap 创建      更新时间：2023-09-26

是否有可能使用Twitter Bootstrap创建GMail/googlegroups之类的布局，以便布局始终适合视窗(窗口高度)和侧边栏和内容区域另外可滚动吗?

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

您不需要使用Bootstrap来创建此布局(我也不认为Bootstrap支持它，至少不需要进行重大修改)。

当然，您仍然可以对页面上的其他内容使用Bootstrap。如果你真的想要Google Apps的外观，你需要调整一些默认的Bootstrap样式。

的

为了好玩，这里有一个快速仿造的Gmail界面，使用我下面描述的基本技术和各种Bootstrap组件。

演示:

http://jsfiddle.net/Ly6wmyr2/1/

这里的代码绝对是演示质量，超出了堆栈溢出问题的范围。我把它留给读者去分析。

简单分解

演示:

http://jsfiddle.net/vLm26g4g/1/

指出

  1. 我们正在使用绝对定位。
  2. 仅仅因为它的绝对位置并不意味着它不能响应(如果需要)。
  3. 在100%高度的主体内使用所有四个边来定位容器。
  4. 此方法将在所有浏览器IE 7+中工作。如果您支持IE8+，使用box-sizing: border-box可以使尺寸计算更容易。
  5. 这样的布局确实受益于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;
}

我不认为有一个开箱即用的引导解决方案，但与几个覆盖到引导CSS和position:absolute容器周围的左侧导航和*宽内容这应该工作。你会看到左右跨都有独立的滚动条…

类似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>

添加一些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%;
}

这是工作Bootply: http://bootply.com/60116(也包括内容区行和分页)

在

查看脚手架部分

http://twitter.github.com/bootstrap/scaffolding.html布局

特别是在流体布局/固定布局部分

如果你想让section可滚动只需添加

overflow-y:auto;

到div中的CSS

这将是您的代码，使用scrollspy来突出显示正文中的当前" visible "部分

    <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>

如果你想添加一个固定的导航条，只需添加"position:fixed"到导航条css

相关文章：