模型1：

<!-- 4/12 -->
<div class="container">
	<div class="row">
		<div class="col-md-4" style="height: 100px;background-color: green;"></div>
		<div class="col-md-4" style="height: 100px;background-color: red;"></div>
		<div class="col-md-4" style="height: 100px;background-color: skyblue;"></div>
	</div>
</div>

　　

模型2：

<!-- 6/12 -->
<div class="container">
	<div class="row">
		<div class="col-lg-6" style="height: 100px;background-color: pink;"></div>
		<div class="col-lg-6" style="height: 100px;background-color: orange;"></div>
	</div>
</div>

　　

1、

2、

3、

4、

代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>bootstrap->demo</title>
	<meta charset="utf-8">
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="dist/css/bootstrap.min.css">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="jquery-3.1.1.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="dist/js/bootstrap.min.js"></script>
	<meta name="viewport" content="width=device-width,inital-scale=1">
</head>
<body style="width: 1000px; margin: 0 auto;padding: 0;">
<h3>bootstrap -> test</h3>
<form id="" action="check.html" method="post" class="form-horizontal">
<fieldset>
<legend><label><span class="glyphicon glyphicon-user"></span> 用户登录:</label></legend>
<div class="form-group" id="idDiv">
	<label class="col-md-3 control-label" for="id">用户名：</label>
	<div class="col-md-5">
		<input type="text" name="id" id="id" class="form-control" placeholder="请输入登录名">
	</div>
	<div class="col-md-4" id="idSpan"></div>
</div>

<div class="form-group" id="passDiv">
	<label class="col-md-3 control-label" for="id">密码：</label>
	<div class="col-md-5">
		<input type="password" name="id" id="id" class="form-control" placeholder="请输入密码">
	</div>
	<div class="col-md-4" id="passSpan"></div>
</div>

<div class="form-group" id="btnDiv">
	<div class="col-md-5 col-md-offset-3">
		<button type="submit" class="btn btn-xs btn-primary">登录</button>
		<button type="reset" class="btn btn-xs btn-warning">重置</button>
	</div>
	<div class="col-md-4" id="passSpan"></div>
</div>

</fieldset>
</form>
</body>
</html>

　　

初探Bootstrap之十二栅格的更多相关文章

  1. Bootstrap <基础十二>下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  2. Bootstrap <基础三十二>模态框（Modal）插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  3. Bootstrap <基础二十二>超大屏幕（Jumbotron）

    Bootstrap 支持的另一个特性,超大屏幕(Jumbotron).顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin).使用超大屏幕(Jumbotron)的步骤如下: ...

  4. Bootstrap组件福利篇：十二款好用的组件推荐

    阅读目录 一.时间组件 1.效果展示 2.源码说明 3.代码示例 二.自增器组件 1.效果展示 2.源码说明 3.代码示例 三.加载效果 一.实用型 二.炫酷型 四.流程图小插件 1.效果展示 2.源 ...

  5. Bootstrap <基础十九>分页

    Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...

  6. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  7. Bootstrap<基础十六> 导航元素

    Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...

  8. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

  9. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

随机推荐

  1. Ubuntu12.04安装ia32-libs

    sudo apt-get install libc6:i386 sudo -i cd /etc/apt/sources.list.d// care for old-releases.ubuntu.co ...

  2. JUC系列回顾之-CountDownLatch底层原理和示例

    CountDownLatch 是一个同步工具类,允许一个线程或者多个线程等待其他线程完成操作,再执行. CountDownLatch(int count) 构造一个用给定计数初始化的 CountDow ...

  3. 第六步：Lucene查询索引

    package cn.harmel.lucene; import java.io.IOException; import java.nio.file.Paths; import org.apache. ...

  4. 搭建邮局（邮件服务器） - hmailserver

    1.查看服务器mx是否解析成功 nslookup  set type=mx   2.hmailserver服务器 smtp设置     3.foxmail 设置   4.使用webmail(after ...

  5. C#控制管理VisualSVN Server

    VisualSVN Server可以用WMI接口管理(Windows Management Instrumentation). VisualSVN Server安装的计算机中,位于%VISUALSVN ...

  6. 使用 layoutopt 进行布局优化

    使用 layoutopt 进行布局优化 Layoutopt 是一款简单的命令行工具,可帮助找到不必要的控件嵌套以及缩减布局资源,从而使应用变得可能“苗条”.控件越少.布局层次越浅,性能就越好. 如果使 ...

  7. C#学习笔记——Show()与ShowDialog()的区别

    用Show()调用的窗体不会返回任何值,在使用form.Show()显示form以后,会马上继续执行form.Show()后面的语句.而用ShowDialog()调用的窗体会返回一个DialogRes ...

  8. java程序员必须会的技能

    1.语法:必须比较熟悉,在写代码的时候IDE的编辑器对某一行报错应该能够根据报错信息知道是什么样的语法错误并且知道任何修正. 2.命令:必须熟悉JDK带的一些常用命令及其常用选项,命令至少需要熟悉:a ...

  9. Rational Software Architect V8.5.1安装

    转自:http://blog.sina.com.cn/s/blog_4a0238270101bupg.html IBM Rational Software Architect (RSA) 是 IBM ...

  10. Z-XML团队年终博客整理

    一个优秀的团队一定有逻辑清晰,风格优雅,严格规范的博客. ------图灵 大三上转眼间已经到了收官阶段,我们的软工课也逐渐接近尾声.在二轮迭代即将结束的时候,当我们梳理一路走来的软工课,我们发现自己 ...