[bootstrap] タグが付いた質問

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。

絞り込み
並べ替え
タグ付けされた
0
1 回答
101 閲覧数

Bootstrapのiconとlink_to

Bootstrapのiconをボタンにしたいのですが、うまい事使用することが出来ません。 文字ではなく、bootstrapのベルのiconだけのボタンにしたいのですが、classにbi bi-bellを含めても表示されません。 link_toには違ったコードの書き方なのでしょうか? <div class="notification_navbar"> <%...
SKY's user avatar
  • 49
0
1 回答
56 閲覧数

bootstrapを使ってナビゲーションメニューのリンクの色を変えたい

railsでbootstrapを使っている初学者です。 デバイスを用意た本の投稿サイトを作成しています。 ヘッダーのナビゲーションメニューのリンクの色を白に変えたいのですがと記述したりscssでリンクの変更もしましたが色が変わりません。 <body> <header> <nav class="navbar navbar-expand-md ...
pon's user avatar
  • 15
0
1 回答
67 閲覧数

BootstrapVueでサンプル(特にb-form-select)がうまく表示できない。

BootstrapVueのサイトにある"Complete example"のサンプルを利用したいのですがうまく表示されません。 特にソート・フィルターなどの表以外の部分でサンプルの表示と異なります。 どうやらb-form-selectが上手く表示されていないようなのでそちらのサンプルも試しましたがやはりサンプルと同じように表示されません。 以下作業内容とソースになります。...
HelpMe's user avatar
  • 11
0
1 回答
131 閲覧数

Bootstrapの検索フォームがiPhoneで表示が崩れる

Bootstrapを使い、このサイトを参考に検索フォームを作成した。 <div class="input-group"> <input type="text" id="search-form" class="form-control input-group-prepend" ...
ForestSeo's user avatar
0
1 回答
131 閲覧数

ページによってheaderの色が変わるようにしたい

やりたいこと ページを移動した際に、ヘッターの文字の色が変わるようにしたいです(Aのページだと、この色。Bのページだとこの色、みたいな。) 現状 以下のようなコードでheaderを書いています。仮にこのbackground -colorをページごとに変えたいときはどのように書けばいいでしょうか? 条件分岐みたいな書き方をするのか、それとも違うクラスを与えたりするのか、よくわかりません。...
sasaharukimedes's user avatar
0
1 回答
105 閲覧数

使っているデバイスによってbackground-sizeを変えたい

やりたいこと 作っているアプリ内で,background-sizeがいまいちいい感じに決まりません.そこで,”pcならcontain, それ以外ならcover”みたいなことをやりたいです. コード例 pages.scss .top-main { padding: 200px 0 200px; text-align: center; position: absolute; top:...
sasaharukimedes's user avatar
1
1 回答
153 閲覧数

Bootstrap Icons の Code Point とは何か?

問題の要約 Bootstrap Icons のページからアイコンの情報を見ると,次のような画面が表示されます. Code point とは何のことでしょうか? Unicode や CSS や JS, HTML などと書かれていますが,これをそのまま書いても当然ながら反映されるわけではありません. どのような使い方を想定したものなのでしょうか?
Kitamado's user avatar
  • 219
0
1 回答
641 閲覧数

rails7, scssにコードを書いてもbackground-imageが表示されません.

やりたいこと rails6で作ったアプリを,rails7で作り直してます. そのなかで,background-imageを表示したいです. やったこと rails6で動いていたとおりに,コードを記述しました. 事前に表示したい画像をapp/assets/imagesに入れてることを確認し,以下に添付したように記述しました. 気になること 表示されないのはおかしいな?と思い,bin/rails ...
sasaharukimedes's user avatar
0
1 回答
142 閲覧数

メニューバーのリンクが自動でアクティブ化しない

※他質問サイトでも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。 前提・実現したいこと rails、bootstrapでメニューバーを作成しています。 現在表示しているページのリンクを自動でアクティブな状態にしたいです。 発生している問題・エラーメッセージ アクティブな状態が実装できません。 以下記事を参考に作成しました。 サイドメニューのアクティブ・...
edsr's user avatar
  • 5
0
1 回答
187 閲覧数

Rails6 webpacker から bootstrap js を使う方法

Rails + Webpacker の使い方に慣れていなくて 試行錯誤するとすぐにわけがわからなくなるので 毎回以下のように ruby しか入ってない状態から docker を作り直しています FROM ruby:3.0.1 RUN apt-get update RUN apt-get install -y build-essential curl git zlib1g-dev libssl-...
user avatar
1
1 回答
690 閲覧数

モーダルをforeachすると、同じデータしか検出されない

使用技術 java,springboot,bootstrap,thymeleaf 実現したいこと モーダルで確認動作を行った後、申請番号と申請ステータスを送信したいです。 問題点 モーダルを開いた後に申請番号の値が引き継がれておらず、送信されません。 thymeleafにてbootstrapを使い、テーブルをforeachさせているのですが、 ...
nata425's user avatar
  • 11
0
1 回答
777 閲覧数

Bootstrapのhamburgar menuが動かない

下記のドキュメントのExternal contentの章で記述されているサンプルコードをそのまま コピーすると、レイアウトはそのまま黒のヘッダーにアイコンという状態で再現できます。 https://getbootstrap.com/docs/4.1/components/navbar/ ただ、アイコンを押下してもメニューを展開できない状態です。 何か追加で設定する必要があるのでしょうか? &...
hogemaTV's user avatar
0
0 回答
197 閲覧数

jquery3.3.1でのモーダル画像にプラスマイナスボタンをつけて拡大縮小を行いたい

プログラミング初心者です。 モーダルの画像にプラスマイナスのボタンをつけて拡大縮小したいです。 調べたところviewer.jsなどのプラグインを導入するとできそうなのですがやり方がわかりません。 教えていただける方いましたら よろしくお願いいたします。 jquery3.3.1 [html] <div> <img class="img-thumbnail" ...
becchi's user avatar
  • 3
0
1 回答
133 閲覧数

CSSにおいて正方形に余白がある状態にしたい

今HTML,CSS,Bootstrapでページをデザインしています。 画像を正方形にトリミングし、5個ずつ2列で表示します。 以下のようにできているのですが、 それぞれの画像がくっつかず、余白をつけるようにしたいです。 現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。 サポートいただけないでしょうか? ▼HTML <div class="flex-...
user40231's user avatar
  • 325
0
1 回答
133 閲覧数

CSSにおいて画像を上下に5つずつ配置したい

今HTML,CSS,Bootstrapでページをデザインしています。 https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。 動きはなくてよくて、配置のみになります。 これを上下2列で5ボックスずつで配置したいです。 どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。 ...
user40231's user avatar
  • 325
0
1 回答
96 閲覧数

HTML,CSSによるデザインで要素の高さを70%にしたい

html,css,bootstrapを使って、ページのデザインを編集しています。 以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。 恐れ入りますが、手助けいただけないでしょうか? 以下該当部分のHTMLとCSSです。 ▼html <section class="section-box" data-scroll-index=&...
user40231's user avatar
  • 325
0
0 回答
500 閲覧数

jsファイルを読み込ませるとドロップダウンメニューが動かない

実現したいこと laravel6に外部ファイルに記述したapp.jsを読み込ませたい エラーが発生した手順 画面上部に固定しているドロップダウンメニューが開けない、開いても閉じれない(開いたまま)で動かせなくなる 対象のソースコード <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ...
masa's user avatar
  • 1
0
1 回答
1,589 閲覧数

Bootstrapのドロップダウンが開かないことがある

*問題 Bootstrapのnavでheaderにドロップダウンメニューを導入しているのですが、ドロップダウンが開く場合と開かない場合があり困っています。 navbarには現在ビューのあるリンクとしてHome画面とEdit画面(ドロップダウン内)へのリンクがあるのですが、それらのリンク先へ遷移した直後にドロップダウンメニューが動かなくなってしまいます。しかし、ブラウザで再読込(更新)...
you's user avatar
  • 21
2
1 回答
105 閲覧数

Bootstrap 導入方法による違いについて

お世話になります。 Bootstrap(4)の導入方法について、 下記2つの違いを知りたいです。 完全にどっちでも同じなのでしょうか? ・CDN ・ソースファイルをダウンロード 例えば 用意されたスタイルに変更を加えたい場合はこっちの導入方法でないとできない、 というように「こういうことをしたいならこっちの導入方法がよい」 というような差異はあるのでしょうか。
donk3487's user avatar
0
1 回答
2万 閲覧数

Uncaught TypeError: $(...).on is not a functionが出てしまう

test.jsの「.on('show.bs.modal', function (e)」箇所で以下のようなエラーが出ており、 モーダルは表示されるのですが、モーダルのタイトルが書き換わりません…。 onの使い方、bootstrapのモーダルの書き方がおかしいのでしょうか? test.js:2 Uncaught TypeError: $(...).on is not a function ...
kanko's user avatar
  • 885
0
1 回答
576 閲覧数

bootstrap でnavbar が正しく表示されません

html の勉強を始めたばかりなのですが、container や jumbotronなどは使えるのにnavbarが正しく表示されません。 bootstrapのNAVSやNAVBARから直接コピペしても表示がホームページにある例とは異なる形で表示されてしまうので何が間違っているのかが全く分からない状態で困っています。 udemyを主な学習材料に使っていましたが、...
Hikaru Yoshizaki's user avatar
0
1 回答
81 閲覧数

Bootstrap Collapse クラスに関する質問

Bootstrap の Collapse クラスを使って、パネルを作ってます。 パネルのタイトルをクリックして、開け閉めをするところまではできましたが、 URL にパラメータを指定することで、該当のパネルのみを開いた状態にする方法がありましたら教えていただけますと有難いです。 例えば、https://xxxxxx/index.com#id_10 と指定すると、id_10 ...
user26294's user avatar
0
1 回答
2,955 閲覧数

Bootstrapのdatatables内におけるselectボックスにデータを挿入する場合について。

失礼します。 JqueryとBootstrap、Javaで開発しています。 今回datatables内にセレクトボックスを設置しているんですが、データの入れ方がうまくわかりません。 わかるかたいましたら、ぜひご教授お願いいたします。 追加 HTML部分のコードです。 <table id="kategoriTanka" class="table table-bordered table-...
s.esaki's user avatar
0
1 回答
4,278 閲覧数

BootstrapのModalで別htmlの読み込みができましたが、読み込む要素を指定したい

こちらを参照して別htmlを表示させています。 しかし、読み込む要素を指定することができません。 例えばですが上記ページの内容を元にして 「Lab6.html」内の 'div class="panel-body"'のみを読み込ませることは可能でしょうか。 jqueryの.loadで試してみましたが、html内のソースが全て読み込まれてしまうため、 対応方法が検討もつきません。 ...
user avatar
1
2 回答
705 閲覧数

rails g kaminari:views bootstrap3が実行できない

railsでgem 'kaminari'を導入した後に、bootstrap3との競合を避けるために、 $rails g kaminari:views bootstrap3 をしたのですが、以下のエラーが出てきて困っております。どなたか対処法を知っていたらぜひご教授お願いします。 rails g kaminari:views bootstrap3 /usr/local/rvm/gems/ruby-...
ninja-shinobi's user avatar
0
2 回答
1,157 閲覧数

.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて

VIEW側で下記のようなbootstrapを用いたトグルボタンを作成しました。 このトグルボタンの選択状況(ON/OFF)をトグルの切り替わり時にControllerに渡したいのですがどのように実装すればいいでしょうか。 ソースを一部記載致します。 ※Controller public ActionResult Index() { var test = ...
t28bsai's user avatar
  • 183
0
1 回答
1,124 閲覧数

ファイル名を取得してサーブレットクラスに渡したい。

画面でテーブルに対して行をクリックし、黄色行になっている状態で「ファイル名取得ボタン」を押し、黄色行のファイル名をJavaのサーブレットクラスに渡したいと思います。テーブルに対して行をクリックし、黄色行にするとこまでできているのですが、ファイル名を取得してJavaのサーブレットクラスにファイル名を渡すコードをどう書くか分かりません。どう書けばよろしいでしょうか。 <!DOCTYPE ...
kazu's user avatar
  • 529
0
2 回答
1万 閲覧数

画面のテーブルに対して行選択するコードの書き方について。

仕様として画面のテーブルに対して行選択しているファイルをダウンロードボタンでダウンロードできるものを考えています。 まず行選択できるコードの書き方が分からなくて悩んでいます。行選択できるようにするにはどういったコードを追記すればよろしいでしょうか。 ソースは下記となります。 <!DOCTYPE html> <html lang="ja"> <head> <...
kazu's user avatar
  • 529
0
1 回答
193 閲覧数

VueにおいてBootstrapTimepickerのデータ更新が取得できずバインディングできない

Vueを勉強し始めて2ヶ月程です。 BootstrapTimepickerを利用して単純なバインドを試しているのですが、 http://jdewit.github.io/bootstrap-timepicker/ Timepickerで更新される値がVueで更新を検知できずバインディングがされません。 カスタムイベント等も試してみたのですが、なぜか検知できず。 ...
keitaro_so's user avatar
  • 5,275
1
0 回答
60 閲覧数

android-bootstrap-widgetsの使い方

android-bootstrap 2.xバージョンを使用しておりまして、こちら https://github.com/Bearded-Hen/Android-Bootstrap の公式サイトを見たのですが、xmlでの例はあるのですが、 使い方が書いていません。xmlでの使い方のドキュメントはどこにあるのでしょうか? どなたかご協力お願い致します。
tetsutetsu's user avatar
0
1 回答
1,404 閲覧数

モーダル画面内の入力値が文字化けする(TOMCATによる文字化け)

AngulerJSで入力があるモーダル画面を作成したのですが Inputタグの入力値をサーバで受け取ると文字化けしています。 この場合文字セットをどこで指定すればよいのでしょうか? (なお、モーダル画面用のスクリプトにはmetaタグにて文字セットを設定しています) <script type="text/ng-template" id="SeikyusakiInsert"> &...
toshi5506's user avatar
1
0 回答
3,785 閲覧数

htmlの印刷でIEのみ余分な空白ページが出力される

現在asp.net mvc 5 にてBootstrapを使用したWebアプリを開発中ですが、 tableタグを使用したページをwindows.print()で印刷した際、IEのみ2ページ目に空白ページが表示されてしまいます。(IE11で確認しております。) 他のブラウザ(chrome,firefox,safari,edge)では1ページのみ出力され、空白ページは表示されません。 ...
okaa's user avatar
  • 11
0
1 回答
210 閲覧数

AngulerJSでのモーダル画面表示

AngulerJSとBootStrapを使用してモーダル画面を表示しようとしているのですが $modal.openのところで TypeError Cannot read property 'open' undifined とエラーが出てしまいます。 原因はなんでしょうか? var app = angular.module('app',['ui.bootstrap']); //...
toshi5506's user avatar
0
0 回答
147 閲覧数

bootstrapの追従機能を持つAffixプラグインがうまく機能しません

railsでbootstrapの機能であるAffixプラグインを実装しようとしているのですが、うまく機能しません。現状としては同ページ内においてリロードをかけると機能するのですが、一回目にページ遷移した際にはうまく機能してもらえません。affixの属性を挿入したものが固定のままになってしまいます。 左の部分をaffixで追従させて、右半分をbootstrapのoffsetで右に寄せています。 ...
miido's user avatar
  • 1
1
0 回答
549 閲覧数

HTML5 + Bootstrap + IE11 + Windows7にて、フォーカスを当てた時の挙動がおかしい

HTML5、Bootstrapにてページを作成しています。 IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。 1.枠線の影が消える 2.テキストフィールドの左上にグレーの影が表示される この現象は下記の環境で発生しています。 ・Windows7 Professional SP1(32bit) ・IE 11.0.9600.18537 (更新バージョン 11....
yasuyasu1515z's user avatar
0
1 回答
1,053 閲覧数

RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法

現在、RSpec+Capybaraでテストコードを書こうとしています。 やりたいことはナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニューの中にログアウトというコンテンツがあることを確かめることです。 Viewのコードは下記の通りです。 テンプレートエンジンはslimを、CSSフレームワークはBootstrap 4を使っています。 nav.navbar ...
Masatoshi Moritsuka's user avatar
0
1 回答
102 閲覧数

隔離スコープのパラメータが同期されない

開発環境は Angular1.5 AngularBootstrap TypeScript です。 AngularbootstrapのDatepickerPopupをディレクティブでラップしています。 カスタムディレクティブで展開したHTMLから、 ng-clickで隔離スコープのbooleanを切り替えるだけのスコープ内関数を呼び出します。 this.scope = {}; this....
omarun's user avatar
  • 1,463
0
1 回答
2,327 閲覧数

クリックイベントが発火しない

bootstrapのリストがクリックされたときにactiveをクラスに追加たいと考えているのですが、以下のコードではクリックイベントが発火しませんでした。どのようにすればクリックイベントを発火させることができるのでしょうか。 javascript $('.list-group .list-group-item').on('click', function(e){ ...
StackDestroyer's user avatar
0
1 回答
232 閲覧数

チェックボックスを扱って時間を変更したい。

画面表示をしたときにデフォルトでは時間が9:00と表示され、 終了時刻のチェックボックスにチェックを入れたら22:00に切り替わり、チェックボックスを外したら21:00に切り替わるという実装をしたいと考えていますが上手くいきません。(画面表示をしたときにデフォルトでは時間が9:00というのはできてます。) どのように修正したらよろしいでしょうか。お願いいたします。 <!DOCTYPE ...
kazu's user avatar
  • 529
1
1 回答
4,696 閲覧数

.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。

ASP.NET C#にてWebアプリケーションを作成しています。 BootStrapのModalを使用しています。 モーダル表示用のボタンクリック時に サーバ側処理でOnclickイベントを入れているのですが、 このイベント発生直後にモーダルが勝手に閉じてしまいます。 sample.aspx:modal表示ボタン <input type="button" id="...
t28bsai's user avatar
  • 183
0
1 回答
3,373 閲覧数

要素を横一列で並べたい。

営業時間のラベルから二つ目の時間入力までの要素を画面が小さくなっても横一列にしたいと思っていますが上手くいきません。画面を小さくすると、ラベルと入力のテキストボックスが縦に並んでしまいます。どう修正したらいいのか教えていただいてもよろしいでしょうか。 【コード】 <!DOCTYPE html> <html lang="ja"> <head> ...
kazu's user avatar
  • 529
0
1 回答
1,374 閲覧数

Timepickerが機能しない。

画面に「Timepicker」の機能を実装中ですが上手くいきません。 入力ボックスに「11:00 PM」という表示はでているのですがボタンを押そうとしても何も機能していない形です。ボタンをクリックして時間を選べるようにするにはどう修正したらよろしいでしょうか。 以前から使っている「http://getbootstrap.com/getting-started/#download」...
kazu's user avatar
  • 529
1
3 回答
2,141 閲覧数

modal内の特定の要素の高さを取得したい

現在、modal.js の version3.3.6 を利用して、モーダル表示を行うページを作っています。 この画面にはボタンがあり、ボタンをクリックするとモーダルウィンドウが表示されます。 モーダルの中には<p>で包んだ文字列があり、知りたいのはこの要素の高さの取得法です。 現状、クリックイベントで takasa = $("p").height(); ...
user17063's user avatar
  • 153
0
1 回答
427 閲覧数

パーシャルのパーシャルに変数を送る方法を教えてください。

前提・実現したいこと パーシャルのパーシャルにコントローラーのインスタンス変数を送りたいです。 ★発生している問題・エラーメッセージ 投稿のタイムラインをクリックすると、 Twitterのようなモーダルウィンドウが表示されるようにviewを作成しました。 モーダルウィンドウに表示されるview(コメントが追加されます) ≒ クリックした投稿です。 ...
s.k's user avatar
  • 169
0
1 回答
311 閲覧数

pagedown-bootstrap-railsでプレビューが表示されない。

前提・実現したいこと pagedown-bootstrap-railsを実装したいです。 発生している問題・エラーメッセージ プレビューが表示されません。 該当のソースコード 以下、実装手順とともに該当コードを記します。 【Gemfile】 gem 'bootstrap-sass' gem 'font-awesome-rails' gem 'simple_form' gem 'pagedown-...
s.k's user avatar
  • 169
1
0 回答
1,808 閲覧数

Bootstrap下でtable td の幅を固定する方法が機能しない

rails (4.2.6)bootstrap-sass (~> 3.3.4)を使ってtableを表示しています。td幅を固定したいfieldがあり、<th class="col-md-4">, <th class="col-md-4"> などを設定したのですが機能しません。なにが悪いかご指導下さい。 トライアルした手順 テストプロジェクトを造りました  rails ...
mike tashiro's user avatar
0
1 回答
2,090 閲覧数

bootstrapでtableの縦線を消す方法について

bootstrapでtableの縦線を消して横線だけ表示させたいです 知ってる方がいれば是非ご教授ください
rkorpg_1116's user avatar
3
1 回答
1,109 閲覧数

画面が小さくなっても要素を横一列に並んだままにしたい

Bootstrapを使ってログインID入力のみのログイン画面の作成を行っています。表示画面が小さくなってもユーザIDラベル、テキストボックス、submitボタンを横一列で表示するようにしたいのですが下記のコードではうまくいかず困っています。 どのようにコードを記載すればよろしいでしょうか。 自身が書いたソースは下記となります。 <!DOCTYPE html> <...
kazu's user avatar
  • 529
0
1 回答
1,316 閲覧数

ブラウザのサイズに依らずに画像を縦いっぱいに表示するには

質問させてください。 このサイトのようにブラウザのサイズがどんな高さであっても(スマホなども含みます)、ほぼ縦幅いっぱいに画像を表示したいと思います。 しかし自分のページでは、スマホでの表示時に横幅に依存してしまって縦の長さが短くなってしまいます。 どのようにCSSを書けばよいのか教えて頂けませんでしょうか? 宜しくお願い致します。 html { font-size: 62....
yamachan's user avatar
  • 245
0
1 回答
2,752 閲覧数

要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない

bootstrapのlabelを使っています。 これを複数横並びにしていますが、指定の親要素幅を超えると親要素幅が伸びてしまいます。 複数ある子要素を横並びにしつつ、適宜折り返したいです。ただし要素の途中で折り返したく有りません。要素単位で折り返したいです。 下記の例なら、label label-info指定の子要素を横並びにしますが、「データn」の途中で折り返さず、親要素幅以内で「データn」...
tomorin's user avatar
  • 633