Bootstrap学习笔记（2）--栅格系统深入学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.row,.row div{
border: 1px solid #000;
}
img{
/*width: 50%;
height: 50%;*/
/*width: 100px;
height: 200px;*/
}
</style>
</head>
<body>
<div class="container">
<!-- container-fluid类好像是浮动的 -->
<div class="row">
<!-- 现有container类，下面是row类，里面是col-xs-4类，根据屏幕大小分成4种，如果都写上，就会自动识别屏幕，采取相应的栏数；只写一个就默认都是用这个栏数。col-lg-4-offset-4是自己向后挪4栏，学名“列偏移” -->
<div class="col-xs-4 col-xs-offset-4"><img src="1.jpg" alt=""></div>
<div class="col-xs-4"><img src="2.jpg" alt=""></div>
<div class="col-xs-4 col-lg-3"><img src="3.jpg" alt=""></div>
</div>
<!-- <div class="row">
<div class="col-xs-4"><img src="1.jpg" alt=""></div>
<div class="col-xs-4"><img src="1.jpg" alt=""></div>
<div class="row">
<div class="col-lg-2"><img src="2.jpg" alt=""></div>
<div class="col-lg-2"><img src="2.jpg" alt=""></div>
<div class="col-lg-2"><img src="2.jpg" alt=""></div>
<div class="col-lg-2"><img src="2.jpg" alt=""></div>
</div>
</div> -->
<div class="row">
<div class="col-xs-4">php is very much!</div>
<div class="col-xs-4">php is very much!</div>
<div class="col-xs-4">php is very much!</div>
</div>
</div>
</body>
<script>
</script>
</html>
Bootstrap学习笔记（2）--栅格系统深入学习的更多相关文章
- Bootstrap 学习笔记2 栅格系统 辅助类下拉框
辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单
- Bootstrap3.0学习第三轮(栅格系统案例)
Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...
- Linux学习笔记(七) 查询系统
1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...
- 《Java学习笔记(第8版)》学习指导
<Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...
- 20145230《java学习笔记》第七周学习总结
20145230 <Java程序设计>第7周学习总结 教材学习内容 Lambda语法概览 我们在许多地方都会有按字符串长度排序的需求,如果在同一个方法内,我们可以使用一个byName局部变 ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- 20145213《Java程序设计学习笔记》第六周学习总结
20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...
- Hadoop学习笔记(10) ——搭建源码学习环境
Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
随机推荐
- css3动画属性系列之transform细讲旋转rotate
1.语法: transform: none | <transform-function> [<transform-function>]* 2.取值: none ...
- c# String.IndexOf 方法 string查找字符串
c# String.IndexOf 方法 (value, [startIndex], [count]) 报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. ...
- 友元程序集（C# 和 Visual Basic）
友元程序集(C# 和 Visual Basic) Visual Studio 2013 “友元程序集”是一种能够访问其他程序集的 Friend (Visual Basic) 或 internal (C ...
- Binwalk：后门（固件）分析利器
http://blog.csdn.net/testing_is_believing/article/details/14091179 Binwalk介绍 Binwalk是一个固件的分析工具,旨在协助研 ...
- 理解GC
首先看日志内容: [Full GC 23.32: [ParNew: 2356K->2310K(3251K), 0.000288sec] [Full GC 是名称. [ParNew:是表示收集器 ...
- Python 数据驱动工具：DDT
背景 python 的unittest 没有自带数据驱动功能. 所以如果使用unittest,同时又想使用数据驱动,那么就可以使用DDT来完成. DDT是 “Data-Driven Tests”的缩写 ...
- PHP 正则表达式(PCRE)
PHP 正则表达式(PCRE) 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串 ...
- Unity for Windows: II – Publishing Unity games to Windows Store
原地址:http://digitalerr0r.wordpress.com/2013/08/27/unity-for-windows-ii-publishing-to-windows-8/ Windo ...
- 算法笔记_045:币值最大化问题（Java）
目录 1 问题描述 2 解决方案 2.1 动态规划法 1 问题描述 给定一排n个硬币,其面值均为正整数c1,c2,...,cn,这些整数并不一定两两不同.请问如何选择硬币,使得在其原始位置互不相邻 ...
- Map 和 WeakMap 数据结构
Map 和 WeakMap 是ES6 新增的数据结构 一.Map 它们本质与对象一样,都是键值对的集合,但是他们与 Object 对象主要的不同是,键可以是各种类型的数值,而Object 对象的键 只 ...