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

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

5
複数および/またはネストされたBootstrapコンテナ？
私の理解では、すべてのBootstrapスタイルの要素は要素内に存在する必要があり<div class="container">ます。しかし、複数の「コンテナ」が存在するBootstrapの例を時々目にします。 <div class="container"> <!-- Blah, GUI stuff, blah --> </div> ... <div class="container"> <!-- Blah, more GUI stuff, blah --> </div> 私の質問： 複数の「コンテナdiv」を含む単一のHTMLページが必要になるのはいつですか。全身を1つの大きな「コンテナdiv」に入れるのとは対照的に、これにはどのような利点がありますか？ 「コンテナdiv」を他のdivの中にネストしたいと思ったことはありませんか？いつ/なぜ？
14
Bootstrapでbtnの色を変更する方法
.btnBootstrapのすべてのプロパティを変更する方法はありますか？以下のものを試しましたが、それでもデフォルトの青色が表示されることがあります（たとえば、マウスをクリックして取り外した後など）。テーマ全体を完全に変更するにはどうすればよいですか？ .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited { background-color: #8064A2; }
24
ブートストラップモーダルウィンドウを完全に破壊する方法は？
約4.5ステップのウィザード実装にモーダルウィンドウを利用しました。最後のステップ（onFinish）とOnCancelステップの後で、ページを更新せずに完全に破棄する必要があります。もちろん非表示にすることもできますが、モーダルウィンドウを非表示にすると、もう一度開いたときにすべてが復元されます。誰かがこの問題について私を助けてくれますか？ ありがとうどんなヒントの答えも私に役立ちます。
22
モーダルウィンドウ内のTwitterBootstrap Datepicker
私は現在TwitterBootstrapフレームワークを使用していますが、モーダルウィンドウを使用している場合、選択されて均一にレンダリングされていても、js要素を取得してdatepickerやvalidationのように機能させることはできません。以下の私のモーダルウィンドウを参照してください。 <div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false"> <div class="modal-header"> <button class="close" data-dismiss="modal" type="button">×</button> <h3>New Member Form</h3> </div> <form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div> <div class="modal-body"> <div class="widget-content nopadding"> <div class="control-group"> <label class="control-label" for="user_role">Role</label> <div class="controls"> <select id="user_role" name="user[role]" style="display: none; …
11
ウィンドウの端に対するポップオーバーのX位置に基づいて、ブートストラップポップオーバーの位置を変更しますか？
私はインターネットを広範囲にわたって精査しましたが、このスタックオーバーフローの投稿は洞察に満ちていることがわかりましたが、画面の幅に基づいてBootstrapポップオーバーの位置を変更することは可能ですか？、それでも私の質問に答えられませんでした。おそらく、位置/オフセットを理解するのに苦労したためです。 これが私がやろうとしていることです。ホットスポットポップオーバーがビューポートを超えて配置されない限り、Twitter Bootstap Popoverの位置を右にしたいので、左に配置します。ホットスポットのあるiPadWebアプリを作成しています。ホットスポットを押すと情報が表示されますが、水平スクロールがロックされているときにビューポートの外に表示されたくありません。 私はそれが次のようになると思っています： $('.infopoint').popover({ trigger:'hover', animation: false, placement: wheretoplace }); function wheretoplace(){ var myLeft = $(this).offset.left; if (myLeft<500) return 'left'; return 'right'; } 考え？ありがとう！
7
ブートストラップで列を固定位置にする
Bootstrapを使用して、他の.col-lg-9が通常の位置（ページをスクロール可能）である間、それをposition：fixedに配置したいグリッド列class = "col-lg-3"があります。 <div class="row"> <div class="col-lg-3"> Fixed content </div> <div class="col-lg-9"> Normal scrollable content </div> </div> LifeHacker.comの左側の列とまったく同じように 、左側の部分が修正されていることがわかりますが、ページをスクロールします。 ブートストラップv3.1.1を使用しています
7
ブートストラップ「ツールチップ」と「ポップオーバー」により、テーブルにサイズが追加されます
注： ブートストラップのバージョン（3.3より前かどうか）によっては、異なる回答が必要になる場合があります。 注意事項に注意してください。 このコードでツールチップ（セルにカーソルを合わせる）またはポップオーバーをアクティブにすると、テーブルのサイズが大きくなります。どうすればこれを回避できますか？ ここでemptyRow-100でtrを生成する関数 <html> <head> <title></title> <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script> <style> #matrix td { width: 10px; height: 10px; border: 1px solid gray; padding: 0px; } </style> <script> function emptyRow() { str = '<tr>' for (j = 0; j < 100; …
4
ブートストラップ3グリフィコンCDN
注意を払う！ このプルリクエストのマージ後、ブートストラップアイコンが元に戻ります。 過去数週間これを行ったり来たりした後、Glyphiconsアイコンフォントをメインリポジトリに復元することにしました。UIにアイコンがどれほど普及しているかを考えると、CSSやJSと同じ場所にアイコン（または他のアイコンフォント）を含めないことは、ほとんどの人にとっておそらく不利益です。 このアップデートには、次のものが含まれます。 ドキュメントを復元します（[コンポーネント]ページ） 新しい変数、@icon-font-pathおよび@icon-font-nameアイコンフォントの追加と削除の柔軟性のために、 最新のグリフィコンへのアップグレード（40個の新しいアイコンの追加） CSSページから古いGly​​phiconsの言及を削除します 将来的には、アイコンフォントのカスタマイズを改善して、フォントライブラリの交換が簡単になるようにする予定です（これが元の削除の全体的な動機でした）。 新しいバージョンのTwitterBootstrapGlyphiconsのCDNURLはどれですか？ Bootstrap 3から、それらは別のリポジトリに移動されましたが、CDNは見つかりませんでした。 公式ドキュメントから： Bootstrap 3のリリースに伴い、アイコンは別のリポジトリに移動されました。これにより、プライマリプロジェクトが可能な限り無駄のない状態に保たれ、アイコンライブラリの交換が容易になり、Bootstrapの外部のより多くの人々がGlyphiconsアイコンフォントをより簡単に利用できるようになります。 上の公式サイト、彼らはアイコンのCDNのURLを提供していません。 どこで見つけることができますか？リポジトリをダウンロードしてプロジェクトに含めたくありません。
13
Twitter Bootstrapタブが機能しない：タブをクリックしても何も起こりません
次のコードでTwitterBootstrapタブを実装しようとしていますが、機能していないようです。タブは表示されますが、クリックしても何も起こりません。以下は私が使用している唯一のコードです。他のすべてのCSS / JSスクリプトは、TwitterBootstrapフレームワークからコピーされます。 <!DOCTYPE html> <html lang="en"> <head> <!-- Le styles --> <link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet"> <link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet"> </head> <body data-spy="scroll" data-target=".subnav" data-offset="50"> <div class="container"> <!--------> <div id="content"> <ul class="nav nav-tabs" data-tabs="tabs"> <li class="active"><a href="#red">Red</a></li> <li><a href="#orange">Orange</a></li> <li><a href="#yellow">Yellow</a></li> <li><a href="#green">Green</a></li> <li><a href="#blue">Blue</a></li> </ul> <div id="my-tab-content" class="tab-content"> <div class="tab-pane active" …
3
TwitterBootstrapのFontAwesome vs Glyphicons
私はWeb開発の初心者で、最近Twitter Bootstrapを使い始めました。これは、すでに使用方法を知っているGlyphiconsを使用していることを知っています。しかし、Bootstrap用に構築されていると言っているFontAwesomeにも出くわしました。 2つの違いは何ですか？つまり、一方が他方の代替手段ですか？それとも、別の場所でそれらを使用する必要がありますか？
9
Razorエンジンを使用してMVC5プロジェクトにDatePicker Bootstrap 3を追加するにはどうすればよいですか？
Razorエンジンを使用してMVC5プロジェクトにDatePicker Bootstrap3をインストールする方法に関するガイドラインが必要です。このリンクをここで見つけましたが、VS2013で機能させることができませんでした。 上記の後のリンクの例からコピーして、私はすでに次のことを行いました： bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/bootstrap-datepicker.js", // ** NEW for Bootstrap Datepicker "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/bootstrap-datepicker.css", // ** NEW for Bootstrap Datepicker "~/Content/site.css")); 次に、次のようにスクリプトをインデックスビューに追加しました @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript"> $('.datepicker').datepicker(); //Initialise any date pickers </script> } さて、ここで日付ピッカーを呼び出す方法は？ <div class="form-group input-group-sm"> @Html.LabelFor(model => model.DropOffDate) @Html.TextBoxFor(model => model.DropOffDate, new …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.