请问这种网页结构用bootStrap怎么做~

Question

如图这样子

Answer 1

建议（只是建议），整个版面用svg实现，缩放适配利用svg视口来做，图片的部分切出来以后全部以image标签的形式写到svg内部，文字写text标签，并且可以写成组件的形式，比如这种写法：

<svg id="outer" version="1.1" baseProfile="full" width="1024" height="768" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <g id="first" width="150" height="175">
            <image xlink:href="xxxxxxxxxxxx.jpg" x="0" y="35" width="150" height="75"></image>
            <text font-size="20" fill="white" x="75" y="130" text-anchor="middle">Hey, boy!</text>
        </g>
        <g id="second" width="150" height="175" transform="rotate(120 75 87)">
            <image xlink:href="yyyyyyyyyyyy.jpg" x="0" y="35" width="150" height="75"></image>
            <text font-size="20" fill="white" x="75" y="130" text-anchor="middle">Hey, boy!</text>
        </g>
        <g id="third" width="150" height="175" transform="rotate(240 75 87)">
            <image xlink:href="zzzzzzzzzzzz.jpg" x="0" y="35" width="150" height="75"></image>
            <text font-size="20" fill="white" x="75" y="130" text-anchor="middle">Hey, boy!</text>
        </g>
     </defs>
     <image xlink:href="aaaaaaaaaaaa.png" x="0" y="0" width="540" height="541"></image>
     <use xlink:href="#first" x="195" y="20"></use>
     <use xlink:href="#second" x="334" y="264"></use>
     <use xlink:href="#third" x="50" y="264"></use>
</svg>

（原栗子其实就是按 ps 切出来组件的定位来写的，可以看到在 defs 标签里把零碎的素材和文字拼接成图层，然后在下边用 use 标签调用并重新定位，而且整个 svg 我觉得最鲜明的特点就是压根儿没矢量什么事。视口什么的数值都瞎写的，你按自己要求改就好）

svg写好以后，直接拿它当图片用就好了（svg爽点之一，能整坨用不费事，写html标签的话你就慢慢调定位吧……而且还不像svg最外层有个视口所以可以玩整体缩放，当然那是爽点之二），图片的自适应就没那么难了吧。然后下边三个按钮可以考虑用dom来做，放个容器里做下定位和适配就好，当然如果你说svg事件你可以一起搞定（其实就是带命名空间NS的原生方法，而且jQ我记得也非正式的支持svg）也可以一起都弄了，更好。

其实svg很好学的，之前有人问过，我随便说两句居然打退堂鼓了（简直就是大漠级别的安利杯具）……其实常用的标签没几个（80/20法则，把常用的弄明白能覆盖80%的场景），手写的话不比HTML5那些语义化的标签更难（如果真的学过用过的话）。

Answer 2

绝对定位吧 ;) 如果没有交互，可以直接用图片。

Answer 3

这网页用 bootStrap 是不是有点强人所难了
甚至没有原生的 html css 写的快啊
况且 你这 不需要响应式，所以 用bootstrap 不是更 浪费 你的精力？

Answer 4

后来我实在搞不定,用flash做了一个..随便缩放.
主要难点在于任意宽度下4个box不重合并且小圆点都对齐在弧线上.