<!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;
}
}
<!--
@media (min-width: 767) {
.container {
width: 1280px;
}
}
-->
.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
<!-- insert nested grid here -->
</div>
<!--
> xs banner hidden
> sm should span the entire width of the container
> md and lg should use RHS column, e.g. the last 25%
-->
<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>
分享到:
相关推荐
delphi 2006 quickreport teste 2
teste
teste delphi shell mpnitor
Teste de envio para habilitacao de conta
git-teste-源码.rar
teste4_IMAGEM_源码.zip
Laravel开发-emiolo-user-teste Laravel框架的用户系统。
python库。 资源全名:teste_marinonigrande-0.0.1.tar.gz
teste_pot_PWM_Test_POT_arduinopwm.zip
teste_pot_PWM_Test_POT_arduinopwm_源码.rar.rar
Ver como funciona esse teste e baixar um documento e bla sei la o q mais coloco
teste delphi para testar o site.
Teste