模型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. 【python】一个简单的贪婪爬虫

    这个爬虫的作用是,对于一个给定的url,查找页面里面所有的url连接并依次贪婪爬取 主要需要注意的地方: 1.lxml.html.iterlinks()  可以实现对页面所有url的查找 2.获取页面 ...

  2. weblogic 安装和部署项目(原创)

    1.下载weblogic(含破解文件,土豪请支持正版,谢谢!) 2.安装如下图: 3.新建domain 4.打开weblogic Console 5.开始部署项目 6.部署成功

  3. google登录不了解决喽

    大家好,google 每到这个时候就登录不聊了.... 解法: 修改host 文件 下载地址点我

  4. Cocos2dx中零散知识点

    cocos2dx中有三种定时器:schedule,scheduleUpdate,scheduleOnce.功能分别是 每隔几秒调用自定义函数.调用系统默认的update()函数.只调用一次自定义函数 ...

  5. C#开发微信公众平台-就这么简单（附Demo）（转载）

    转载地址:http://www.cnblogs.com/xishuai/p/3625859.html 写在前面 服务号和订阅号 URL配置 创建菜单 查询.删除菜单 接受消息 发送消息(图文.菜单事件 ...

  6. EntityFramework中支持BulkInsert扩展（转载）

    前言 很显然,你应该不至于使用 EntityFramework 直接插入 10W 数据到数据库中,那可能得用上个几分钟.EntityFramework 最被人诟病的地方就是它的性能,处理大量数据时的效 ...

  7. HTML5中的DOMContentLoaded 和 touchmove

    Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...

  8. Java Hour 47 WeatherInfo 保存到数据库

    经历了上周简单的休整以后,我们继续Hibernate 之旅. 保存到数据库 private void saveWeatherInfo(Weatherinfo weatherInfo) { // Sav ...

  9. Java Hour 33 Weather ( 6 )

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 33 CURD 之 Create 首先是Eclipse 排序的功能找 ...

  10. Java Hour 12 Generic

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为12 Hour,请各位不吝赐教. 泛型程序设计 为 ...