How to create a Gmail like layout with Twitter Bootstrap

前端未结

关注

 4  2041

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 are

相关标签:

4条回答

夕颜

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

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.

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.

Demo: 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/

Notes
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: #ffffd;
}
#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;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
温柔的废话

2021-02-02 17:40
Check out the scaffolding section at

http://twitter.github.com/bootstrap/scaffolding.html#layouts

Specifically under the Fluid Layout/Fixed Layout sections

If you want to make the sections scrollable just add
```
overflow-y:auto;
```
to the css in your divs
0 讨论(0)
发布评论:

提交评论
- 加载中...

深忆病人

2021-02-02 17:42

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

0 讨论(0)

逝去的感伤

2021-02-02 17:51

I don't think there is an out-of-the-box Bootstrap solution but with a few overrides to the Bootstrap CSS and a position:absolute container around the left side nav and *wide content are*a this should work. You'll see that both left/right spans have independent scroll bars...

Gmail-like Bootstrap Layout Demo

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

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)

0 讨论(0)

How to create a Gmail like layout with Twitter Bootstrap

What's Possible

Simple Breakdown

Gmail-like Bootstrap Layout Demo