2

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, div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> にしたい場合、.less ファイルに何を書くべきか.span6, div#logout -> .span2 このクラスをhtmlコードに書かずに？

4

2 に答える 2

4

まず、これは実際にはセマンティックではありません。少なくとも、セマンティックではありません。

<div id="top-menu">is <nav>orのセマンティック形式<nav id="top">

の意味形式<div id="header">は<header>

いずれにせよ、これを行うための指示がここにあります：

HTML に Bootstrap クラスを埋め込むのはやめてください

ただし、正直なところ、著者が説明するほど単純ではありません。Bootstrap から<nav>のスタイルを継承しているからといって、その子も継承されたスタイルを継承するとは限りません。.nav

したがって、 からスタイルを定義する.nav ulと、<ul>要素が にある場合、要素はこのスタイルを受け取りません<nav>。

于 2012-10-10T13:48:33.653 に答える
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);
    }
}

非流動的な mixin と同じように使用します。

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);
    }    
}
于 2013-07-03T16:36:07.400 に答える