web-dev-qa-db-ja.com

Bootstrap3を使用したレスポンシブなタイムラインUI

デスクトップでは、中央のタイムラインバーと両側のイベントボックスとして表示される垂直タイムラインバーでUIを作成するにはどうすればよいですか。小さいモバイル画面では、左側のタイムラインバーと右側のすべてのイベントボックス。

JQueryをレスポンシブクラスと組み合わせて使用​​しても問題ありません。すべてのイベントボックスを表示するだけでよいため、xs-hiddenで代替ボックスを非表示にすることはできません。

JSフィドル：http://jsfiddle.net/n82ek/2/

結果ウィンドウの拡張サイズを縮小して、応答性の高い動作を確認します。

何が起こる必要がありますか？ xs表示のためにバーを左に移動してください。

添付のタイムラインUIパターン画像のサンプルを参照してください。

enter image description here

現在の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>

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

「タイムライン（レスポンシブ）」スニペット：

これは、あなたの例が示すものに非常によく似ています。以下にリンクされているbootstrapスニペットは、探しているすべてのベースをカバーしています。私は、あなたが持っているのと同じ要件（特に応答性）を自分で考えています。これは、画面サイズとデバイスの間でうまく変形します。

これを分岐して、特定の期待の出発点として使用できます。

ここに私があなたのために撮った2つのスクリーンショットがあります...広くて薄い：

widethin

65
digitalextremist

BootFlat

また、 BootFlat を試すこともできます。これには their documentation のセクションがあり、タイムラインの作成専用です：

enter image description here

20
SMHasnain