栅格系统：

.row 1行12列

.col-md-3 占3列，一行就是4个

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1">

     <title>Document</title>

     <link rel="stylesheet" href="../bs/css/bootstrap.css">

     <link rel="stylesheet" href="../bs/css/bootstrap-theme.css">

     <script src="..bs/js/jquery.js"></script>

     <script src="..bs/js/bootstrap.js"></script>

     <style>

         .container{

             background:green;

             height:300px;

         }

         /*栅格必须放到container和row里面！*/

         .row{

             margin-bottom:15px;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <h1>Bootstrap栅格</h1>

         <div class="row">

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <!-- col-md-fooset-3是偏移，如果同一行还有图片，就挤到下面了！ -->

             <div class="col-md-3 col-md-offset-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

         </div>

         <div class="row">

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

         </div>

         <div class="row">

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

             <div class="col-md-3">

                 <img src="../image/1.jpg" alt="" width="100%">

             </div>

         </div>

     </div>

 </body>

 </html>

Bootstrap学习笔记（1）栅格系统的更多相关文章

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

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

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

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

  3. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  4. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  5. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  7. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

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

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

  9. bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

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

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

随机推荐

  1. [转] SQL Server 批量 停用/启用 外键约束

    本文转自:http://hi.baidu.com/wangzhiqing999/item/ca699308de4f1ff9a1103429 今天百度知道上面,看到这样一个要求: 现在有一个库,有很多张 ...

  2. LINUX之内网渗透提权

    在渗透测试过程中,经常遇到如下情形,内部网络主机通过路由器或者安全设备做了访问控制,无法通过互联网直接访问本地开放的服务,Windows方 面,国内通常选择Lcx.exe来进行端口转发,在应用方面大多 ...

  3. 流畅的python第十五章上下文管理器和else块学习记录

    with 语句和上下文管理器for.while 和 try 语句的 else 子句 with 语句会设置一个临时的上下文,交给上下文管理器对象控制,并且负责清理上下文.这么做能避免错误并减少样板代码, ...

  4. 深入理解JavaScript模拟私有成员

    一般的面向对象语言C++或JAVA,对象都是有私有成员的.js中没有类的改变,同样也没有对象的私有成员这个概念.但是可以通过某些特殊写法,模拟出私有成员. 1.特权模式: (1)在构造函数内部声明的变 ...

  5. CentOS 6.5 源码安装subversion-1.8.8，附加mod_dav_svn模块

    题记:第一次写如此实践类的博文,都是亲身经历,折腾了大半天,仅记录供参考.(新手实践,有错误之处欢迎纠正.) 安装前准备: 1.已安装JDK1.7,并配置好环境变量. 2.已安装apr.apr-uti ...

  6. log4j实现每一个线程保存一个日志文件

    log4j.properties: ### direct log messages to stdout ### log4j.appender.stdout=org.apache.log4j.Conso ...

  7. weblogic基本安装部署

    1.3.1 安装WebLogic10(1) <JavaEE程序设计与应用开发>第1章JavaEE介绍和环境配置,本章首先介绍了JavaEE的基本理论,然后对本书将要使用的软件:JDK.服务 ...

  8. 五中不同的思路输出helloword

    五中不同的思路输出helloword -- 我也不知道了--

  9. mysql 严格模式取消 group by 和 date zore

    取消单个库的时间严格模式 set global sql_mode=(select replace(@@sql_mode,'NO_ZERO_IN_DATE,NO_ZERO_DATE',''));

  10. RAC环境下的堵塞(blocking blocked)

    RAC环境下的堵塞不同于单实例情形,由于我们须要考虑到位于不同实例的session.也就是说之前查询的v$session,v$lock对应的应变化为全局范围来查找.本文提供了2个查询脚本,并给出实例演 ...