bootstrap练习笔记-缩略图

1.其实缩略图很简单,只要按照固定的格式来设计

div.container 总容器  在宽度为1200px以上

div.row 一行内容

div.col-lg-3.col-md-4.col-sm-6.col-xs-12

表示在大于1200px (992px,1200px] (768px,992px] (0,768px]每行分别有

12/3 12/4 12/6 12/12   个缩略图

div.thumbnail表示存放缩略图的开始

img为缩略图

div.caption缩略图的文字内容

<div id="case">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case1.jpg" alt="">
                    <div class="caption">
                        <h4>中国移动</h4>
                        <p>合作良好</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case2.jpg" alt="">
                    <div class="caption">
                        <h4>中国移动</h4>
                        <p>合作良好</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case3.jpg" alt="">
                    <div class="caption">
                        <h4>中国移动</h4>
                        <p>合作良好</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case4.jpg" alt="">
                    <div class="caption">
                        <h4>中国移动</h4>
                        <p>合作良好</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                <div class="thumbnail">
                    <img src="img/case1.jpg" alt="">
                    <div class="caption">
                        <h4>中国移动</h4>
                        <p>合作良好</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2.list-group

div.group>a.list-group-item*3

表示列表群组 和列表项  a链接指向对应的锚点

<div id="about">
    <div class="container">
        <div class="row">
            <div class="col-md-3 hidden-xs">
                <div class="list-group">
                    <a href="#1" class="list-group-item">
                        1.机构介绍
                    </a>
                    <a href="#2" class="list-group-item">
                        2.加入我们
                    </a>
                    <a href="#3" class="list-group-item">
                        3.联系方式
                    </a>
                </div>
            </div>
            <div class="col-md-9 about">
                <a name="1"></a>
                <h3>机构简介</h3>
                <p>瓢城企业培训有限公司是一家专业以智能化弱电工程为主的高科技民营企业,公司自创立以来一直专业致力于智能化弱电工程;始终坚持发扬"诚信、创新、沟通"为企业宗旨,以"技术、服务"为立业之本的团体精神,并形成一套完整的设计、安装、调试、培训、维护一站式服务体系。</p>
                <a name="2"></a>
                <h3>加入我们</h3>
                <p>网络已深刻改变着人们的生活,本地化生活服务市场前景巨大,生活半径团队坚信本地化生活服务与互联网的结合将会成就一家梦幻的公司,我们脚踏实地的相信梦想,我们相信你的加入会让生活半径更可能成为那家梦幻公司!生活半径人有梦想,有魄力,强执行力,但是要实现这个伟大的梦想,需要更多的有创业精神的你一路前行。公司将提供有竞争力的薪酬、完善的福利(五险一金)、期权、广阔的上升空间。只要你有能力、有激情、有梦想,愿意付出,愿意与公司共同成长,请加入我们!</p>
                <p>请发送您的简历到:hr@xxx.com,我们会在第一时间联系您!</p>
                <a name="3"></a>
                <h3>联系方式</h3>
                <p>地址:江苏省盐城市亭湖区大庆中路1234 号</p>
                <p>邮编:1234567</p>
                <p>电话:010-88888888</p>
                <p>传真:010-88666666</p>
            </div>
        </div>
    </div>
</div>

6.bootstrap练习笔记-缩略图和list-group的更多相关文章

  1. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  2. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  3. 5.bootstrap练习笔记-巨幕和流体布局

    bootstrap练习笔记-巨幕和流体布局 1.在bootstrap中 .jumbotron可以设置巨幕效果 2.div.jumnotron自动设置一个黑色的巨幕效果 3.div.container ...

  4. 3.bootstrap练习笔记-媒体内容

    bootstrap练习笔记-多媒体对象 1.在bootstrap中,如果想存放内容,一种解决的方式就是利用media这个class 首先要设置一个div.container作为一个总的容器来存放内容 ...

  5. 4.bootstrap练习笔记-内容区块

    bootstrap练习笔记-内容区块 1.bootstrap中,采用的全部是div布局,把你的内容首先要包含在一个大的DIV区块当中 2.然后再写一个div.container,这个div里面存放真正 ...

  6. 1.bootstrap练习笔记-导航条

    bootstrap练习笔记 1.关于导航栏   官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...

  7. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  8. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  9. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. Hadoop JAVA 开发说明

    作为Hadoop程序员,他要做的事情就是: 1.定义Mapper,处理输入的Key-Value对,输出中间结果.2.定义Reducer,可选,对中间结果进行规约,输出最终结果.3.定义InputFor ...

  2. Mule入门基础

    Mule入门文档 零.前提 在按照本文进行操作之前,假设您的系统已经具备以下前提: 已经安装了Sun公司的JDK1.4或JDK5.0版本,推荐使用JDK5.0. 正确设置了JAVA_HOME环境变量到 ...

  3. [翻译]用 Puppet 搭建易管理的服务器基础架构(3)

    我通过伯乐在线翻译了一个Puppet简明教程,一共分为四部分,这是第三部分. 本文由 伯乐在线 - Wing 翻译,黄利民 校稿.未经许可,禁止转载!英文出处:Manuel Kiessling.欢迎加 ...

  4. [Cordova] Plugin开发架构

    [Cordova] Plugin开发架构 问题情景 开发Cordova Plugin的时候,侦错Native Code是一件让人困扰的事情,因为Cordova所提供的错误讯息并没有那么的完整.常常需要 ...

  5. sharepoint报HRESULT:0x80131904的错误的原因和解决方法

    在新建文件库的时候出现的.下上传文件和更改权限,都是在报这个HRESULT:0x80131904的错误,基本所有操作都报同一个错误,如下图: 错误原因 这个问题其实就是:sharepoint配置文件( ...

  6. 理解java虚拟机内存分配堆,栈和方法区

    栈:存放局部变量 堆:存放new出来的对象 方法区:存放类的信息,static变量,常量池(字符串常量) 在堆中,可以说是堆的一部分   创建了一个student类,定义了name属性, id静态变量 ...

  7. iOS开发-UI 从入门到精通(一)

    一.UI概述 (1)UI(User Interface)用户界面,用户能看到的各种各样的页面元素: (2)iOS App = 各种各样的UI控件+业务逻辑和算法: (3)想要开发出一款精美的应用程序, ...

  8. Windows平台下利用APM来做负载均衡方案 - 负载均衡(下)

    概述 我们在上一篇Windows平台分布式架构实践 - 负载均衡中讨论了Windows平台下通过NLB(Network Load Balancer) 来实现网站的负载均衡,并且通过压力测试演示了它的效 ...

  9. ansible使用文档

    假设A机器上安装ansible yum install ansible vim /etc/ansible/hosts 对每个主机加key认证ssh-copy-id -i ~/.ssh/id_rsa.p ...

  10. Linux iptables配置错误导致ORA-12535 & ORA-12170

    实验环境:       操作系统  : Red Hat Enterprise Linux Server release 5.7 (Tikanga)       数据库版本: Oracle Databa ...