如何绘制到响应式网站

我试图创建我希望成为使用Bootstrap 3.0.3的基本响应式网站。我正在制作一个时间轴，当窗口很大时，它会垂直向下，它在时间轴的任一侧都有图标，否则图标会排齐，时间轴标记会缩小。像这样：当大： enter image description here 如何绘制到响应式网站

当小：

enter image description here

目前的图标和文字表现正常，但我不得不在绘制线条来说明我的观点。实际上我有|和 - 代表线条，它们出现和消失与调整大小。我的问题是，我如何绘制时间线的实际行，以便它们正确行事。是否有一些向量或形状图可以在网格元素中完成，或者我只需要在别处绘制线条并将其作为背景图像加入，然后使用窗口大小调整进行更改？

目前代码：

<div class="row"> 
    <h5>WEEK 1</h5> 
</div> 
<div class ="row"> 
    <div class = "col-xs-12 col-sm-2">     
     <a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="Doc_icon.jpg"></a> 
     <p><a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="Drawing_icon.jpg"></a></p> 
    </div> 
    <div class = "col-sm-1"> 
     <h3 class="hidden-xs">||</h3> 
    </div> 
    <div class = "col-xs-6 col-sm-6"> 
     <div class="panel panel-info"> 
      <div class="panel-heading"> 
       <h3 class="panel-title">This weeks project tittle</h3> 
      </div> 
      <div class="panel-body"> 
       <p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p> 
      </div> 
     </div> 
    </div>    
    <div class = "col-xs-1 col-sm-3"> 
    </div> 
    </div> 
    <div class = "row"> 
     <h3 class="hidden-sm hidden-md hidden-lg">---</h3> 
     <h3 class="hidden-xs">===</h3> 
    </div>

来源

2013-12-10 EasilyBaffled

用我有限的经验，我会坚持使用引导程序框架和响应行，让您的要求设计。我做了一个快速jfiddle下面一项基础性工作起来

JSFiddle of Timeline

的基本步骤是 -

添加border-top-bottom CSS类与下面的代码

.border-top-bottom{border-top:2px solid red;border-bottom:2px solid red;}
将border-right css类添加到左列

.border-right{ border-right:2px solid red; padding:10px }
从rows删除保证金填充和panel-info

.panel-info{margin-bottom:-1px;}

.row{padding:0px;}
然后你就可以调整填充，并期待/从那里感觉。

希望这会有所帮助。我不是一个CSS专家，所以我肯定有出有没有更多有用的答案，但是这是我将如何开始

干杯

来源

2013-12-12 08:53:17 Zane

正是我一直在寻找谢谢 – EasilyBaffled

很酷的答案。我的第一个想法是使用JavaScript来检查浏览器的宽度。我喜欢CSS唯一的答案。适用于可能会禁用JS的人员。 – Drue

如何绘制到响应式网站

回答

相关问题