Boostrap(2)

网页布局

1.网格布局

网格布局就是把网页分为许多小格子，看起来像table，然后在每个小格子中放我们的内容。当然，我们也可以指定一片区域使用网格系统。网格布局主要是应用在移动设备上的，使用方法如下：

使用行来创建列的水平组
行必须放置在 .container class 内
每行会自动产生十二个列，内容需要跨列需使用col-xs-4等类
内容应该放置在列内，且唯有列可以是行的直接子元素

示例代码

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>start</title>
 6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
 7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
 8 <script type="text/javascript" src="../js/bootstrap.js"></script>
 9 <meta name="viewport" content="width=device-width,initial-scale=1"/>
10 <!--[if lt IE 9]>
11         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
12         <![endif]-->
13 </head>
14 <body>
15 <div class="container">
16   <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1>
17   <p>这是一个段落</p>
18   <div class="row">
19     <div class="col-xs-6">
20       <h2 class="page-header">区块一</h2>
21       <p>这是一个段落</p>
22     </div>
23     <div class="col-xs-4">
24       <h2 class="page-header">区块二</h2>
25       <p>这是一个段落</p>
26     </div>
27     <div class="col-xs-2">
28       <h2 class="page-header">区块三</h2>
29       <p>这是一个段落</p>
30     </div>
31   </div>
32 </div>
33 </body>
34 </html>

效果:

我们会发现第一个最宽，第二个次之，第三个最小。

关于网格布局的详细说明可以参考以下链接: 链接1

2.嵌套布局

在下面的示例代码中我们可以看到，在一个网格中，我们有加入了新的网格(class="row"),这就是所谓的嵌套布局，加入的网格每行仍然是12格。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>start</title>
 6 <link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
 7 <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
 8 <script type="text/javascript" src="../js/bootstrap.js"></script>
 9 <meta name="viewport" content="width=device-width,initial-scale=1"/>
10 <!--[if lt IE 9]>
11         <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
12         <![endif]-->
13 </head>
14 <body>
15 <div class="container">
16   <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1>
17   <p>这是一个段落</p>
18   <div class="row">
19     <div class="col-xs-4">
20       <h2 class="page-header">区块一</h2>
21       <p>这是一个段落</p>
22     </div>
23     <div class="col-xs-4">
24       <h2 class="page-header">区块二</h2>
25       <p>这是一个段落</p>
26       <div class="row">
27         <div class="col-xs-6"> 区块二一区块二一区块二一区块二一区块二一 </div>
28         <div class="col-xs-6"> 区块二二区块二二区块二二区块二二区块二二区块二二 </div>
29       </div>
30     </div>
31     <div class="col-xs-4">
32       <h2 class="page-header">区块三</h2>
33       <p>这是一个段落</p>
34     </div>
35   </div>
36 </div>
37 </body>
38 </html>

效果：

3.流动布局

使用流动布局会根据页面窗口的大小自动去缩放，我们知道网格是放在容器中的，前面的容器大小是固定的，比如(720px之类的)，使用流动布局容器的大小则使用的是百分比。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
</head>
<body>
<div class="container-fluid">
  <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1>
  <p>这是一个段落</p>
  <div class="row-fluid">
    <div class="col-xs-4">
      <h2 class="page-header">区块一</h2>
      <p>这是一个段落</p>
    </div>
    <div class="col-xs-4">
      <h2 class="page-header">区块二</h2>
      <p>这是一个段落</p>
      <div class="row-fluid">
        <div class="col-xs-6"> 区块二一区块二一区块二一区块二一区块二一 </div>
        <div class="col-xs-6"> 区块二二区块二二区块二二区块二二区块二二区块二二 </div>
      </div>
    </div>
    <div class="col-xs-4">
      <h2 class="page-header">区块三</h2>
      <p>这是一个段落</p>
    </div>
  </div>
</div>
</body>
</html>

效果:(流动布局和固定布局在显示效果差异上并不明显，这和网页的复杂程度有关)

4.响应式布局

由于上网设备的差异(电脑，笔记本，手机)，同一个页面在不同设备上的显示效果不同，甚至很糟糕。为了避免这种情况，可以使用响应式布局。响应式布局就是根据屏幕尺寸的大小来使用不同的css。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
    body{
        background:#F90E24;    
    }
    @media(max-width:500px){
        body{
            background:#592BF7;    
        }    
    }
</style>
</head>
<body>
</body>
</html>

代码中的@media(max-width:500px)表示屏幕大小在0-500px时，使用大括号中的css代码。相应的@media(min-width:500px)表示屏幕在500px以上的时，使用相应的样式。

bootstrap中也提供了响应式的css,不过需要去官网定制下面的链接也提供了响应式的css文件下载。http://bootstrap.ninghao.net/getting-started.html

posted @ 2016-03-23 19:52 被罚站的树阅读(215) 评论(0) 编辑收藏举报

刷新页面返回顶部

被罚站的树