如何让两个部分使用总高度的 50%？
How to have two sections using 50% of the total height?
我的目标是有两个部分，都包含一个方法栏和 table，它们使用所有可用的高度。
知道如何修改 CSS 吗？
我已经尝试在 body 上使用 height 和 100%，在自定义标签上使用 50%，但没有成功。
这是一个 JSFiddle 示例，包括 Bootstrap：JSFiddle
代码段：
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
html,
body {
padding: 0;
height: 100%;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
/* customizations */
.container-fluid {
height: 100%;
/*
padding-left: 0px;
padding-right: 0px;
*/
}
.collapsed {
display: none;
/* hide it for small displays */
}
@media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%;
/* same width as sidebar */
}
}
#row-main {
overflow-x: hidden;
/* necessary to hide collapsed sidebar */
}
#content {
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#sidebar {
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.methodbar {} .sidebar-section {
height: 40%;
overflow: hidden;
}
.sidebar {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="row-main">
<div class="col-md-3 sidebar" id="sidebar">
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="row table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-9" id="content">
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman">
<br>Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a>
</p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Angular</h4>
<p>AngularJS is a toolset for building the framework most suited to your application development.</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
</div>
</div>
</div>
试试高度的视口测量单位。将侧边栏部分 css 更改为以下内容：
.sidebar-section {
height: 50vh;
overflow: hidden;
}
100vh 设置指定高度应占据全屏，因此我们将部分设置为 50vh，以便 2 个部分将占据整个可见区域 space。就像 100% only 一样，无论屏幕大小如何，它只考虑屏幕上可见的区域。
我举了个例子。不需要用bootstrap，可以用vh单位（视口高度）。 height: 50vh 会将高度设置为视口高度（整个屏幕）的 50%。希望这有效！祝你好运！
#div1 {
background-color: deepskyblue;
height: 50vh; /*THIS IS THE IMPORTANT PART OF THE CODE*/
width: 100%;
}
#div2 {
background-color: deeppink;
height: 50vh; /*THIS IS THE IMPORTANT PART OF THE CODE*/
width: 100%;
}
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
了解 flexbox。
Stack Overflow, many of them are well written by @Michael_B这里有很多资源。
根据您的具体情况，完成以下步骤以获得所需结果：
- 使您的
#row-main 成为可以包装其内容的弹性容器。这将使它的子项成为弹性项目。
- 使您的
.sidebar 现在是一个弹性项目，也是一个弹性容器，但具有列方向。
- 分发
.sidebar 弹性容器中可用的 space，使用 .sidebar-section 弹性项目中的 flex: 1;。
代码段：
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
html,
body {
padding: 0;
height: 100%;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
/* customizations */
.container-fluid {
height: 100%;
/*
padding-left: 0px;
padding-right: 0px;
*/
}
.collapsed {
display: none;
/* hide it for small displays */
}
@media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%;
/* same width as sidebar */
}
}
#row-main {
overflow-x: hidden;
/* necessary to hide collapsed sidebar */
display: flex;
flex-wrap: wrap;
}
#content {
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#sidebar {
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.sidebar-section {
flex: 1;
overflow: hidden;
}
.sidebar {
display: flex;
flex-direction: column;
flex: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="row-main">
<div class="col-md-3 sidebar" id="sidebar">
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="row table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-9" id="content">
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman">
<br>Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a>
</p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Angular</h4>
<p>AngularJS is a toolset for building the framework most suited to your application development.</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
</div>
</div>
</div>
我的目标是有两个部分，都包含一个方法栏和 table，它们使用所有可用的高度。
知道如何修改 CSS 吗？
我已经尝试在 body 上使用 height 和 100%，在自定义标签上使用 50%，但没有成功。
这是一个 JSFiddle 示例，包括 Bootstrap：JSFiddle
代码段：
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
html,
body {
padding: 0;
height: 100%;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
/* customizations */
.container-fluid {
height: 100%;
/*
padding-left: 0px;
padding-right: 0px;
*/
}
.collapsed {
display: none;
/* hide it for small displays */
}
@media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%;
/* same width as sidebar */
}
}
#row-main {
overflow-x: hidden;
/* necessary to hide collapsed sidebar */
}
#content {
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#sidebar {
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.methodbar {} .sidebar-section {
height: 40%;
overflow: hidden;
}
.sidebar {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="row-main">
<div class="col-md-3 sidebar" id="sidebar">
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="row table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-9" id="content">
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman">
<br>Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a>
</p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Angular</h4>
<p>AngularJS is a toolset for building the framework most suited to your application development.</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
</div>
</div>
</div>
试试高度的视口测量单位。将侧边栏部分 css 更改为以下内容：
.sidebar-section {
height: 50vh;
overflow: hidden;
}
100vh 设置指定高度应占据全屏，因此我们将部分设置为 50vh，以便 2 个部分将占据整个可见区域 space。就像 100% only 一样，无论屏幕大小如何，它只考虑屏幕上可见的区域。
我举了个例子。不需要用bootstrap，可以用vh单位（视口高度）。 height: 50vh 会将高度设置为视口高度（整个屏幕）的 50%。希望这有效！祝你好运！
#div1 {
background-color: deepskyblue;
height: 50vh; /*THIS IS THE IMPORTANT PART OF THE CODE*/
width: 100%;
}
#div2 {
background-color: deeppink;
height: 50vh; /*THIS IS THE IMPORTANT PART OF THE CODE*/
width: 100%;
}
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
了解 flexbox。
Stack Overflow, many of them are well written by @Michael_B这里有很多资源。
根据您的具体情况，完成以下步骤以获得所需结果：
- 使您的
#row-main成为可以包装其内容的弹性容器。这将使它的子项成为弹性项目。 - 使您的
.sidebar现在是一个弹性项目，也是一个弹性容器，但具有列方向。 - 分发
.sidebar弹性容器中可用的 space，使用.sidebar-section弹性项目中的flex: 1;。
代码段：
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
html,
body {
padding: 0;
height: 100%;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-left: 15px;
padding-right: 15px;
}
/* Custom page header */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.container {
max-width: 730px;
}
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
/* customizations */
.container-fluid {
height: 100%;
/*
padding-left: 0px;
padding-right: 0px;
*/
}
.collapsed {
display: none;
/* hide it for small displays */
}
@media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%;
/* same width as sidebar */
}
}
#row-main {
overflow-x: hidden;
/* necessary to hide collapsed sidebar */
display: flex;
flex-wrap: wrap;
}
#content {
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#sidebar {
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.sidebar-section {
flex: 1;
overflow: hidden;
}
.sidebar {
display: flex;
flex-direction: column;
flex: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row" id="row-main">
<div class="col-md-3 sidebar" id="sidebar">
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="row table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="row sidebar-section">
<div class="methodbar">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default">Delete</button>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-9" id="content">
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman">
<br>Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a>
</p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Angular</h4>
<p>AngularJS is a toolset for building the framework most suited to your application development.</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
</div>
</div>
</div>