teste

elicer

浏览: 133633 次
性别:
来自: 上海

最近访客更多访客>>

fxstiandi

l1y0l20

博览群猪

jinjin555666

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

teste

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

分享到：