2

我正在为我正在构建的网站使用 Twitter Bootstrap（最新版本 - 2.3.2），并希望在保持网站响应速度的同时实现以下目标，并为其应用最佳实践。

这是我想要的一个非常粗略的草图：

（非常基本的）网站草图

该站点有一个带有固定导航栏的基本标题，一个内容流畅的 div，它具有三个内部 div：span5、span6 和 span1（总共 12 列）。在内容 div 之后，带有公司/版权信息等的粘性页脚。

我遇到的问题是 span1 列。它基本上是装饰性的（它有 4 个垂直颜色条，每个颜色条的宽度为 25%），但我想要：

  • 社交链接图标在列中垂直居中（Twitter、Facebook、LinkedIn 等），如黑框所示。
  • 文本在每个彩色条内逆时针旋转 90 度。每个只有一个词，不是优先事项。
  • 每个条都拉伸以填充父容器的整个高度（在本例中为内容 div），因为页面的高度当前由最高 div 设置，无论是 span5 还是 span6。

我知道可能有很多方法可以实现这一点（纯 CSS、javascript、背景图像平铺），但我正在寻找最佳实践：避免额外的标记，使用正确的技术，以便尽可能多地学习。我尝试将父容器（和内部条）设置为 height: 100%; 并且也可以使用 min-height ，但是 min-height （似乎）不适用于百分比。

非常欢迎任何帮助和/或建设性的批评。

编辑：JSFiddle 并添加完整代码：JSFiddle

另外，链接到原始站点（以防 JSFiddle 搞砸了）：原始页面

<!-- Part 1: Wrap all page content here -->
<div id="wrap">
    <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="brand" href="#">Geolog&iacute;a y Telecomunicaciones, C.A.</a>

                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#">Inicio</a>

                        </li>
                        <li><a href="#acerca-de">Acerca de</a>

                        </li>
                        <li class="active"><a href="#contacto">Contacto</a>

                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
        <div>
            <div class="decorative-lightblue"></div>
            <div class="decorative-purple"></div>
            <div class="decorative-orange"></div>
            <div class="decorative-lightorange"></div>
        </div>
    </div>
    <!-- Begin page content -->
    <div class="container-fluid">
        <div class="row-fluid content clearfix" style="margin-top: 60px;">
            <div class="span5">
                <div class="row-fluid">
                    <div class="span5">
                        <div class="span12 logo"></div>
                        <div class="sidebar-intro">Construcci&oacute;n, Adaptaci&oacute;n,
                            <br/>Adecuaci&oacute;n y Remodelaci&oacute;n
                            <br/>de <span class="emphasis-red">
                                        locales<br>comerciales<br>empresariales
                                    </span>

                        </div>
                    </div>
                    <div class="span7">
                        <!-- Responsive iFrame -->
                        <div class="Flexible-container">
                            <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=8.561755,-71.204721&amp;spn=0.004716,0.006571&amp;t=m&amp;z=18&amp;output=embed"></iframe>
                            <br /><small><a href="http://maps.google.com/?ie=UTF8&amp;ll=8.561755,-71.204721&amp;spn=0.004716,0.006571&amp;t=m&amp;z=18&amp;source=embed" style="color:#0000FF;text-align:left">Ver mapa m&aacute;s grande</a></small>

                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="contact-wrapper well">
                        <form>
                            <div class="control-group">
                                <label class="control-label" for="inputName"><i class="icon-user"></i> Nombre</label>
                                <div class="controls controls-row">
                                    <input type="text" class="span12 input-xlarge " id="inputName" placeholder="Su nombre completo">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputEmail"><i class="icon-envelope"></i> Correo electr&oacute;nico</label>
                                <div class="controls">
                                    <input type="text" class="span12 input-xlarge" id="inputEmail" placeholder="nombre@sudominio.com">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputEmail"><i class="icon-question-sign"></i> Asunto</label>
                                <div class="controls">
                                    <input type="text" class="span12 input-xlarge" id="inputSubject" placeholder="Asunto de su mensaje">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputEmail"><i class="icon-pencil"></i> Mensaje</label>
                                <div class="controls">
                                    <textarea rows="6" class="span12 input-xlarge" placeholder="Haganos llegar sus comentarios, sugerencias, consultas, etc."></textarea>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <button type="submit" class="btn btn-success">Enviar Mensaje</button>
                                </div>
                                <br class="clear">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="row-fluid span12">
                    <img class="span9 offset2" src="http://geotelca.com/sitio/assets/img/examples/flyer_back.png">
                </div>
                <div class="row-fluid">
                    <div class="row-fluid span12 address"> <address>
                                    Zona Industrial Los Curos, Calle 1, Edif. Geotelca No. A-8, Mérida, Edo. Mérida
                                </address>

                    </div>
                    <div class="row-fluid e-mail">
                        <div class="span4 offset6"> <a href="mailto:direccion@geotelca.com">direccion@geotelca.com</a>

                        </div>
                    </div>
                </div>
            </div>
            <div class="span1 social-links">
                <div class="row-fluid vertical-bars">
                    <div class="span3 bar bar-lightblue"></div>
                    <div class="span3 bar bar-purple"></div>
                    <div class="span3 bar bar-orange"></div>
                    <div class="span3 bar bar-lightorange"></div>
                </div>
            </div>
        </div>
    </div>
    <!--/.container-fluid-->
    <div id="push"></div>
</div>
<!--/#wrap-->
<div id="footer">
    <div>
        <div class="decorative-lightblue"></div>
        <div class="decorative-purple"></div>
        <div class="decorative-orange"></div>
        <div class="decorative-lightorange"></div>
    </div>
    <div class="container">
        <p class="muted credit">Dise&ntilde;ado, codificado y mantenido por <a href="http://twitter.com/kenshin23">@kenshin23</a>

        </p>
    </div>
</div>
4

1 回答 1

0

我想说你最好的选择是那里的 jQuery 插件之一来完成这个...... eqHeight.coffee 似乎有很好的记录：

https://github.com/jsliang/eqHeight.coffee/

至于将这些社交链接集中在那个垂直空间中，您可能必须使用更多的 Javascript 来做到这一点。虽然，老实说，我可能会将它们放在一个带有 position: fixed; 的 div 容器中。并让他们在用户滚动时上下滑动该列。

编辑：刚刚注意到您添加了您的 HTML 文件......在我链接到的第一个插件的情况下，您需要向您想要高度的每个列添加一个类（可能是“eq-height”）匹配（第一个外部 span5 和 span6，然后是所有条形列 div 单独）。然后在准备好 jQuery 文档时，使用：

$(document).ready(function() {
    $(".content").eqHeight(".eq-height");
});
于 2013-05-23T03:03:30.250 回答