<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. 一个网友写的栈，问为啥不能迭代。具有__iter__ 和next方法的对象叫迭代器-七七巴巴黄页网

    一个网友写的栈,问为啥不能迭代.具有__iter__ 和next方法的对象叫迭代器-七七巴巴黄页网 一个网友写的栈,问为啥不能迭代.具有__iter__ 和next方法的对象叫迭代器 python视频 ...

  2. [Android学习笔记]双缓冲绘图技术

    双缓冲技术绘图: 什么情况下产生的双缓冲技术?当数据量很大时,绘图可能需要花费很长的时间,这样屏幕就会出现卡顿,闪烁等现象. 什么是双缓冲技术?双缓冲是在内存中创建一个与屏幕绘制区域一致的对象,先将图 ...

  3. [Android学习笔记]ListView中含有Button导致无法响应onItemClick回调的解决办法

    转自:http://www.cnblogs.com/eyu8874521/archive/2012/10/17/2727882.html 问题描述: 当ListView的Item中的控件只是一些展示类 ...

  4. [IDEs]Eclipse设置花括号样式

    用惯Vistual Studio,在使用Eclipse时发现有很多东西还是挺不习惯,第一个就要解决花括号的样式 步骤: 1.Windows->Preferences->Java->C ...

  5. 字符编码详解　good

    字符编码详解 字符编码详解

  6. java--ThreadPool线程池简单用法

    package com.threadPool; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent. ...

  7. Mod in math

    An Introduction to Modular Math When we divide two integers we will have an equation that looks like ...

  8. 【ALearning】第二章 Androidproject知识介绍

    本章介绍了主要的初步Androidproject成立了一个开发环境.为了Android意识的整体项目和理解.本章包含Android开发环境的搭建.第一Android工程Hello World与Andr ...

  9. unix解释器文件详解

    exec执行普通文件和解释器文件的区别 2014-11-15 23:52:45 分类: LINUX exec执行普通文件和解释器文件的区别 ——lvyilong316 1. 从一个问题开始 首先要从项 ...

  10. SynchronousQueue、LinkedBlockingQueue、ArrayBlockingQueue性能测试

    SynchronousQueue.LinkedBlockingQueue.ArrayBlockingQueue性能测试 JDK6对SynchronousQueue做了性能优化,避免对竞争资源加锁,所以 ...