ホーム > 技術系 > bootstrap

bootstrapのアーカイブ

Bootstrap4で、table-responsiveで横スクロールが出ないのに対処

Bootstrap4で、横長のtableにtable-responsiveクラスを適用して、はみ出させずに横スクロールさせようと思っていたのですが、何故かtable-responsiveを適用してもtableが横に飛び出したままで横スクロールが出現しませんでした。

書いていたコードは以下のような内容です。

-----

これで行けるはずなのですが・・・・

そしていろいろ試してみたのですが、原因がわかりました。

 ← 親要素のこれが原因
-----

原因としては、div class=”table-responsive”の親要素に、class=”row”が入っていました。

これを削除することで動作するようになりました。

修正後

 ← class="row"を削除
-----

Bootstrap4で、テーブルのtdの横幅を設定する方法

Bootstrap4で、テーブルのtdの横幅を設定する方法についての解説です。

Bootstrap3までは、テーブルのtdに、グリッドのクラスをつけることで横幅がグリッドシステムを使って設定できていたのですが、Bootstrap4からはできなくなったみたいです。

bootstrap3でできていた

これが、bootstrap4ではできなくなっているので、スタイルで横幅を指定する必要があるようです。

参考
How to set up fixed width for td? | strackoverflow

何故Bootstrap4でできなくなってしまったのか分かりませんが、直書きで指定するっていうのも嫌ですが、仕方ないですね。
もっとシンプルに書けるいい方法がないもんなのでしょうか。

bootstrap4で、h1のフォントサイズを変更する方法

boostrrap4で、h1のフォントサイズを変更する方法についての解説です。

何故h1のフォントサイズ変更が必要か

boostrap4で、h1のフォントサイズがデフォルトでh1のままだと大きすぎると思っていました。

大きすぎる

これを調整する方法なのですが、クラス名のh1からh6を指定することで調整できるのです。

クラスでh6を指定してやるとだいぶ小さくできました。

大きすぎる

h1で指定されているけど大きさはh6の大きさ

クラスはh1からh6まで指定できるので、好みの大きさを指定すると良いです。

bootstrapについての勉強メモ

CSSフレームワークとして有名な、Twitter bootstrapについての勉強メモです。

bootstrapのインクルード

ダウンロードしてFTPでアップロードしなくてもCDNからincludeする記述ができます。

//4系
//ヘッダに記述
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

//フッタに記述
<!-- オプションのJavaScript -->
<!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

グリッドシステム

bootstrapは、12本のグリッドで構成されていて、幅を指定する場合にそのグリッドのどれだけを利用するかを指定でき、幅指定がスムーズです。

クラス

.container クラス

全体を囲うコンテナです。
画面幅によって可変です。

.container-fluid クラス
可変のコンテナです

.row
行に与えるクラス

.col
列に与えるクラス

.col-画面幅-グリッド数

画面幅
bootstrap3系 .col-xs Extra Samll オートレイアウト(全幅に対応、主にスマホ縦用)
bootstrap4系 .col- Extra Samll オートレイアウト(全幅に対応、主にスマホ縦用)
3、4共通 .col-sm Samll 576px(スマホ横)
3、4共通 .col-md Medium 720px (PC)
3、4共通 .col-lg Large 940px(PC)
3、4共通 .col-xl ExtraLarge 114opx(PC)

レスポンシブの対応

列のグリッド指定は、12を超えると自動的に折り返します。

この仕組みを使って、例えばレシポンシブで記述する場合は以下のようにします。

<div class="container">

<div class="col-xs-12 col-md-4">
左カラム(PCのときは左カラムの隣に右カラムが回り込む、スマホのときは下に回りこむ)
</div>
<div class="col-xs-12 col-md-8">
右カラム
</div>

</div>

上記はBootstrap3系の場合で、bootstrapが4系の場合は以下の記述になります。
col-xsが4系ではcol-になっている他、containerだけでなく、rowで囲ってやらないといけなくなっています。

<div class="container">
 <div class="row">
<div class="col-12 col-md-4">
左カラム(PCのときは左カラムの隣に右カラムが回り込む、スマホのときは下に回りこむ)
</div>
<div class="col-12 col-md-8">
右カラム
</div>
 </div>
</div>

上記のように記述すると、スマホレイアウトのときは左カラムの下に右カラムが入ります。(.col-xs-12 4系では .col-12が適用される)
PCで見た時は、左カラムの横に右カラムが回り込みます(.col-md-4、.col-md-8)

メニューを折りたたみ式にしたい

collapseというクラスを指定することで、メニューを折りたたみ式にすることが可能です。

<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#menu">menu</button>
<ul id="menu" class="collapse">
    <li></li>
<li></li>
    </ul>

テーブルのtdの横幅

bootstrap4からは、 class=”w-◯◯”(◯◯は数字)で横幅を%指定できる。

ホーム > 技術系 > bootstrap

フィード

ページの上部に戻る