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

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

12
ブートストラップ付きの固定幅ボタン
Bootstrapは固定幅のボタンをサポートしていますか？現在、「保存」と「ダウンロード」の2つのボタンがある場合、ボタンのサイズはコンテンツに基づいて変わります。 また、Bootstrapを拡張する正しい方法は何ですか？
30
ブートストラップモーダルウィンドウを垂直方向に中央揃え
モーダルをビューポートの中央に配置したい（中央）私はいくつかのcssプロパティを追加しようとしました .modal { position: fixed; top:50%; left:50%; } 私はこの例を使用していますhttp://jsfiddle.net/rniemeyer/Wjjnd/ 私は試した $("#MyModal").modal('show').css( { 'margin-top': function () { return -($(this).height() / 2); }, 'margin-left': function () { return -($(this).width() / 2); } })
5
ブートストラップのポップオーバーをクリックではなくホバーで表示/非表示にする
ブートストラップのポップオーバーを使用してウェブサイトを構築していますが、ポップオーバーをクリックではなくホバーに表示する方法を理解できません。 私がやりたいのは、誰かがリンクをクリックする代わりにリンクの上にカーソルを置いたときにポップオーバーを表示させ、離れるとポップオーバーが消えるようにすることです。ドキュメントには、data属性またはjqueryのいずれかを使用して可能であると記載されています。複数のポップオーバーがあるので、jqueryを使用するほうがはるかに便利です。
19
ホバー付きのブートストラップドロップダウン
わかりましたので、私が必要とするものはかなり簡単です。 （を使用してclass="dropdown-toggle" data-toggle="dropdown"）いくつかのドロップダウンメニューを含むナビゲーションバーを設定しましたが、正常に動作します。 実は「onClick」は機能しますが、「」が機能すればいいのonHoverですが。 これを行う組み込みの方法はありますか？
6
ブートストラップモーダルオープンで関数を呼び出す
以前はJQuery UIのダイアログを使用していましたopenが、ダイアログが開かれたときに実行するJavascriptコードを指定できるオプションがありました。私はそのオプションを使用して、私が持っている関数を使用してダイアログ内のテキストを選択しました。 今、私はブートストラップのモーダルを使用してそれをしたいです。以下はHTMlコードです。 <div id="code" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <pre> print 'Hello World' そして、モーダルを開くボタンについては： <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a> ボタンのonclickリスナーを使用しようとしましたが、モーダルが表示される前に警告メッセージが表示されました。 $( ".code-dialog" ).click(function(){ alert("I want this to appear after the modal has opened!"); });
12
ブートストラップ3フッターを下に揃えます。未修理
設計中のサイトにBootstrap 3を使用しています。 このサンプルのようなフッターが欲しいです。 サンプル 修正したくないので、ブートストラップnavbar-fixed-bottomで問題が解決しないことに注意してください。常にコンテンツの最下部に配置し、応答性も高くしたいだけです。 どんなガイドでも大歓迎です。 編集： よくわからなかったらすみません。現在、コンテンツ本文に十分なコンテンツがない場合に発生します。フッターが上に移動すると、下部に空きスペースができます。 これは今私が私のnavbarのために持っているものです <nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h5 id='footer-header'> SITEMAP </h3> <div class="col-sm-4" style="padding: 0 0 0 0px"> <p>News</p> <p>contact</p> </div> <div class="col-sm-4" style="padding: 0 0 0 0px"> <p>FAQ</p> <p>Privacy Policy</p> </div> </div> <div …
23
エラーを修正する方法。「エラー：ブートストラップツールチップにはテザーが必要です（http://github.hubspot.com/tether/）」
Bootstrap V4を使用していますが、次のエラーがコンソールに記録されます。 エラー：ブートストラップツールチップにはテザーが必要です（http://github.hubspot.com/tether/） Tetherをインストールしてエラーを削除しようとしましたが、機能しません。次のコード行を含めることにより、Tetherを「インストール」しました。 <link rel="stylesheet" href="http://www.atlasestateagents.co.uk/css/tether.min.css"> <script src="http://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> テザーを正しく「インストール」しましたか？ 誰かがこのエラーを削除するのを手伝ってくれる？ あなたが私のサイト上でエラーを表示したい場合は、クリックしてくださいここでは、あなたのコンソールをロードします。
5
ブートストラップでFieldset Legendを使用する
私のJSPページではBootstrapを使用しています。 フォームに使用<fieldset>したいと思い<legend>ます。これは私のコードです。 <fieldset class="scheduler-border"> <legend class="scheduler-border">Start Time</legend> <div class="control-group"> <label class="control-label input-label" for="startTime">Start :</label> <div class="controls bootstrap-timepicker"> <input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" /> <i class="icon-time"></i> </div> </div> </fieldset> CSSは fieldset.scheduler-border { border: 1px groove #ddd !important; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 !important; …
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でホストされているコピーを試してみましたが、機能しません。誰かが私が間違っていることを指摘できますか？
16
Twitter Bootstrapのすべての角丸を取り除く
私はTwitter Bootstrap 2.0が大好きです-完全なライブラリであることが大好きです...しかし、Bootstrapの角の丸い部分をすべて取り除くことで、非常にボックス型ではなく丸みを帯びたサイトをグローバルに変更したいと思います... それはやり過ごす多くのCSSです。グローバルな切り替えはありますか、それとも丸められたものをすべて見つけて置き換えるための最良の方法は何ですか？
18
無効なボタンでブートストラップツールチップを有効にする方法は？
無効なボタンにツールチップを表示し、有効なボタンからツールチップを削除する必要があります。現在、それは逆に動作します。 この行動を逆転させる最良の方法は何ですか？ $('[rel=tooltip]').tooltip(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <hr> <button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button> <button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button> コードスニペットを実行する結果を非表示スニペットを展開 ここにデモがあります PS：私はdisabled属性を保持したいと思います。
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までと言うべきではありませんか？（ドキュメントから削除されたため）
6
`col-xs- *`がBootstrap 4で機能しない
私はこれに遭遇したことがなく、解決策を見つけるのに非常に苦労しています。ブートストラップの列が中程度の場合、次のようになります。 <h1 class="text-center">Hello, world!</h1> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h1>vicki williams</h1> </div> </div> </div> text-alignは正常に機能します。 しかし、列を次のように極端に小さくすると、 <div class="container"> <div class="row"> <div class="col-xs-12 text-center"> <h1>vicki williams</h1> </div> </div> </div> その後、text-alignは機能しなくなります。 私が理解していないいくつかのブートストラップの概念はありますか、またはこれは実際に私が思うようなエラーです。私のテキストは常にxsと常に一致しているため、この問題は一度もありませんでした。どんな助けでも大歓迎です。これが私の完全なコードです： <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- …
14
ブートストラップボタンのドロップダウンタイトルに選択したアイテムを表示する方法
次のように、アプリケーションでブートストラップドロップダウンコンポーネントを使用しています。 <div class="btn-group"> <button class="btn">Please Select From List</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Item I</a></li> <li><a tabindex="-1" href="#">Item II</a></li> <li><a tabindex="-1" href="#">Item III</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Other</a></li> </ul> </div> 選択したアイテムをbtnラベルとして表示したいのですが。つまり、「リストから選択してください」を、選択されているリスト項目（「項目I」、「項目II」、「項目III」）に置き換えます。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.