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

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

14
TypeError：$（…）.modalはブートストラップModalの関数ではありません
別のビューのHTMLに動的に挿入しようとしているブートストラップ2.32モーダルがあります。Codeigniter 2.1を使用しています。ブートストラップモーダル部分ビューをビューに動的に挿入した後、次のようにします。 <div id="modal_target"></div> 挿入のターゲットdivとして。ビューに次のようなボタンがあります。 <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a> 私のJSは： $.ajax({ type : 'POST', url : "AjaxUpdate/get_modal", cache : false, success : function(data){ if(data){ $('#modal_target').html(data); //This shows the modal $('#form-content').modal(); } } }); メインビューのボタンは次のとおりです。 <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div> これは、部分ビューとして個別に保存したいものです。 <div id="form-content" class="modal …
10
Bootstrapでトグルボタンを作成する方法
私は最初にHTML、CSS、JavaScriptでWebアプリを作成しましたが、Bootstrapでも再度作成するよう求められました。私はそれですべてうまく行きましたが、元々持っていたトグルボタンの代わりにラジオ（元はチェックボックス）ボタンに戻ったWebアプリのトグルボタンがありました。 ボタンのコードは次のとおりです。 <label> Notifications <span class='toggle'> <input type='radio' class='notifications' name='notifications' id='notifications' /> </span> </li> <label> Preview <span class='toggle'> <input type='radio' class='preview' name='preview' id='preview' /> </span> </li> HTMLページがリンクされているJavaScriptおよびCSSファイルは次のとおりです。 <script src = 'jqtouch.js'></script> <script src="jquery.js"></script> <script src="js/bootstrap.js"></script> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> トグルボタンを元に戻すためにコードを変更する方法はありますか？
4
小さなデバイスのTwitterブートストラップ非表示要素
私はこのコードを持っています： <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …
24
Twitter Bootstrapドロップダウンを非表示にする方法
これは面倒になっています—ブートストラップドロップダウンの項目をクリックしても、ドロップダウンが閉じません。ドロップダウン項目をクリックしたときにFaceboxライトボックスを開くように設定していますが、問題があります。 私が試したこと アイテムがクリックされたとき、私はこれを試してみました： $('.dropdown.open').removeClass('open'); $('.dropdown-menu').hide(); それはそれを隠しますが、その後、何らかの理由で再び開かなくなります。 ご覧のように、ドロップダウンを開いたままにしz-indexておくと不安定に見えるため（主にドロップダウンのがFaceboxモーダルボックスオーバーレイよりも高いため）、ドロップダウンを閉じる必要があります。 Bootstrapの組み込みモーダルボックスを使用しない理由 Bootstrapに組み込まれた見栄えの良いモーダルボックスをなぜ使用しないのか不思議に思っているのは、次の理由によります。 AJAXでコンテンツをロードする方法はありません。 モーダルでは毎回HTMLを入力する必要があります。Faceboxを使用すると、簡単なことができます。$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'}); CSS3アニメーションを使用してアニメーション化します（これは非常に美しく見えます）が、CSS3以外のブラウザでは表示されるだけで、それほど美しくはありません。FaceboxはJavaScriptを使用してフェードインするため、すべてのブラウザーで機能します。
7
ブートストラップ付きのボタンにリンクを配置するにはどうすればよいですか？
ブートストラップ付きのボタンにリンクを配置するにはどうすればよいですか？ ブートストラップのドキュメントには4つの方法があります。 <a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> 最初のものは私には機能しません。ボタンは表示されず、リンク付きのテキストだけが、私が使用しているテーマを感じています。 2番目のボタンは私が欲しいもののボタンを示していますが、クリックされたときにボタンを別のページにリンクさせるコードは何ですか？ 乾杯
10
Twitterブートストラップモーダルを閉じる方法（最初の起動後）
私はまったくの初心者なので、Twitterブートストラップモーダルで何か（おそらく明白）を監視していると思います。私がやろうとしていることは、モーダルをモバイルでのみ起動できるようにすることです。これは、モーダルdivにクラス.visible-phoneを追加するとうまく機能します。ここまでは順調ですね。しかし、それを機能させたいので、Xボタンで閉じることができます。また、ボタンを機能させることができません。 <div class="modal visible-phone" id="myModal"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3>text introductory<br>want to navigate to...</h3> </div> <div class="modal-body"> <ul class="nav"> <li> ... list of links here </li> </ul> </div> </div> HTMLの下部に、jquery.js（最初）、bootstrap.modal.js、bootstrap.transition.jsを配置します。実際には、すべてのブートストラップjsモジュール（インクルードを見逃さないようにするため）。私はjsの経験がありません。 私が本当に愚かなQを提起した場合、私を許してください。ログでこの特定の状況への答えを見つけることができませんでした。
9
Twitter Bootstrapで動作するHTMLメールを受け取った人はいますか？
私はpremailer-rails3HTMLメールのスタイルをインラインでプルするgemを使用しており、Twitterブートストラップで動作するようにしています。 https://github.com/fphilipe/premailer-rails3 一部のスタイルは正しく組み込まれているようですが、すべてのスタイルが組み込まれているわけではありません。私は誰かが彼らのTwitter Bootstrap css（変更されているかどうかにかかわらず）をhtml電子メールに送信する素晴らしい実例があるかどうか疑問に思っています。 ありがとう！
18
ブートストラップモーダルの問題-スクロールが無効になります
私はモーダルを持っており、そのモーダル内に、機能している大きな非表示のコンテンツを表示するドロップダウンがあります。 これで、最初のモーダルの上に積み重ねられた次のモーダルを開いて閉じると、下のモーダルのスクロールが無効になります。 直面している問題を再現する手順を含む、完全な例を作成しました。あなたはそれをここで見ることができます。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <title></title> <style> </style> </head> <body> <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" > <div class="modal fade" id="modal_1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">First Modal</h4> …
10
Twitterブートストラップを使用してアラートを自動的に閉じる方法
私はTwitterのブートストラップCSSフレームワークを使用しています（これは素晴らしいです）。ユーザーへの一部のメッセージについては、アラートJavaScript JSおよびCSSを使用して表示しています。 興味のある方は、http：//getbootstrap.com/javascript/#alertsで確認できます。 私の問題はこれです。ユーザーに警告を表示した後、一定の時間間隔を置いてすぐに立ち去りたいです。Twitterのドキュメントと私が調べたコードに基づくと、これは組み込まれていないようです。 私の最初の質問は、これが実際にブートストラップに組み込まれていないことの確認の要求です 第二に、どうすればこの動作を実現できますか？
6
Twitter Bootstrapを使用して、ボタンをテーブルセルの垂直方向の中央に配置する
私はTwitter Bootstrapを使用していて、ボタンをテーブルセル内の中央に配置しようとしています。本当に必要なのは、垂直方向の中央揃えだけです。 <table class="table table-bordered table-condensed"> <tbody> <tr> <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td> <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td> </tr> </tbody> </table> 問題については、JSFiddleを参照してください。私が知っているいくつかのテーブルセンタリングト​​リックを試しましたが、どれも正しく機能していないようです。何か案は？前もって感謝します。 更新：はい、私は試してみましたがvertical-align:middle;、インラインの場合tdは機能しますが、クラス内にある場合は機能しません。これを反映するようにJSFiddleを更新しました。 最終更新：私は馬鹿で、bootstrap.cssによって上書きされているかどうかを確認しませんでした
19
AngularJSでのブートストラップツールチップの使用
私のアプリでBootstrapツールチップを使用しようとしています。私のアプリはAngularJSを使用しています。現在、私は以下を持っています： <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> 使う必要があると思う $("[data-toggle=tooltip]").tooltip(); しかし、よくわかりません。上記の行を追加しても、コードが機能しません。UIブートストラップは必要以上にあるため、使用を避けようとしています。ただし、ツールチップの一部だけを含める必要がある場合は、それを受け入れます。それでも、どうすればいいのかわかりません。 誰かがAngularJSでBootstrap Tooltipを機能させる方法を教えてもらえますか？
3
Bootstrapを使用してモバイルでテーブルを表示する方法
デスクトップではテーブルが正常に表示されますが、モバイルバージョンを表示しようとすると、モバイルデバイスの画面にはテーブルが広すぎます。レスポンシブレイアウトを使用しています。 モバイルビューのテーブル幅を設定するにはどうすればよいですか？Bootstrapを使用してモバイルビューに表形式のデータを表示するには、他にどのような選択肢がありますか？
25
ブートストラップナビゲーションバーのアクティブ状態が機能しない
私はブートストラップv3を持っています。 を使用しclass="active"ていますが、navbarメニュー項目を押しても切り替わりません。これを実行jQueryしてクリック関数を作成する方法を知っていますが、この機能をブートストラップに含める必要があると思いますか？それで、多分それはJavaScriptの問題ですか？ これが私が含めたjs / css / bootstrapファイルのヘッダーです： <!-- Bootstrap CSS --> <link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href= "/stylesheets/styles.css" /> <!--jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <!-- Bootstrap JS --> <script src="/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap/js/bootstrap-collapse.js"></script> <script src="/bootstrap/js/bootstrap-transition.js"></script> これが私のnavbarコードです： <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.