网页布局

1.网格布局

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

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

示例代码

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

   <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1>

   <p>这是一个段落</p>

   <div class="row">

     <div class="col-xs-6">

       <h2 class="page-header">区块一</h2>

       <p>这是一个段落</p>

     </div>

     <div class="col-xs-4">

       <h2 class="page-header">区块二</h2>

       <p>这是一个段落</p>

     </div>

     <div class="col-xs-2">

       <h2 class="page-header">区块三</h2>

       <p>这是一个段落</p>

     </div>

   </div>

 </div>

 </body>

 </html>

效果:

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

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

2.嵌套布局

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

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

   <h1 class="page-header">布局<small>使用bootstrap网格系统布局</small></h1>

   <p>这是一个段落</p>

   <div class="row">

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

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

效果：

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

Boostrap(2)的更多相关文章

Boostrap入门(一)
1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...
Boostrap
基本认知: Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面. Bootstrap的优缺点: 缺点: 1. ...
【转】Validate + Boostrap tooltip 表单验证示例
一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0 jquery.validate.min.j ...
用H5+Boostrap做简单的音乐播放器
前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是j ...
vue.js+boostrap最佳实践
一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
我发现调用boostrap的弹框
在引用了boostrap.js和boostrap.css之后本来boostrap是基于jQuery的.但是我们的项目里没有用jQuery,而是用的zepto. 调用boostrap的弹框有两种方式: ...
Boostrap栅格系统
Boostrap排版.链接样式设置了基本的全局样式.分别是:为body元素设置布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器.Bootstrap提供了两个作此用 ...
boostrap中lg,md,sm,xs
boostrap中lg,md,sm,xs分别表示多少px? .col-xs- 超小屏幕手机 (<768px).col-sm- 小屏幕平板 (≥768px).col-md- 中等屏幕桌面显示 ...
AngularJS Boostrap Pagination Sample
首先,样式是这样的首先,Service端是Webapi REST JSON格式第二,我们建立一个Wrapper Class,这里你也可以定义一个Generic<T>,作为示例,我们这里 ...
H5+Boostrap的音乐播放器
H5+Boostrap做简单的音乐播放器前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做 ...

随机推荐

CI 框架中的自定义路由规则
在 CI 框架中,一个 URL 和它对应的控制器中的类以及类中的方法是一一对应的,如: www.test.com/user/info/zhaoyingnan 其中 user 对应的就是控制器中的 us ...
我的NopCommerce之旅(6): 应用启动
一.基础介绍 Global.asax 文件(也称为 ASP.NET 应用程序文件)是一个可选文件,该文件包含响应 ASP.NET 或 HTTP 模块所引发的应用程序级别和会话级别事件的代码. Appl ...
【OpenCV】opencv3.0中的SVM训练 mnist 手写字体识别
前言: SVM(支持向量机)一种训练分类器的学习方法 mnist 是一个手写字体图像数据库,训练样本有60000个,测试样本有10000个 LibSVM 一个常用的SVM框架 OpenCV3.0 中的 ...
【问题&解决】解决 Android SDK下载和更新失败“Connection to https://dl-ssl.google.com refused”的问题
缘由: 更新sdk,遇到了更新下载失败问题: Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xmlFetche ...
翻译《Writing Idiomatic Python》（一）：if语句、for循环
开篇废话这是在美国Amazon上评价很不错的一本书,其实严格来说这可能不算书,而是一本小册子.就像书名一样,里面的内容主要是用一些例子讲述地道的Python的代码是怎样写的.书中把很多例子用不良风格 ...
HDU 5105 Math Problem --数学，求导
官方题解: f(x)=|a∗x3+b∗x2+c∗x+d|, 求最大值.令g(x)=a∗x3+b∗x2+c∗x+d,f(x)的最大值即为g(x)的正最大值,或者是负最小值.a!=0时, g′(x)=3∗ ...
AC日记——过河卒洛谷 1002
题目描述棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. ...
linux启动jmeter，执行./jmeter.sh报错解决方法
1.l-bash: ./jmeter.sh: Permission denied解决办法:jmeter.sh的执行权限改改,是权限不够chmod 777 jmeter.sh 2.An error oc ...
Java Executor并发框架（一）整体介绍
一.概述 Java是天生就支持并发的语言,支持并发意味着多线程,线程的频繁创建在高并发及大数据量是非常消耗资源的,因为java提供了线程池.在jdk1.5以前的版本中,线程池的使用是及其简陋的,但是在 ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

Boostrap(2)