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的 ...

随机推荐

Cocos2d-x响应android返回键
开启按键按键监听 setKeypadEnabled(true); 重写监听事件函数 virtual void keyBackClicked(); 如: void BanQiuLayer::keyBac ...
latex表格线的颜色设置(边框添加颜色)
添加了如下包:边框颜色要用到booktabs, colortbl, 包,下面代码里有一个自定义的颜色tabcolor \usepackage{ctexcap} \usepackage{graphicx ...
[Ext JS 4] Extjs 它 initComponent 和 constructor差分
initComponent 和 constructor是什么 Extjs 提供的组件还是挺丰富的, 可是有时候需求更丰富. 当Extjs 原生的组件无法实现我们的要求的时候, 就须要扩展Extjs 的 ...
Git详解之六 Git工具（转）
Git 工具现在,你已经学习了管理或者维护 Git 仓库,实现代码控制所需的大多数日常命令和工作流程.你已经完成了跟踪和提交文件的基本任务,并且发挥了暂存区和轻量级的特性分支及合并的威力. 接下来你 ...
loj1201（最大独立集）
传送门:A Perfect Murder 题意:有一群苍蝇,之间有一些是朋友关系,如果杀了一只苍蝇,那么它的朋友们都会有警惕性,再也杀不了这些朋友了,问最多能杀多少只苍蝇. 分析:根据朋友性连边,最多 ...
使用 sphinx 制作简洁而又美观的文档
使用 sphinx 制作简洁而又美观的文档使用 sphinx 制作简洁而又美观的文档
Android bluetooth介绍（四）： a2dp connect流程分析
关键词:蓝牙blueZ A2DP.SINK.sink_connect.sink_disconnect.sink_suspend.sink_resume.sink_is_connected.sink_ ...
黑马程序猿————OC在Foundation框架结构和字符串
------<a href="http://www.itheima.com" target="blank">Java火车.Android火车.iOS ...
poj1236（强连通缩点）
传送门:Network of Schools 题意:一些学校联接在一个计算机网络上,学校之间存在软件支援协议,每个学校都有它应支援的学校名单(A学校支援学校B,并不表示B学校一定支援学校A).当某校获 ...
(step6.1.4)hdu 1102(Constructing Roads——最小生成树)
题目大意:输入一个整数n,表示村庄的数目.在接下来的n行中,每行有n列,表示村庄i到村庄 j 的距离.(下面会结合样例说明).接着,输入一个整数q,表示已经有q条路修好. 在接下来的q行中,会给出修好 ...

BootStrap -- Grid System

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

随机推荐

热门专题