teste

最新推荐文章于 2019-06-19 21:27:30 发布

iteye_1365

最新推荐文章于 2019-06-19 21:27:30 发布

阅读量181

点赞数

分类专栏： teste 文章标签： ux javascript ViewUI

本文链接：https://blog.csdn.net/iteye_1365/article/details/82566941

版权

teste 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Colibri UX responsive layout</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<meta name="viewport" content="width=device-width,
initial-scale=1.0">

<style>

.container {
width: 980px;
}

@media (max-width: 767px) {
.container {
width: 767px;
}
}

.navbar {
height: 100px;
background-color: grey;
color: black;
text-align: center;
border: 2px solid black;
}

.content {
height: 100px;
background-color: yellow;
color: black;
text-align: center;
border: 2px solid black;
}

.banner {
height: 100px;
background-color: green;
color: white;
text-align: center;
border: 2px solid black;
}

</style>

</head>
<body>

<h1>My fixed width grid</h1>
The grid's container remains fixed at 980px until the sm/phone breakpoint is reached; then the banner becomes invisible and the content colum is stacked beneath the navbar. In reality, the navbar would change into a collapsed state.
<p></p>

<div class="container">

<div class="row">
<div class="col-sm-3 navbar">
LHS Navbar
</div>
<div class="col-sm-6 content">
content

</div>

<div class="col-sm-3 banner visible-sm visible-md visible-lg">
banner area
</div>

</div>

</div>

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script type='text/javascript'>

$(document).ready(function() {

console.log("document ready");

});

</script>

</body>
</html>