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

标签: bootstrap
432人阅读 评论(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>
查看评论

Bootstrap组件学习笔记(七)——列表组和面板

目录:     1. 列表组     2. 面板 1.列表组     1.1 总结     1.2 示例效果截图 ...
  • qq_28057577
  • qq_28057577
  • 2017-09-01 23:35:46
  • 226

Bootstrap 组件-列表组

1 : 基本列表组     2 : 徽记     3 : 链接     4 : 按钮     5 : 颜色     基本列表组 回锅肉 烧烤 鱼香肉丝 麻婆豆腐 ...
  • wo_shi_LTB
  • wo_shi_LTB
  • 2018-01-21 00:37:19
  • 116

Bootstrap组件之列表组

.list-group——指定ul/div元素为列表组组件; .list-group-item——指定元素为列表组的列表项; .list-group-item-success、.list-grou...
  • bboyjoe
  • bboyjoe
  • 2015-08-03 11:24:58
  • 1556

Bootstrap——警告,进度条,列表组,面板,Well

可取消的警告通过创建一个 ,并向其添加一个 .alert 和(alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框...
  • kuuhakuna
  • kuuhakuna
  • 2017-12-05 00:30:06
  • 73

Bootstrap缩略图

使用 Bootstrap 创建缩略图 : (1)在图像周围添加带有 .thumbnail 的 标签。 (2)这会添加四个像素的内边距(padding)和一个灰色的边框。 (3)当鼠标悬停在图像...
  • qq_36748278
  • qq_36748278
  • 2017-03-07 14:33:17
  • 287

BootStrap列表组的用法

列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。 ***基本实例 最简单的列表组仅仅是一个带有多个列表条目的无序列表,另外还需要设置适当的类...
  • Real_neu
  • Real_neu
  • 2016-10-12 20:01:35
  • 1121

Bootstrap列表组、面板和响应式嵌入组件

列表组组件 列表组组件用于显示一组列表的组件 1.这只是开始 10 2.这是第二条数据 ...
  • MDreamlove
  • MDreamlove
  • 2017-07-17 11:45:53
  • 296

深入理解BootStrap -- 列表组(list-group)16

1、列表组 列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件。由于其在Bootstrap是一个独立的组件,所以也对应有自...
  • z742182637
  • z742182637
  • 2016-01-07 09:19:01
  • 9911

bootstrap 水平排列表单

水平排列的表单 通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-gro...
  • ghostyusheng
  • ghostyusheng
  • 2015-12-30 11:00:21
  • 7685

Bootstrap列表组

一、基础列表组 大部分的列表组都是有无标记的列表(ul/li)来实现的,示例代码: JavaScript权威指南 JavaScript语言精粹 JavaScript设计模式 Ja...
  • u010874036
  • u010874036
  • 2016-03-17 16:09:13
  • 496
    个人资料
    持之以恒
    等级:
    访问量: 3万+
    积分: 834
    排名: 6万+
    最新评论