BootStrap -- Grid System

<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的更多相关文章

[转载]Understanding the Bootstrap 3 Grid System
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...
BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...
Bootstrap 网格系统(Grid System)实例4
Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...
Bootstrap 网格系统(Grid System)实例3
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
Bootstrap 网格系统(Grid System)实例2
Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...
Bootstrap 网格系统(Grid System)实例1
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
Bootstrap 网格系统(Grid System)
Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...
Bootstrap3 Grid system原理及应用
刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的 ...

随机推荐

ZOJ 3529 A Game Between Alice and Bob（博弈论-sg函数）
ZOJ 3529 - A Game Between Alice and Bob Time Limit:5000MS Memory Limit:262144KB 64bit IO For ...
qt qml中PropertyAnimation的几种使用方法
qml文章 qt qml中PropertyAnimation的几种使用方法动画应用场景有以下几种: 首先如果一个Rectangle.动画是要改变它的x和y值 1,Rectangle一旦被创建,就要移 ...
使用AjaxFileUpload.js实现文件异步上�
ajax是无法提交文件的,所以在上传图片并预览的时候,我们常常使用Ifame的方法实现看似异步的效果.可是这样总不是非常方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们 ...
60s 经济学探奇
理解经济学什么是经济学.对于学习金融的同学,一定会给你搬出一大堆定义.例证.学派.说经济学是一门研究研究价值的生产.流通.分配.消费的规律的理论. 非常高大上的感觉,可是对于我这样没有什么金融学理论 ...
IP分类地址——a，b，c 类是如何划分的
今天IP网络使用32位地址,点分十进制格式,如172.16.0.0.地址格式:IP地址=网络地址+主机地址或 IP地址=主机地址+子网地址+主机地址. IP地址类型当互联网最初的设计,为了便于网络 ...
firebug使用
查看网页的header是优化web应用的关键一环,从header中,可以检查到非常多的信息:网页在squid中的缓存时间(age).客户端缓存时间(expires).是否有最后修改时间(last-m ...
201215-03-19---cocos2dx内存管理--具体解释
因为cocos2dx我们的使用c++写的,所以内存管理就是一个绕只是去的坎,这个你不懂内存仅仅懂业务逻辑的话,还玩什么c++,今天看了半天这个东西,事实上本质上是理解的,可是就是有一个过不去的坎,最终 ...
【iOS】苹果，百度Map定位使用与总结
iOS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).当中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是 ...
MVC应用程序与单选列表
原文:MVC应用程序与单选列表前几天,Insus.NET有在MVC应用程序中,练习了<MVC应用程序,动态创建单选列表(RadioButtonList)>http://www.cnblo ...
Linux中进行挂起(待机)的命令说明
/********************************************************************* * Author : Samson * Date ...

BootStrap -- Grid System

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

随机推荐

热门专题