プログラミンGOO

プログラミングナレッジ、ワードプレス、広告収入等について、気づき・備忘録を残していきます。

Bootstrap備忘録

HTML

概要

  • twitter社の開発したテンプレートカスタマイズツール
  • jQueryのようにWebと接続して使用するか
  • ダウンロードして使用する。
  • utilitiesのcssはimportantが利いてしまうので注意する。
参考

公式サイト
https://getbootstrap.jp/docs/4.5/getting-started/introduction/

基本
http://bootstrap3-guide.com/base/prepare.html

marginとか基本装飾
https://webnetamemo.com/coding/bootstrap4/201710065870

カラム配置
http://websae.net/twitter-bootstrap-grid-system-21060224/

inlineとかつまづきポイント
https://qiita.com/zaburo/items/8983993d173c51cb3827



【フォントの装飾】

■色
primary //スカイブルー

success //緑

danger //赤

warning //黄色

info  //水色

light //アイスグレー ※あまり見えないかも

white //白
■サイズ
small

middle

large
■文字色
text-danger //赤

text-light //白？
■背景色
bg-primary
■太字
font-weight-bold

font-weight-normal //太字を外す※h2とか
display-4 //textの大きさ指定　1～4
■左右中央揃え
text-center

text-right //右
■上下中央揃え
d-flex align-items-center

【画像】

・中央揃え： img-fluid

・円： img-circle

・角円： img-rounded
■幅の指定
w-25 //width: 75% //25,50,75,100で指定

h-25 //heightの指定

【配置・レイアウト】

■画面幅

BootStrapではカラムは12個に分割されている。

xs,sm,md,lg,xlで定義でき、そのときにカラムをいくつ使用するかでレスポンシブにできる。

ポイント

sm ：576px以上
md ：768px以上
lg ：992px以上
xl ：1200px以上

<div class="col-md-4">
//画面幅がミドルサイズのとき、このdivはカラムを4/12使用(すなわち画面を3分割する)

基本的な考え方はまず最小値を指定する

col-12  //スマホなど画面が最小の時は画面いっぱい

次に画面が大きくなってきた場合を考える

col-sm-6  //576px以上になったら画面半分で切る
■マージンとパディング

マージン

m-3： 全方位3rm //sizeは0～5(0.25rem～3.0rem)marginであればautoも可

mt, mb, ml, mr

my-3： 上下3rm

mx-3： 左右3rm

mt:margin-top, mb:margin-bottom

パディング

上記のmをpに変える




※h3などの見出しにはマージンがすでに付与されていて設定できないのでパディングで



■非表示
d-md-none //mdサイズの時display :none;

d-md-block //mdサイズの時のみ表示
■カラムの順序変更
order-sm-2

【ボタン】

btn btn-primary btn-sm

sm ：小
lg ：大

【リスト】

装飾なし：<ul class="list-unstyled">

横並びリスト：<ul class="list-inline">

【テーブル】

基本クラス

class="table"

tables-bordered

tables-hoberrows

tables-striped

【フォーム】

参考：
Forms - Bootstrap 4.1 日本語リファレンス

各アイテムをform-groupでくくり、inputにform-controlクラスを付与する。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

プルダウン、テキストエリアなどinputタグではない場合は以下。

//プルダウン
<select class="form-control">
  <option>1</option>
  <option>2</option>
</select>
//テキストエリア
<textarea class="form-control"></textarea>

チェックボックス、ラジオボタンは以下のようにform-check、form-check-inputを付与する

//チェックボックス
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

//ラジオボタン
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>

【実装例】

<div class=”container”> //大枠にcontainer

<div class="row"> //折り返す可能性があってもrowは分けない

//rowを切るのは確実に次の行に行きたい場合のみ

//thymeleafでループする場合はrowの直下に仕込むかな

<div class="col-lg-6">

//colクラスは単独でつける

//ここにマージン付けるとcolがうまく改行しなくなる

<div class="bg-light edit-img-frame">

<h4>タイトル</h4>

<div class="edit-img-div">

<img class="edit-img">

</div>

<ul class="edit-img-nav">

<li class="img-nav-item">表示順を変更</li>

<li class="img-nav-item">削除</li>

</ul>

</div>

</div>

</div>

</div>

【appendics】

ナビゲーションバーの一部を右寄せにしたい

参考：https://qiita.com/hmmrjn/items/6f5fd65ab8c58cd7a6d6

【導入方法】

以下の２種類の方法がある

  • BootStrapが公開しているURLにアクセスして使用する
  • BootStrapをファイルとしてダウンロードし、プロジェクト内に配置して参照する
BootStrapが公開しているURLにアクセスして使用する

BootStrapが公式に公開している参照先を設定する
参考：https://getbootstrap.jp/docs/5.0/getting-started/introduction/

BootStrapをファイルとしてダウンロードし、プロジェクト内に配置して参照する

ダウンロードページから
Compiled CSS and JS ＞ Downloadをクリック
するとzipファイルがダウンロードできる。中にはたくさんのファイルが入っているが、いずれも基本的な機能は似ていて、必要な仕様に合わせて適宜どれか１つを選べば良い。
cssから1つ、jsから1つ選び、通常のcss、jsファイルと同じ場所に配置して、通常のやり方で参照すれば使用できる。
僕は普段、bootstrap.min.cssとかを使用している。通常のbootstrap.cssと比べ何ができない、といった類の問題に出くわしたことは今のところない。
ちなみに上記ダウンロードページは最新のBootStrapバージョンがデフォルトとなっているので、過去のバージョンが必要な場合は右上のプルダウンからバージョンを選択する。

■ヘッダーにメタ情報を追記
<meta name="view">

これいるのかな？

テンプレートの使用

用途に応じてスニペット（パッケージ？テンプレート？）が用意されている。
参考：Examples · Bootstrap v5.0
他にもサードパーティーのテンプレートは多々あるが、Nodeとかフレームワークを使っていることが多く、作りも繊細だったりするので、最初は上記の公式テンプレートを使用するくらいにとどめておく方が良いと思う。

【エラー対応】

チェックボックス(checkbox)のDOMにrowを設定したらはみ出る。
＞親要素にしっかりclass="container"を付けているか？
rowやcolはこのクラスを前提としているため設定していないとレイアウトが崩れることがある

//正しい構成
<div class="container">
  <div class="row">
    <div class="col">
    </div>
  </div>
</div>

ちなみにcontainer-fluidを使うと固定幅でなくブラウザ最大幅に合わせてくれるのでメニューバーなどに設定すると便利。