栅格系统：

.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. 二十四种设计模式：命令模式(Command Pattern)

    命令模式(Command Pattern) 介绍将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可取消的操作. 示例有一个Message实体类,某个 ...

  2. 同步和异步 阻塞和非阻塞 IO多路复用和select总结

    同步和异步的概念 同步是指用户线程发起IO请求后,需要等待或者轮询内核IO操作完成后才能继续执行: 异步是指用户线程发起IO请求后仍继续执行,当内核IO操作完成后会通知用户线程或者调用用户线程注册的回 ...

  3. HDUOJ A Mathematical Curiosity 1017

     此题不难就是输出格式麻烦 #include<stdio.h>  int main(){        int T;   scanf("%d",&T);   ...

  4. 防止继承和覆盖（PHP类）

    可能出现需求:我们不希望继承的类覆盖abstract类中的某个方法. 解决方案:我们可以在某个方法前面加上final关键词,可以防止继承的类覆盖它并实现继承类自己的版本. 继承类仍然可以访问和调用这些 ...

  5. 4CIF是什么意思

    QCIF:176X144 CIF:352X288 2CIF:704X288 DCIF:584X384 4CIF:704X576 CIF是常用的标准化图像格式(Common Intermediate F ...

  6. Android动画之旅-Android动画基本介绍

    在上一篇博客中.我们简单了解了在Android中的动画特效.小伙伴们是不是意犹未尽呀. 还没有看的猛戳这里:Android动画之旅一开篇动画简单介绍 本篇博客.将和大家一起来分析Android中的四大 ...

  7. 【Linux】替换文本中的字符

    替换单个文本中的字符,有两种方法,如下详解 VIM替换 打开文件 vim test.txt 替换 :%s/原字符串/替换字符串/gg 直接替换 sed -i 's/原字符串/替换字符串/g' `ls ...

  8. ECMAScript 6 | 新特性

    新特性概览 参考文章: http://www.cnblogs.com/Wayou/p/es6_new_features.html ——————————————————————————————————— ...

  9. hibernate 关系映射之 单向外键关联一对一

    这里的关系指的是对象与对象之间的关系 注解方式单向关联一对一: //这个类描述的husband是一个对应一个wife的 import javax.persistence.Entity; import ...

  10. sphinx设置多属性过滤的方法(setFilter)

    需求描述 mysql中,每一个文档都有多个标签,查询时可以筛选一个标签也可以筛选同时拥有多个标签的文档. 数据示例 文档 标签   1    1,2,3,4,5   2    2,3,4,5,6   ...