[学习笔记] bootstrap (九) :布局组件[缩略图,警告,进度条,多媒体列表,列表组,面板,wells]

来源：互联网发布：jdk 7u21 windows x32 编辑：程序博客网时间：2024/05/21 20:23

缩略图

<div class="thumbnail">    <img src="11.png" alt="kk" />    <div class="caption">        <h3>商品名称</h3>        <p>价格: $<strong>99.9</strong></p>        <p><a href="#" >加入购物车</a> </p>    </div></div>

警告

        <div class="alert alert-success alert-dismissable">            <button type="button" class="close" data-dismiss="alert"                    aria-hidden="true">                &times;            </button>            成功！很好地完成了提交。        </div>        <div class="alert alert-info alert-dismissable">            <button type="button" class="close" data-dismiss="alert"                    aria-hidden="true">                &times;            </button>            信息！请注意这个信息。        </div>        <div class="alert alert-warning alert-dismissable">            <button type="button" class="close" data-dismiss="alert"                    aria-hidden="true">                &times;            </button>            警告！请不要提交。        </div>        <div class="alert alert-danger alert-dismissable">            <button type="button" class="close" data-dismiss="alert"                    aria-hidden="true">                &times;            </button>            错误！请进行一些更改。        </div>

进度条

<div class="progress progress-striped active">    <div class="progress-bar progress-bar-success" role="progressbar"         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"         style="width: 40%;">        <span class="sr-only">40% 完成</span>    </div></div>

多媒体列表

……

列表组

<div class="list-group">    <a href="#" class="list-group-item active">        免费域名注册    </a>    <a href="#" class="list-group-item">24*7 支持</a>    <a href="#" class="list-group-item">免费 Window 空间托管</a>    <a href="#" class="list-group-item">图像的数量 <span class="badge">30</span></a>    <a href="#" class="list-group-item">每年更新成本</a></div>

面板

<div class="panel panel-default">    <div class="panel-heading">        Title    </div>    <div class="panel-body">        Body    </div>    <div class="panel-footer">        Foot    </div></div>

wells

<div class="well">    Some words! some keys!</div>

0 0