今までEvernoteにメモってたんだけど、Evernote、3台以上の端末で使うと、端末解除せんといかんから(ぼく無料ユーザー)、いつでも参照しやすいようにブログにメモメモ。
基本はドットインストールさんで学んだことをメモするので、ちゃんと分かりやすく勉強したい人はそっちを見てください。
関係者の方、もし消せということであればコメントいただければ消します。
Contents
公式サイト
!impotat指定されてるからcssの上書きができない
です。
bgcolorと文字の横位置
SS
コード
<div class="text-center bg-primary">box</div>
<div class="text-center bg-secondary">box</div>
<div class="text-right bg-info">box</div>
<div class="text-center bg-warning">box</div>
<div class="text-center bg-dark text-light font-weight-bold">box</div>
dot install動画のリンク
関連するBootstrapのヘルプ
横幅や縦幅を%で指定する
SS
code
横幅を比率で指定できる。
25%としたい場合、
w-25
縦幅も比率で指定できる。
10%としたい場合、
h-10
指定できる値は、
10%、25%、50%、75%、100%
margin, padding
指定方法
[p|m][location]-[size]
location:
– t, b, l, r
top, bottom, left, right
それぞれ指定したい場合
– x, y
左右両方を指定したい場合はx
上下両方を指定したい場合はy
size:
– 0: 0
– 1: 0.25rem
– 2: 0.5rem
– 3: 1.0rem
– 4: 1.5rem
– 5: 3.0rem
– auto
例
paddingで、左右方向で、1.5rem の場合
px-4
dotinstall bootstrap4 #6
ボタン
<button class="btn btn-primary">OK</button>
<button class="btn btn-info btn-sm">OK</button>
<button class="btn btn-danger btn-lg">OK</button>
関連するBootstrapのヘルプ
グリッドシステム
<div class="container">
<div class="row mb-3">
<div class="col-4 bg-primary">1</div>
<div class="col-4 bg-secondary">2</div>
<div class="col-4 bg-success">3</div>
</div>
<div class="row mb-3">
<div class="col-8 bg-danger">1</div>
<div class="col-4 bg-warning">2</div>
</div>
<div class="row mb-3">
<div class="col-4 bg-danger">4</div>
<div class="col-4 bg-warning">4</div>
</div>
<div class="row mb-3">
<div class="col-10 bg-danger">10</div>
<div class="col-4 bg-warning">4</div>
</div>
</div>
12を分割して使う。
container
これで囲う。自動的に中央寄せにしてくれる。
row
行。
container > row > col
の位置に配置する。
col
列。
12を分割して使う。
col-●●の合計が、12未満の場合、右端が何も無しになる
col-●●の合計が、12より多い場合、途中で折り返して表示される。
注意点
aaaaaaaaaaaみたいに長くつなげた英数字を書くと、折り返されない。一単語とみなされるからかな？
グリッドシステムで、表示指定、非表示指定
指定方法
576px: sm
768px: md
992px: lg
1200px: xl
code
ミディアムなら、2:10、
スモールなら、10:2
にする場合、
<div class="col-md-2 col-sm-10 bg-primary">1</div>
<div class="col-md-10 col-sm-2 bg-secondary">2</div>
ミディアムなら非表示にする場合
d-md-none
基本的には非表示だが、ミディアムの場合だけ表示にする場合
d-none d-md-block
グリッドシステムのcolの左右順番を変える
PCとスマホで左右の順番を変えたい場合など。
code
order-サイズ-順番
みたいにする。
サイズは、smとかmdとか。
順番は1とか2とか。
<div class="row">
<div class="col-sm-8 order-sm-2">
左から2番めに表示
</div>
<div class="col-sm-4 order-sm-1">
左から1番めに表示
</div>
</div>
こんなかんじ。
table
code
<table class="table"%gt;
単純でござる。
↑なかんじでマウスオーバーした行を灰色にしする場合、
.table-hovertab
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">たぶ1</a></li>
<li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">たぶ2</a></li>
</ul>
<div class="tab-content py-4">
<div id="ios" class="tab-pane active">
<p>たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。</p>
</div>
<div id="android" class="tab-pane">
<p>たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。</p>
</div>
</div>
</div>
クラスの詳細
タブタイトル
ulに付与。
nav nav-tabs
各タブタイトル<li>に付与。
nav-item
各タブタトルのリンク<a>に付与。
nav-link
最初に選択させとくのに付与。
active
タブコンテンツ
divでくくって、付与。
tab-content
各タブコンテンツにdivでくくって付与。
tab-pane
最初に選択させとくのに付与。
active
footer
<!--footer-->
<footer class="text-center text-muted py-4">
Copyright 2018 it-afi.com
</footer>
tooltip
html側
<p>ツールチップの<span class="font-weight-bold text-info" data-toggle="tooltip" title="クリビツテンギョウ">練習でござあぁる</span>ううぅぅ。</p>
のように、下側にツールチップを表示する場合、
data-placement=”bottom”
を付与する。
<p>ツールチップの<span class="font-weight-bold text-info" data-toggle="tooltip" title="クリビツテンギョウ" data-placement="bottom">練習でござあぁる</span>ううぅぅ。</p>
jQuery側
<script>
$(function() {
'use strict';
$('[data-toggle="tooltip"]').tooltip();
});
</script>
ナビゲーションバー
<div class="container">
<nav class="navbar navbar-expand navbar-light">
<a href="" class="navbar-brand">Logo</a>
<ul class="navbar-nav">
<li class="navbar-item"><a href="" class="nav-link">Link</a></li>
<li class="navbar-item"><a href="" class="nav-link">Link</a></li>
<li class="navbar-item"><a href="" class="nav-link">Link</a></li>
</ul>
</nav>
</div>
ハンバーガーメニュー
↓
<nav class="navbar navbar-expand-sm navbar-light">
<a href="" class="navbar-brand">Logo</a>
<!-- ハンバーガーメニュー -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div id="menu" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="navbar-item"><a href="" class="nav-link">Link</a></li>
<li class="navbar-item"><a href="" class="nav-link">Link</a></li>
<li class="navbar-item"><a href="" class="nav-link">Link</a></li>
</ul>
</div>
</nav>
上のハイライトした部分を追加。
あと、1行目のnavbar-expandをnavbar-expand-smとした。
⇒smサイズのときだけハンバーガーメニューを表示させる。
アラート
基本
<!-- alert -->
<div class="alert alert-info text-center">
あらーとだあああ！
</div>
角丸とmargin-bottomを無くす
デフォルトだと、margin-bottomがついてるから、
mb-0
も指定して除外する。
デフォルトだと、背景の四角形が角丸になってるから普通の資格にするために
rounded-0
を指定する。
上記2点をやるとこうなる。
<!-- alert -->
<div class="alert alert-info text-center">
あらーとだあああ！
</div>
アラートの表示を消すxボタンを付与する
classに
alert-dismissible
を追記。
buttonを追加。
上記2点をやるとこうなる。
<!-- alert -->
<div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible">
あらーとだあああ！
<button class="close" data-dismiss="alert">
×
</button>
</div>
xボタンを押下したときにアラート表示をフワッと消す
classに
fade show
を追加する。
code全体
<!-- alert -->
<div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show">
あらーとだあああ！
<button class="close" data-dismiss="alert">
×
</button>
</div>
コメント