clementi css,利用css3实现Bootstrap响应式垂直时间轴代码

特效描述:利用css3实现 Bootstrap 响应式垂直 时间轴代码。利用css3实现Bootstrap响应式垂直时间轴代码 代码结构 1. 引入CSS 2

特效描述:利用css3实现 Bootstrap 响应式垂直 时间轴代码。利用css3实现Bootstrap响应式垂直时间轴代码

代码结构

1. 引入CSS

2. HTML代码

Usage example

17.03.2016

MoneyService Transfer

Money transfer. By Alex, Wallet ID: 1234567890, Amount: 10$

17.03.2016 10:00

09.03.2016

MoneyService Transfer

Money transfer. By Alex, Wallet ID: 1234567890, Amount: 2220$

09.03.2016 09:00

09.02.2016

MoneyService Transfer

Money transfer. By John, Wallet ID: 1234567890, Amount: 261$

09.02.2016 08:00

08.02.2016

MoneyService Transfer

Money transfer. By John, Wallet ID: 1234567890, Amount: 100$

08.02.2016 14:00

MoneyService Transfer

Money transfer. By Alex, Wallet ID: 1234567890, Amount: 250$

08.02.2016 12:00

MoneyService Transfer

Money transfer. By Tom, Wallet ID: 1234567890, Amount: 10$

08.02.2016 11:30

MoneyService Transfer

Money transfer. By Alex, Wallet ID: 1234567890, Amount: 3$

08.02.2016 11:00

MoneyService Transfer

Money transfer. By Alex, Wallet ID: 1234567890, Amount: 25$

08.02.2016 10:00

13.01.2016

MoneyService Transfer

Money transfer. By John, Wallet ID: 1234567890, Amount: 240$

13.01.2016 15:00

MoneyService Transfer

Money transfer. By Steve, Wallet ID: 1234567890, Amount: 100'000'000$

13.01.2016 10:00

Two columns

timeline-event timeline-event-default

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-label

timeline-event timeline-event-primary

Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae venit ad nomine sed dominum depressit filia navem.

Feb-23-2014

timeline-event timeline-event-info

Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.

Feb-22-2014

timeline-event timeline-event-warning

Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae venit ad nomine sed dominum depressit filia navem.

Feb-23-2014

timeline-event timeline-event-danger

Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.

Feb-22-2014

label label-info

timeline-item timeline-item-arrow-sm

Volvitur ingreditur id ait mea vero cum autem quod ait Cumque ego illum vero cum unde beata. Commendavi si non dum est in. Dionysiadem tuos ratio puella ut casus, tunc lacrimas effunditis magister cives Tharsis. Puellae addita verbaque' capellam sanctissima quid, apollinem existimas filiam rex cum autem quod tamen adnuente rediens eam est se in. Peracta licet ad nomine Maria non ait in modo compungi mulierem volutpat.

Feb-27-2014

timeline-item timeline-item-arrow-lg timeline-point timeline-point-blank

Adfertur guttae sapientiae ducitur est Apollonius ut a a his domino Lycoridem in lucem. Theophile atque bona dei cenam veniebant est cum. Iusto opes mihi Tyrum in modo compungi mulierem ubi augue eiusdem ordo quos vero diam omni catervis famulorum. Bene dictis ut diem finito servis unde.

Mar-01-2014

timeline-point timeline-point-blank

Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.

Mar-02-2014

timeline-item timeline-item-left

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item timeline-item-left

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item timeline-item-left

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item timeline-item-left

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item timeline-item-right

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item timeline-item-right

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item timeline-item-right

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item timeline-item-right

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

timeline-item

Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.

Feb-21-2014

Single column

timeline-event timeline-event-primary with panel panel-default

Panel content

label

timeline-event timeline-event-primarywith table table-stripped table-hover
cellcell
cellcell
cellcell
Timeline Event

Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.

Feb-22-2014

label

Timeline Event

Volvitur ingreditur id ait mea vero cum autem quod ait Cumque ego illum vero cum unde beata. Commendavi si non dum est in. Dionysiadem tuos ratio puella ut casus, tunc lacrimas effunditis magister cives Tharsis. Puellae addita verbaque' capellam sanctissima quid, apollinem existimas filiam rex cum autem quod tamen adnuente rediens eam est se in. Peracta licet ad nomine Maria non ait in modo compungi mulierem volutpat.

Feb-27-2014

Timeline Event

Adfertur guttae sapientiae ducitur est Apollonius ut a a his domino Lycoridem in lucem. Theophile atque bona dei cenam veniebant est cum. Iusto opes mihi Tyrum in modo compungi mulierem ubi augue eiusdem ordo quos vero diam omni catervis famulorum. Bene dictis ut diem finito servis unde.

Mar-01-2014

Timeline Event

Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.

Mar-02-2014

label

Timeline Event

Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.

Mar-02-2014