模型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. 【动态规划】The Triangle

    问题 E: [动态规划]The Triangle 时间限制: 1 Sec  内存限制: 128 MB提交: 24  解决: 24[提交][状态][讨论版] 题目描述 73 88 1 02 7 4 44 ...

  2. codeforces B. Semifinals 解题报告

    题目链接:http://codeforces.com/problemset/problem/378/B 题目意思:有n个参赛者,他们都需要参加两场半决赛.第一场半决赛的成绩依次是a1, a2, ... ...

  3. July 12th, Week 29th Tuesday, 2016

    When the traveler goes alone he gets acquainted with himself. 独自旅行可以让人更好地了解自己. With other's company, ...

  4. （九）STM32之AFIO

    也许你以为IO和AFIO是很简单的,事实上有几个误区可能很多人都没注意过,当你只用现成的开发板来学习的时候,别人已经帮你做好了资源分配,所有的外设功能学习都是照着别人给你的例程去做的,这才没让你觉得奇 ...

  5. MySQL主备停机步骤与注意事项

    双十一马上到了,一堆的事情,今天登录mysql数据库服务器的时候突然发现服务器时间戳不对,比北京时间快了几分钟,我的天...随后检查了其他的几台数据库服务器发现同样都存在不同的偏差,最小的比北京时间快 ...

  6. Spring源码下载地址

    今天想下载一下Spring的源代码,登录到Spring官网,傻眼了,根本找不到下载的地方!费了九牛二虎之力在网上找到了一个下载地址,记下来,免得下次再次傻找. http://s3.amazonaws. ...

  7. JUC回顾之-volatile的原理和使用

    1.计算机内存模型的相关概念 计算机在执行程序时,每条指令都是在CPU中执行的,在指令的执行过程中,涉及到数据的读取和写入.由于程序在运行的过程中数据是放在"主存"中的, 由于数据 ...

  8. Redis中常用命令

    连接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsave:返回上次成功将数据 ...

  9. 【codevs1690】开关灯 线段树 区间修改+区间求和（标记）

    [codevs1690]开关灯 2014年2月15日4930 题目描述 Description YYX家门前的街上有N(2<=N<=100000)盏路灯,在晚上六点之前,这些路灯全是关着的 ...

  10. Hark的数据结构与算法练习之图书馆排序

    算法说明 图书馆排序是插入排序的变种,典型的以空间换时间的一种方法.我个人感觉这种思路可以学习借鉴,但直接使用的场景应该不大. 我们知道,真正的插入排序通常往前边插入元素后,我们要把后边所有的元素后移 ...