Question

我想使用LESS创建流畅的布局，而不使用html代码上的.span6之类的Bootstrap网格clasess。我怎样才能做到这一点？当我没有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 - ＆gt;我应该在我的.less文件上写什么.container液， div＃header - ＆gt; .row-fluid，div #logo - ＆gt; .span4，div＃top-menu - ＆gt; .span6，div＃logout - ＆gt; .span2 没有在HTML代码上写这个clasess？

Answer 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>中，则不会收到此样式。

Answer 2

这对我有用..如果它可以帮助其他人发布。

用于语义流体网格的Mixins：

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

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

2 个答案: