html卡片布局样式,基于bootstrap卡片图文列表布局样式

特效描述：基于bootstrap 卡片图文列表 布局样式。bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

普通的卡片布局

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title Card title Card title Card title Card title Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

等高卡片布局

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title Card title Card title Card title Card title Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Cards With Equal Height and Text

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title Card title Card title Card title Card title Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

标题和文字高度相等的等高卡片布局

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title Card title Card title Card title Card title Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

function equal_height() {

// Equal Card Height

$('.jQueryEqualHeight1').jQueryEqualHeight();

// Equal Card Height and Text Height

$('.jQueryEqualHeight2').jQueryEqualHeight('.card .card-body .card-text');

$('.jQueryEqualHeight2').jQueryEqualHeight('.card');

// Equal Card Height, Text Height and Title Height

$('.jQueryEqualHeight3').jQueryEqualHeight('.card .card-body .card-title');

$('.jQueryEqualHeight3').jQueryEqualHeight('.card .card-body .card-text');

$('.jQueryEqualHeight3').jQueryEqualHeight('.card');

}

$(window).on('load', function(event) {

equal_height();

});

$(window).resize(function(event) {

equal_height();

});

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源：站长素材