1. まとめトップ

Bootstrap日本語リファレンス(非公式)

こちらにまとめたものを動作未確認のものもあります。またかなり情報少なめかとも思います。

更新日: 2018年01月13日

0 お気に入り 1640 view
お気に入り追加

この記事は私がまとめました

自分なりのまとめですので、公式リファレンスではありませんが、よろしければどうぞ

des11さん

はじめに

こちらにまとめたものを動作未確認のものもあります。
またかなり情報少なめかとも思います。

情報にはやくたどりつくためには chromeをお使いのかたは
★[ctrl + F] をおしていただき、目的の情報を検索してください★

情報が見つからなかった場合すみやかにブラウザバックしてください。
目的の情報はおそらくありません。

テキスト(text)

□テキストの配置

左寄せ: <p class="text-left">こんにちは</p>
中央寄せ: <p class="text-center">こんにちは</p>
右寄せ: <p class="text-right">こんにちは</p>

□テキストの字体を変える

太字: <p class="font-weight-bold">太字こんにちは</p>
細字: <p class="font-weight-light">細字こんにちいは</p>

□テキストのサイズを変える
[1,2,3,4]: 4段階 → <h1 class="display-4">こんにちは</h1>

背景色を指定する(background)

□背景色の指定
青色の背景色: <div class="bg-primary">

width, heightを指定する(横と縦の幅)

widht, heightを親に対して何%かを指定する
※定格値でしか指定できない。たとえばw-20(20%)などは指定できない

□width
25%: <div class="w-25"></div>
50%: <div class="w-50"></div>
75%: <div class="w-75"></div>
100%: <div class="w-100"></div>

□height
25%: <div class="h-25"></div>
50%: <div class="h-50"></div>
75%: <div class="h-75"></div>
100%: <div class="h-100"></div>

margin, padding

[pもしくはm][location]-[size]
location: t, b, l, r, 横方向ならx, 縦方向ならy
size:
[1,2,3,4,5]は
[0.25rem, 0.5rem, 1.0rem, 1.5rem, 3.0rem]を表している
auto

※例:中央寄せ
my-0 mx-auto

フロート(float)

左寄せ: <div class="float-left"左寄せ</div>
右寄せ: <div class="float-right">右寄せ</div>

ディスプレイ(d-[ ])

表示しない: <div class="d-none bg-primary">こんにちは</div>
ブロックボックス: <div class="d-block bg-primary">こんにちは</div>
インラインボックス: <div class="d-inline bg-primary">こんにちは</div>
インラインブロックボックス: <div class="d-inline-block bg-primary">こんにちは</div>

※bootstrapでは文字サイズ変更のdisplayと混同しないように注意

Position(ポジション)

ポジションの指定のみで値は指定できないみたい。

初期値: <div class="position-static">...</div>
自由に動ける: <div class="position-relative">...</div>
親を基準にどう動くか: <div class="position-absolute">...</div>

ボーダー(border)

□ボックスの四辺に線を引く

青色のボーダー: <div class="border border-primary"></div> 
細い黒のボーダー: <div class="border border-secondary"></div>
緑色のボーダー: <div class="border border-success"></div>
赤色のボーダー: <div class="border border-danger"></div>
オレンジ色のボーダー: <div class="border border-warning"></div>
水色のボーダー: <div class="border border-info"></div>
明るい色のボーダー: <div class="border border-light"></div>
黒色のボーダー: <div class="border border-dark"></div>
白色のボーダー: <div class="border border-white"></div>

□各辺を指定する消したかったら 0 を指定する

<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

□border-radius(角丸や正円を表現する)
<!--角とほとんど違いがわからないので注意-->
角丸を表現する: <div class="rounded"></div>
上の2つ: <div class="rounded-top"></div>
右の2つ: <div class="rounded-right"></div>
下の2つ: <div class="rounded-bottom"></div>
左の2つ: <div class="rounded-leff"></div>

<!-- 画像の縦横比によっては楕円になる -->
正円: <div class="rounded-circle">

グリッド

containerクラスを使用すると
グリッド(等間隔配置?)にできる

colに値を指定しなかったらいくつもかくことができる

<div class="container">
<div class="row">
<div class="col bg-info">1</div> <!-- いくつもの箱を書ける -->
</div>
</div>

<div class="conatainer">
<div class="row">
<div class="col-3 bg-primary">1</div>
<div class="col-6 bg-secondary">2</div>
<div class="col-3 bg-dark">3</div>
</div>
</div>

<!--等分を超えるとはみ出す-->

table

テーブルにする:
<table class="table">
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
</tbody>
</table>

ボーダーをつける: <table class="table table-bordered"></table>
ホバーで変化をつける: <table class="table table-hover"></table>
交互に色を変える: <table class="table table-striped"></table>
行間の狭いテーブル: <table class="table table-condensed"></table>
レスボンシブテーブル: <table class="table table-responsive"></table>

ブレークポイント

[576px, 768px, 992px, 1200px]は
[sm, md, lg, xl]というキーワードに対応している

1200px以上で消したい: <div class="d-xl-none bg-info">こんにちは</div>
992px以上で表示したい: <div class="d-none d-lg-block bg-info">こんにちは</div>

コツ

ものを動かすときは大きな枠組みから考える

1 2