模型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. Emacs 24.3 配置JDEE(http://blog.csdn.net/csfreebird/article/details/19033939)

    最近要重回Java编程,所以打算在最新版本的Emacs 24.3上配置JDEE,听说会有些问题,特此记录安装过程. Emacs 24.3内置了CEDET, 版本是2.0, 这是一个让人困惑的事情,因为 ...

  2. linux下重启tomcat、实时查看tomcat运行日志

    在Linux系统下,重启Tomcat使用命令操作的! 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看 ...

  3. Maven类包冲突终极解决方案

    本文转自:http://ian.wang/106.htm 举例A依赖于B及C,而B又依赖于X.Y,而C依赖于X.M,则A除引B及C的依赖包下,还会引入X,Y,M的依赖包(一般情况下了,Maven可通过 ...

  4. C/C++函数参数读取顺序

    #include <iostream> #include <stdio.h> using namespace std; void B(int a, int b){ cout & ...

  5. mysql多实例（个人的情况，不是大众的）里面有配置好的脚本+主从复制

    [root@DB-S ~]# ll /usr/local/|grep mysql lrwxrwxrwx. 1 root root 21 Jun 14 01:52 mysql -> /alidat ...

  6. ytu 1041: 迭代法求平方根（水题）

    1041: 迭代法求平方根 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 227  Solved: 146[Submit][Status][Web Bo ...

  7. Java Hour 33 Weather ( 6 )

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

  8. 同网段下，windows自带远程桌面连接

    1.服务器关闭防火墙 2.右键点击’我的电脑‘进入’属性‘点击左侧菜单栏中的’远程设置‘: 把远程桌面选项设置成’允许运行任意版本远程桌面的计算机连接‘. 3.客户端点击“开始”在附件菜单下面找到“远 ...

  9. How to enable logging

    转自:https://www.chromium.org/for-testers/enable-logging How to enable logging To enable logging, laun ...

  10. 用sqlplus登陆数据库时,oracle 11g出现ORA-12514问题

    转自:http://zhidao.baidu.com/question/144648216.html 启动服务 然后在sqlplus / as sysdba;执行启动startup nomount;a ...