it-swarm.com.de

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!

enter image description here

Aktueller HTML-Code:

<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;
}
39
Manish Pradhan

Snippet "Timeline (responsive)":

Das kommt dem, was Ihr Beispiel zeigt, sehr nahe. Das bootstrap Schnipsel, das unten verlinkt ist, deckt alle Basen ab, die Sie suchen. Ich habe es mir überlegt, mit den gleichen Anforderungen, die Sie haben (insbesondere Reaktionsfähigkeit). Dies passt gut zwischen Bildschirmgrößen und Geräten .

Sie können dies verzweigen und es als hervorragenden Ausgangspunkt für Ihre spezifischen Erwartungen verwenden:


Hier sind zwei Screenshots, die ich für dich gemacht habe ... breit und dünn:

widethin

65

BootFlat

Sie können auch BootFlat ausprobieren, das einen Abschnitt in deren Dokumentation speziell zum Erstellen von Zeitleisten enthält:

enter image description here

20
SMHasnain