[bootstrap] タグが付いた質問
64
質問
3
票
1回答
144 件の閲覧数
PolymerとBootstrapの併用について
お世話になってます。
現在Bootstrapを使用してWebサイトを開発しています。
しかし、Polymerを利用して部品化してみようと思い、Polymerを導入したのですが、BootstrapのclassがComponentに反映されなかったりと何かと不具合が生じています。
Componentのhtmlには
polymer.htmlとbootstrap.min.cssをlinkしています。
...
3
票
2回答
2,996 件の閲覧数
Bootstrap 3 でテキストフィールドの幅を調整したい。
.col-sm-12#customer
%h2 顧客情報
%dl.dl-horizontal
%dt 電話番号
%dd
%div(style="padding: 0px;" class="col-sm-4")
.input-group
= text_field_tag 'customer[phone1]', '', class:...
3
票
1回答
918 件の閲覧数
画面が小さくなっても要素を横一列に並んだままにしたい
Bootstrapを使ってログインID入力のみのログイン画面の作成を行っています。表示画面が小さくなってもユーザIDラベル、テキストボックス、submitボタンを横一列で表示するようにしたいのですが下記のコードではうまくいかず困っています。
どのようにコードを記載すればよろしいでしょうか。
自身が書いたソースは下記となります。
<!DOCTYPE html>
<...
2
票
1回答
201 件の閲覧数
Polymerでの外部Scriptファイルの読み込み方法について
お世話になっています。
現在BootstrapとPolymerを使用してWebサイト制作をしています。
さっそく質問なのですが、Polymerを使用して定義した独自コンポーネントに外部で
用意したScriptファイルを
と読み込み、コンポーネント内の要素にScriptを適用したいのですが、どうやら
現在適用されていないようです。
試した方法としては
・polymer-...
2
票
2回答
799 件の閲覧数
AngularJS ui-routerを用いた共通モーダル(BOOTSTRAP)の定義について
BOOTSTRAPのmodalをui-routerで利用するとき、下記のように状態を定義して、$stateProvider#state()に登録しています。
var state = {
name: 'modala',
parent: 'home',
onEnter: function($modal, $state) {
modalInstance = $...
2
票
1回答
161 件の閲覧数
Bootstrap3 のファントアイコンを増加したい
Bootstrap3 アイコンを増やしたいのですが、どうすれば良いでしょうか?
Font Awesome
・クラス指定ではなく、iタグで指定しなければいけないのでしょうか?
・既存の「Bootstrap3 アイコン」と併用可能でしょうか?
Font Awesome 以外
・「Bootstrap3 アイコン」として使用可能なフォントはあるでしょうか?
2
票
2回答
2,632 件の閲覧数
bootstrapでタブをクリックしたらAjax機能で画面遷移せずにデータを表示したい
bootstrapでタブをクリックしたらAjax機能で画面遷移せずにデータを表示したいです。
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#home" data-toggle="tab">ホーム</a></li>
<li >&...
2
票
1回答
2,372 件の閲覧数
bootstrap下の中央寄せされたレスポンシブ画像のリンク化
bootstrapを使っている状態で中央寄せされたレスポンシブな画像をリンク化しようとしたのですが、うまくいきません。
下記のようなコードを書きました。
<!DOCTYPE html>
<html>
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min....
1
票
1回答
2,912 件の閲覧数
Bootstrapで動的にフォームを作るとチェックボックスのラベルをクリックしても機能しない
Twitter Bootstrapについてです。
Bootstrapのスタイルは、デフォルトで
チェックボックスのラベルをクリックすると(画像の「画像を削除する」のラベル)、
チェックボックスがtoggleされます。
しかし、JSで動的にフォームを挿入した後のチェックボックスは、
ラベルをクリックしてもtoggleされません。
popoverなどの機能であれば、
$('[rel=...
1
票
1回答
3,068 件の閲覧数
.NETでBootstrapのModalがOnClickイベント後に閉じてしまう。
ASP.NET C#にてWebアプリケーションを作成しています。
BootStrapのModalを使用しています。
モーダル表示用のボタンクリック時に
サーバ側処理でOnclickイベントを入れているのですが、
このイベント発生直後にモーダルが勝手に閉じてしまいます。
sample.aspx:modal表示ボタン
<input type="button" id="...
1
票
3回答
1,303 件の閲覧数
modal内の特定の要素の高さを取得したい
現在、modal.js の version3.3.6 を利用して、モーダル表示を行うページを作っています。
この画面にはボタンがあり、ボタンをクリックするとモーダルウィンドウが表示されます。
モーダルの中には<p>で包んだ文字列があり、知りたいのはこの要素の高さの取得法です。
現状、クリックイベントで
takasa = $("p").height();
...
1
票
1回答
427 件の閲覧数
BowerやGruntを使ってHonokaをコンパイルしたい
windyakin/Honokaのv3.3.5-cについてです。
bootstrap.scssファイルをコンパルしようとしたのですが、
bootstrap自体がないようでコンパイルできませんでした。
そこで、
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
...
1
票
1回答
316 件の閲覧数
Flat UI ProのRailsへのインストールで generatorを実行すると Could not find generator 'flatuipro:install' エラーになる
Flat UI Proデザインフレームワークを reflection/designmodo-flatuipro-rails を使って、Rails4.2のプロジェクトにインストールしようとしています。
参考サイトを参考にFLAT-UIの適用を何度も試みているのですが
どうしてもうまくいきません
STEP1
Flat-UI-HTML-Developers-License....
1
票
1回答
611 件の閲覧数
rails-assetsを使いつつ、一部のページだけ bootstrapを適用するには、どうしたらいいか。
1つのプロジェクトの中で。あるlayoutだけbootstrapを適用したい。または、適用したくないと考えた時に、
(便宜上、適用したい方をA。したくないほうをBとします)。
application.scssの中で
@import "bootstrap-sprockets";
@import "bootstrap";
としてしまうと。ABどちらも適用されてしまいます。
html....
1
票
1回答
2,673 件の閲覧数
table-hover が効かない
<div class="container" style="padding:20px 0">
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr><th>foo</th>...
1
票
1回答
34 件の閲覧数
HTML,CSSによるデザインで要素の高さを70%にしたい
html,css,bootstrapを使って、ページのデザインを編集しています。
以下のような画像とセクションの高さを70%にしたいのですが、なかなかうまくいかず詰まっています。
恐れ入りますが、手助けいただけないでしょうか?
以下該当部分のHTMLとCSSです。
▼html
<section class="section-box" data-scroll-index=&...
1
票
1回答
66 件の閲覧数
Bootstrap 導入方法による違いについて
お世話になります。
Bootstrap(4)の導入方法について、
下記2つの違いを知りたいです。
完全にどっちでも同じなのでしょうか?
・CDN
・ソースファイルをダウンロード
例えば
用意されたスタイルに変更を加えたい場合はこっちの導入方法でないとできない、
というように「こういうことをしたいならこっちの導入方法がよい」
というような差異はあるのでしょうか。
1
票
2回答
431 件の閲覧数
rails g kaminari:views bootstrap3が実行できない
railsでgem 'kaminari'を導入した後に、bootstrap3との競合を避けるために、
$rails g kaminari:views bootstrap3
をしたのですが、以下のエラーが出てきて困っております。どなたか対処法を知っていたらぜひご教授お願いします。
rails g kaminari:views bootstrap3
/usr/local/rvm/gems/ruby-...
1
票
0回答
59 件の閲覧数
android-bootstrap-widgetsの使い方
android-bootstrap 2.xバージョンを使用しておりまして、こちら https://github.com/Bearded-Hen/Android-Bootstrap の公式サイトを見たのですが、xmlでの例はあるのですが、
使い方が書いていません。xmlでの使い方のドキュメントはどこにあるのでしょうか?
どなたかご協力お願い致します。
1
票
0回答
3,052 件の閲覧数
htmlの印刷でIEのみ余分な空白ページが出力される
現在asp.net mvc 5 にてBootstrapを使用したWebアプリを開発中ですが、
tableタグを使用したページをwindows.print()で印刷した際、IEのみ2ページ目に空白ページが表示されてしまいます。(IE11で確認しております。)
他のブラウザ(chrome,firefox,safari,edge)では1ページのみ出力され、空白ページは表示されません。
...
1
票
0回答
517 件の閲覧数
HTML5 + Bootstrap + IE11 + Windows7にて、フォーカスを当てた時の挙動がおかしい
HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
1.枠線の影が消える
2.テキストフィールドの左上にグレーの影が表示される
この現象は下記の環境で発生しています。
・Windows7 Professional SP1(32bit)
・IE 11.0.9600.18537 (更新バージョン 11....
1
票
0回答
1,729 件の閲覧数
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 ...
1
票
0回答
184 件の閲覧数
bootstrapにprimary2などを作って色を足したい
前置き
bootstrap(現在はv3.3.5を使用)ですが、現在sassを使って、
$brand-primaryのような用意された変数を使い色を変更することはできました。
そこで、今度は色を追加しようと思ったのですが、brand-successやbrand-infoなどは用意されていますが、これらの色を変更するのは、用途が違うと感じました。
やりたいこと
$brand-...
1
票
0回答
226 件の閲覧数
Flat UI proの導入方法
前提
Flat UI pro を購入したのですが、使い方がわかりません
http://designmodo.com/flat
開発環境は Rubymine です。
発生している問題
vendor/assets の javascript と stylesheets に入れてからassets/javascript と assets/stylesheets で require をすると、...
1
票
1回答
116 件の閲覧数
Rails4 iphone5s上でBootstrap3のデザインがブラウザと異なる
herokuでデプロイ後にiphone5sのsafariで確認したところ
レスポンシブデザインのxsにならず、smのデザインになってしまいます。
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
PCのsafariでブラウザサイズを可変した場合は正しく動いています。
どうしたら正しくxsで表示させることができるでしょうか
...
1
票
1回答
821 件の閲覧数
Javascript : クリックで追加したtab要素に切り替えさせる
ボタンをクリック後、フォームを挿入してさらにマルチ言語用にタブ切り替えを実装させたいのですが、うまく行きません。
なんとかしてクリック毎にidを振り当ててその要素にタブ切り替えのファンクションを振り当てたいです。
どんな些細な事でも構いませんのでどなたかご指摘を宜しくお願いいたします。
var totalField = 0;
function addField(type) {
...
0
票
1回答
1,771 件の閲覧数
クリックイベントが発火しない
bootstrapのリストがクリックされたときにactiveをクラスに追加たいと考えているのですが、以下のコードではクリックイベントが発火しませんでした。どのようにすればクリックイベントを発火させることができるのでしょうか。
javascript
$('.list-group .list-group-item').on('click', function(e){
...
0
票
1回答
715 件の閲覧数
Bootstrapのドロップダウンが開かないことがある
*問題
Bootstrapのnavでheaderにドロップダウンメニューを導入しているのですが、ドロップダウンが開く場合と開かない場合があり困っています。
navbarには現在ビューのあるリンクとしてHome画面とEdit画面(ドロップダウン内)へのリンクがあるのですが、それらのリンク先へ遷移した直後にドロップダウンメニューが動かなくなってしまいます。しかし、ブラウザで再読込(更新)...
0
票
1回答
429 件の閲覧数
bootstrap でnavbar が正しく表示されません
html の勉強を始めたばかりなのですが、container や jumbotronなどは使えるのにnavbarが正しく表示されません。
bootstrapのNAVSやNAVBARから直接コピペしても表示がホームページにある例とは異なる形で表示されてしまうので何が間違っているのかが全く分からない状態で困っています。
udemyを主な学習材料に使っていましたが、...
0
票
2回答
857 件の閲覧数
.NET MVC ViewからControllerへのbootstrap toggleの状態渡しについて
VIEW側で下記のようなbootstrapを用いたトグルボタンを作成しました。
このトグルボタンの選択状況(ON/OFF)をトグルの切り替わり時にControllerに渡したいのですがどのように実装すればいいでしょうか。
ソースを一部記載致します。
※Controller
public ActionResult Index()
{
var test = ...
0
票
1回答
784 件の閲覧数
RSpec+CapybaraでBootstrap 4のドロップダウンをテストする方法
現在、RSpec+Capybaraでテストコードを書こうとしています。
やりたいことはナビゲーションバーの中にあるドロップダウンをクリックして表示されたドロップダウンメニューの中にログアウトというコンテンツがあることを確かめることです。
Viewのコードは下記の通りです。
テンプレートエンジンはslimを、CSSフレームワークはBootstrap 4を使っています。
nav.navbar
...
0
票
1回答
184 件の閲覧数
チェックボックスを扱って時間を変更したい。
画面表示をしたときにデフォルトでは時間が9:00と表示され、
終了時刻のチェックボックスにチェックを入れたら22:00に切り替わり、チェックボックスを外したら21:00に切り替わるという実装をしたいと考えていますが上手くいきません。(画面表示をしたときにデフォルトでは時間が9:00というのはできてます。)
どのように修正したらよろしいでしょうか。お願いいたします。
<!DOCTYPE ...
0
票
1回答
1,223 件の閲覧数
Timepickerが機能しない。
画面に「Timepicker」の機能を実装中ですが上手くいきません。
入力ボックスに「11:00 PM」という表示はでているのですがボタンを押そうとしても何も機能していない形です。ボタンをクリックして時間を選べるようにするにはどう修正したらよろしいでしょうか。
以前から使っている「http://getbootstrap.com/getting-started/#download」...
0
票
1回答
879 件の閲覧数
ブラウザのサイズに依らずに画像を縦いっぱいに表示するには
質問させてください。
このサイトのようにブラウザのサイズがどんな高さであっても(スマホなども含みます)、ほぼ縦幅いっぱいに画像を表示したいと思います。
しかし自分のページでは、スマホでの表示時に横幅に依存してしまって縦の長さが短くなってしまいます。
どのようにCSSを書けばよいのか教えて頂けませんでしょうか?
宜しくお願い致します。
html {
font-size: 62....
0
票
1回答
2,155 件の閲覧数
要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない
bootstrapのlabelを使っています。
これを複数横並びにしていますが、指定の親要素幅を超えると親要素幅が伸びてしまいます。
複数ある子要素を横並びにしつつ、適宜折り返したいです。ただし要素の途中で折り返したく有りません。要素単位で折り返したいです。
下記の例なら、label label-info指定の子要素を横並びにしますが、「データn」の途中で折り返さず、親要素幅以内で「データn」...
0
票
1回答
38 件の閲覧数
CSSにおいて正方形に余白がある状態にしたい
今HTML,CSS,Bootstrapでページをデザインしています。
画像を正方形にトリミングし、5個ずつ2列で表示します。
以下のようにできているのですが、
それぞれの画像がくっつかず、余白をつけるようにしたいです。
現在、縦横比を保てるように実装できているのですが、余白の設定に詰まっています。
サポートいただけないでしょうか?
▼HTML
<div class="flex-...
0
票
1回答
1,690 件の閲覧数
Bootstrapのdatatables内におけるselectボックスにデータを挿入する場合について。
失礼します。
JqueryとBootstrap、Javaで開発しています。
今回datatables内にセレクトボックスを設置しているんですが、データの入れ方がうまくわかりません。
わかるかたいましたら、ぜひご教授お願いいたします。
追加 HTML部分のコードです。
<table id="kategoriTanka" class="table table-bordered table-...
0
票
1回答
2,653 件の閲覧数
BootstrapのModalで別htmlの読み込みができましたが、読み込む要素を指定したい
こちらを参照して別htmlを表示させています。
しかし、読み込む要素を指定することができません。
例えばですが上記ページの内容を元にして
「Lab6.html」内の
'div class="panel-body"'のみを読み込ませることは可能でしょうか。
jqueryの.loadで試してみましたが、html内のソースが全て読み込まれてしまうため、
対応方法が検討もつきません。
...
0
票
2回答
7,706 件の閲覧数
画面のテーブルに対して行選択するコードの書き方について。
仕様として画面のテーブルに対して行選択しているファイルをダウンロードボタンでダウンロードできるものを考えています。
まず行選択できるコードの書き方が分からなくて悩んでいます。行選択できるようにするにはどういったコードを追記すればよろしいでしょうか。
ソースは下記となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<...
0
票
1回答
192 件の閲覧数
AngulerJSでのモーダル画面表示
AngulerJSとBootStrapを使用してモーダル画面を表示しようとしているのですが
$modal.openのところで
TypeError Cannot read property 'open' undifined
とエラーが出てしまいます。
原因はなんでしょうか?
var app = angular.module('app',['ui.bootstrap']);
//...
0
票
1回答
93 件の閲覧数
隔離スコープのパラメータが同期されない
開発環境は
Angular1.5
AngularBootstrap
TypeScript
です。
AngularbootstrapのDatepickerPopupをディレクティブでラップしています。
カスタムディレクティブで展開したHTMLから、
ng-clickで隔離スコープのbooleanを切り替えるだけのスコープ内関数を呼び出します。
this.scope = {};
this....
0
票
1回答
2,880 件の閲覧数
要素を横一列で並べたい。
営業時間のラベルから二つ目の時間入力までの要素を画面が小さくなっても横一列にしたいと思っていますが上手くいきません。画面を小さくすると、ラベルと入力のテキストボックスが縦に並んでしまいます。どう修正したらいいのか教えていただいてもよろしいでしょうか。
【コード】
<!DOCTYPE html>
<html lang="ja">
<head>
...
0
票
1回答
1,696 件の閲覧数
0
票
1回答
309 件の閲覧数
Twitterの様な投稿フォームを再現するには
railsもしくはbootstrapのライブラリを用いて、
このようにツイッターの新規投稿ボタン?を押すと画面が遷移せず、背景が暗くなり、フォームが
出てくる。という機能をつけたいのですが、そういったライブラリはあるのでしょうか?
もしあるのなら何と調べればいいのかご教授願いたいですm(__)m
0
票
1回答
1,431 件の閲覧数
Bootstrapテンプレートで、<select class=“form-control”> の角丸を四角にしたい
<select class="form-control" style="border-radius: 0!important;">
を指定しました。
MacのFirefoxでは四角になりましたが、MacのChromeでは角丸のままで変化がありませんでした。
知ってらっしゃる方、方法など教えてください。
よろしくお願いします。
0
票
1回答
450 件の閲覧数
zabuto calendarでクリックイベントをjsonの値によって変えたい
bootstrap(+jQuery)で動く,zabuto calendarというプラグインがあります。
デフォルトでの動きは,
(1)マンスリーカレンダー表示
(2)JSON形式のイベントデータがあると,該当日付に背景色を表示。クリッカブルになる。
(3)クリッカブル日付をクリックすると,モーダルウィンドウが降る。モーダルウィンドウ内には,JSONデータやHTMLを記述可能。...
0
票
1回答
3,160 件の閲覧数
DjangoでBootstrapがロードされない。
Djangoのアプリを作っていて、Bootstrapを使いたかったのですが、読み込んでくれません。
ログは以下のように出ます。
[07/Jul/2015 09:10:52]"GET /static/css/bootstrap-theme.min.css HTTP/1.1" 404 1694
[07/Jul/2015 09:10:52]"GET /static/css/bootstrap.min....
0
票
2回答
503 件の閲覧数
BootStrap3のテーマを使うには?
初質問です!
現在Java、Seasar2(SAStrats/S2JDBC)、JSP、PostgreSQLで
DBを使ったWebアプリケーションを作っています。
そこで質問なのですが、
結論から言うと
BootStrap3のテーマを今作っているアプリケーションに反映するにはどうしたらいいでしょうか?
ざっくりしすぎているので説明すると
現在Bootstrap ...
0
票
1回答
30 件の閲覧数
CSSにおいて画像を上下に5つずつ配置したい
今HTML,CSS,Bootstrapでページをデザインしています。
https://www.f2ff.jp/event/iotc-2020-02にある以下のようなデザインをしたいです。
動きはなくてよくて、配置のみになります。
これを上下2列で5ボックスずつで配置したいです。
どのようにすればいいでしょうか?今色々試しているのですが詰まっているのでアドバイスいただけたらと思います。
...
0
票
0回答
76 件の閲覧数
jsファイルを読み込ませるとドロップダウンメニューが動かない
実現したいこと
laravel6に外部ファイルに記述したapp.jsを読み込ませたい
エラーが発生した手順
画面上部に固定しているドロップダウンメニューが開けない、開いても閉じれない(開いたまま)で動かせなくなる
対象のソースコード
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ...