特效描述:利用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-primary | with table table-stripped table-hover |
|---|---|
| cell | cell |
| cell | cell |
| cell | cell |
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