内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container" style="background-color:gray;">

        <br />

        <div class="thumbnail" style="height:100px;width:100px;"></div>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 thumbnail 圆角类型的div块的更多相关文章

  1. Bootstrap3基础 form-control 圆角的输入框，光标放入后边框变色

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. HTML+CSS基础 border css属性 Div块 盒子

    border  css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为n ...

  3. 【.Net基础一】 类型、对象、线程栈、托管堆运行时的相互关系

    目前在看CLR via C#,把总结的记下来,索性就把他写成一个系列吧. 1.[.Net基础一] 类型.对象.线程栈.托管堆运行时的相互关系 2.[.Net基础二]浅谈引用类型.值类型和装箱.拆箱 J ...

  4. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

  5. PHP控制div块大小和颜色的例子

    网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...

  6. JavaScript学习笔记-基础语法、类型、变量

    基础语法.类型.变量   非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或 ...

  7. 采用CSS3的动态元素（动画）设计div块的层级式展现

    此练习作品是为学习HTML5+CSS3而设计的(如有不好请大家批评指教~~~). 操作:当页面加载时,点击网页中的绿色块(一层),则有其他几块(二层)从其中央出现并向外延伸并旋转,点击这几块中任意一个 ...

  8. 使用 margin 让div块内容居中

    问:有一个div块,其width为300px,如何设置margin让div块居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为 自动 ...

  9. css实现div块半透明

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 线程的简述Thread

    为什么有进程? 原来操作系统只能处理一件任务,有了进程就可以让操作系统处理多个任务.因为进程与进程之间是完全隔离的,涉及到了内存空间.数据的切换,所以就有了进程的概念. 已经有了进程,为什么还要线程? ...

  2. 【Java线程安全】 — ThreadLocal

    [用法] 首先明确,ThreadLocal是用空间换时间来解决线程安全问题的,方法是各个线程拥有自己的变量副本. 既然如此,那么是涉及线程安全,必然有一个共享变量,我给大家声明一个: public c ...

  3. java获取当前网站的IP地址

    package ip; import java.net.InetAddress; import java.net.UnknownHostException; /** * * @author * */ ...

  4. 用ASPOSE.Cells将HTML表格存为Excel

    前端生成的html表格经常需要导出到excel中,利用JS和Office控件可以做到,但仅限于IE,还要启用安全设置. 想找一个简单的办法将HTML内容直接转换成Excel文件,如果直接修改网页头信息 ...

  5. How to enable Linux-PAM on uClinux

    By default the uClinux  uses the tools provided by busybox firstly. So the init login and passwd are ...

  6. 【模拟与阅读理解】Gym - 101954C Rullete

    http://codeforces.com/gym/101954/problem/C 题意:14行伪代码让你翻译. 坑得yibi #include<stdio.h> #include< ...

  7. fiddler的一些记录

    通过execaction.exe可以给fiddler发命令,控制抓包开始和停止 https://stackoverflow.com/questions/29916508/start-and-stop- ...

  8. iptables 分析(三)

    原文:http://blog.chinaunix.net/uid-24207747-id-2622902.html find_target查到目标并加载成功,返回一个xtables_target型对象 ...

  9. Android ListVeiw控件（转载整理）

    列表的显示需要三个元素: 1．ListVeiw 用来展示列表的View. 2．适配器 用来把数据映射到ListView上的中介. 3．数据    具体的将被映射的字符串,图片,或者基本组件. 根据列表 ...

  10. 认识拨号计划-dialplan

    拨号计划是 FreeSWITCH 中至关重要的一部分.它的主要作用就是对电话进行路由(从这一点上来说,相当于一个路由表).说的简明一点,就是当一个用户拨号时,对用户所拨的号码进行分析,进而决定下一步该 ...