tech-memo
Udemy Bootstrap4
★bootstrap5でやるならヘルプを確認の上、設定すること！結構違うかも…
ブレークポイント
| ブレイクポイント | 576px | 768px | 992px | 1200px |
|---|---|---|---|---|
| 参考デバイス | スマホ | タブレット | PC | 大型ディスプレイ |
| クラス接頭辞 | col-sm | col-md | col-lg | col-xl |
class=”col-md-N” とすると768px以上でカラム分割、768px以下で分割せず縦に表示になる
bootstrap5からは xxl として1400px以上が追加
色
- 文字色
class="text-primary"
class="text-secondary"
class="text-success"
- 背景色
class="bg-primary"
class="bg-secondary"
class="bg-success"
スペーシング
[property][sides]-[size]
- property: m:マージン（外余白） p:パディング（内余白）
- sides: 辺 t:top b:bottom l:left r:right x:left&right y:top&bottom
- size: 幅 rem（ルート要素の何倍か）指定 0:0rem 1:0.25rem 2:0.5rem 3:1rem 4:1.5rem 5:3rem
ex.
- class=”ml-0” ←左に外余白
- c-lass”p-2” ← sideなしも可. 4辺に内余白
タイポグラフィ
- divにh1を指定してh1と同じ書式 ex.
<div class="h1">
- display-1でh1よりさらに大きい文字
<div class="display-1">
```css
- ulタグで行頭なしにする
-
</ul>
```
- ulタグで要素を横並びにする
```css
-
...
```
## 画像
- 画像をレスポンシブな表示にする
```css
``` - 画像をサムネイル形式にする（画像の周りにボーダーを表示する） ```css
``` - マウスホバーで色を変える ```css
``` - サイズを小さくする（サイズの指定） ```css
...スマホ用？余白が少しカットされる ``` ## ボーダーの色と角 - 色 ```css
``` - 角を丸くする ```css
...-sizeで角の丸の大きさを指定可能（ver5から） ``` - 画像を丸く ```css
...円形
...カプセル形 ``` ## 影をつける ```css
``` ## ディスプレイプロパティ d-[breakpoint]-[value] - value...cssのdisplay:xxに相当 none / inline / inline-block / block / table / table-cell / table-row / flex / inline-flex - breakpointを指定することで特定の画面幅のときの表示を設定 ## サイジング - 親要素の幅の何%にするかを指定する w-nn ```css...親要素の25%の幅にする``` - 親要素の高さの何%にするかを指定する h-nn ```css...wと同じ ``` - 画像のmax-width:100%, max-height:100% ```cssA simple primary alert—check it out!``` ## バッジ - テキスト横に吹き出しっぽく目立たせるボックスを表示 ```cssExample heading New
``` - カタチを丸く ```css Primary ``` ## ボタン - 通常 ```css ``` - 白抜き ```css ``` - 全幅ボタンは display と gap を組み合わせる ```css``` - aタグ、inputタグにも使える ```css Link ``` ## カード - 商品明細の表示に使用するようなコンポーネント. 画像との組み合わせも可能 https://getbootstrap.jp/docs/5.0/components/card/ ## カルーセル https://getbootstrap.jp/docs/5.0/components/carousel/ ## ドロップダウン - ドロップダウンリストはdivとulの組み合わせで作るらしい https://getbootstrap.jp/docs/5.0/components/dropdowns/ ## フォーム - form-control / form-label を使って生成するが、djangoで使うにはどうする？ https://getbootstrap.jp/docs/5.0/forms/overview/ ## ナビゲーションバー - ナブバーを使うと、PCのときは横並び、スマホではハンバーガーメニューの縦並びというナビゲーションバーを作ることが可能 https://getbootstrap.jp/docs/5.0/components/navbar/ - ナビゲーションと組み合わせて使用する
-
...
```
## 画像
- 画像をレスポンシブな表示にする
```css