栅格系统：

.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. Android APP内存优化之图片优化

    网上有很多大拿分享的关于Android性能优化的文章,主要是通过各种工具分析,使用合理的技巧优化APP的体验,提升APP的流畅度,但关于内存优化的文章很少有看到.在Android设备内存动不动就上G的 ...

  2. ispy 编译笔记

    xcopy "$(ProjectDir)dlls\$(PlatformName)\*.*" "$(ProjectDir)$(OutDir)" /Y if NOT ...

  3. [AngularJS] $interval

    $interval provides an excellent service for timed operations in your AngularJS apps. It has the adva ...

  4. OpenJudge.poj CR2(Enclosure-ceil向上取整)

    0:Enclosure 查看 提交 统计 提问 总时间限制:  1000ms  内存限制:  131072kB 描述 为了防止爆零而加入了一道热身题.大家轻虐- Picks在参加NOI(网上同步赛)时 ...

  5. has been modified since the precompiled header地图错误

    添加高德地图的一个错误 has been modified since the precompiled header 解决方案: xcode---product----clean  清理重新编译一下就 ...

  6. 好用的Android屏幕适配

    前言 网上关于屏幕适配的文章已经铺天盖地了,为什么还要讲?因为网上现在基本都是使用px适配,即每种屏幕分辨率的设备需要定义一套dimens.xml文件.再加上有些手机还有虚拟按键(例如华为),这样就还 ...

  7. 获取ping的最短、最长、平均时间

    # -*- coding: utf-8 -*- import osimport rep = os.popen('ping 120.26.77.101') out = p.read()regex = r ...

  8. ant-design getFieldDecorator 无法获取自定义组件的值

    1.自定义或第三方的表单控件,也可以与 Form 组件一起使用.只要该组件遵循以下的约定: (1)提供受控属性 value 或其它与 valuePropName 的值同名的属性. (2)提供 onCh ...

  9. vue vuex 大型项目demo示例

    1.vuex 动态模块配置 import Vue from 'vue' import Vuex from 'vuex' import store from '@/store'; // 使用Vuex插件 ...

  10. sql server 数据加密

    select EncryptByPassPhrase('hksjlm',qlrmc)jmsj,* into jmqlr from qlr where qlbh in('5201411120005',' ...