タグ付けされた質問 「twitter-bootstrap」

私はBootstrapが初めてで、この問題に悩まされています。入力フィールドがあり、1桁だけを入力するとすぐに関数from onChangeが呼び出されますが、整数が入力されているときにEnterキーを押すと、この関数が呼び出されます。検証関数でも同じ問題-呼び出しが早すぎます。 var inputProcent = React.CreateElement(bootstrap.Input, {type: "text", //bsStyle: this.validationInputFactor(), placeholder: this.initialFactor, className: "input-block-level", onChange: this.handleInput, block: true, addonBefore: '%', ref:'input', hasFeedback: true });

204 javascript  twitter-bootstrap  reactjs 

ブートストラップを使用してウェブサイトで作業しています。 基本的に、私はヒーローユニットのボタンで呼び出されるホームページでモーダルを使用したいと思いました。 ボタンコード： <button type="button" class="btn btn-warning btn-large" data-toggle="modal" data-target="#myModal">Open Modal</button> モーダルコード： <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">In Costruzione</h3> </div> <div class="modal-body"> <p>Test Modal: Bootstrap</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button> <button class="btn btn-warning">Salva</button> </div> </div> 問題は、ボタンをクリックするとすぐにモーダルがフェードインし、すぐに消えてしまうことです。 …

203 twitter-bootstrap  modal-dialog 

ブートストラップ3のナビゲーションバーが折りたたまれるポイントを増やす方法はありますか（つまり、縦長のタブレットではドロップダウンに折りたたまれるようになります）？ これら2つはブートストラップ2に適用可能でしたが、現在は適用できません。 Twitterブートストラップレスポンシブを使用してナビゲーションバーの折りたたみしきい値を変更する方法 デフォルトの応答性のあるナビゲーションバーのブレークポイントを変更する

202 twitter-bootstrap  twitter-bootstrap-3  navbar 

自家製のクラスなしで、このようなフォーム（以下のリンクを参照）をTwitterブートストラップでデザインする最良の方法は何ですか？ 次の例のように、form-horizo​​ntalの内部にinner form-inlineを設定することは可能ですか？

200 html  forms  twitter-bootstrap 

GWTに頼らずに素敵なページデザインを実現するために、Bootstrapの使用を開始しました（バックエンドはJavaで作成されています） 私のログイン画面では、この例をコピーしました。ここで、たとえば、ユーザー名が空のままにされたというエラーをマークしたいと思います。だから私はこれのためのブートストラップフレームワークの手順は何だろうと思っていました。または、エラーのあるフォームを示す例がある場合は、 入力要素内のエラーメッセージを赤い色で表示するのか、入力要素の下に表示するのか、ポップアップで表示するのかはわかりません。

194 twitter-bootstrap 

次のような2x2形式の1つの大きな画像と4つの小さな画像が必要です。 私の最初の考えは、すべてを一列に収めることでした。次に、2つの列を作成し、2番目の列で2つの行と2つの列を作成して、1x1と2x2の効果を作成します。 しかし、これは可能ではないようです、または私はそれを正しく行っていませんか？

194 css  html  twitter-bootstrap  grid  grid-system 

Bootstrap 3を使用してページをデザインしていますplacement: right。入力要素でポップオーバーを使用しようとしています。新しいBootstrapを使用するform-controlと、基本的に全幅の入力要素を使用できます。 HTMLコードは次のようになります。 <div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div> 私の意見では、ポップオーバーの幅は低すぎます。divに残っている幅がないためです。左側に入力フォーム、右側にワイドポップオーバーが必要です。 ほとんどの場合、Bootstrapをオーバーライドする必要がないソリューションを探しています。 添付されたJsFiddle。2番目の入力オプション。jsfiddleをあまり使用していないのでわかりませんが、結果を表示するには出力ボックスのサイズを大きくしてみてください。小さい画面では表示されません。 http://jsfiddle.net/Rqx8T/

192 css  twitter-bootstrap  twitter-bootstrap-3  popover 

Twitterブートストラップで、モーダルのドキュメントを確認します。モーダルのcloseイベントをリッスンして関数を実行する方法があるかどうか、わかりませんでした。 たとえば、このモーダルを例に取ってみましょう： <div class="modal-header"> <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <a href="#" class="btn close_link" data-dismiss="modal">Close</a> </div> 上にあるXボタンと下にある閉じるボタンの両方で、モーダルを非表示/閉じることができますdata-dismiss="modal"。それで、どういうわけかそれを聞くことができたのでしょうか？ あるいは、私はこのように手動でそれを行うことができたと思います... $("#salesitems_modal").load(url, data, function() { $(this).modal('show'); $(this).find(".close_link").click(modal_closing); }); どう思いますか？

191 jquery  twitter-bootstrap  modal-dialog 

誰かがBootstrapを変更する方法を知っていますinput:focusか？inputフィールドをクリックすると現れる青い輝き？

190 html  css  twitter-bootstrap 

Twitter Bootstrapのボタンには素晴らしいLoading...状態があります。 問題は、次のような属性Loading...を介して渡されたようなメッセージを表示することdata-loading-textです。 <button type="button" class="btn btn-primary start" id="btnStartUploads" data-loading-text="@Localization.Uploading"> <i class="icon-upload icon-large"></i> <span>@Localization.StartUpload</span> </button> Font Awesomeを見ると、アニメーション化されたスピナーアイコンがあることがわかります。 次のUploadような操作を実行するときに、そのスピナーアイコンを統合しようとしました。 $("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large'); しかし、これはまったく効果がありませんでしたUploading...。つまり、ボタンのテキストが表示されるだけです。 ボタンが読み込み状態のときにアイコンを追加することはできますか？なんとなく、Bootstrap <i class="icon-upload icon-large"></i>はLoading状態のときにボタン内のアイコンを削除するだけのようです。 これは、上記で説明した動作を示す簡単なデモです。読み込み状態になると、アイコンが消えます。時間間隔の直後に再表示されます。

190 button  twitter-bootstrap  icons  loading  font-awesome 

Bootstrapの使用中にCSSの問題が発生します。私はまた、Angular UI.bootstrapでAngular JSを使用しています（これは問題の一部である可能性があります）。 テーブルにデータを表示するWebサイトを作成しています。データがテーブルに表示する必要があるオブジェクトを含む場合があります。ボーダーレステーブルの分割線の内側を維持しながら、通常のテーブル内にボーダーレステーブルを配置したいと思います。 しかし、私が具体的にテーブルに境界線を表示しないように言っても、それは強制されているようです： HTML： <table class='table borderless'> CSS： .borderless table { border-top-style: none; border-left-style: none; border-right-style: none; border-bottom-style: none; } だからここで私が欲しいのは内側の境界だけです。

190 html  css  twitter-bootstrap 

プロジェクトでTwitter Bootstrapを使用しています。デフォルトのブートストラップスタイルだけでなく、独自のスタイルもいくつか追加しました //My styles @media (max-width: 767px) { //CSS here } また、ビューポートの幅が767px未満の場合、jQueryを使用してページ上の特定の要素の順序を変更しています。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 私が抱えている問題は$(window).width()、CSSによって計算された幅とCSSによって計算された幅が同じではないように見えることです。とき$(window).width()、751のようにビューポートの幅がそれほどに16pxの異なるがあるように思わ戻っ767 CSSの計算。 これを引き起こしている原因と、私が問題を解決する方法を誰かが知っていますか？人々は、スクロールバーの幅は考慮に入れられておらず、使用$(window).innerWidth() < 751する方法が進むべき道であると示唆しています。ただし、理想的には、スクロールバーの幅を計算し、メディアクエリと一致するソリューション（たとえば、両方の条件が値767をチェックしている場合）を見つけたいと思います。確かに、すべてのブラウザのスクロールバーの幅が16pxになるわけではないのですか？

186 jquery  css  twitter-bootstrap  media-queries 

私の人生では、これらのTwitterブートストラップボタンを複数行に折り返すことができず、そのように見えます。 画像を投稿できないので、これがやっています... [これはbuです] ttonテキスト のように見せたい [これは ] [ボタンのテキスト] <div class="col-lg-3"> <!-- FIRST COL --> <div class="panel panel-default"> <div class="panel-body"> <h4>Posted on</h4> <p>22nd September 2013</p> <h4>Tags</h4> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, …

186 html  css  twitter-bootstrap  web 

オーバーレイが背面ではなく、最初のモーダルの上に表示される必要があります。 コードスニペットを表示 $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div><div class="container"></div> <div class="modal-body"> Content for the dialog / modal goes here. <br> <br> <br> <br> <br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch …

185 javascript  jquery  twitter-bootstrap  twitter-bootstrap-3  modal-dialog 

ブートストラップモーダルに関していくつか質問がありますが、これとまったく同じではないので先に進みます。 私はそのようにonclickを呼び出すモーダルを持っています... $(".modal-link").click(function(event){ $("#modal-content").modal('show'); }); これは正常に動作しますが、モーダルを表示するときに最初の入力要素に焦点を当てたい...場合によっては、最初の入力要素のIDが#photo_nameです。 だから私は試した $(".modal-link").click(function(event){ $("#modal-content").modal('show'); $("input#photo_name").focus(); }); しかし、これは役に立たなかった。最後に、「show」イベントにバインドしてみましたが、それでも入力がフォーカスされません。最後にテストのためだけに、私は疑いがあるのでこれはjsの読み込み順序に関するものです。1秒遅延するかどうかを確認するためにsetTimeoutを入力し、フォーカスが機能するかどうかを確認します。しかし、この方法は明らかにくだらないです。setTimeoutを使用せずに以下と同じ効果を発揮する方法はありますか？ $("#modal-content").on('show', function(event){ window.setTimeout(function(){ $(event.currentTarget).find('input#photo_name').first().focus() }, 0500); });

182 javascript  twitter-bootstrap  modal-dialog