关闭

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

标签: bootstrap
191人阅读 评论(0) 收藏 举报
分类:

缩略图

<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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9930次
    • 积分:573
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:2篇
    • 译文:0篇
    • 评论:9条
    文章分类
    最新评论