栅格系统：

.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. iOS: 常用的宏

    Github地址:https://github.com/XFZLDXF/Macro/blob/master/MacroDefinition.h // // MacroDefinition.h // M ...

  2. appium运行报错

    1.new AppiumDriver<>(new URL(url), capabilities) 报错 java.lang.NoSuchMethodError:com.google.com ...

  3. dubbo-monitor安装监控中心，管理控制台安装网页一直访问不到，解决bug的方式记录

    问题再现 第一步,重启机器 第二步,按照dubbo-monitor需要开启的服务,顺序逐一进行启动,之前的推翻全部重新再走一遍就通了,千万不能死磕...很浪费时间.... 通过打印日志追踪问题的所在. ...

  4. Linux系统目录结构，Shell脚本；关闭和开启防火墙

    Linux系统目录结构 目录 描述 备注 /bin a.存放着最经常使用的命令 b.可执行文件,用户命令 c.构建最小系统所需要的命令 /boot a.内核与启动文件 b.系统启动相关文件 c.启动L ...

  5. WinKawaks如何载入游戏

    1 把下载的游戏放入roms目录 2 运行Kawaks,点击载入游戏,勾选"仅存在的",点击扫描所有游戏.然后会出现所有名字正确的游戏.你下载的zip如果有中文或者名字不对,都是无 ...

  6. RESTful最佳实践

    哲学 不要为了RESTful而RESTful 在能表达清楚的情况下,简单就是美 接口路径设计 接口设计原则 URI指向的是唯一的资源对象 示例: 指向ID为yanbo.ai的Account对象 GET ...

  7. 实时视频直播客户端技术盘点：Native、HTML5、WebRTC、微信小程序

    1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...

  8. Android获取前台进程的方法

    概述 项目中很多场景交互非常依赖于客户端的前后景状态以及其他一些辅助信息上传,譬如当前新闻在前台(看到的是新闻界面)播放时,语音开启音乐应用,此时我们希望能看到音乐界面,并且音乐在播;而在导航应用在前 ...

  9. Android性能优化典范（一）

    2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...

  10. C++11 std::async 包装实体店：：packaged_task

    更好的方式 C++11中提供了操作多线程的高层次特性. std::packaged_task 包装的是一个异步操作,相当与外包任务,好比我大阿里把电话客服外包给某某公司. std::future 提供 ...