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

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

5
インラインフォーム内の全幅テキスト入力をブートストラップする
コンテナー領域の幅全体に収まるテキストボックスを作成するのに苦労しています。 <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)"> <button type="submit" class="btn btn-lg">Search</button> </form> </div> </div> 上記を実行すると、予想どおり、2つのフォーム要素はインラインになりますが、せいぜい数列を超えないようにしてください。Firebugでcol-md-12divにカーソルを合わせると、予想される全幅を占めていることがわかります。埋められないように見えるのは、テキスト入力だけです。インラインの幅の値を追加してみましたが、何も変わりませんでした。これは簡単なはずですが、今は本当に馬鹿げているように感じます。 ここにフィドルがあります:http : //jsfiddle.net/52VtD/4119/embedded/result/ 編集: 選ばれた答えはあらゆる点で徹底的であり、素晴らしい助けです。それは私が最終的に使用したものです。しかし、私の最初の問題は、実際にはVisual Studio 2013内のデフォルトのMVC5テンプレートの問題だったと思います。これには、Site.cssに含まれていました。 input, select, textarea { max-width: 280px; } 明らかにそれがテキスト入力の適切な拡張を妨げていました...将来のASP.NETテンプレートユーザーへの公正な警告...

6
アイコン付きの検索ボックスをBootstrap 3のナビゲーションバーに追加する方法
私は新しいTwitter Bootstrap 3を使用しており、次のような検索ボックスを上部のナビゲーションバーに配置しようとしています。 Bootstrap 2では、次のようにすることができます。 <form class="form-search" method="get" id="s" action="/"> <div class="input-append"> <input type="text" class="input-medium search-query" name="s" placeholder="Search" value=""> <button type="submit" class="add-on"><i class="icon-search"></i></button> </div> </form> しかし、Bootstrap 3でこれをどのように作成するかは、変更が多いためわかりません。 Bootstrap 3のナビゲーションバーの検索ボックスフォームのデフォルトのHTMLは次のとおりです。 <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> どうすれば修正して必要なものを達成できますか?

5
100%幅のTwitter Bootstrap 3テンプレート
私はブートストラップ初心者であり、ブートストラップでコーディングしたい100%幅のテンプレートがあります。最初の列は左隅から始まり、Googleマップで右端まで伸びています。container-fluidクラスでこれを行うことができると思ったが、それはもはや利用できないようです。あなたがレイアウトを確認したい場合、私は、私は、ここにリンクをthemeforestからジオメトリPSDテンプレートを使用していますどのようにブートストラップ3とそのレイアウトを実現するためには考えています。http://themeforest.net/item/geometry-design-for- geolocation-social-networkr / 4752268

8
Bootstrap 4の「.well」に相当するクラスとは
bootstrap-3にはあります .well、灰色の背景色といくつかのパディングを持つ要素の周りに丸い境界線を追加するクラスがあります。 <div class="well">Basic Well</div> しかし、.wellbootstrap-4にはクラスが見つかりませんでした。.wellbootstrap-4に相当するタグはありますか?


13
ブートストラップ3:col-lgのみのpull-right
ブートストラップ3の新機能...私のレイアウトでは次のようになっています。 <div class="row"> <div class="col-lg-6 col-md-6">elements 1</div> <div class="col-lg-6 col-md-6"> <div class="pull-right"> elements 2 </div> </div> </div> 'elements 2'がcol-lgよりも小さい画面で正しく整列しないようにしたい つまり、col-lg-6に対してのみクラスを右に引き寄せることになります... どうすればこれを達成できますか? ここにフィドルがあります:http : //jsfiddle.net/thibs/Y6WPz/ ありがとうございました

13
マップファイルをロードしようとするブートストラップ。それを無効にする方法は?それをする必要がありますか?
私は最近bootsrap3で遊んでいます。ソースからコンパイルし、プロジェクトにdistr jsとcssを含めました。問題は、GH開発ツールで.map.cssファイルを取得しようとしていることです。なぜそうしたいのですか?それを無効にする方法は?無効にする必要がありますか?開発ツールでエラーマークを付けないように、そのマップファイルを追加しました。その後、すべてのスタイルが少ないファイルで定義されているとおりに表示されますが、あまり役に立ちません。

8
Bootstrap 3.0-固定列サイズを含む流動グリッド
ブートストラップの使い方を学んでいます。現在、私はレイアウトをたどっています。Bootstrapはかなりクールですが、私が目にするものはすべて時代遅れのようです。私の人生において、私には理解できない基本的なレイアウトだと思います。私のレイアウトは次のようになります: --------------------------------------------------------------------------- | | | | | | | | | 240px | 160px | All Remaining Width of the Window | | | | | | | | | --------------------------------------------------------------------------| このグリッドは、ウィンドウの高さ全体を占める必要があります。私の理解から、固定幅と流動幅を混合する必要があります。ただし、Bootstrap 3.0には流動性クラスがないようです。たとえそうであったとしても、流体と固定カラムサイズをどのように混合するかわかりません。誰もがBootstrap 3.0でこれを行う方法を知っていますか?

14
ブートストラップ3シェブロンアイコンで表示状態を折りたたむ
Bootstrap 3のJavascriptのサンプルページのCollapseのコアサンプルを使用して、シェブロンアイコンを使用して折りたたみの状態を表示できました。 私はこれを使ってこれを働いています: $('#accordion .accordion-toggle').click(function (e) { var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up'); $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up"); }); これは機能しますが(すべてのブラウザで完全にテストされているわけではありません)、これに対するよりエレガントな解決策があるかどうか疑問に思っていますか? 理想的にはコア関数を使用したいのですが、それを使用して同じ結果を得る方法がわかりません。 $('#accordion').on('hidden.bs.collapse', function () { //do something... }) これがjsfiddleで動作するバージョンです。

18
ブートストラップ3:ページの更新時に選択したタブを保持する
Bootstrap 3での更新時に、選択したタブをアクティブにしておこうとしています。試して確認したところ、いくつかの質問はすでにここで尋ねられましたが、私にとっては何の作業もありませんでした。どこが間違っているのかわからない。これが私のコードです HTML <!-- tabs link --> <ul class="nav nav-tabs" id="rowTab"> <li class="active"><a href="#personal-info" data-toggle="tab">Personal Information</a></li> <li><a href="#Employment-info" data-toggle="tab">Employment Information</a></li> <li><a href="#career-path" data-toggle="tab">Career Path</a></li> <li><a href="#warnings" data-toggle="tab">Warning</a></li> </ul> <!-- end: tabs link --> <div class="tab-content"> <div class="tab-pane active" id="personal-info"> tab data here... </div> <div class="tab-pane" id="Employment-info"> tab data here... </div> …


4
Bootstrapで利用可能なテキスト色クラス
ナビゲーションバーでタイトルとしてテキストを入力して、サインアップページを開発しています。それらのテキストに異なる色を付けたいです。この目的のために、別のCSSファイルを使用していますが、ブートストラップのCSSファイルを使用してこれを実行したいと考えています。 誰かがブートストラップで利用可能なカラークラスをリストできますか?

3
Bootstrap 3 Slide in Menu / Navbar on Mobile [終了]
閉まっている。この質問にはデバッグの詳細が必要です。現在、回答を受け付けていません。 この質問を改善してみませんか?Stack Overflowのトピックとなるように質問を更新します。 昨年休業。 この質問を改善する 私はブラウザベースのモバイルアプリを構築していて、デザインのcssフレームワークとしてBootstrap 3を使用することにしました。Bootstrap 3の優れた「レスポンシブ」機能はナビゲーションバーにあり、ブラウザの解像度に関する特定の「ブレークポイント」を検出すると自動的に折りたたまれます。多くの状況で機能します。 しかし、最近、多くのブラウザベースのモバイルアプリで、プライマリナビゲーションが画面の左側から非表示になっていることに気づきましたか。右上隅にあるトグルアイコンを押す(トグルする)と、プライマリナビゲーションがスライドして表示されます。画面に入る道の約2/3ですよね?これは、モバイルデバイス上のブラウザーベースのアプリをナビゲートするためのますます人気のあるソリューションであり、理論的には、このバージョンのナビゲーション折りたたみ機能のバージョンに対応するようにブートストラップcss / jsを変更するのはかなり簡単なはずです。 これらの機能はどのように実装できますか?あまり変更を加えるべきではないようです。この件についてのご意見や解決策をぜひお聞かせください。また、Bootstrapを組み込みの機能として実装することは、長期的な解決策になると思います。 残念ながら、私はこれらのテクノロジーに精通している一方で、私は主にPHP / MySQLの開発者であり、これは私が持っていない洞察力を持つ専門家によって構築されるべきであるので、この機能は有用であると信じているため、この機能を作成する試みはしていませんフロントエンド開発者として。

10
ブートストラップ3パネルヘッダーのボタンの位置が間違っている
ブートストラップ3を使用していますが、パネルのヘッ​​ダーの右上隅にいくつかのボタンを追加したいと思います。それらを追加しようとすると、タイトルのベースラインの下に表示されます。 コード:http : //bootply.com/82631 タイトル、パネルの見出し、またはボタンのいずれかに追加する必要のあるCSSは何ですか?

6
ブートストラップ3-行クラスがコンテナーよりも広いのはなぜですか?
Bootstrap 3を使い始めました。行クラスがどのように機能するかを理解するのに苦労しています。padding-leftand を回避する方法はありpadding-rightますか? <div class="row" style="background:#000000"> <div class="col-xs-4 .col-xs-offset-1"> col </div> <div class="col-xs-2"> col </div> <div class="col-xs-2"> col </div> <div class="col-xs-2"> col </div> </div> http://jsfiddle.net/petran/rdRpx/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.