<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. 14.3.2.1 Transaction Isolation Levels 事务隔离级别

    14.3.2 InnoDB Transaction Model InnoDB 事务模型 14.3.2.1 Transaction Isolation Levels 事务隔离级别 14.3.2.2 au ...

  2. （2）入门指南——（7）添加jquery代码（Adding our jQuery code）

    Our custom code will go in the second, currently empty, JavaScript file which we included from the H ...

  3. ANDROID L——Material Design综合应用（Demo）

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...

  4. Mybatis在oracle、mysql、db2、sql server的like模糊查询

    <!-- oracle --> <select id="searchUserBySearchName" parameterType="java.lang ...

  5. vdsm的SSL证书验证过程

    1. Copy the VDSM certificate of the RHEV-H(Red Hat Enterprise Virtualization Hypervisor ) host to th ...

  6. 承载于以太网帧之上的数据包的解析——ARP、IPv4、IPv6

    承接上一博文而来,继续解析网络数据包,对于承载在以太网上的三种协议进行了解析,主要是分为依据RFC定义的标准先解析头部数据,然后得到有效载荷,即为协议包括的实体数据,更上层进行进一步处理. 一.ARP ...

  7. 浅谈spring——注解配置（九）

    spring定义一个切面是件麻烦的事情,需要实现专门的接口,还要进行一些较为复杂的配置,有没有较为简单的方法??? @AspectJ注解可以很容易定义一个切面,且不需要实现任何的接口.缺点是对JDK的 ...

  8. gradle多模块开发(转)

    参考文档:gradle的官方userguide.pdf文档的chapter 55和chapter 56.gradle的多模块或项目开发一定不会比maven差,在我看来!大的项目分成多个模块来开发是常事 ...

  9. HDU 3699 A hard Aoshu Problem （暴力搜索）

    题意:题意:给你3个字符串s1,s2,s3;要求对三个字符串中的字符赋值(同样的字符串进行同样的数字替换), 替换后的三个数进行四则运算要满足左边等于右边.求有几种解法. Sample Input 2 ...

  10. centos7图形配置 firewall-config

    图形配置 firewall-config centos 7:systemctl stop firewalld.service #停止