web-dev-qa-db-ja.com

bootstrap 3でミックスインを使用して、レイアウト構造のセマンティックでないマークアップを回避する

私は両方のbootstrap以下に比較的新しく、これはテスト実行です。目標はbootstrapクラスを取得し、それらをシンプルでセマンティックに変換することですクラスでlessを使用しています。

この問題を解決するにはどうすればよいですか。

    /*less styles file*/

@import "bootstrap.min.css";

@boom: #ea7000;

@screen-sm: ~"(min-width:768px)";
@screen-md: ~"(min-width:992px)";
@screen-lg: ~"(min-width:1200px)";

.tim    {
    height: 200px;
        @media screen, @screen-sm   {
            background-color: black;
            .col-sm-12;
        }
        @media screen, @screen-md{
            background-color: @boom;
            .col-md-8;
        }
}
csstwitter-bootstraplesstwitter-bootstrap-3
19
Keith Bryant

bootstrap.lessファイルをインポートする必要があります。したがって、完全なbootstrapプロジェクトをダウンロードし、lessフォルダーをコピーします。これにはすべてが含まれています。次に、lessフォルダーをプロジェクトに配置します。また、less.jsファイルを作業中にコンパイルを減らしたい場合はプロジェクト。詳細についてはlesscss.orgを参照してください。また、サービスを提供しているだけでは結果が表示されないため、mampやxampなどのローカルサーバーがあることを確認してください。 file：// ...からの静的html.

enter image description here

カスタムのlessファイルで、次のようにします。

custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

html

<head>
    <link rel="stylesheet/less" href="css/custom.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
</head>
<section>
<div class="left-navigation">
</div>
<div class="main-content">
</div>
</section>
35
AJ Meyghani

Bootstrapを使用して美しいセマンティックHTMLを作成することが目標である場合は、今すぐあきらめるか、狂気に直面することをお勧めします。 BS 2からセマンティックマークアップを取得することは不可能であることを非常に痛々しく発見しました。使用量を減らしたり、sassしたりしても、希望どおりの結果を得るには、ミックスインアーキテクチャではなく複雑な入れ子が必要です。また、クラスとIDはJavaScriptコンポーネントによって参照されるため、変更できません。独自のスタイルを作成できますが、それはBSのようなフレームワークを使用する目的に反します。バージョン3についてコメントすることはできません。他の人のバージョン3についての経験を聞きたいです。

9
ATL_DEV

このように、Bootstrapグリッドで発生する複数のクラスの混乱を避けるために、いくつかの選択された少ないファイルをインポートするだけで便利であることがわかりました。

[〜＃〜] css [〜＃〜]

@import "less/variables.less";
@import "less/mixins/grid-framework.less";
@import "less/mixins/grid.less";

.firstItem {
    .make-xs-column-offset(3);
    .make-xs-column(1);
    .make-sm-column-offset(3);
    .make-sm-column(1);
    .make-md-column-offset(3);
    .make-md-column(1);
    .make-lg-column-offset(3);
    .make-lg-column(1);
}
.middleItem {
    .make-xs-column(1);
    .make-sm-column(1);
    .make-md-column(1);
    .make-lg-column(1);
}
.lastItem {
    .make-xs-column(5);
    .make-xs-column(5);
    .make-xs-column(5);
    .make-xs-column(5);
}

[〜＃〜] html [〜＃〜]

<div class="firstItem">
    first item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="middleItem">
    middle item stuff
</div>
<div class="lastItem">
    last item stuff
</div>
0
Ralph Lavelle