<script src="jquery.1.9.js"></script>

<script src="js/bootstrap.min.js"></script>

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<h2>Files Required</h2>

<h3>1.jquery.js</h3>

<h3>2.bootstrap.min.js</h3>

<h3>3.bootstrap.min.css</h3>

<h3>4.bootstrap-theme.min.css</h3>

<body>

<h3>Grid system </h3>

<p>1.layout </p>

<div class="row">

    <div class="col-md-2 col-xs-2">

        <p>col-md-2 is for desktop</p>

		<p>col-xd-2 is for phone</p>

    </div>

    <div class="col-md-4 col-xs-4">

        <p>col-md-4 is for desktop</p>

		<p>col-xd-4 is for phone</p>

    </div>

    <div class="col-md-6 col-xs-6">

        <p>col-md-6 is for desktop</p>

		<p>col-xd-6 is for phone</p>

    </div>

</div>

<p>2.offset</p>

<div class="row">

    <div class="col-md-4">

        <p>col-md-4 is for desktop</p>

		<p>col-xd-4 is for phone</p>

    </div>

    <div class="col-md-4 col-offset-4">

        <p>col-md-4 is for desktop</p>

		<p>col-xd-4 is for phone</p>

    </div>

</div>

<p>3.nested row sample</p>

<div class="row">

<div class="col-md-6">1<br/>1</div>

<div class="col-md-6">

<div class="col-md-12">2.1</div>

<div class="col-md-12">2.2</div>

</div>

</div>

<script >

$(document).ready(function(){

$(".row").children("div").css("border","2 solid #fff000");

$(".row-fluid").children("div").css("border","2 solid #fff000");

});

</script>

</body>

版权声明：本文博主原创文章。博客，未经同意不得转载。

BootStrap -- Grid System的更多相关文章

  1. [转载]Understanding the Bootstrap 3 Grid System

    https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...

  2. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  3. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  4. Bootstrap 网格系统(Grid System)实例4

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

  5. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  6. Bootstrap 网格系统(Grid System)实例2

    Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...

  7. Bootstrap 网格系统(Grid System)实例1

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  8. Bootstrap 网格系统(Grid System)

    Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...

  9. Bootstrap3 Grid system原理及应用

    刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的 ...

随机推荐

  1. java中int,float,long,double取值范围，内存泄露

    java中int,float,long,double取值范围是多少? 写道 public class TestOutOfBound { public static void main(String[] ...

  2. UVA 10313(完全背包变形)

    Problem B Pay the Price Input: standard input Output: standard output Time Limit: 2 seconds Memory L ...

  3. 广东省-IT公司红黑榜排名

    红榜Top100 Order Company Name Point Change  1 百富计算机技术(深圳)有限公司  94.00 --  2 中国网通广州分公司  88.00 --  3 深圳市汇 ...

  4. SICP 解题集 — SICP 解题集

    SICP 解题集 — SICP 解题集 SICP 解题集¶ 这个文档的目标是成为中文化的.完整的<计算机程序的构造和解释>一书的解题集. 这个解题集的特色是: 对于每道习题,除了习题答案之 ...

  5. 利用Perf4j 对java项目进行性能监控

    Perf4j 可以对自定义监控范围的java代码进行日志记录,再经统计分析生成所需性能数据.Perf4j 提供了对常用日志工具log4j的扩展以方便与产品集成,它产生的性能数据可被用于生成可视化的性能 ...

  6. VSTO学习笔记（十五）Office 2013 初体验

    原文:VSTO学习笔记(十五)Office 2013 初体验 Office 2013 近期发布了首个面向消费者的预览版本,我也于第一时间进行了更新试用.从此开始VSTO系列全面转向Office 201 ...

  7. Semaphore实现Andoird版源代码剖析

    Semaphore是一个计数的信号量.从概念上来说,信号量维持一组许可(permits).acquire方法在必须的时候都会堵塞直到有一个许可可用,然后就会拿走这个许可.release方法加入一个许可 ...

  8. Android 检測网络是否连接

    权限: <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  <u ...

  9. 【剑指offer】面试题24：二叉搜索树的兴许前序遍历序列

    分析: 前序: 根 左 右 后序: 左 由 根 二叉搜索树: 左 < 根 < 右 那么这就非常明显了. def ifpost(postArray, start, end): #one or ...

  10. 在IIS上发布Web(使用VS2005)

    最近想在IIS上发布网站,弄了一下午.遇到很多问题,幸运的是都一一解决了,现在把解决问题的过程分享出来: 安装好IIS后,在VS2005上写了个网站(新建-->网站-->ASP.NET网站 ...