<div> <div> <div> <img src="https://placehold.it/150x150"> </div> <div> <h1>Jane Doette</h1> <h3>front-end ninja</h3> </div> </div> <hr> <div> <div> <img src="https://placehold.it/950x350"> </div> </div> <div> <div> <h2>Featured Work</h2> </div> </div> <div> <div> <img src="https://placehold.it/250x250"> <h2>applify</h2> <a href="https://github.com/udacity/applify">https://github.com/udacity/applify</a> </div> <div> <img src="https://placehold.it/250x250"> <h2>sunflower</h2> <a href="https://github.com/udacity/sunflower">https://github.com/udacity/sunflower</a> </div> <div> <img src="https://placehold.it/250x250"> <h2>bokeh</h2> <a href="https://github.com/udacity/bokeh">https://github.com/udacity/bokeh</a> </div> </div> </div>
作者编写上述代码花了不到 10 分钟，由于没有图片，作者使用了网上提供的占位图片。在浏览器里打开该页面，已经接近设计了，但字体、大小写、排版还与设计不符。接下来就要进行微调，浏览 Bootstrap 文档，可以发现相关的 CSS 类，最终完成的效果如下图所示：
图 6. 实现效果
更有意思的是，当你缩小浏览器窗口，或者从手机上访问该页面时，会发现它已经是一个简单的响应式页面了，而我们并没有添加任何额外代码！看一下时间，总共花了不到 20 分钟，我也兑现了分分钟编写一个响应式页面的承诺。
您可能感兴趣的文章: