如何使用 LESS 使用 Twitter Bootstrap 创建流畅的语义布局？答案

【问题标题】：How to create fluid semantical layout with Twitter Bootstrap using LESS?如何使用 LESS 使用 Twitter Bootstrap 创建流畅的语义布局？
【发布时间】：2012-09-30 23:21:30
【问题描述】：

我想使用 LESS 创建流畅的布局，而不是在 html 代码上使用像 .span6 这样的 Bootstrap 网格类。我怎样才能做到这一点？当我在没有 LESS 的情况下编写时，我会创建这样的布局：

<div class="container-fluid">

<div class="row-fluid" id="header">
    <div class="span4 block">
        <h1 class="title">Sample Site</h1>
        <h2 class="sub-title">Powered by Twitter Bootstrap</h2>
    </div>
    <div class="span6 block">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Pages</a></li>
            <li><a href="#">Typography</a></li>
            <li><a href="#">UI</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="#">Tables</a></li>
        </ul>
    </div>
    <div class="span2 block">
        <div class="btn-group open">
            <button class="btn">Dropdown</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Change password</a></li>
                <li><a href="#">Log in with another user</a></li>
                <li><a href="#">Change token</a></li>
                <li><a href="#">Log out</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="row-fluid" id="slider">
    <div class="span12 block">
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">

现在，我的布局如下：

<div id="wrap">
<div id="header">
    <div id="logo">SiteLogo</div>
    <div id="top-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
        </ul>
    </div>
    <div id="logout">
        <a href="#">Logout</a>
    </div>
</div>
<div id="slider">

如果我想制作 div#wrap -> .container-fluid，我应该在 .less 文件上写什么， div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2 不用在html代码上写这个类？

【问题讨论】：

更全面的回答：stackoverflow.com/questions/9906571/…

标签： css twitter-bootstrap grid less

【解决方案1】：

首先，这不会是真正意义上的语义，至少不再如此。

<div id="top-menu">的语义形式为<nav>或<nav id="top">

<div id="header">的语义形式是<header>

无论如何，这里都有执行此操作的说明：

Please stop embedding Bootstrap classes in your HTML

不过，老实说，它并不像作者想象的那么简单。仅仅因为你有一个 <nav> 从 Bootstrap 继承 .nav 的样式并不意味着它的孩子也会继承继承的样式。

因此，如果我从 .nav ul 定义样式，<ul> 元素将不会收到此样式，如果它位于 <nav> 中。

【讨论】：

ajkochanowicz，我之前写过这篇文章。当我写 #header { #grid > .fluid > .row-fluid;用于使用#grid 命名空间中的 .row-fluid 类 LESS 说我“.spanX 未定义”。什么是跨度X？怎么了？
我相信这是来自 grid.less 的 mixin。您需要定义该变量。
不，它来自 mixins.less - .row-fluid { width: 100%; .clearfix(); [class*="span"] { .input-block-level(); float: left; margin-left: @fluidGridGutterWidth; *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); } [class*="span"]:first-child { margin-left: 0; } // generate .spanX and .offsetX .spanX (@gridColumns); .offsetX (@gridColumns); }
你是对的。它来自 mixins.less。如果使用“#grid”，则必须定义参数@gridColumnWidth, @gridGutterWidth。例如：#grid > .fluid(300px, 20px);

【解决方案2】：

这对我有用..发布以防万一它帮助其他人。

语义流体网格的混合：

.makeFluidRow(){
    width: 100%;
    .clearfix();
}

.makeFluidCol(@span:1,@offset:0){
    float: left;
    #grid > .fluid .span(@span);
    #grid > .fluid .offset(@offset);
    &:first-child {
        margin-left: 0;
        .offsetFirstChild(@offset);
    }
}

像使用非流体混合器一样使用它们：

div#header{
    .makeFluidRow();
    div#logo {
        .makeFluidCol(4); //Spans 4 cols
    }
    div#top-menu {
        .makeFluidCol(6); //Spans 6 cols
    }
    div#logout {
        .makeFluidCol(2); //Spans 2 cols
        //Or you could have span1, offset1 using .makeFluidCol(1,1);
    }    
}

【讨论】：