11

ユーザーが Twitter Bootstrap スタイルのページの列の幅を動的に変更できるようにする最善の方法は何ですか?

たとえば、次の例で垂直分割線/分割線を追加するには?

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6 resizeMe">Left</div>
        <div class="span6 resizeMe">Right</div>
    </div>
</div>
4

3 に答える 3

2

アニメーション化されていなくても動的に調整できなくてもかまわない場合は、Bootstrapでこれと同様に取り組んできたものがあります（2.1.0を使用していますが、これはすべての2.xバージョンで機能するはずです）。

ボタングループを設定します。

<div class="btn-group">
        <a href="##" rel="tooltip" title="Make the Directories side dominant" class="btn btn-mini" data-action="dirDom" data-placement="left"><i class="icon icon-indent-left"></i></a>
        <a href="##" rel="tooltip" title="Make both sides equal" class="btn btn-mini" data-placement="left" data-action="equality"><i class="icon icon-resize-horizontal"></i></a>
        <a href="##" rel="tooltip" title="Make the Documents side dominant" class="btn btn-mini" data-placement="left" data-action="fileDom"><i class="icon icon-indent-right"></i></a>
        </div>

さて、これがJQueryの魔法です。

$(function(){
$('a[data-action="dirDom"]').click(function (){
    $("#dirList").css('display','inline').removeAttr('class').addClass("span12");
    $("#fileList").removeAttr('class').css("display","none");

});
$('a[data-action="equality"]').click(function (){
    $("#dirList").css('display','inline').removeAttr('class').addClass("span6");
    $("#fileList").css('display','inline').removeAttr('class').addClass("span6");
});
$('a[data-action="fileDom"]').click(function (){
    $("#fileList").css('display','inline').removeAttr('class').addClass("span12");
    $("#dirList").removeAttr('class').css("display","none");
});

}）;

私はそれをアニメートしようとしましたが、あまり運がありませんでしたが、これは、1つのサイズを完全に表示し、次に左側を完全に表示し、最後に同じサイズに戻すという点で機能します。より良いJQueryを作成できると確信していますが、これは最初のドラフトです;）

于 2012-11-12T23:10:14.167 に答える
1

現在、ブートストラップの方法があるとは思いませんが、border-left:1px solid #EEEまたはを配置するdivの1つにクラスを追加できますborder-right:1px solid #EEE。このソリューションの唯一の問題は、結合された 12 のスパンが通常の span12 幅よりも 1 ピクセル大きくなり、div の 1 つが次の行にプッシュされることです。許容できる場合は、2 番目の div を span5 のみにすることでこれを修正できるため、合計は span11 + 1px になります。

ブートストラップに、通常のグリッド システムに干渉しないクラスがあればいいのですが。

于 2012-08-30T18:25:00.593 に答える
0

ドラッグしてサイズを変更できる左側のメニュー バーを作成する場合は、jsplitter が適している可能性があります - https://jsplitter.dilif.com/p/jsplitter/

実際の例 - https://jsplitter.dilife.com/p/jsplitter/doc/3/3/working-examples/

2 つのオプションがあります。

  • 最初のものはフレックスボックスに配置されたdivで動作します
  • 2 つ目は、左側の div を「position:fixed;width:X;」として配置した div で機能します。右のものは「margin-left:X」として。これは、ほとんどの Web サイトでサイド メニューを追加する方法です。
于 2020-11-19T01:55:52.063 に答える