6.bootstrap练习笔记-缩略图和list-group

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>