<!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）--栅格系统深入学习的更多相关文章

  1. Bootstrap 学习笔记2 栅格系统 辅助类下拉框

    辅助类和响应式工具: 颜色和字体相同 响应式工具: 图标菜单按钮组件: btn-group 按钮式下拉菜单

  2. Bootstrap3.0学习第三轮(栅格系统案例)

    Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...

  3. Linux学习笔记(七) 查询系统

    1.查看命令 (1)man 可以使用 man 命令名称 命令查看某个命令的详细用法,其显示的内容如下: NAME:命令名称 SYNOPSIS:语法 DESCRIPTION:说明 OPTIONS:选项 ...

  4. 《Java学习笔记(第8版)》学习指导

    <Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...

  5. 20145230《java学习笔记》第七周学习总结

    20145230 <Java程序设计>第7周学习总结 教材学习内容 Lambda语法概览 我们在许多地方都会有按字符串长度排序的需求,如果在同一个方法内,我们可以使用一个byName局部变 ...

  6. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

  7. 20145213《Java程序设计学习笔记》第六周学习总结

    20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...

  8. Hadoop学习笔记(10) ——搭建源码学习环境

    Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...

  9. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  10. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

随机推荐

  1. Node.js：Buffer(缓冲区)介绍及常用方法

    JavaScript 语言自身只有字符串数据类型,没有二进制数据类型. 但在处理像TCP流或文件流时,必须使用到二进制数据.因此在 Node.js中,定义了一个 Buffer 类,该类用来创建一个专门 ...

  2. C++primer习题--第1章

    本文地址:http://www.cnblogs.com/archimedes/p/cpp-primer-chapter1-ans.html,转载请注明源地址. [习题 1.3] 编一个程序,在标准输出 ...

  3. java学习笔记4--对象的初始化与回收

    本文地址:http://www.cnblogs.com/archimedes/p/java-study-note4.html,转载请注明源地址. 1.对象初始化和回收 对象初始化 系统在生成对象时,会 ...

  4. Visual Studio 2015年预览设置： 辅助安装程序说明

    本文介绍了第三方应用程序安装辅助安装的 Visual Studio 2015年预览时安装的说明.如果您安装了多设备开发功能,您需要使用其他第三方软件来处理这些项目.辅助安装程序允许您将部署到您的计算机 ...

  5. Mysql导出逗号分隔的csv文件

    CleverCode在实际的工作中.常常须要将一些报表.或者日志数据等导出来,假设直接做页面,假设次数也不是非常多,需求也不同.所以直接导出csv文件,更加直观. 1 导出csv文件 1.1 语句格式 ...

  6. linux free命令详解和使用实例(查看内存使用率)

    转载:http://www.jb51.net/LINUXjishu/152017.html 1．命令格式: free [参数] 2．命令功能: free 命令显示系统使用和空闲的内存情况,包括物理内存 ...

  7. Linux下显示硬盘空间的两个命令

    1.df -h ,用于显示目前所有文件系统的可用空间及使用情况,示例如下: [root@msg45 ~]# df -hFilesystem                    Size  Used ...

  8. Python函数的循环调用

    def foo (): print 'runing foo' bar () def bar (): print 'runing bar' foo () bar() 直接上脚本,上面的脚本如果换成C语言 ...

  9. phpnow 在win7下遇到“安装服务[apache_pn]失败”问题的一种解决办法

    安装PHPnow时如果遇到下列问题: 安装服务[apache_pn]失败.可能原因如下: 1. 服务名已存在,请卸载或使用不同的服务名. 2. 非管理员权限,不能操作 Windows NT 服务. 将 ...

  10. HAWQ技术解析（八） —— 大表分区

    一.HAWQ中的分区表        与大多数关系数据库一样,HAWQ也支持分区表.这里所说的分区表是指HAWQ的内部分区表,外部分区表在后面"外部数据"篇讨论. 在数据仓库应用中 ...