栅格系统：

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

    本文转自: http://www.2cto.com/database/201208/146734.html sql事务(Transaction)用法介绍及回滚实例   事务(Transaction)是 ...

  2. [转]SSIS ConnectionManager.ConnectionString Property

    本文转自:http://msdn.microsoft.com/en-us/library/microsoft.sqlserver.dts.runtime.connectionmanager.conne ...

  3. Java实现Redis pipeline比较

    开始实验这个,是因为Redis实战.pdf上面有例子. 上面用的是 org.jredis包,可是发现这个包不在maven的公共仓库里.需要先下载然后放在本地,导入maven依赖.详见: http:// ...

  4. Oracle之数据库安全

    密码破解,大部分其实是通过枚举的方式,列出可能的密码,然后逐个尝试,直到找到真正的密码,有时也叫暴力破解.接下来,我们将举几个密码破解的例子. n  密码破解例1--- OrakelCrackert ...

  5. [python爬虫] Selenium常见元素定位方法和操作的学习介绍(转载)

    转载地址:[python爬虫] Selenium常见元素定位方法和操作的学习介绍 一. 定位元素方法 官网地址:http://selenium-python.readthedocs.org/locat ...

  6. java程序计算数独游戏

    兴趣来了,写了个简单的数独游戏计算程序,未做算法优化. 通过文件来输入一个二维数组,9行,每行9个数组,数独游戏中需要填空的地方用0来表示.结果也是打印二维数组. import java.io.Fil ...

  7. 【转】Go maps in action

    原文: https://blog.golang.org/go-maps-in-action ------------------------------------------------------ ...

  8. Afinal的jar包进行代码混淆出错

    今天用到了代码混淆,混淆过后APP不能够运行,老报错,由于项目中只用了Afinal的第三方库,于是按照网上给出的答案为了不混淆Afinal的jar包,在配置文件中写入了下面的语句: -libraryj ...

  9. Maven版本的ssm框架项目常见依赖pom.xml

    <properties> <junit.version>4.12</junit.version> <spring.version>4.3.1.RELEA ...

  10. centos下安装pyspider

    环境: * CentOS release 6.4 (Final) * Python 2.6.6 pip install pyspider   ,发现lxml没有安装好 直接sudo yum insta ...