Reaktionsschnelle Benutzeroberfläche mit Bootstrap3

Question

Jan 03, 2014, 04:51 AM

twitter-bootstrap-3 timeline responsive-design

Reaktionsschnelle Benutzeroberfläche mit Bootstrap3

Wie erstelle ich eine Benutzeroberfläche mit einer vertikalen Timeline-Leiste, die auf dem Desktop als Timeline-Leiste in der Mitte und als Ereignisfelder auf beiden Seiten angezeigt wird? Auf dem kleineren mobilen Bildschirm die Zeitleiste links und alle Ereignisfelder rechts.

Die Verwendung von JQuery in Kombination mit responsiven Klassen ist in Ordnung. Es müssen nur alle Ereignisfelder angezeigt werden, sodass das Ausblenden von alternativen Feldern mit xs-hidden nicht ausreicht.

JS Fiddle: http://jsfiddle.net/n82ek/2/

Reduzieren Sie die Größe des Ergebnisfensters, um das Reaktionsverhalten anzuzeigen.

Was muss passieren? Bewegen Sie den Balken nach links, um xs display Nice zu haben: Fügen Sie außerdem den timelineDot on line neben dem Feld hinzu.

Bitte sehen Sie sich ein Beispiel für ein Schnittmuster an .... und vielen Dank!

Aktuelles HTML:

<div class="container">
    <div class="timelineBar"></div>
    <div class="timelineDot"></div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6">
            <div class="shadowBox">right</div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="shadowBox">left</div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>
</div>

Aktuelles CSS:

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
.timelineBar {
    width: 2px;
    background-color: #BDBDBD;
    display: inline-block;
    position: absolute;
    height: 100%;
    left: 50%;
    margin-left: 10px;
    margin-right: 10px;
}
.shadowBox {
    box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
    border:2px solid white;
    border-radius: 10px;
    margin: 10px;
    background-color: #FFFFFF;
}
.timelineDot{
    width: 10px;
    height: 10px;
    background-color: #BDBDBD;
    opacity: 1;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: 6px;
    border-radius: 10px;
}