Boostrap(2)
网页布局
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的源码,做 ...
随机推荐
- 工作中常用的Linux命令：目录
工作两三年,每天都和Linux打交道,但每每使用Linux命令的时候却会像提笔忘字般不知如何使用,常常查手册或到网上找资料.此系列文章主要是为了方便自己在使用命令时随时可查阅.鄙人才疏学浅,文中若有任 ...
- python django 模板
1 用两个大括号括起来的文字{{person_name}} 称为变量 2 被 大括号和面分号包围的文件({% if ordered_warranty %})是模板标签 3 过滤器是用管道符(|) 和U ...
- 自定义listview的步骤
1.定义一个实体类: public class Fruit { private String name; private int imageId; public Fruit(String name, ...
- （新人的第一篇博客）树状数组中lowbit(i)=i&(-i) 的简单文字证明
第一次写博好激动o(≧v≦)o~~初一狗语无伦次还请多多指教 先了解树状数组http://blog.csdn.net/int64ago/article/details/7429868感觉这个前辈写 ...
- 【软件使用】GitHub使用教程for VS2012
一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘等等一系列工具进行Copy,然后回家才能继续在原来的基础上作业.Cop ...
- Git版本控制工具（一）----git的安装及创建版本库
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- Pro Git（中文版）
Pro Git(中文版) 返回 Git @ OSC 目录 1.起步 1.1 关于版本控制 1.2 Git 简史 1.3 Git 基础 1.4 安装 Git 1.5 初次运行 Git 前的配置 1.6 ...
- js知识体系的梳理一
今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获:js总结一一.[获取元素]: 1.通过ID: var oBtn=document.getElementById('btn1 ...
- Maya FEM节点框架完成
这几天把物理模拟框架移植到maya之中了. maya编程有一点比较关键,就是要让自己的程序逻辑适应maya的节点求值机制.在物理模拟中,往往需要进行时间积分,对此我的解决办法是,写一个节点rigSim ...
- [原创]CI持续集成系统环境---部署Gitlab环境完整记录
Gitlab是一个代码托管平台,在实际工作中,对代码管理十分有用. 废话不多说,下面是对我自己搭建的Gitlab环境做一记录: (1)安装 ------------------------------ ...