如何使用LESS使用Twitter Bootstrap创建流体语义布局？

我想使用LESS创建流体布局，并且不使用像html代码中的.span6一样的Bootstrap grid clasess。 我怎样才能做到这一点？ 当我没有更少地写作时，我创建了这样的布局：

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

和我应该写在我的.less文件，如果我想让div＃wrap - > .container-fluid，div＃header - > .row-fluid，div＃logo - > .span4，div＃top-menu - > .span6，div＃注销 - > .span2没有在html代码上写这个clasess？

---

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

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

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

无论如何，这里有这样做的说明：

请停止在HTML中嵌入Bootstrap类

老实说，这并不像作者看起来那么简单。 仅仅因为你有一个<nav>继承自Bootstrap的.nav样式并不意味着它的子元素也会继承继承样式。

因此，如果我从.nav ul定义一个样式，如果它位于<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);
    }    
}

链接地址: http://www.djcxy.com/p/88317.html

上一篇: How to create fluid semantical layout with Twitter Bootstrap using LESS?

下一篇: Bootstrap minimum width grid