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

Bootstrapは、Webアプリおよびサイトの開発を開始するために設計されたフロントエンドフレームワークです。Bootstrapのバージョンに関連する質問については、「twitter-bootstrap-2」、「twitter-bootstrap-3」、「bootstrap-4」タグから特定のバージョンのタグも使用してください。

2
ブートストラップのtabindex =“-1”とは
tabindexBootstrap 3 の属性は何ですか？ 彼らは実際にすべてのモーダルでそれらを使用していますが、そのドキュメントはそれらについて何も述べていません。 私はそれをその使用に関してのみ見つけました、それは本当にあまり言いません キーボードおよび支援技術ユーザー向けのアクセス可能なツールチップ キーボードで操作するユーザー、特に支援技術のユーザーの場合、リンク、フォームコントロール、またはtabindex = "0"属性を持つ任意の要素などのキーボードフォーカス可能な要素にのみツールチップを追加する必要があります。 そして、属性がでない場合、モーダルを非表示にするように押すことができないことがesctabindex-1わかりました。 escキーを押した後のモーダル終了（tabindexを使用） escキーを押した後にモーダルが閉じない（tabindexなし）
3
Bootstrap 3 Horizo​​ntal Divider（ドロップダウンにはありません）
私Bootstrap 3は、次のようにリンクを区切るためにドロップダウンメニュー内に配置できる水平方向の仕切りがあることを知っています。 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"> <li role="presentation" class="dropdown-header">Dropdown header</li> ... <li role="presentation" class="divider"></li> </ul> 私の質問は次のとおりです。ドロップダウンリストにない状態でこれを行う方法はありますか。
14
モーダルでコンテンツをリロード（twitterブートストラップ）
Twitterブートストラップのモーダルポップアップを使用しています。 <div id="myModal" class="modal hide fade in"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Header</h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="Save"/> </div> </div> このa要素でajaxを使用してコンテンツをロードできます。 <a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a> 同じモーダルを開く必要がありますが、別のURLを使用しています。このモーダルを使用して、データベースのエンティティを編集しています。エンティティの編集をクリックすると、ID付きのモーダルをロードする必要があります。 <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a> <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a> <a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a> リンク番号1をクリックすると、正常に動作します。しかし、リンク番号2をクリックすると、モーダルコンテンツが既に読み込まれているため、リンク番号1のコンテンツが表示されます。 TwitterブートストラップモーダルポップアップでAjaxで読み込まれたコンテンツを更新またはリセットするにはどうすればよいですか？
1
Bootstrap 3がボックスサイズ：ボーダーボックスに切り替わったのはなぜですか？
Bootstrapテーマをv2.3.2からv3.0.0に移行していますが、bootstrap.cssの次のスタイルにより、多くのディメンションが異なる方法で計算されることに気付きました。 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Bootstrapがすべての要素のボックスサイズを境界ボックスに切り替える理由を誰かが説明できますか？新しいグリッドシステムがパーセントベースであることに関係していると思いますが、上のセレクターはグリッド要素にのみ適用されるわけではありません。 少し過激な私見:-) 誰か洞察を与えたいと思う人はいますか？
12
BootstrapでScrollSpyのオフセットを設定するにはどうすればよいですか？
ナビゲーションバーを上部に固定し、メインコンテンツ領域に3つのdivを配置したサイトがあります。 ブートストラップフレームワークからscrollspyを使用しようとしています。 divを超えてスクロールすると、メニューのさまざまな見出しが正常に強調表示されます。 また、メニューをクリックすると、ページの正しい部分までスクロールします。ただし、オフセットは正しくありません（ナビゲーションバーは考慮されていないため、約40ピクセルオフセットする必要があります） 私は上を参照ブートストラップ・ページにはオフセットオプションを言及しかし、私はそれを使用するかどうかはわかりません。 また$('#navbar').scrollspy()、でscrollspyを使用できると言っているときの意味もわかりません。どこに含めるかわからないので、含めなかったため、すべてが機能しているようです（オフセットを除く）。 オフセットdata-offset='10'はbodyタグのかもしれないと思いましたが、それは私には何もしません。 これは本当に明白なことだと感じており、見逃しているだけです。何か助け？ 私のコードは ... <!-- note: the data-offset doesn't do anything for me --> <body data-spy="scroll" data-offset="20"> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">VIPS</a> <ul class="nav"> <li class="active"> <a href="#trafficContainer">Traffic</a> </li> <li class=""> <a href="#responseContainer">Response Times</a> </li> <li class=""> <a href="#cpuContainer">CPU</a> …
1
ブートストラップ日時ピッカー[終了]
現在のところ、この質問はQ＆A形式には適していません。私たちは回答が事実、参考文献、または専門知識によってサポートされることを期待しますが、この質問はおそらく議論、議論、投票、または拡張された議論を誘います。この質問を改善でき、再開できると思われる場合は、ヘルプセンターにアクセスしてください。 7年前休業。 日付と時刻を選択するJavaScriptを教えてください。 注：日付と時刻の選択に1つのファイルのみを使用します。 私はすでにこれを見ています： http://www.eyecon.ro/bootstrap-datepicker/ そして http://jdewit.github.com/bootstrap-timepicker/index.html
6
ブートストラップ4のpopper.jsはSyntaxErrorを提供します予期しないトークンのエクスポート
ブートストラップ4をインストールしてみましたが、次のリンクが含まれていました <script src="libs/jquery/dist/jquery.min.js"></script> <script src="libs/tether/dist/js/tether.min.js" ></script> <script src="libs/popper.js/dist/popper.js"></script> <script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script> ただし、次のエラーが発生します。 キャッチされない構文エラー：予期しないトークンのエクスポート それを修正する方法はありますか？
18
ブートストラップからselectpickerプラグインを使用して選択時に選択した値を設定する方法
私はこのようなBootstrap-Selectプラグインを使用しています： HTML： <select name="selValue" class="selectpicker"> <option value="1">Val 1</option> <option value="2">Val 2</option> <option value="3">Val 3</option> <option value="4">Val 4</option> </select> JavaScript： $('select[name=selValue]').selectpicker(); ここで、ボタンをクリックしたときに、選択した値をこの選択に設定したいと思います。 $('#mybutton').click(function(){ $('select[name=selValue]').val(1); }); しかし、何も起こりません。 どうすればこれを達成できますか？
8
Bootstrap 3でもスケールアップするレスポンシブなイメージを作成する方法
現在、Twitterブートストラップ3を使用していますが、レスポンシブな画像を作成する際に問題が発生しています。私はimg-responsiveクラスを使いました。しかし、画像サイズは拡大されていません。width:100%代わりに使用するとmax-width:100%、完全に機能します。問題はどこだ？これは私のコードです： <div class="col-md-4 col-sm-4 col-xs-12 "> <div class="product"> <div class="product-img "> <img class="img-responsive" src="img/show1.png" alt="" /> </div> </div> </div>
13
グリッドに不要なパディングを追加したブートストラップ3および4 .container-fluid
コンテンツを流動的にしたいの.container-fluidですが、Bootstrapのグリッドで使用すると、まだパディングが表示されます。どうすればパディングを取り除くことができますか？ .rowによるパディングが得られないことがわかりましたが、列を追加したいと思います。そうするとすぐに、パディングが戻ります：O。 全幅で使用できるようにしたい。 例： <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="col-sm-6"> <p>Use this document as a way to quickly start any new project.<br> All …
8
モーダルにパラメーターを渡す方法は？
ログインしたユーザーがクリックしたsaのuserNameリストからuserNameをtwitterブートストラップに渡したいのですがmodal。私が使用していますGrailsのをしてangularjsデータを経由してレンダリングされる、angularjs。 構成 私のgrailsビューページencouragement.gspは <div ng-controller="EncouragementController"> <g:render template="encourage/encouragement_modal" /> <tr ng-cloak ng-repeat="user in result.users"> <td>{{user.userName}}</rd> <td> <a class="btn btn-primary span11" href="#encouragementModal" data-toggle="modal"> Encourage </a> </td> </tr> 私encourage/_encouragement_modal.gspは <div id="encouragementModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Confirm encouragement?</h3> </div> <div class="modal-body"> Do you really want to encourage <b>{{aModel.userName}}</b>? …
3
Twitterブートストラップナビゲーションバーの「icon-bar」
次のコードの意味を理解できませんicon-bar： <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 何のicon-barため？なぜそれに似た3つのインスタンスがあるのですか？ このコードはナビゲーションバーセクションにあります。 <div class="navbar-header"> ... </div>
14
Twitterブートストラップボタンのスタイリング
Twitter-Bootstrapボタンは驚くほど美しい。スクロールしてみてください ただし、色に制限があります。 ブートストラップによって美しく簡単に作成された美しいホバーオーバー効果を維持しながら、ボタンのベースカラーを変更できる方法はありますか？ 私は、ツイッターがそれらの効果を維持するために使用するcss / javascriptがどのように見えるかを完全に認識していません。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.