web-dev-qa-db-fra.com

Interface utilisateur de scénario réactif avec Bootstrap3

Comment puis-je créer une interface utilisateur avec une barre de chronologie verticale où, sur le bureau, elle apparaît sous la forme d'une barre de chronologie au milieu et de zones d'événements des deux côtés. Sur un écran de mobile plus petit, la barre de chronologie à gauche et toutes les zones d'événements à droite.

Il est correct d'utiliser JQuery en combinaison avec des classes responsive. Il suffit d'afficher toutes les zones d'événements. Par conséquent, il ne sera pas utile de masquer les zones de remplacement avec xs-hidden.

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

Réduisez la taille de la fenêtre de résultat pour afficher le comportement réactif.

Qu'est-ce qui doit arriver? Déplacez la barre vers la gauche pour afficher xs C'est sympa d'avoir: Ajoutez également la timelineDot en ligne à côté de la boîte.

Veuillez vous reporter à un exemple d'image de modèle d'interface utilisateur de la timeline ci-joint ... et merci!

enter image description here

HTML actuel: 

<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>

CSS actuelle: 

@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;
}
responsive-designtwitter-bootstrap-3timeline
39
Manish Pradhan

Extrait "Timeline (responsive)":

Cela ressemble beaucoup à ce que montre votre exemple. Le fragment bootstrap lié ci-dessous couvre toutes les bases que vous recherchez. Je l’ai étudié moi-même, avec les mêmes exigences que vous (en particulier la réactivité). Cela varie bien entre les tailles d’écran et les périphériques. .

Vous pouvez y accéder et l'utiliser comme point de départ idéal pour vos attentes spécifiques:

Voici deux captures d'écran que j'ai prises pour vous ... larges et minces:

widethin

65
digitalextremist

BootFlat

Vous pouvez également essayer BootFlat , qui contient une section dans leur documentation spécialement pour la construction de timelines:

enter image description here

20
SMHasnain