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

Bootstrap 3はフロントエンドフレームワークの第3世代であり、魅力的なルックアンドフィールでスピーディなWeb開発を可能にします。[twitter-bootstrap]タグと一緒に使用します

14
ブートストラップがキャッチされないエラーをスローする：ブートストラップのJavaScriptにはjQueryが必要です[完了]
閉まっている。この質問にはデバッグの詳細が必要です。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 2年前休業。 この質問を改善する Bootstrapを使用してプログラムのインターフェイスを作成しようとしています。<head>タグにjQuery 1.11.0を追加し、それがそうだと思ったのですが、ブラウザーでWebページを起動すると、jQueryがエラーを報告します。 Uncaught Error: Bootstrap's JavaScript requires jQuery 私はjQuery 1.9.0を使用してみましたが、いくつかのCDNでホストされているコピーを試してみましたが、機能しません。誰かが私が間違っていることを指摘できますか？
11
モバイルビューの上部にあるブートストラップ右列
私はこのようなブートストラップページを持っています： <div class="row"> <div class="col-md-6"> A </div> <div class="col-md-6"> B </div> </div> 次のようになります。 ----- |A|B| ----- したがって、モバイルデバイスでそれを見ると、列Aが上にありますが、Bが上にあります。これは可能ですか？プッシュプルで試してみましたが、うまくいきませんでした。
10
ブートストラップ3ブレークポイントとメディアクエリ
上のブートストラップ3メディアクエリのドキュメントは言います： 以下のメディアクエリをLessファイルで使用して、グリッドシステムに主要なブレークポイントを作成します。 非常に小さなデバイス（電話、768px未満）：これはブートストラップのデフォルトであるため、メディアクエリはありません 小型デバイス（タブレット、768px以上）： @media (min-width: @screen-sm-min) { ... } 中型デバイス（デスクトップ、992px以上）： @media (min-width: @screen-md-min) { ... } 大型デバイス（大型デスクトップ、1200px以上）： @media (min-width: @screen-lg-min) { ... } 我々は使用することができるようになっている@screen-sm、@screen-mdと@screen-lgだけでなく、私たちのメディアクエリでの名前？それは私には効かないからです。@media (min-width: 768px) {...}動作する前などにピクセル測定を使用する必要があります。私は何か間違ったことをしていますか？ また、超小型デバイスの480pxへの参照はタイプミスですか？それは767pxまでと言うべきではありませんか？（ドキュメントから削除されたため）
7
ヘッダーdivをクリックしたときにBootstrapアコーディオンを折りたたむ方法
Bootstrapアコーディオンでは、aテキストをクリックする代わりに、panel-headingdivのどこかをクリックすると折りたたむようにします。 私はBootstrap 3を使用しています。したがって、アコーディオンの代わりに、それは単に折りたたみ可能なパネルです。パネル全体をクリッカブルにする方法はありますか？
5
Bootstrap 3の必須フィールドにアスタリスクを追加する
私のHTMLには、.required必須フィールドに割り当てられているというクラスがあります。 HTMLは次のとおりです。 <form action="/accounts/register/" method="post" role="form" class="form-horizontal"> <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' /> <div class="form-group required"> <label class="col-md-2 control-label">Username</label> <div class="col-md-4"> <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" /> </div> </div> <div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div> <div class="form-group required"><label class="col-md-2 …
5
Twitter Bootstrap 3でcol-lg-pushとcol-lg-pullを使用した列順序操作
私は現在、Twitter Bootstrap 3のドキュメントを読んでおり、このページに示すように列の順序を追おうとしまし たが、壁にぶち当たりました。このようなコードが機能する理由や、設定を正しく指定する方法がわかりません。私が表示したいのは、長さ5ともう1つの長さ5で構成される1つのグリッド、そして最後に1つの長さ2のグリッドです。 だから私のものは次のようなものです： [5] [5] [2] そして私が達成したいのは、デスクトップで表示したときに上記のレイアウトが表示されることですが、モバイルで表示したときは、最初に2番目の長さ5オブジェクト、次に最初の長さ5オブジェクト、最後に長さ2オブジェクトを表示します、垂直。このような： [5] (second) [5] (first) [2] 上記のドキュメントで説明されている手順を実行しようとしましたが、モバイルプラットフォーム上にあるにもかかわらず、最初の長さ5のオブジェクトが2番目のものよりも上にありました。言い換えれば、私はこれを得た： [5] (first) [5] (second) [2] では、2つ目を1つ目の上に正しく配置するにはどうすればよいですか？または、同じ長さのオブジェクトを使用しているため、列の順序付けが機能しないのでしょうか？ これがあなたの情報のための私のコードです： <div class='row'> <div class='col-lg-5 col-lg-push-5'></div> <div class='col-lg-5 col-lg-pull-5'></div> <div class='col-lg-2'></div> </div> また、ドキュメンテーションは何を意味するのpullかをpush意味しません。だから私は何かが足りないのですか？ ありがとう。
4
Bootstrap 3のスタックタブ
私は、Bootstrap 3のタブjqueryプラグインを使用して、左揃えのスタックされたタブを実装しようとしています。この場合、タブは上ではなく、タブコンテンツの左に垂直にレンダリングされます。次のことを試してみると、 <ul class="nav nav-tabs nav-stacked"> <li><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade" id="tab1"> Tab 1 content </div> <div class="tab-pane fade" id="tab2"> Tab 2 content </div> <div class="tab-pane fade" id="tab3"> Tab 3 content </div> </div> タブは互いの上に積み重ねられますが、左に回されたときに適切にレンダリングされず、代わりにそれらは互いの上にスタックされた単なる水平タブです。コンテンツのdivでタブのコンテンツが適切に表示/非表示になります。 これは、Bootstrap 2.xでtab-leftおよびtab-rightクラスを使用して処理されていましたが、Bootstrap 3では非推奨であり、実際には何も置き換えられていないようです。Bootstrap …
17
モーダルのブートストラップ3とYouTube
Bootstrap 3のモーダル機能を使用して、YouTubeビデオを表示しようとしています。動作しますが、YouTube動画のボタンをクリックできません。 これについて何か助けがありますか？ これが私のコードです： <div id="link">My video</div> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe> </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script> <script src="js/bootstrap.min.js"></script> <script> $('#link').click(function () { …
15
jQuery検証プラグインを使用したブートストラップ
jQuery Validation Pluginを使用してフォームに検証を追加しようとしていますが、入力グループを使用しているときにプラグインがエラーメッセージを表示するという問題があります。 $('form').validate({ rules: { firstname: { minlength: 3, maxlength: 15, required: true }, lastname: { minlength: 3, maxlength: 15, required: true } }, highlight: function(element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); 私のコード： http : //jsfiddle.net/hTPY7/4/
17
ブートストラップ3の入力幅
もう一度更新します。質問を本当に理解せずに人々が回答を追加できないように、上の回答を選択してこの質問を閉じます。実際には、グリッドを使用したり、CSSを追加したりせずに、組み込み機能でそれを行う方法はありません。help-blockたとえば、短い入力を超える必要がある要素を処理している場合、グリッドはうまく機能しませんが、それらは「組み込み」です。それが問題である場合は、BS3のディスカッションで見つけることができる追加のCSSクラスを使用することをお勧めします。BS4がリリースされたので、付属のサイジングスタイルを使用してこれを管理することができるので、これはそれほど長くは関係ありません。この人気のあるSO質問への良い入力に感謝します。 更新：この質問は、グリッドに頼らずに入力幅を管理するBSの組み込み機能に関するものであるため、未解決のままです（場合によっては、個別に管理する必要があります）。これを管理するためにすでにカスタムクラスを使用しているため、これは基本的なCSSのハウツーではありません。タスクはBS 機能のディスカッションリストにあり、まだ対処されていません。 元の質問： BS 3で入力幅を管理する方法を誰かが理解していますか？現在、その機能を追加するためにいくつかのカスタムクラスを使用していますが、ドキュメントに記載されていないオプションの一部を見逃している可能性があります。 現在のドキュメントでは.col-lg-xを使用するように言われていますが、コンテナーdivにしか適用できないため、レイアウト/フロートのあらゆる種類の問題が発生するため、明らかに機能しません。 ここにフィドルがあります。奇妙なことに、フィドルではフォームグループのサイズを変更することさえできません。 http://jsfiddle.net/tX3ae/ <form role="form" class="row"> <div class="form-group col-lg-1"> <label for="code">Name</label> <input type="text" class="form-control"> </div> <div class="form-group col-lg-1 "> <label for="code">Email</label> <input type="text" class="form-control input-normal"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>
5
Twitter Bootstrapのツールチップで複雑なHTMLを使用できますか？
公式ドキュメントを確認すると、HTMLというプロパティが表示されます。 Name | Type | default | Description ---------------------------------------------------------------------------- html | boolean | false | Insert html into the tooltip. If false, jquery's text method will be used to insert content into the dom. Use text if you're worried about XSS attacks. 「ツールチップにhtmlを挿入する」とありますが、タイプはブール値です。ツールチップ内で複雑なHTMLを使用するにはどうすればよいですか？
5
CDNのBootstrapを使用するか、サーバーにコピーを作成する必要がありますか？
Twitter Bootstrapを使用するベストプラクティスは何ですか？CDNから参照するか、サーバーにローカルコピーを作成しますか？ Bootstrapは進化し続けているので、CDNを参照すると、ユーザーは時間の経過とともにさまざまなWebページを参照し、一部のタグは壊れる可能性があります。ほとんどの人の選択は何ですか？
29
JavaScriptを使用してTwitter Bootstrap 3の応答のあるブレークポイントを検出する方法
現在、Twitter Bootstrap 3には次のレスポンシブブレークポイントがあります：768px、992px、1200pxで、それぞれ、小型、中型、大型のデバイスを表します。 JavaScriptを使用してこれらのブレークポイントを検出するにはどうすればよいですか？ 画面が変化したときにトリガーされるすべての関連イベントをJavaScriptでリッスンしたいと思います。また、画面が小型、中型、または大型のデバイス用かどうかを検出できるようにします。 すでに何かが行われていますか？あなたの提案は何ですか？
4
レスポンシブWebサイトがモバイルで全幅にズームアウト
Bootstrapの応答性のナビゲーションバーをテストしています。デモ用の Webサイトがあります。デスクトップでブラウザーのサイズを変更すると、ナビゲーションバーが上部にある小さなアイコンで折りたたみ可能なメニューになり、クリックしてさらにメニューボタンを表示できるなど、すべて正常に機能します。 しかし、モバイルブラウザー（ChromeとAndroidのインターネットブラウザーで試してみました）から試したところ、レスポンシブデザインが表示されませんでした。ウェブサイトのようなデスクトップの非常に小さいバージョンしか見ることができませんでした。 誰かが私が間違っていることを指摘できますか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.