<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. wake_lock_timeout的用法

    今天实用到用ec43_GPIO的中断来唤醒系统,将系统从深度休眠中唤醒并保证系统wakup 一段时间用过了.方法例如以下.有相同使用的童鞋能够參考一下. 1.   定义一人局部静态变量ec43_wlo ...

  2. [Cocos2d-x]解决Android平台ndk-build时不自动删除外部库

    参考链接: http://blog.chinaunix.net/uid-26009923-id-3430612.html http://hi.baidu.com/hpyfei/item/52a2b21 ...

  3. 事务不提交,也有可能写redo和数据文件

    事务不提交,也有可能写redo和数据文件

  4. 千万别用模板给的list.size()巨坑

    要用!list.empty()取代i<list.size();否则就不会AC了.

  5. NET之全平台一体化

    NET之全平台一体化的体验 一.前言 近来利用空闲时间研究了一下Xamarin的技术,想想既然提供了如此好的支持,就该尝试一切可能,来一个”大小通吃“. 何为全平台:APP包括Android.IOS. ...

  6. git merge，rebase和*(no branch)

    上一篇:http://blog.csdn.net/xiaoputao0903/article/details/23933589,说了git的分支,相关的使用方法没说到可是仅仅要google就能搜出一大 ...

  7. IO流的总结

    流操作的基本规律: 最痛苦的就是流对象有非常多.不知道该用那一个. 通过明白来完毕. (1).明白源和目的 源:输入流InputStream Reader 目的:输出流OutputStream Wri ...

  8. 绝杀600元以下智能手机的夏新小V二代-专栏-速途网

    绝杀600元以下智能手机的夏新小V二代-专栏-速途网 绝杀600元以下智能手机的夏新小V二代

  9. Android中G-Sensor相关流程

    1.使G-sensor正常工作需要做的事: G-sensor driver文件包括: driver/i2c/chips/lis331dl.c driver/i2c/chips/sensorioctl. ...

  10. 自动更改IP地址反爬虫封锁，支持多线程(转)

    8年多爬虫经验的人告诉你,国内ADSL是王道,多申请些线路,分布在多个不同的电信机房,能跨省跨市更好,我这里写好的断线重拨组件,你可以直接使用. ADSL拨号上网使用动态IP地址,每一次拨号得到的IP ...