Css 如何使用更少的资源，通过Twitter引导创建流畅的语义布局？

我想创建流体布局使用较少，而不使用引导网格类，如html代码上的.span6。我该怎么做？ 当我写作时，我创建了如下布局：

<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">

采样点
由Twitter引导提供动力








下拉列表

现在，我的布局看起来像下一个方向：

<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->容器流体，我应该在.less文件上写些什么， div#header->行流体，div#logo->.span4，div#top menu->.span6，div#logout->.span2

---

如果不在html代码上编写这些分类？

首先，这将不是真正的语义，至少不再是语义

的语义形式是

或

的语义形式是

在任何情况下，此处都有相关说明：

老实说，这并不像作者说的那么简单。仅仅因为您有一个从Bootstrap继承

样式的

.nav

，并不意味着它的子项也将继承继承的样式

---

因此，如果我从

.nav ul

定义了一个样式，那么

元素将不会收到这个样式，如果它位于

中，这对我有效。。以防对其他人有帮助

语义流体网格的混合：

.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);
    }    
}

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

.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);
    }    
}

---

ajkochanowicz，我之前写过这篇文章。当我编写#header{#grid>.fluid>.row fluid；}以供使用时，来自#grid namespace LESS的row fluid类表示“我”。spanX未定义”。什么是spanX？怎么了？这是来自网格的混音。我不相信。您需要定义该变量。否，它来自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”]：第一个子项{margin left:0；}//generate.spanX和.offsetX.spanX（@gridColumns）；.offsetX（@gridColumns）；}

您是对的。这是mixins的。如果使用“#grid”，则必须定义参数

@gridColumnWidth、@gridGutterWidth

。例如：

#grid>.fluid（300px，20px）

；更全面的答案是：