<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>bootstrap学习第一天</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

    <script src="bootstrap-3.3.7-dist/js/jquery.js"></script>

    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <script src="bootstrap-3.3.7-dist/js/holder.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scle=1, maximum-scale=1, user-scalable=no">

    <style>

        .container {

            height: 300px;

        }

        .row {

            margin-bottom: 15px;

        }

    </style>

</head>

<body>

<div class="container">

    <h1>BootStrap前端框架</h1>

    <div class="row">

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

            <img src="img/img_logo01.jpg" width="100%">

            <!--<img src="holder.js/100px263" alt="">-->

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

    </div>

    <div class="row">

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

            <img src="img/img_logo01.jpg" width="100%">

            <!--<img src="holder.js/100px263" alt="">-->

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

    </div>

    <div class="row">

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

            <img src="img/img_logo01.jpg" width="100%">

            <!--<img src="holder.js/100px263" alt="">-->

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

    </div>

    <div class="row">

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

            <img src="img/img_logo01.jpg" width="100%">

            <!--<img src="holder.js/100px263" alt="">-->

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

    </div>

    <div class="row">

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

            <img src="img/img_logo01.jpg" width="100%">

            <!--<img src="holder.js/100px263" alt="">-->

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

    </div>

    <div class="row">

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

            <img src="img/img_logo01.jpg" width="100%">

            <!--<img src="holder.js/100px263" alt="">-->

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

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

            <img src="img/img_logo01.jpg" width="100%">

        </div>

    </div>

</div>

</body>

</html>

图片占位符生成器：holder.js

<img src="holder.js/100px263" alt="">中,生成一个大小是100px263的图片,p表示百分比

BootStrap学习02栅格系统的更多相关文章

  1. Bootstrap学习笔记-栅格系统

    栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...

  2. Bootstrap响应式栅格系统的设计原理

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

  3. 【5】了解Bootstrap预置的栅格系统

    在开篇之前我们来说2个class,因为以后要用到的 <div class="container"> ... </div> 用.container包裹页面上的 ...

  4. Bootstrap的核心——栅格系统的使用

        前  言 絮叨絮叨 Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 而栅格系统是Bootstrap中的核心,正是因为栅格系统的 ...

  5. BootStrap学习之栅格布局

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的改变,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin用于生成更具语 ...

  6. Bootstrap学习3--栅格系统

    备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 ...

  7. Bootstrap 样式设计 栅格系统

    .col-xs- 超小屏幕 手机 (<768px) .col-sm- 小屏幕 平板 (≥768px) .col-md- 中等屏幕 桌面显示器 (≥992px) .col-lg- 大屏幕 大桌面显 ...

  8. html --- bootstrap 框架 （栅格系统布局）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Bootstrap学习--栅格系统

    响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...

随机推荐

  1. Educational Codeforces Round 24 E

    Vova again tries to play some computer card game. The rules of deck creation in this game are simple ...

  2. 转 python 将一个文件中内容添加到另一个文件指定位置

    http://blog.csdn.net/huguangshanse00/article/details/14624601

  3. Hash环/一致性Hash原理

    当前,Memcached.Redis这类分布式kv缓存已经非常普遍.从本篇开始,本系列将分析分布式缓存相关的原理.使用策略和最佳实践. 我们知道Memcached的分布式其实是一种“伪分布式”,也就是 ...

  4. pyton 基础，运算符及字符类型。

    一.python运算符: 二.数据类型: 1.数字: int  :整型 32位机器上一个整数取值范围为-2**31~2**31-1即-2147483648~2147483647 64位机器上一个整数取 ...

  5. Java断点续传（基于socket与RandomAccessFile的简单实现）

    Java断点续传(基于socket与RandomAccessFile的简单实现) 这是一个简单的C/S架构,基本实现思路是将服务器注册至某个空闲端口用来监视并处理每个客户端的传输请求. 客户端先获得用 ...

  6. c/s架构搭建

    1.socket(套接字) Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接 ...

  7. 浅析Statement和PreparedStatement的区别

    当我们使用java程序来操作sql server时会使用到Statement和PreparedStatement,俩者都可以用于把sql语句从java程序中发送到指定数据库,并执行sql语句.那么如何 ...

  8. php 生成饼状图，折线图，条形图 通用类 2

    生成饼状图,折线图,条形图通用的php类,这里使用的是国外的 HighCharts,前台页面别忘了调用HighCahrt  js HighCharts中文网站  http://www.hcharts. ...

  9. word打印小册子

    使用联想m7250f打印册子,打印时设置该打印机属性为双面打印(手动),打印第一面后,将所有打印出的纸拿出并翻转使对应word中的第2页的打印纸朝外,之后将所有纸放入纸盒,再点击打印第二面即可.

  10. Linux之常用Shell脚本总结

    一.简介本文将总结一些常用的shell脚本,方便以后工作中使用. 二.shell脚本[a]定期备份mysql数据库,需结合cronb定时任务调度实现. #!/bin/bash#首先声明一些自定义变量 ...